/* ═══════════════════════════════════════════════════════════════
   BunnySplit · Blog article engine v3 — СВЕТЛЫЙ POP/GEN-Z
   Грузится ПОСЛЕ landing.css → переопределяет тёмные токены на Pop
   (как pop.css / landing-pop.css). Никакой тёмной базы не просвечивает.
   Канон 1:1: --bg #FFFDF7, coral #FF5E7E → violet #7C5CFF,
   Unbounded+Inter, мягкие фиолетовые тени, пилюли-кнопки, стикеры.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. ПЕРЕОПРЕДЕЛЕНИЕ ТОКЕНОВ landing.css НА POP
   landing.css задаёт тёмные --bg/--surface/--cyan/--grad-neon…
   article.css грузится позже → этот :root перебивает их по каскаду.
   ───────────────────────────────────────────────────────────── */
:root{
  /* поверхности — тёплый светлый холст */
  --ink:#141414; --graphite:#1C1C20; --paper:#FFFDF7; --muted:#5B5B66;
  --bg:#FFFDF7; --bg2:#F6F2EA; --bg3:#FFFFFF;
  --surface:#FFFFFF; --surface2:#FFFFFF; --surface-solid:#FFFFFF;
  --panel:#FFFFFF;

  /* линии — тёмные на светлом */
  --line:rgba(20,20,20,.08); --line2:rgba(20,20,20,.14);
  --line-neon:rgba(124,92,255,.30);

  /* текст */
  --txt:#141414; --mut:#5B5B66; --dim:#8A8A92;
  --ink2:#5B5B66; /* == tokens.css --ink2; нужен ported .pp-nav (nav-links/login/бургер-меню) */

  /* pop-цвета: бывш. cyan/accent → violet, magenta/carrot → coral */
  --coral:#FF5E7E; --violet:#7C5CFF; --blue:#2E6BFF; --lime:#C6F24E; --sun:#FFC53D;
  --accent:#7C5CFF; --accent-h:#6B4BEE; --accent-ink:#FFFFFF; --carrot:#FF5E7E;
  --accent2:#FF5E7E;
  --cyan:#7C5CFF; --magenta:#FF5E7E;
  --accent-soft:rgba(124,92,255,.10); --accent-ring:rgba(124,92,255,.45);

  /* свечения → мягкие фиолетовые тени (не неон) */
  --glow-blue:0 8px 24px -12px rgba(124,92,255,.30);
  --glow-cyan:0 8px 24px -12px rgba(124,92,255,.30);
  --glow-magenta:0 8px 24px -12px rgba(255,94,126,.28);
  --shadow:0 8px 30px rgba(20,20,20,.06);
  --shadow-lg:0 20px 50px -20px rgba(124,92,255,.35);

  /* градиенты: hero коралл→фиолет (бывш. grad-neon) */
  --grad-a:#FF5E7E; --grad-b:#7C5CFF; --grad-c:#7C5CFF;
  --grad-neon:linear-gradient(135deg,#FF5E7E 0%,#7C5CFF 100%);
  --grad-hero:linear-gradient(135deg,#FF5E7E 0%,#7C5CFF 100%);
  --grad-2:linear-gradient(120deg,#2E6BFF,#7C5CFF);

  /* статус */
  --ok:#1FBF75; --warn:#FF9F1C; --err:#FF4D5E;

  /* радиусы — крупнее, Pop */
  --radius:22px; --radius-sm:14px; --maxw:1180px;
  --r:22px; --pill:999px;
  --ease:cubic-bezier(.34,1.56,.64,1);

  /* шрифты: заголовки Unbounded, текст Inter */
  --font-display:'Unbounded',system-ui,sans-serif;
  --font:'Inter',system-ui,-apple-system,sans-serif;

  /* == алиасы токенов tokens.css, нужные ported-хрому шапки (центр уведомлений +
     флагман реза): значения 1:1 из tokens.css, чтобы порт был самодостаточным
     и tokens.css/pop.css линковать НЕ пришлось (как и .pp-nav выше). */
  --card:#FFFFFF;
  --violet-50:#F2EFFF; --violet-100:#E4DEFF;
  --gray-100:#F6F2EA;
  --rad-md:12px; --rad-lg:16px; --rad-xl:22px; --rad-2xl:32px;
}

/* ─────────────────────────────────────────────────────────────
   2. BODY — candy-холст как pop.css / landing-pop.css
   ───────────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(900px 480px at 96% 4%, rgba(255,94,126,.10), transparent 55%),
    var(--bg) !important;
  background-attachment:fixed !important;
  color:var(--ink) !important;
}
/* старые декоративные тёмные псевдо-фоны landing.css гасим */
body::before, body::after{ display:none !important; }

/* ─────────────────────────────────────────────────────────────
   3. ШАПКА — КАНОН-шапка платформы .pp-nav (порт 1:1 из pop.css).
   Единая шапка на всех страницах; лого → /marketplace. Все токены
   (--grad-hero/--ink/--ink2/--coral/--line/--pill/--font*) резолвятся
   из :root выше → tokens.css/pop.css линковать НЕ нужно (самодостаточно).
   Старые .nav/.nav-links/.nav-cta удалены (шапка теперь .pp-nav).
   ───────────────────────────────────────────────────────────── */
.pp-nav{
  position:sticky; top:0; z-index:50; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,253,247,.8); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:0 16px;
}
.pp-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.pp-logo{ width:34px; height:34px; border-radius:11px; flex:none; background:var(--grad-hero);
  display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(124,92,255,.6); }
.pp-logo svg{ width:23px; height:23px; display:block; }
.pp-wordmark{ font:800 20px var(--font-display); letter-spacing:-.03em; color:var(--ink); }
.pp-dot{ color:var(--coral); }
.pp-suf{ font-weight:800; font-size:.45em; letter-spacing:0; color:var(--coral); vertical-align:super; margin-left:.06em; }
.pp-nav-links{ display:flex; align-items:center; gap:18px; }
.pp-nav-links a{ font:600 14px var(--font); color:var(--ink2); text-decoration:none; }
.pp-nav-links a:hover{ color:var(--ink); }
.pp-nav-cta{ display:flex; align-items:center; gap:8px; }
.pp-nav-login{
  font:600 14px var(--font); color:var(--ink2); text-decoration:none;
  border:none; border-radius:var(--pill); padding:8px 12px; transition:background .15s,color .15s;
}
.pp-nav-login:hover{ color:var(--ink); background:rgba(124,92,255,.08); }
.pp-nav-join{
  font:700 14px var(--font); color:#fff; text-decoration:none;
  background:var(--grad-hero); border-radius:var(--pill); padding:10px 18px;
  box-shadow:0 8px 20px -8px rgba(124,92,255,.7);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.pp-nav-join:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(124,92,255,.85); }
.pp-nav-join.is-icon{ display:none; }
@media(max-width:560px){
  .pp-nav-links{ display:none; }
  .pp-nav-login{ display:none; }
  .pp-nav-join.is-text{ display:none; }
  .pp-nav-join.is-icon{ display:grid; place-items:center; width:40px; height:40px; padding:0; font-size:20px; }
}
/* бургер-меню «все блоки» платформенной шапки (порт из pop.css §SITE_FORMAT) */
.pp-burger{ display:grid; place-items:center; width:44px; height:44px; flex:none; cursor:pointer;
  background:#fff; border:1.5px solid var(--line2); border-radius:12px; color:var(--ink); }
.pp-burger svg{ width:22px; height:22px; }
.pp-burger:hover{ border-color:var(--violet); }
.pp-nav-menu{ position:absolute; top:62px; right:18px; z-index:60; width:248px; max-height:80vh; overflow:auto;
  background:#fff; border:1px solid var(--line2); border-radius:16px; box-shadow:var(--shadow);
  padding:8px; display:flex; flex-direction:column; }
.pp-nav-menu[hidden]{ display:none; }
.pp-nav-menu a{ display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:10px; font:600 14px var(--font); color:var(--ink); text-decoration:none; }
.pp-nav-menu a:hover{ background:var(--bg2); }
.pp-nav-menu-lbl{ font:800 11px var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--ink2); padding:12px 12px 3px; margin-top:4px; border-top:1px solid var(--line2); }
.pp-nav-menu-lbl:first-child, .pp-nav-bal + .pp-nav-menu-lbl{ border-top:0; margin-top:0; }
.pp-nav-bal{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:8px 12px; font:700 13px var(--font); color:var(--ink); }
.pp-nav-bal-go{ font:600 12px var(--font); color:var(--violet); text-decoration:none; white-space:nowrap; }
.pp-nav-menu-sell{ margin:8px 4px; padding:10px 12px!important; border-radius:12px;
  background:rgba(124,92,255,.10); color:#4326B8!important; font-weight:700!important; }
.pp-nav-menu-sell:hover{ background:rgba(124,92,255,.16)!important; }
.pp-nav-menu-out{ color:var(--coral)!important; margin-top:6px; border-top:1px solid var(--line2); }
.pp-nav-menu-go{ color:var(--violet)!important; font-weight:700!important; }
.pp-nav-only-mobile{ display:none; }
@media(max-width:560px){ .pp-nav-only-mobile{ display:block; } }
@media(max-width:560px){ .pp-nav-menu{ right:12px; left:12px; width:auto; } }

/* ─────────────────────────────────────────────────────────────
   3b. ФЛАГМАН БУРГЕРА «Резать модель» + бейдж «скоро» (порт 1:1 pop.css).
   Без этих правил ported scissors-глиф (_CUT_GLYPH) раздувается — нет ширины.
   ───────────────────────────────────────────────────────────── */
.pp-nav-menu a.pp-nav-cut{ gap:10px; margin:2px 2px 8px; padding:12px 14px; border-radius:12px;
  background:var(--grad-hero); color:#fff; font-weight:700;
  box-shadow:0 8px 20px -10px rgba(124,92,255,.7);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s; }
.pp-nav-menu a.pp-nav-cut:hover{ background:var(--grad-hero); filter:brightness(1.05);
  transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(124,92,255,.85); }
.pp-nav-cut-ico{ width:19px; height:19px; flex:none; }
.pp-nav-cut-lbl{ flex:1 1 auto; min-width:0; }
/* бейдж «скоро» — полупрозрачная белая пилюля на градиенте (текст+цвет, не только цвет) */
.pp-nav-soon{ flex:none; font:800 10px var(--font); letter-spacing:.03em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.24); color:#fff; }
@media(prefers-reduced-motion:reduce){
  .pp-nav-menu a.pp-nav-cut, .pp-nav-menu a.pp-nav-cut:hover{ transition:none; transform:none; }
}

/* ─────────────────────────────────────────────────────────────
   3c. ЦЕНТР УВЕДОМЛЕНИЙ — колокольчик + дропдаун (порт 1:1 pop.css §Центр
   уведомлений, стр. 4633-4818). Инжектится hydrateNav у залогиненного; без
   этих правил inline-SVG-глифы раздуваются в «куб», а попап занимает пол-экрана.
   Все значения — токены из :root выше (в т.ч. алиасы --card/--rad-*/--violet-*).
   ───────────────────────────────────────────────────────────── */
/* колокольчик в .pp-nav-cta (icon-only ghost, бейдж) */
.pp-bell{
  position:relative; display:grid; place-items:center; width:40px; height:40px;
  border:none; background:transparent; color:var(--ink2); border-radius:var(--rad-md);
  cursor:pointer; transition:background .15s, color .15s;
}
.pp-bell:hover{ color:var(--ink); background:rgba(124,92,255,.08); }
.pp-bell[aria-expanded="true"]{ color:var(--violet); background:rgba(124,92,255,.12); }
.pp-bell:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.pp-bell-ico{ width:21px; height:21px; }
.pp-bell[data-has-unread] .pp-bell-ico{ color:var(--ink); }
.pp-bell-badge{
  position:absolute; top:5px; right:5px; min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center; box-sizing:border-box;
  font:700 10px/1 var(--font); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  color:#fff; background:var(--coral); border:2px solid var(--card);
  border-radius:var(--pill); pointer-events:none;
}
.pp-bell-badge[hidden]{ display:none; }

/* дропдаун-поповер */
.pp-notifpop{
  position:absolute; top:calc(100% + 10px); right:0; z-index:1200;
  width:380px; max-width:calc(100vw - 24px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--rad-xl); box-shadow:var(--shadow-lg), 0 4px 14px rgba(20,20,20,.06);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(-6px) scale(.985); transform-origin:top right;
  transition:opacity .16s ease, transform .16s cubic-bezier(.34,1.4,.64,1);
}
.pp-notifpop.is-show{ opacity:1; transform:translateY(0) scale(1); }
.pp-notifpop-scrim{ display:none; }

.pp-notifpop-head{
  display:flex; align-items:center; gap:10px; padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.pp-notifpop-title{ font:800 16px var(--font-display,var(--font)); color:var(--ink); margin-right:auto; }
.pp-notifpop-tools{ display:flex; align-items:center; gap:4px; }
.pp-notif-glyph{ width:18px; height:18px; flex:none; }
.pp-notifpop-act{
  display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 10px;
  font:600 13px var(--font); color:var(--violet); background:transparent;
  border:none; border-radius:var(--rad-md); cursor:pointer; transition:background .15s;
}
.pp-notifpop-act:hover{ background:rgba(124,92,255,.10); }
.pp-notifpop-act:focus-visible{ outline:2px solid var(--violet); outline-offset:1px; }
.pp-notifpop-icobtn{
  display:grid; place-items:center; width:34px; height:34px;
  color:var(--ink2); background:transparent; border:none; border-radius:var(--rad-md);
  cursor:pointer; transition:background .15s, color .15s;
}
.pp-notifpop-icobtn:hover{ color:var(--ink); background:var(--bg2); }
.pp-notifpop-icobtn:focus-visible{ outline:2px solid var(--violet); outline-offset:1px; }
.pp-notifpop-close{ display:none; }  /* десктоп: закрытие кликом-вне/Esc; на мобиле показываем */

/* вкладки-фильтры (горизонтальный скролл при тесноте) */
.pp-notifpop-tabs{
  display:flex; gap:2px; padding:8px 10px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line);
}
.pp-notifpop-tabs::-webkit-scrollbar{ display:none; }
.pp-notifpop-tab{
  position:relative; display:inline-flex; align-items:center; gap:5px; flex:none;
  height:30px; padding:0 11px; font:600 13px var(--font); color:var(--ink2);
  background:transparent; border:none; border-radius:var(--pill); cursor:pointer;
  white-space:nowrap; transition:background .15s, color .15s;
}
.pp-notifpop-tab:hover{ color:var(--ink); background:var(--bg2); }
.pp-notifpop-tab.is-active{ color:#fff; background:var(--violet); }
.pp-notifpop-tab:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.pp-notifpop-tabn{
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  display:grid; place-items:center; font:800 10px/1 var(--font);
  font-variant-numeric:tabular-nums; color:#fff; background:var(--coral);
  border-radius:var(--pill);
}
.pp-notifpop-tab.is-active .pp-notifpop-tabn{ background:rgba(255,255,255,.28); }

/* push-CTA баннер внутри дропдауна */
.pp-notif-push{
  display:flex; align-items:center; gap:10px; margin:10px 12px 2px; padding:10px 12px;
  background:var(--violet-50); border:1px solid var(--violet-100); border-radius:var(--rad-lg);
}
.pp-notif-push-ico{ display:grid; place-items:center; width:34px; height:34px; flex:none;
  color:var(--violet); background:var(--card); border-radius:var(--rad-md); }
.pp-notif-push-txt{ display:flex; flex-direction:column; line-height:1.25; margin-right:auto; }
.pp-notif-push-txt b{ font:700 13px var(--font); color:var(--ink); }
.pp-notif-push-txt span{ font:500 12px var(--font); color:var(--ink2); }

/* тело-список */
.pp-notifpop-body{ max-height:min(56vh,440px); overflow-y:auto; padding:6px; }
.pp-notif-row{
  position:relative; display:flex; align-items:flex-start; gap:11px; width:100%;
  padding:10px; text-align:left; background:transparent; border:none;
  border-radius:var(--rad-md); cursor:pointer; text-decoration:none;
  color:inherit; font:inherit; transition:background .13s;
}
.pp-notif-row:hover{ background:var(--bg2); }
.pp-notif-row:focus-visible{ outline:2px solid var(--violet); outline-offset:-2px; }
.pp-notif-row.is-unread{ background:rgba(124,92,255,.05); }
.pp-notif-row.is-unread:hover{ background:rgba(124,92,255,.09); }
.pp-notif-ico{ display:grid; place-items:center; width:34px; height:34px; flex:none;
  color:var(--ink2); background:var(--bg2); border-radius:var(--rad-md); }
.pp-notif-ico .pp-notif-glyph{ width:18px; height:18px; }
.pp-notif-row.is-unread .pp-notif-ico{ color:var(--violet); background:var(--violet-50); }
.pp-notif-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pp-notif-txt{ font:500 13.5px/1.35 var(--font); color:var(--ink);
  overflow-wrap:anywhere; }
.pp-notif-time{ font:600 11.5px var(--font); font-variant-numeric:tabular-nums; color:var(--ink2); }
.pp-notif-udot{ width:8px; height:8px; flex:none; margin-top:6px; border-radius:50%;
  background:var(--coral); }

/* footer «вся история» */
.pp-notifpop-foot{
  display:block; padding:11px 14px; text-align:center; border-top:1px solid var(--line);
  font:700 13px var(--font); color:var(--violet); text-decoration:none;
  transition:background .15s;
}
.pp-notifpop-foot:hover{ background:var(--bg2); }
.pp-notifpop-foot:focus-visible{ outline:2px solid var(--violet); outline-offset:-2px; }

/* пусто / ошибка внутри дропдауна */
.pp-notif-empty{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:40px 24px; }
.pp-notif-empty-ico{ display:grid; place-items:center; width:52px; height:52px; margin-bottom:2px;
  color:var(--ink2); background:var(--bg2); border-radius:var(--rad-lg); }
.pp-notif-empty-ico .pp-notif-glyph{ width:26px; height:26px; }
.pp-notif-empty-t{ font:700 15px var(--font); color:var(--ink); }
.pp-notif-empty-d{ font:500 13px/1.45 var(--font); color:var(--ink2); max-width:260px; }

/* skeleton загрузки (не спиннер) */
.pp-notif-skel{ display:flex; flex-direction:column; gap:4px; padding:4px; }
.pp-notif-skel-row{ height:56px; border-radius:var(--rad-md);
  background:linear-gradient(90deg,var(--bg2) 25%,var(--gray-100) 37%,var(--bg2) 63%);
  background-size:400% 100%; animation:pp-notif-skel 1.3s ease infinite; }
@keyframes pp-notif-skel{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* панель «Настройки уведомлений» (модалка из шестерёнки дропдауна) */
.pp-nprefs{ display:flex; flex-direction:column; gap:18px; }
.pp-nprefs-group{ display:flex; flex-direction:column; gap:2px; }
.pp-nprefs-gt{ display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font:800 12px var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--ink2); }
.pp-nprefs-glyph{ width:16px; height:16px; flex:none; color:var(--violet); }
.pp-nprefs-rows{ display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--rad-lg); overflow:hidden; }
.pp-prefrow{ display:flex; align-items:center; gap:14px; padding:13px 14px;
  border-top:1px solid var(--line); background:var(--card); }
.pp-prefrow:first-child{ border-top:none; }
.pp-prefrow.is-muted{ background:var(--bg2); }
.pp-prefrow-main{ display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; }
.pp-prefrow-t{ font:600 14px var(--font); color:var(--ink); }
.pp-prefrow-d{ font:500 12.5px/1.4 var(--font); color:var(--ink2); }

/* мобильный лист вместо поповера (bottom-sheet + scrim) */
@media(max-width:560px){
  .pp-notifpop{
    position:fixed !important; top:auto !important; right:0 !important; left:0 !important;
    bottom:0 !important; width:auto; max-width:none;
    border-radius:var(--rad-2xl) var(--rad-2xl) 0 0; transform-origin:bottom center;
    transform:translateY(12px); max-height:86vh;
  }
  .pp-notifpop.is-show{ transform:translateY(0); }
  .pp-notifpop-close{ display:grid; }
  .pp-notifpop-body{ max-height:none; flex:1; }
  .pp-notifpop-scrim{
    display:block; position:fixed; inset:0; z-index:1190; background:rgba(20,20,20,.42);
    opacity:0; transition:opacity .18s ease;
  }
  .pp-notifpop-scrim.is-show{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .pp-notifpop, .pp-notifpop-scrim, .pp-bell{ transition:none; }
  .pp-notif-skel-row{ animation:none; }
}

/* .brand/.logo/.brand-name/.dot ниже ОСТАЮТСЯ — их использует ФУТЕР (не удалять). */
.brand{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:800; font-size:1.18rem;
  letter-spacing:-.03em; color:var(--ink); text-decoration:none;
}
.brand .dot{ color:var(--coral); }
.brand-name{ color:var(--ink); }
/* лого = градиент-чип коралл→фиолет (канон pp-logo); текстовый знак ◧ внутри */
.logo{
  display:grid; place-items:center; width:30px; height:30px; line-height:0;
  border-radius:10px; background:var(--grad-hero); color:#fff; font-size:15px;
  box-shadow:0 6px 16px -6px rgba(124,92,255,.6); flex:none;
}
.logo svg{ width:20px; height:20px; display:block; }
/* кнопки — пилюли Pop (используются .cta-box → .btn.btn-primary.btn-lg) */
.btn{
  display:inline-flex; align-items:center; gap:.45em; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-family:var(--font);
  border-radius:var(--pill); padding:.7em 1.3em;
  transition:transform .18s var(--ease), box-shadow .18s;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
.btn-primary{
  background:var(--grad-hero); color:#fff;
  box-shadow:0 8px 20px -8px rgba(124,92,255,.7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(124,92,255,.85); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line2); box-shadow:none; }
.btn-ghost:hover{ border-color:var(--violet); box-shadow:none; background:rgba(124,92,255,.04); }
.btn-lg{ padding:.85em 1.7em; font-size:1.05rem; }

/* ─────────────────────────────────────────────────────────────
   4. ФУТЕР — светлый
   ───────────────────────────────────────────────────────────── */
.footer{
  max-width:var(--maxw); margin:0 auto; padding:2.6rem 1.5rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
  color:var(--mut); font-size:.88rem;
}
.footer .brand{ font-size:1.05rem; }
.foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.foot-links a{ color:var(--mut); text-decoration:none; }
.foot-links a:hover{ color:var(--violet); }
.foot-copy{ color:var(--dim); }

/* ─────────────────────────────────────────────────────────────
   5. READING PROGRESS — градиент коралл→фиолет, без неон-glow
   ───────────────────────────────────────────────────────────── */
.read-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:var(--grad-hero);
  box-shadow:none; transition:width .12s linear;
}

/* ─────────────────────────────────────────────────────────────
   6. КАРКАС СТАТЬИ
   ───────────────────────────────────────────────────────────── */
.article{ max-width:768px; margin:0 auto; padding:5rem 1.5rem 4rem; position:relative; }
.crumbs{ font-family:var(--font); font-size:.8rem; letter-spacing:.01em; color:var(--dim); margin-bottom:1.4rem; }
.crumbs a{ color:var(--mut); transition:.18s; text-decoration:none; }
.crumbs a:hover{ color:var(--violet); text-shadow:none; }

.article h1{
  font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3rem); font-weight:800;
  letter-spacing:-.02em; margin-bottom:.9rem; line-height:1.1; color:var(--ink);
  filter:none;
}
.article h1 .grad{
  background:var(--grad-hero);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.article .meta{ color:var(--dim); font-size:.86rem; margin-bottom:2rem; display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.article .meta>span{ display:inline-flex; align-items:center; gap:.4em; }
.article .meta .tag{
  font-family:var(--font); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  background:rgba(124,92,255,.10); color:var(--violet); border:1px solid rgba(124,92,255,.22);
  padding:.4em .85em; border-radius:var(--pill); font-weight:700; box-shadow:none;
}

/* ── HERO-обложка статьи (светлая Pop-карта) ── */
.article-cover{
  position:relative; margin:0 auto 2.4rem; max-width:768px;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#FFF1F4,#F1ECFF);
  box-shadow:var(--shadow);
}
.article-cover::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 78% 12%,rgba(124,92,255,.14),transparent 70%),
            radial-gradient(50% 70% at 18% 95%,rgba(255,94,126,.12),transparent 72%);
}
.article-cover svg, .article-cover img{ display:block; width:100%; height:auto; }

/* ── лид ── */
.article .lead-p{ font-size:1.2rem; color:var(--ink); line-height:1.62; margin-bottom:1.9rem; font-weight:450; }

/* ── заголовки разделов: акцент-полоска коралл→фиолет ── */
.article h2{
  font-family:var(--font-display); font-size:1.55rem; font-weight:800; letter-spacing:-.01em;
  margin:2.7rem 0 .9rem; padding-left:.85rem; position:relative; line-height:1.2; color:var(--ink);
}
.article h2::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:4px;
  background:var(--grad-hero); box-shadow:none;
}
.article h3{ font-family:var(--font-display); font-size:1.18rem; font-weight:700; margin:1.7rem 0 .5rem; color:var(--ink); letter-spacing:-.01em; }

.article p{ color:var(--mut); margin-bottom:1.1rem; font-size:1.05rem; line-height:1.72; }
.article p b, .article li b{ color:var(--ink); font-weight:650; }
.article ul, .article ol{ color:var(--mut); margin:0 0 1.3rem 0; padding-left:0; display:grid; gap:.6rem; font-size:1.05rem; list-style:none; }
.article li{ position:relative; padding-left:1.7em; line-height:1.6; }
.article ul>li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:2px;
  background:var(--grad-hero); box-shadow:none; transform:rotate(45deg);
}
.article ol{ counter-reset:li; }
.article ol>li{ counter-increment:li; }
.article ol>li::before{
  content:counter(li); position:absolute; left:0; top:.05em; width:1.4em; height:1.4em;
  font-family:var(--font); font-size:.78em; font-weight:800; display:grid; place-items:center; border-radius:8px;
  background:rgba(124,92,255,.10); color:var(--violet); border:1px solid rgba(124,92,255,.22);
}
.article a{ color:var(--violet); text-decoration:none; border-bottom:1px solid rgba(124,92,255,.30); transition:.18s; }
.article a:hover{ color:var(--coral); border-color:var(--coral); text-shadow:none; }

/* ── callout (3 смысловых варианта) — светлые ── */
.article .callout{
  background:#fff; backdrop-filter:none;
  border:1px solid var(--line); border-left:4px solid var(--violet);
  border-radius:var(--radius-sm); padding:1.15rem 1.35rem; margin:1.7rem 0; color:var(--mut); position:relative; line-height:1.65;
  box-shadow:var(--shadow);
}
.article .callout b{ color:var(--ink); }
.article .callout-key{
  border-left-color:var(--violet);
  background:linear-gradient(110deg,rgba(124,92,255,.08),rgba(255,94,126,.05));
  box-shadow:var(--shadow);
}
.article .callout-key b{ color:var(--violet); }
.article .callout-warn{
  border-left-color:var(--warn);
  background:linear-gradient(110deg,rgba(255,159,28,.10),transparent);
}
.article .callout-warn b{ color:#B26A00; }

/* ── key-box: «Коротко»/выводы — светлая Pop-карта ── */
.article .key-box{
  background:linear-gradient(135deg,rgba(255,94,126,.08),rgba(124,92,255,.07));
  border:1px solid var(--line2); border-radius:var(--radius); padding:1.5rem 1.6rem; margin:0 0 2.2rem; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.article .key-box::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad-hero);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.45; pointer-events:none;
}
.article .key-box h3{ margin:0 0 .8rem; font-family:var(--font); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--violet); }
.article .key-box ul{ margin:0; gap:.55rem; }
.article .key-box li{ color:var(--ink); font-size:1rem; }
.article .key-box li::before{ background:var(--coral); }

/* ── premium фигуры/«картинки» (светлая капсула) ── */
.article .fig{
  margin:2rem 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative;
  background:linear-gradient(160deg,#FFF1F4,#F1ECFF);
  box-shadow:var(--shadow); transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.article .fig:hover{ border-color:var(--line2); box-shadow:var(--shadow-lg); }
.article .fig::before, .article .fig::after{ content:""; position:absolute; width:22px; height:22px; border:2px solid var(--violet); opacity:.5; z-index:3; pointer-events:none; }
.article .fig::before{ top:9px; left:9px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.article .fig::after{ bottom:9px; right:9px; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.article .fig .fig-slot{ display:block; width:100%; }
.article .fig .fig-slot svg{ display:block; width:100%; height:auto; }
.article .fig .fig-slot img{ display:block; width:100%; height:auto; }
.article .fig figcaption{ padding:.85rem 1.2rem; color:var(--mut); font-size:.88rem; line-height:1.5; border-top:1px solid var(--line); background:rgba(255,255,255,.55); }
.article .fig figcaption b{ color:var(--ink); }
/* интерактивная 3D-фигура */
.article .fig-3d model-viewer{ width:100%; height:380px; background:transparent; display:block; }
@media(max-width:600px){ .article .fig-3d model-viewer{ height:300px; } }

/* ── таблицы (светлый glass) ── */
.article table{ width:100%; border-collapse:collapse; margin:1.7rem 0; font-size:.96rem; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.article th, .article td{ padding:.85em 1em; text-align:left; border-bottom:1px solid var(--line); color:var(--mut); }
.article thead th, .article tr:first-child th{ background:var(--bg2); color:var(--ink); font-weight:700; font-family:var(--font); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.article tbody tr:last-child td, .article tr:last-child td{ border-bottom:0; }
.article tr:hover td{ background:rgba(124,92,255,.04); }
.article td b{ color:var(--ink); }

/* ── CTA-блок — Pop-градиент-карта ── */
.article .cta-box{
  background:linear-gradient(120deg,rgba(255,94,126,.10),rgba(124,92,255,.10));
  border:1px solid var(--line2); border-radius:var(--radius); padding:2rem; margin:2.8rem 0 .5rem; text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.article .cta-box::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad-hero);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; pointer-events:none;
}
.article .cta-box h3{ margin:0 0 .5rem; color:var(--ink); font-family:var(--font-display); font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
.article .cta-box p{ margin-bottom:1.2rem; color:var(--mut); }

/* ── дверь для мастеров: печатник-читатель → «стать продавцом» (/for-makers) ── */
.article .cta-door{ margin:1.5rem 0 0; padding-top:1.3rem; border-top:1px solid var(--line);
  text-align:center; font-size:.95rem; color:var(--mut); }
.article .cta-door a{ font-weight:700; border-bottom-color:transparent; }
.article .cta-door a:hover{ border-bottom-color:var(--coral); }

/* ── видимый FAQ в статье ── */
.article-faq{ max-width:768px; margin:0 auto; padding:.5rem 1.5rem 1rem; }
.article-faq h2{ font-family:var(--font-display); font-size:1.55rem; font-weight:800; letter-spacing:-.01em; margin-bottom:1.1rem; padding-left:.85rem; position:relative; color:var(--ink); }
.article-faq h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:4px; background:var(--grad-hero); box-shadow:none; }
.article-faq .faq{ max-width:none; }

/* ── «Читать дальше» ── */
.related{ max-width:768px; margin:0 auto; padding:0 1.5rem 5rem; }
.related h2{ font-family:var(--font-display); font-size:1.3rem; font-weight:800; margin-bottom:1.1rem; color:var(--ink); letter-spacing:-.01em; }
.related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.related-card{
  background:#fff; backdrop-filter:none; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1.2rem 1.3rem; transition:.25s var(--ease); box-shadow:var(--shadow);
}
.related-card:hover{ border-color:var(--violet); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.related-card .rc-tag{ font-family:var(--font); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--violet); font-weight:700; margin-bottom:.4rem; }
.related-card .rc-title{ font-weight:700; color:var(--ink); margin-bottom:.3rem; line-height:1.3; }
.related-card .rc-sub{ color:var(--dim); font-size:.84rem; }

/* ── «Смотреть на маркетплейсе» — тихий контекстный мост tools/blog → живые листинги.
   Вторичный блок (де-эмфазис §14.A/E): маленькие pill-ссылки, НЕ конкурируют с primary-CTA
   «Открыть редактор». Реюз .related-обёртки (та же ширина/заголовок), свой только ряд пилюль. */
.mk-picks{ padding-top:.4rem; padding-bottom:2.6rem; }
.mk-picks h2{ margin-bottom:.75rem; }
.mk-picks-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mk-picks-row a{
  padding:.42rem .85rem; border:1px solid var(--line2); border-radius:var(--pill);
  background:#fff; color:var(--ink); font:600 .86rem var(--font);
  text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--line2);
  transition:border-color .15s, color .15s;
}
.mk-picks-row a:hover{ border-color:var(--violet); color:var(--violet); }
.mk-picks-row a:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
@media(max-width:599px){ .mk-picks-row a{ padding:.55rem .9rem; } }

/* ── индекс блога ── */
.blog-head{ max-width:var(--maxw); margin:0 auto; padding:6rem 1.5rem 1rem; text-align:center; }
.blog-head h1{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.9rem); font-weight:800; margin-bottom:.6rem; letter-spacing:-.02em; color:var(--ink); filter:none; }
.blog-head h1 .grad{ background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }
.blog-head p{ color:var(--mut); max-width:60ch; margin:0 auto; }
.post-grid{ max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.5rem 5rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; }
.post-card{
  background:#fff; backdrop-filter:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:1.7rem; transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.post-card:hover{ border-color:var(--violet); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.post-card{ display:flex; flex-direction:column; }
.post-card .pc-cover{ margin:-1.7rem -1.7rem 1.1rem; aspect-ratio:16/9; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--line); }
.post-card .pc-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.post-card:hover .pc-cover img{ transform:scale(1.04); }
.post-card .pc-tag{ font-family:var(--font); font-size:.72rem; color:var(--violet); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.post-card h2{ font-family:var(--font-display); font-size:1.24rem; font-weight:800; margin:.55rem 0; color:var(--ink); line-height:1.22; letter-spacing:-.01em; }
.post-card p{ color:var(--mut); font-size:.95rem; line-height:1.55; }

@media(max-width:760px){ .related-grid, .post-grid{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .read-progress{ transition:none; } }

/* ─────────────────────────────────────────────────────────────
   КАНОН-БРЕНД в шапке/футере (чип-заяц + bunnysplit. строчными Unbounded)
   — переносим логотип витрины (lp-brand / pp-logo), а не плейсхолдер.
   ───────────────────────────────────────────────────────────── */
.footer .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.footer .logo{
  width:34px; height:34px; border-radius:11px; flex:none; padding:0;
  background:linear-gradient(135deg,#FF5E7E,#7C5CFF);
  display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(124,92,255,.6);
  font-size:0; /* гасит остаток-глиф, если затешется */
}
.footer .logo svg{ width:23px; height:23px; display:block; }
.brand-name{
  font-family:'Unbounded',system-ui,sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.03em; color:#141414; text-transform:none;
}
.footer .brand-name{ color:#141414; }
.brand-name .dot{ color:#FF5E7E; }

/* ─────────────────────────────────────────────────────────────
   РАЗМОРОЗКА reveal: на блог/for-makers нет reveal-JS (класс .in
   не навешивается) → landing.css .reveal{opacity:0} прятал контент.
   Показываем сразу (без скролл-анимации, она тут не нужна).
   ───────────────────────────────────────────────────────────── */
.reveal{ opacity:1 !important; transform:none !important; filter:none !important; }

/* ── обогащение карточек под канон: candy-чип тега + градиент-акцент снизу ── */
.post-card .pc-tag,.related-card .rc-tag{
  display:inline-block; background:rgba(124,92,255,.10); color:#7C5CFF;
  padding:.3em .75em; border-radius:999px; margin-bottom:.5rem; box-shadow:0 0 0 1px rgba(124,92,255,.14) inset;
}
.related-card{ overflow:hidden; }
.post-card::after,.related-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#FF5E7E,#7C5CFF); opacity:0; transition:opacity .25s;
}
.post-card:hover::after,.related-card:hover::after{ opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   B1 · DEFINITION-BOX (answer-first / GEO) — стилизуем СУЩЕСТВУЮЩИЙ
   лид `.article .lead-p` в аккуратную «карточку прямого ответа».
   CSS-first → едино для блог/вики/for-makers/tools БЕЗ правки HTML.
   speakable cssSelector остаётся [".lead-p"] (класс не меняли) → голос
   Алисы читает ровно этот блок. Токены article.css:root, без hex.
   Не «баннер»: мягкая тонировка + один градиент-акцент, доминанта экрана.
   ═══════════════════════════════════════════════════════════════ */
.article .lead-p{
  position:relative;
  margin:0 0 2rem;
  padding:1.3rem 1.6rem 1.3rem 2rem;
  font-size:1.16rem; line-height:1.62; font-weight:500;
  color:var(--ink);
  background:linear-gradient(118deg,rgba(124,92,255,.07),rgba(255,94,126,.045));
  border:1px solid var(--line2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* один вертикальный градиент-акцент (коралл→фиолет) — сигнал «это ответ» */
.article .lead-p::before{
  content:""; position:absolute; left:.9rem; top:1.15rem; bottom:1.15rem; width:4px;
  border-radius:999px; background:var(--grad-hero);
}
.article .lead-p b{ color:var(--violet); font-weight:700; }
@media(max-width:600px){
  .article .lead-p{ padding:1.1rem 1.2rem 1.1rem 1.6rem; font-size:1.08rem; }
  .article .lead-p::before{ left:.7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   B2 · E-E-A-T «На чём основан сервис» — сдержанный блок «об экспертизе»
   внизу статьи перед CTA. НЕ кричит: тихая поверхность, малый заголовок
   с бренд-меткой (щит-галочка), провенанс `<small>` притушен.
   Работает и внутри `.article` (вики), и как top-level секция (tools).
   Селектор [data-eeat="basis"] эмитит seo-smith в генераторах, без классов.
   ═══════════════════════════════════════════════════════════════ */
[data-eeat="basis"]{
  width:min(768px, 100% - 3rem);
  margin:2.8rem auto .5rem;
  padding:1.4rem 1.6rem;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--mut);
  box-shadow:none;
}
[data-eeat="basis"] h2{
  margin:0 0 .7rem; padding:0;
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); line-height:1.25;
  display:flex; align-items:center; gap:.55rem;
}
[data-eeat="basis"] h2::before{
  content:""; position:static; inset:auto; width:20px; height:20px; flex:none;
  background:var(--grad-hero);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* h2::before у обычных .article h2 — градиент-полоска слева; тут её гасим */
[data-eeat="basis"] h2{ padding-left:0; }
[data-eeat="basis"] p{ margin:0 0 .6rem; color:var(--mut); font-size:.95rem; line-height:1.65; }
[data-eeat="basis"] p:last-child{ margin-bottom:0; }
[data-eeat="basis"] p b, [data-eeat="basis"] b{ color:var(--ink); font-weight:650; }
[data-eeat="basis"] small{ color:var(--dim); font-size:.82rem; line-height:1.5; }