/* ============================================================
   mobile-site.css — ТЁМНАЯ мобильная тема ВНУТРЕННИХ страниц витрины.
   Подключена на: guides.html, guide.html, market.html, market-order.html и
   (с 16.08) prices.html, product.html, login.html, register.html, thanks.html —
   т.е. на всём пути покупки, который бот открывает как Mini App.

   Тот же приём, что у mobile-home.css на главной: весь тёмный слой живёт внутри
   @media(max-width:1024px) и ПЕРЕКРЫВАЕТ десктопные правила style.css (файл
   подключён ПОСЛЕ него). Десктоп (>1024px) остаётся белым 1:1 — ни одна строка
   вне медиазапросов не трогает светлую тему.

   Токены/радиусы/тени — из утверждённого прототипа 2323/vibe-mobile-glass.html.

   ⚠️ ТЕХДОЛГ: шелл (капсула шапки, таб-бар, свечение, круглые стеклянные иконки)
   повторяет mobile-home.css. Объединение в общий файл — отдельным проходом,
   намеренно не делаем сейчас, чтобы не трогать свежезадеплоенную главную.

   ПРОИЗВОДИТЕЛЬНОСТЬ: backdrop-filter только на шапке, таб-баре и круглых
   иконках — на карточках гайдов его НЕТ (длинный скролл, слабые Android).
   ============================================================ */

/* Мобильные блоки скрыты на десктопе (и до открытия — оверлей листа). */
.m-only{display:none}
.m-sheet-overlay{display:none}

@media(max-width:1024px){

  /* ---------- ТОКЕНЫ ТЁМНОЙ ТЕМЫ ---------- */
  :root{
    --bg:#0A0B0D;
    --bg-soft:#14161A;
    --card:#14161A;
    --card-2:#1b1e24;
    --ink:#F5F7FA;
    --ink-soft:#8A8F98;
    --grey:#8A8F98;
    --line:#262A31;
    --line-dark:#262A31;
    --accent:#C6FF00;
    --accent-ink:#0A0B0D;
    --pink:#FF2D6F;
    --radius:20px;
    --radius-sm:16px;
  }
  body{background:var(--bg);color:var(--ink);position:relative}
  html,body{overflow-x:hidden}
  .m-only{display:block}

  /* ---------- АМБИЕНТНОЕ ЛАЙМОВОЕ СВЕЧЕНИЕ ---------- */
  body::before{
       content:'';position:fixed;top:-30vh;left:50%;transform:translateX(-50%);
       width:120vw;height:70vh;pointer-events:none;z-index:0;
       background:radial-gradient(closest-side, rgba(198,255,0,.07), rgba(198,255,0,.02) 55%, transparent 75%);
       filter:blur(20px)}
  body::after{
       content:'';position:fixed;bottom:-20vh;right:-20vw;
       width:80vw;height:50vh;pointer-events:none;z-index:0;
       background:radial-gradient(closest-side, rgba(198,255,0,.03), transparent 70%);
       filter:blur(30px)}
  .wrap,.article{position:relative;z-index:1}

  /* ---------- ШАПКА: плавающая стеклянная капсула ---------- */
  .nav{background:transparent;border-bottom:none;
       backdrop-filter:none;-webkit-backdrop-filter:none;
       top:12px;padding:12px calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left))}
  .nav-in{gap:10px;padding:8px 8px 8px 14px;border-radius:999px;margin-bottom:22px;
       background:rgba(255,255,255,.055);
       backdrop-filter:blur(22px) saturate(160%);
       -webkit-backdrop-filter:blur(22px) saturate(160%);
       border:1px solid rgba(255,255,255,.10);
       box-shadow:0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12)}
  .logo{color:var(--ink);font-size:15px}
  .logo-mark{background:#1b1e24}
  .nav-menu,.nav-register,.nav-login,.nav-account{display:none !important}
  .nav-spacer{flex:1}
  /* круглые стеклянные иконки справа */
  .burger,.search{width:38px;height:38px;border-radius:50%;padding:0;min-width:0;
       flex:none;display:grid;place-items:center;
       background:rgba(255,255,255,.06);
       backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
       border:1px solid rgba(255,255,255,.12);
       box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
  .burger{gap:4px;grid-auto-flow:row}
  .burger span{width:18px;height:2px;background:var(--ink);border-radius:2px}
  .search{display:grid !important;font-size:0;color:transparent}
  .search .kbd{display:none}
  .search::before{content:"";width:18px;height:18px;background:var(--ink);
       -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
       mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}

  /* ---------- ОБЩЕЕ: поля 20px + компенсация «чёлки» ---------- */
  .wrap,.article{padding-left:calc(20px + env(safe-area-inset-left));
                 padding-right:calc(20px + env(safe-area-inset-right))}
  /* крошки в одну строку: длинный заголовок гайда режем многоточием, а не переносим */
  .crumbs{padding-top:0;font-size:12.5px;color:var(--ink-soft);flex-wrap:nowrap;min-width:0}
  .crumbs a{color:var(--ink-soft);white-space:nowrap}
  .crumbs .sep{color:var(--line)}
  .crumbs > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .hero{padding-top:6px;padding-bottom:10px;text-align:left}
  .hero h1{font-size:clamp(30px,8vw,40px);line-height:1.05;letter-spacing:-.03em;
       background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
  .hero p{margin:12px 0 0;max-width:none;font-size:15px;color:var(--ink-soft)}
  .eyebrow{margin-bottom:14px;color:var(--accent);background:rgba(198,255,0,.10);
       border:1px solid rgba(198,255,0,.30);font-size:11.5px;padding:5px 11px}
  .eyebrow i{background:var(--accent);box-shadow:none}
  .section{padding-top:16px;padding-bottom:16px}
  .section-head{margin-bottom:18px;align-items:baseline}
  .section-head h2{font-size:19px;color:var(--ink);letter-spacing:-.02em}
  .section-head p{display:none}
  .footer{display:none}          /* футер на мобиле не нужен: есть таб-бар и меню */

  /* ---------- СПИСОК ГАЙДОВ ---------- */
  .guides-section{max-width:none}
  .guides-grid{grid-template-columns:1fr;gap:14px}
  /* без backdrop-filter — карточек может быть много, это длинный скролл */
  .guide-card{background:var(--card);border:1px solid var(--line);border-radius:20px;
       box-shadow:0 8px 24px rgba(0,0,0,.32);
       backdrop-filter:none;-webkit-backdrop-filter:none;
       transition:transform .18s ease}
  .guide-card:hover{transform:none;box-shadow:0 8px 24px rgba(0,0,0,.32)}
  .guide-card:active{transform:scale(.985)}
  .guide-cover{aspect-ratio:16/9;background:var(--card-2)}
  .guide-body{padding:15px 16px 17px;gap:7px}
  .guide-body b{font-size:16px;color:var(--ink);letter-spacing:-.01em}
  .guide-body p{font-size:13.5px;color:var(--ink-soft);-webkit-line-clamp:2}
  /* мета-строка карточки: время чтения / PDF */
  .guide-meta{display:flex;align-items:center;gap:8px;margin-top:2px;
       font-size:12px;font-weight:700;color:var(--ink-soft)}
  .guide-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
  .guide-meta .pdf{color:var(--accent)}
  .guide-dl{margin-top:10px;width:100%;padding:13px 18px;font-size:14.5px}
  .guides-empty{background:var(--bg-soft);border:1px dashed var(--line);color:var(--ink-soft)}

  /* ---------- СТРАНИЦА ГАЙДА ---------- */
  .article{max-width:none}
  .article-head{padding:6px 0 4px;text-align:left}
  .article-head h1{font-size:clamp(26px,7vw,34px);margin-top:10px;color:var(--ink)}
  .article-meta{justify-content:flex-start;margin-top:14px;font-size:13px;color:var(--ink-soft)}
  /* Обложки гайдов — рисованные постеры С ТЕКСТОМ: contain, иначе cover срезает
     заголовок сверху. Подложка card-2 закрывает поля при другой пропорции. */
  .article-cover{aspect-ratio:4/3;margin:20px 0;border-radius:18px;
       background-color:var(--card-2);background-size:contain}
  .article-body{font-size:16.5px;line-height:1.72;color:#C9CED6}
  .article-body h2{font-size:21px;margin:30px 0 12px;color:var(--ink)}
  .article-body h3{font-size:17.5px;margin:22px 0 10px;color:var(--ink)}
  .article-body blockquote{background:var(--card);color:var(--ink);font-size:16px;
       border-left:3px solid var(--accent)}
  .article-body code{background:var(--card);color:var(--accent);
       padding:2px 6px;border-radius:6px;font-size:14.5px}
  .article-body img{max-width:100%;height:auto;border-radius:14px}
  .article-cta{display:none}     /* общий промо-блок статей в гайде не нужен */

  /* содержание (TOC) — стеклянная карточка, единственный blur вне шапки/таббара нам
     не нужен: делаем плотной заливкой, она в скролле */
  .guide-toc{margin:18px 0 26px;padding:14px 16px;border-radius:18px;
       background:var(--card);border:1px solid var(--line)}
  .guide-toc b{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;
       text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
  .guide-toc a{display:block;padding:7px 0;font-size:14.5px;font-weight:600;
       color:var(--ink);border-bottom:1px solid var(--line);line-height:1.35}
  .guide-toc a:last-child{border-bottom:none}
  .guide-toc a.lvl3{padding-left:14px;font-size:13.5px;color:var(--ink-soft);font-weight:500}

  /* кнопка скачивания PDF внутри гайда */
  .guide-pdf{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
       margin:26px 0 8px;padding:14px 18px;border-radius:999px;border:none;
       background:var(--accent);color:var(--accent-ink);font-family:inherit;
       font-weight:800;font-size:14.5px;box-shadow:0 8px 30px rgba(198,255,0,.30)}

  /* ---------- ВИТРИНА: /prices, карточка продукта, вход/регистрация ----------
     Сетки (.pgrid 1 колонка, .tiers/.prod-hero в один столбец) уже есть в
     style.css — здесь ТОЛЬКО перекраска того, что там зашито светлым хардкодом.
     .pcard/.auth-card изначально тёмные (var(--card) + #fff), их не трогаем. */
  .pgrid{gap:14px}
  .pcard{border-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.32)}
  .pcard:hover{transform:none}
  .pcard:active{transform:scale(.985)}

  /* карточка продукта */
  .prod-hero{padding:8px 0 4px}
  .prod-info h1{font-size:clamp(28px,7.5vw,38px);letter-spacing:-.03em}
  .prod-info .lead{font-size:15px;color:var(--ink-soft);margin-top:12px}
  .prod-visual{background:var(--card-2);box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .prod-buy{margin-top:20px}
  .prod-buy .btn-accent{box-shadow:0 8px 30px rgba(198,255,0,.30)}
  .prod-price small,.prod-price .old{color:var(--ink-soft)}

  /* тарифы: .tier в style.css залит белым (background:#fff) — на тёмном фоне
     это белая плашка со светлым текстом, т.е. нечитаемо. Красим в карточку. */
  .tiers{padding:6px 0 10px;gap:14px}
  .tier{background:var(--card);border-color:var(--line);border-radius:20px;padding:24px;
       box-shadow:0 8px 24px rgba(0,0,0,.32)}
  .tier h3,.tier .t-price{color:var(--ink)}
  .tier .t-price small,.tier .t-desc{color:var(--ink-soft)}
  .tier li{color:var(--ink-soft)}
  .tier li::before{color:var(--accent)}      /* галочка: тёмно-зелёная на тёмном не видна */
  .tier.popular{box-shadow:0 0 0 2px rgba(198,255,0,.28),0 8px 24px rgba(0,0,0,.32)}
  .feat-card{background:var(--card);border-color:var(--line)}

  /* вход / регистрация / «спасибо»: карточка уже тёмная, чиним только рамку,
     вертикальные поля (шапка теперь плавающая) и белую вторичную кнопку. */
  .auth-wrap{min-height:auto;padding:6px 0 26px}
  .auth-card{border-color:var(--line);box-shadow:0 12px 38px rgba(0,0,0,.45)}
  .tier .btn-ghost,.prod-buy .btn-ghost,.auth-card .btn-ghost{
       background:transparent;border:1px solid var(--line);color:var(--ink)}

  /* ---------- НИЖНИЙ ТАБ-БАР (та же капсула, что на главной) ---------- */
  .m-tabbar{position:sticky;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;
       display:flex;align-items:center;justify-content:space-around;gap:4px;
       width:calc(100% - 32px);max-width:400px;margin:26px auto 14px;padding:9px 8px;
       background:rgba(20,22,26,.72);border:1px solid rgba(255,255,255,.11);border-radius:999px;
       backdrop-filter:blur(26px) saturate(170%);
       -webkit-backdrop-filter:blur(26px) saturate(170%);
       box-shadow:0 12px 38px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.11)}
  .m-tab{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;
       padding:6px 0;border-radius:999px;color:var(--ink-soft);font-size:10px;font-weight:700}
  .m-tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
       stroke-linecap:round;stroke-linejoin:round}
  .m-tab.active{color:var(--accent);background:rgba(198,255,0,.1)}
  .m-tab.active svg{filter:drop-shadow(0 0 6px rgba(198,255,0,.5))}

  /* ---------- BOTTOM-SHEET (меню бургера) ---------- */
  .m-sheet-overlay.open{display:flex}
  body.m-noscroll{overflow:hidden}
}

/* ---------- ПЛАНШЕТ: та же тёмная тема, шире ---------- */
@media(min-width:600px) and (max-width:1024px){
  .wrap,.article{padding-left:28px;padding-right:28px}
  .guides-grid{grid-template-columns:1fr 1fr}
  .article{max-width:720px;margin-left:auto;margin-right:auto}
  .m-tabbar{max-width:440px}
}

/* Оверлей и карточка листа — позиционирование вне медиа (как в mobile-home.css),
   цвета через переменные; открывается только на мобиле (JS из .m-only). */
.m-sheet-overlay{position:fixed;inset:0;z-index:200;align-items:flex-end;
     background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s ease}
.m-sheet-overlay.open{opacity:1}
.m-sheet-card{width:100%;background:var(--card);border:1px solid var(--line);border-bottom:none;
     border-radius:22px 22px 0 0;padding:24px 22px calc(22px + env(safe-area-inset-bottom));
     text-align:center;transform:translateY(100%);
     transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.m-sheet-overlay.open .m-sheet-card{transform:translateY(0)}
.m-sheet-grip{width:40px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 18px}
.m-sheet-title{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.m-sheet-ok{width:100%;background:var(--accent);color:var(--accent-ink);font-weight:800;border:none;
     border-radius:999px;padding:13px 28px;font-size:14.5px;font-family:inherit;cursor:pointer}
.m-menu-list{text-align:left;margin-top:2px}
.m-menu-list a{display:flex;align-items:center;gap:12px;padding:14px 6px;
     border-bottom:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:600}
.m-menu-list a:last-child{border-bottom:none}