/* ==========================================================================
   FlowForge — основной стиль (тёмная тема, clean, production-ready)
   Бренд: FlowForge · Слоган: "Automation, ready to plug in."
   ========================================================================== */

:root {
  --bg: #0b0e14;
  --bg-alt: #11151f;
  --surface: #161b26;
  --surface-2: #1c2230;
  --border: #242b3a;
  --text: #e6ebf2;
  --text-dim: #9aa6b8;
  --text-mute: #6b7688;
  --brand: #4f8cff;
  --brand-2: #7c5cff;
  --accent: #00d4aa;
  --danger: #ff5c7a;
  --warn: #ffb020;
  --ok: #2ecc71;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 70% -10%, #1a2136 0%, var(--bg) 55%) no-repeat, var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--text-dim); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.center { text-align: center; }
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(11, 14, 20, 0.78);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: -0.02em; }
.logo:hover { color: var(--text); }
.logo .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; font-size: 16px; box-shadow: 0 0 20px rgba(79,140,255,.4);
}
.nav { display: flex; gap: 24px; align-items: center; }
.nav a { color: var(--text-dim); font-size: .95rem; font-weight: 500; }
.nav a:hover, .nav a.active { color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 6px 22px rgba(79,140,255,.35); }
.btn-primary:hover { color: #fff; box-shadow: 0 10px 30px rgba(79,140,255,.5); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--brand); color: var(--text); }
.btn-accent { background: var(--accent); color: #05221c; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(255,92,122,.1); color: var(--danger); }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: 90px 0 70px; text-align: center; }
.hero .eyebrow {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--border);
  border-radius: 999px; font-size: .8rem; color: var(--text-dim); margin-bottom: 22px;
  background: var(--surface);
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 900px; margin-inline: auto; }
.hero h1 .grad { background: linear-gradient(120deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.15rem; max-width: 660px; margin: 0 auto 32px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; transition: transform .15s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: #31405a; }
.card .icon { font-size: 1.6rem; margin-bottom: 12px; display: block; }
.card h3 { color: var(--text); }
.card p:last-child { margin-bottom: 0; }

/* Product card */
.product-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.product-card .cover {
  height: 150px; background: linear-gradient(135deg, #1c2230, #232c40);
  display: grid; place-items: center; font-size: 2.4rem; border-bottom: 1px solid var(--border);
}
.product-card .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.product-card .tag { font-size: .78rem; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.product-card .footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.price { font-weight: 800; font-size: 1.25rem; color: var(--text); }
.price small { color: var(--text-mute); font-weight: 500; font-size: .8rem; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-published, .badge-paid, .badge-approved, .badge-done { background: rgba(46,204,113,.15); color: var(--ok); }
.badge-draft, .badge-new, .badge-pending, .badge-running { background: rgba(255,176,32,.15); color: var(--warn); }
.badge-rejected, .badge-failed, .badge-error, .badge-refunded { background: rgba(255,92,122,.15); color: var(--danger); }
.badge-used, .badge-archived, .badge-review { background: rgba(154,166,184,.15); color: var(--text-dim); }

/* ---------- Steps / how it works ---------- */
.step { position: relative; }
.step .num {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; color: var(--brand);
  margin-bottom: 14px;
}

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--surface); }
.faq-item summary { padding: 18px 20px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand); font-size: 1.3rem; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .answer { padding: 0 20px 18px; color: var(--text-dim); }

/* ---------- Feature list ---------- */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: 8px 0 8px 30px; position: relative; color: var(--text-dim); }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ---------- Product page ---------- */
.product-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .product-hero { grid-template-columns: 1fr; } }
.product-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--text-mute); margin: 16px 0; }
.buy-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; position: sticky; top: 84px; }
.buy-box .price { font-size: 2rem; }
.prose { color: var(--text-dim); }
.prose h2, .prose h3 { color: var(--text); margin-top: 1.4em; }
.prose ul { padding-left: 20px; }
.prose code { font-family: var(--mono); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-size: .88em; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); }
input, textarea, select {
  width: 100%; padding: 11px 14px; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .95rem;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,140,255,.15); }
textarea { min-height: 90px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Alerts ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: .92rem; }
.alert-error { background: rgba(255,92,122,.12); border: 1px solid rgba(255,92,122,.35); color: #ffb3c2; }
.alert-ok { background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.35); color: #a8f0c6; }
.alert-warn { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.35); color: #ffd98a; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th { color: var(--text-mute); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: var(--surface); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap table { min-width: 600px; }

/* ---------- Admin ---------- */
.admin-body { background: var(--bg); }
.admin-layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
@media (max-width: 820px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-side { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 0; }
.admin-side .logo { padding: 0 22px 20px; }
.admin-nav { display: flex; flex-direction: column; }
.admin-nav a { padding: 11px 22px; color: var(--text-dim); font-size: .92rem; border-left: 3px solid transparent; }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a.active { background: var(--surface-2); color: var(--text); border-left-color: var(--brand); }
.admin-main { padding: 32px 34px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 14px; }
.admin-head h1 { font-size: 1.9rem; margin: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
@media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat .label { font-size: .8rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; }
.stat .value { font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.stat .value.small { font-size: 1.2rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 46px 0 30px; margin-top: 60px; color: var(--text-mute); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { color: var(--text); font-size: .95rem; margin-bottom: 14px; }
.footer-grid a { display: block; color: var(--text-mute); font-size: .9rem; padding: 4px 0; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 30px; padding-top: 22px; font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Misc ---------- */
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; color: var(--text-dim); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; }
.mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 32px; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gap-2 { gap: 16px; } .wrap { flex-wrap: wrap; }
.hidden { display: none; }
code, pre { font-family: var(--mono); }
pre { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; font-size: .85rem; color: var(--text-dim); }

/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (телефоны и узкие экраны)
   ========================================================================== */

/* Планшеты и меньше */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .section { padding: 44px 0; }
  .section-sm { padding: 30px 0; }
  .container { padding: 0 16px; }

  /* Шапка: логотип + кнопки в две строки, меню переносится */
  .site-header .container { height: auto; min-height: 60px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .nav { gap: 12px; flex-wrap: wrap; width: 100%; justify-content: center; order: 3; }
  .nav a { font-size: .88rem; }


  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .hero p.lead { font-size: 1rem; }
  .hero-cta { gap: 10px; }
  .btn { padding: 12px 18px; }

  /* Хлебные крошки / карточки в одну колонку */
  .product-hero { gap: 24px; }

  /* Админка: сайдбар сверху, горизонтальным меню */
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 0; }
  .admin-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 12px; }
  .admin-nav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 10px 14px; }
  .admin-nav a.active { border-left: none; border-bottom-color: var(--brand); }
  .admin-main { padding: 22px 16px; }
  .admin-head h1 { font-size: 1.5rem; }
}

/* Телефоны */
@media (max-width: 480px) {
  body { font-size: 15px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .section { padding: 36px 0; }
  .container { padding: 0 14px; }

  /* Шапка: прячем лишнее, оставляем логотип и CTA */
  .nav { gap: 10px; }
  .nav a { font-size: .82rem; }
  .nav .btn { padding: 8px 12px; font-size: .82rem; }

  .hero { padding: 36px 0 30px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }

  .card { padding: 18px; }
  .btn { font-size: .9rem; }

  /* Таблицы — вертикальный скролл, не ломают страницу */
  .table-wrap { border-radius: var(--radius-sm); }
  .table-wrap table { min-width: 520px; }

  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Предотвращаем выход длинных строк/ссылок за экран */
  p, h1, h2, h3, a, td, th { overflow-wrap: break-word; word-break: break-word; }
  img { max-width: 100%; height: auto; }
  pre { font-size: .78rem; }
}

/* ===== Блог (SEO-раздел) ===== */
.blog-card .blog-cover {
  height: 180px;
  overflow: hidden;
  border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.blog-card .blog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-article h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin: .4rem 0 .6rem;
}
.blog-hero {
  width: 100%;
  border-radius: var(--radius, 12px);
  margin: 1rem 0 1.5rem;
  display: block;
}
.blog-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text, #ddd);
}
.blog-body p { margin: 0 0 1.1rem; }
.blog-body h2 { font-size: 1.4rem; margin: 1.6rem 0 .7rem; }
.blog-body a { color: var(--accent, #6cf); }
.blog-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 768px) {
  .blog-article h1 { font-size: 1.5rem; }
  .blog-card .blog-cover { height: 150px; }
}

/* §5 FAQ на странице товара */
.faq-list { margin: 1rem 0; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.08); padding: .6rem 0; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; padding-right: 1.5rem; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; color: var(--accent); font-weight: 700; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: .6rem 0 .2rem; color: var(--text-dim); }

/* §6 Связанные товары */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; margin: 1rem 0; }
.related-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; text-decoration: none; transition: border-color .2s; }
.related-card:hover { border-color: var(--accent); }
.related-card strong { font-size: .95rem; }
.related-card .muted { font-size: .82rem; }

/* §7 Обложки товаров */
.product-cover { width: 100%; height: auto; border-radius: 14px; margin-bottom: 16px; display: block; border: 1px solid rgba(255,255,255,.08); }
.product-card .cover-img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px 12px 0 0; }

/* §7 Обложка товара — над hero, на всю ширину контейнера */
.section > .container > .product-cover { max-width: 100%; margin: 0 0 24px; border-radius: 16px; }

/* Bundle-комплект на странице товара */
.bundle-box{margin:1.4rem 0;padding:1.1rem 1.2rem;border:1px solid #2e7d5b;border-radius:14px;background:linear-gradient(160deg,rgba(34,197,94,.08),rgba(15,19,34,.4))}
.bundle-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.bundle-tag{background:#12351f;color:#4ade80;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:99px}
.bundle-box .prose{font-size:.9rem;color:#b8c0d8;margin:.3rem 0 .8rem}
.bundle-price-row{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.8rem;flex-wrap:wrap}
.bundle-old{color:#6b7490;text-decoration:line-through;font-size:1rem}
.bundle-new{color:#4ade80;font-size:1.5rem;font-weight:800}
.bundle-save{background:#3a2f10;color:#fbbf24;font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:99px}
.btn-block{width:100%}

/* Первый экран товара: Для кого / Результат */
.value-cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.2rem 0}
@media(max-width:700px){.value-cards{grid-template-columns:1fr}}
.value-card{display:flex;gap:.8rem;padding:1rem;background:#12162a;border:1px solid #232a44;border-radius:12px}
.value-card .vc-icon{font-size:1.5rem;line-height:1}
.value-card .vc-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#8b94b0;font-weight:700;margin-bottom:.25rem}
.value-card .vc-text{font-size:.92rem;color:#d5dbec;line-height:1.45}
/* Список файлов ZIP */
.files-preview{margin:1.2rem 0;padding:1rem 1.2rem;background:#0f1424;border:1px dashed #2b3350;border-radius:12px}
.fp-head{font-weight:700;color:#c9d0e4;margin-bottom:.6rem;font-size:.95rem}
.fp-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
@media(max-width:700px){.fp-list{grid-template-columns:1fr}}
.fp-list li{font-size:.85rem;color:#a8b0c8}
.fp-list code{background:#1a2038;color:#7dd3fc;padding:.15rem .45rem;border-radius:6px;font-size:.8rem}

/* ===== AI Library (Fizoni) ===== */
.lib-head h1{margin:0 0 .3rem;}
.lib-search{display:flex;gap:.5rem;margin:1.2rem 0;}
.lib-search input{flex:1;padding:.7rem 1rem;border-radius:10px;border:1px solid var(--border,#232a44);background:#0f1424;color:#e6ebf7;font-size:.95rem;}
.lib-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0;}
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;padding:.3rem .7rem;border-radius:99px;border:1px solid var(--border,#232a44);color:#9aa3c0;text-decoration:none;transition:.15s;}
.chip:hover{border-color:#3b82f6;color:#cfe1ff;}
.chip.on{background:#1d4ed8;border-color:#1d4ed8;color:#fff;}
.lib-sort{display:flex;gap:.8rem;align-items:center;font-size:.85rem;margin:.5rem 0;}
.lib-sort a{color:#6b7490;text-decoration:none;}
.lib-sort a.on{color:#60a5fa;font-weight:700;}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin:1.2rem 0;}
.prompt-card{display:flex;flex-direction:column;gap:.4rem;background:#121624;border:1px solid #232a44;border-radius:14px;padding:1rem 1.1rem;text-decoration:none;color:#d5dbec;transition:.15s;}
.prompt-card:hover{border-color:#3b82f6;transform:translateY(-2px);}
.prompt-card h3{margin:.2rem 0 0;font-size:1rem;color:#fff;line-height:1.3;}
.prompt-card p{margin:0;font-size:.84rem;color:#8b94b0;line-height:1.45;}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.72rem;}
.pc-cat{color:#7dd3fc;}
.pc-lvl{font-size:.68rem;padding:.1rem .45rem;border-radius:99px;text-transform:uppercase;}
.lvl-beginner{background:#052e1a;color:#4ade80;}
.lvl-intermediate{background:#3a2e05;color:#fbbf24;}
.lvl-advanced{background:#3a0a1a;color:#f87171;}
.pc-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem;}
.tag{font-size:.7rem;color:#6b7490;}
.crumbs{font-size:.8rem;margin-bottom:.4rem;}
.crumbs a{color:#60a5fa;text-decoration:none;}
.prompt-block{margin-top:1.2rem;}
.prompt-text{background:#0d1120;border:1px solid #232a44;border-radius:12px;padding:1.1rem;white-space:pre-wrap;word-break:break-word;font-size:.9rem;line-height:1.55;color:#d5dbec;max-height:520px;overflow:auto;margin-top:.6rem;font-family:ui-monospace,Menlo,Consolas,monospace;}
.var-box{background:#121624;border:1px solid #232a44;border-radius:12px;padding:1rem;margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;}
.var-field{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:#8b94b0;}
.var-field input{padding:.5rem .7rem;border-radius:8px;border:1px solid #232a44;background:#0d1120;color:#e6ebf7;}
.lib-cta{margin-top:2.5rem;background:linear-gradient(160deg,#161b2e,#0f1322);border:1px solid #232a44;border-radius:16px;padding:1.5rem;text-align:center;}
.lib-cta h2{margin:0 0 .4rem;}
.collection-card{position:relative;}
.cc-price{font-weight:800;color:#4ade80;font-size:1.1rem;}
.cc-price.inline{font-size:.9rem;}
.preview-list{padding-left:1.2rem;font-size:.88rem;line-height:1.6;color:#c2c9dd;}
.preview-list a{color:#60a5fa;text-decoration:none;}

/* ===== AI Library: страница коллекции (§17) ===== */
.col-hero{display:flex;gap:1.5rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin:1rem 0 1.8rem;padding:1.5rem;background:linear-gradient(160deg,#161b2e,#0f1322);border:1px solid #232a44;border-radius:18px}
.col-hero-main{flex:1;min-width:260px}
.col-hero h1{margin:.2rem 0 .6rem;font-size:1.9rem}
.col-lead{color:#b8c0dc;font-size:1.02rem;margin:.4rem 0 1rem}
.col-buy-box{background:#0b0e18;border:1px solid #2a3357;border-radius:14px;padding:1.1rem 1.2rem;min-width:220px;text-align:center}
.col-price{font-size:2rem;font-weight:800;color:#fff}
.btn-block{display:block;width:100%;margin-top:.5rem}
.col-value{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
@media(max-width:700px){.col-value{grid-template-columns:1fr}}
.col-value-card{background:#161b2e;border:1px solid #232a44;border-radius:14px;padding:1.1rem}
.col-value-card h3{margin:.1rem 0 .6rem}
.col-value-card ul{margin:0;padding-left:1.1rem;color:#c9d0e4}
.col-value-card li{margin:.25rem 0;font-size:.92rem}
.col-h2{margin:2.2rem 0 .9rem;font-size:1.3rem}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.7rem}
.feat-card{display:flex;gap:.7rem;align-items:flex-start;background:#161b2e;border:1px solid #232a44;border-radius:12px;padding:.75rem .85rem;text-decoration:none;color:inherit;transition:.15s}
.feat-card:hover{border-color:#7c5cff;transform:translateY(-1px)}
.feat-num{flex:0 0 26px;height:26px;border-radius:8px;background:#7c5cff;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:700px){.wf-grid{grid-template-columns:1fr}}
.wf-card{background:#161b2e;border:1px solid #232a44;border-radius:14px;padding:1rem}
.wf-card h4{margin:.1rem 0 .4rem;color:#c4b5fd}
.wf-card ol{margin:.5rem 0 0;padding-left:1.2rem;color:#c9d0e4;font-size:.9rem}
.cs-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cs-table th{text-align:left;color:#8b94b0;padding:.5rem .4rem;border-bottom:1px solid #232a44;font-size:.78rem;text-transform:uppercase}
.cs-table td{padding:.5rem .4rem;border-bottom:1px solid #1a1f33;color:#dfe4f2}
.pv-list{margin:.5rem 0}
.pv-item{background:#161b2e;border:1px solid #232a44;border-radius:12px;padding:.7rem .9rem;margin-bottom:.5rem}
.pv-item summary{cursor:pointer;list-style:none}
.pv-item summary::-webkit-details-marker{display:none}
.pv-item summary:before{content:'▸ ';color:#7c5cff}
.pv-item[open] summary:before{content:'▾ '}
.pv-q{color:#f5c451;font-size:.8rem;margin-left:.3rem}
.pv-pre{background:#0b0e18;border:1px solid #232a44;border-radius:9px;padding:.8rem;margin-top:.6rem;white-space:pre-wrap;word-break:break-word;font-size:.82rem;max-height:260px;overflow:auto;color:#cdd6ee}
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.fmt-grid span{background:#161b2e;border:1px solid #232a44;border-radius:9px;padding:.5rem .7rem;font-size:.85rem}
.faq{background:#161b2e;border:1px solid #232a44;border-radius:11px;padding:.7rem .9rem;margin-bottom:.5rem}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:#b8c0dc;margin:.5rem 0 0;font-size:.9rem}
.acc{color:#7c5cff}
.related-block{margin-top:2rem;padding-top:1rem;border-top:1px solid #232a44}
.related-item{display:block;color:#9fb0d8;text-decoration:none;padding:.4rem 0;font-size:.9rem}
.related-item:hover{color:#c4b5fd}

/* Ultimate upsell (§24) */
.ultimate-banner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:linear-gradient(120deg,#2a1f4d,#161b2e);border:1px solid #7c5cff55;border-radius:16px;padding:1.2rem 1.4rem;margin:1.3rem 0}
.ultimate-banner h3{margin:.1rem 0 .3rem}
.ultimate-banner p{margin:.2rem 0 0;font-size:.9rem}
.suggested-col{border-left:3px solid #7c5cff}

/* ===== Страница коллекций (редизайн) ===== */
.colx-page{padding-bottom:3rem}
.colx-hero{background:radial-gradient(1200px 400px at 20% -10%,#2a1f4d 0%,#0f1322 60%);border-bottom:1px solid #232a44;padding:3rem 1.5rem 2.4rem}
.colx-hero-inner{max-width:960px;margin:0 auto}
.colx-kicker{display:inline-block;font-size:.8rem;letter-spacing:.5px;color:#c4b5fd;background:#7c5cff22;border:1px solid #7c5cff44;border-radius:99px;padding:.25rem .75rem;margin-bottom:1rem}
.colx-hero h1{margin:.2rem 0 .7rem;font-size:2.2rem;line-height:1.15}
.colx-hero p{color:#b8c0dc;font-size:1.05rem;max-width:640px;margin:0 0 1.4rem}
.colx-hero-stats{display:flex;gap:2rem;margin-bottom:1.6rem;flex-wrap:wrap}
.colx-hero-stats div{display:flex;flex-direction:column}
.colx-hero-stats b{font-size:1.5rem;color:#fff}
.colx-hero-stats span{font-size:.78rem;color:#8b94b0;text-transform:uppercase;letter-spacing:.4px}
.colx-wrap{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}
.colx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.colx-card{display:flex;flex-direction:column;gap:.5rem;background:linear-gradient(165deg,#171c30,#10141f);border:1px solid #262e4a;border-radius:18px;padding:1.2rem 1.25rem;text-decoration:none;color:inherit;transition:.18s;position:relative;overflow:hidden}
.colx-card:hover{transform:translateY(-3px);border-color:#7c5cff;box-shadow:0 12px 30px -12px #7c5cff55}
.colx-card--gold{border-color:#f5c45166}
.colx-card--gold:hover{border-color:#f5c451;box-shadow:0 12px 30px -12px #f5c45155}
.colx-card-top{display:flex;justify-content:space-between;align-items:center}
.colx-emoji{font-size:1.9rem;line-height:1}
.colx-price{font-weight:800;font-size:1.15rem;color:#4ade80}
.colx-card--gold .colx-price{color:#f5c451}
.colx-card h3{margin:.1rem 0 0;font-size:1.1rem;color:#fff}
.colx-card p{margin:0;font-size:.86rem;color:#98a1be;line-height:1.45;flex:1}
.colx-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.colx-badges span{font-size:.72rem;background:#1a2038;color:#9fb0d8;border-radius:99px;padding:.2rem .55rem}
.colx-card-cta{font-size:.85rem;color:#c4b5fd;font-weight:600;margin-top:.4rem}
.colx-why{margin-top:3rem}
.colx-why h2{font-size:1.4rem;margin-bottom:1.2rem}
.colx-why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.colx-why-grid div{background:#161b2e;border:1px solid #232a44;border-radius:14px;padding:1rem 1.1rem}
.colx-why-grid b{display:block;margin-bottom:.4rem;color:#e6e9f5}
.colx-why-grid p{margin:0;font-size:.86rem;color:#98a1be;line-height:1.45}
.colx-free-note{margin-top:1.2rem;font-size:.88rem;color:#8b94b0}

/* Языковой переключатель */
.lang-switch{display:inline-flex;align-items:center;gap:.25rem;margin-left:.6rem;font-size:.8rem;font-weight:700}
.lang-switch a,.lang-switch b{padding:.15rem .4rem;border-radius:6px;text-decoration:none}
.lang-switch b{background:#7c5cff;color:#fff}
.lang-switch a{color:#8b94b0}
.lang-switch a:hover{color:#fff;background:#232a44}