/* ============================================================
   mac-soft.ru - main stylesheet
   Dark macOS window frame + glassmorphism
   ============================================================ */

:root{
  --bg0:#050816;
  --bg1:#0a1022;
  --bg2:#0f172a;
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.045);
  --glass3: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);
  --text:#f8fafc;
  --text-dim:#94a3b8;
  --muted:#94a3b8;
  --shadow: 0 28px 90px rgba(0,0,0,.48);
  --shadow2: 0 16px 40px rgba(0,0,0,.38);
  --a1:#38bdf8;
  --a2:#8b5cf6;
  --a3:#fb7185;
  --accent:#38bdf8;
  --accent-alt:#8b5cf6;
  --ok:#4ade80;
  --warn:#fbbf24;
  --bad:#fb7185;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --page-pad: clamp(8px, 2.2vw, 5mm);
  --content-side: clamp(14px, 4vw, 44px);
  --contacts-vh: 100dvh;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size:15px;
  line-height:1.6;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(900px 700px at 85% 10%, rgba(139,92,246,.16), transparent 55%),
    radial-gradient(1000px 800px at 50% 85%, rgba(251,113,133,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--a1);text-decoration:none;transition:.2s}
a:hover{color:#7dd3fc}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* subtle grid overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.45;
  mask-image: radial-gradient(circle at 40% 35%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 40% 35%, black, transparent 72%);
}

/* floating orbs */
.orbs{
  position:fixed;
  inset:-120px;
  pointer-events:none;
  filter:saturate(1.1);
  z-index:0;
}
.orb{
  position:absolute;
  border-radius:9999px;
  filter: blur(18px);
  opacity:.78;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: driftA 18s ease-in-out infinite;
  will-change: transform;
}
.orb.one{
  width:208px;height:208px;left:6%;top:8%;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.95), rgba(56,189,248,.25) 55%, transparent 72%);
  animation-name: driftA; animation-duration: 19s;
}
.orb.two{
  width:256px;height:256px;right:2%;top:4%;
  background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.9), rgba(139,92,246,.22) 55%, transparent 74%);
  animation-name: driftB; animation-duration: 23s; animation-delay:-3.5s;
}
.orb.three{
  width:280px;height:280px;left:18%;bottom:-6%;
  background: radial-gradient(circle at 35% 35%, rgba(251,113,133,.82), rgba(251,113,133,.18) 55%, transparent 76%);
  animation-name: driftC; animation-duration: 27s; animation-delay:-6.5s;
}
.orb.four{
  width:232px;height:232px;left:62%;top:22%;
  background: radial-gradient(circle at 32% 32%, rgba(34,197,94,.72), rgba(34,197,94,.16) 55%, transparent 76%);
  animation-name: driftD; animation-duration: 21s; animation-delay:-9.5s; opacity:.62;
}
.orb.five{
  width:188px;height:188px;left:42%;top:64%;
  background: radial-gradient(circle at 34% 34%, rgba(251,191,36,.72), rgba(251,191,36,.14) 55%, transparent 76%);
  animation-name: driftE; animation-duration: 17s; animation-delay:-5s; opacity:.58;
}
@keyframes driftA{
  0%{transform:translate3d(0,0,0) scale(1)} 13%{transform:translate3d(18vw,-10vh,0) scale(1.06)}
  29%{transform:translate3d(-12vw,18vh,0) scale(1.03)} 46%{transform:translate3d(26vw,32vh,0) scale(1.07)}
  63%{transform:translate3d(-22vw,40vh,0) scale(1.04)} 81%{transform:translate3d(10vw,14vh,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes driftB{
  0%{transform:translate3d(0,0,0) scale(1)} 12%{transform:translate3d(-24vw,8vh,0) scale(1.07)}
  28%{transform:translate3d(-10vw,34vh,0) scale(1.03)} 44%{transform:translate3d(20vw,48vh,0) scale(1.08)}
  60%{transform:translate3d(6vw,18vh,0) scale(1.04)} 78%{transform:translate3d(-18vw,-6vh,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes driftC{
  0%{transform:translate3d(0,0,0) scale(1)} 15%{transform:translate3d(22vw,6vh,0) scale(1.06)}
  33%{transform:translate3d(34vw,-12vh,0) scale(1.03)} 50%{transform:translate3d(6vw,24vh,0) scale(1.08)}
  68%{transform:translate3d(-28vw,46vh,0) scale(1.04)} 84%{transform:translate3d(-10vw,10vh,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes driftD{
  0%{transform:translate3d(0,0,0) scale(1)} 16%{transform:translate3d(-14vw,14vh,0) scale(1.07)}
  34%{transform:translate3d(18vw,34vh,0) scale(1.03)} 52%{transform:translate3d(-26vw,50vh,0) scale(1.08)}
  70%{transform:translate3d(-8vw,20vh,0) scale(1.04)} 86%{transform:translate3d(22vw,-8vh,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes driftE{
  0%{transform:translate3d(0,0,0) scale(1)} 18%{transform:translate3d(26vw,-10vh,0) scale(1.06)}
  36%{transform:translate3d(8vw,18vh,0) scale(1.03)} 54%{transform:translate3d(-22vw,34vh,0) scale(1.08)}
  72%{transform:translate3d(-8vw,10vh,0) scale(1.04)} 88%{transform:translate3d(14vw,44vh,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .orb{animation:none !important}
  html{scroll-behavior:auto}
}

/* ════ page + window frame ════ */
.page{
  position:relative;
  z-index:1;
  min-height:100%;
  min-height:100dvh;
  display:grid;
  place-items:stretch;
  padding: var(--page-pad);
  padding-left: max(var(--page-pad), env(safe-area-inset-left));
  padding-right: max(var(--page-pad), env(safe-area-inset-right));
  padding-bottom: max(var(--page-pad), env(safe-area-inset-bottom));
}
.window{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  height: calc(var(--contacts-vh) - 2 * var(--page-pad));
  max-height: calc(var(--contacts-vh) - 2 * var(--page-pad));
  min-height:0;
  border-radius: clamp(16px, 3.5vw, 34px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,18,35,.58);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow:hidden;
}
.windowTop{
  display:flex;
  align-items:center;
  gap: clamp(10px, 2.4vw, 18px);
  padding: 0 clamp(10px, 3vw, 18px);
  height: clamp(42px, 8.4vw, 52px);
  flex-shrink:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.10);
  position:relative;
}
.traffic{display:flex;gap:9px;flex-shrink:0;align-items:center}
.dot{
  width:11px;height:11px;border-radius:999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.26) inset, 0 8px 16px rgba(0,0,0,.18);
}
.dot.r{background:var(--bad)}
.dot.y{background:var(--warn)}
.dot.g{background:var(--ok)}

.mainNav{
  display:flex;
  gap:4px;
  margin-left:6px;
  flex:1;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.mainNav::-webkit-scrollbar{display:none}
.mainNav a{
  padding:5px 11px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-dim);
  white-space:nowrap;
  transition:.2s;
}
.mainNav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.mainNav a.active{color:var(--a1);background:rgba(56,189,248,.12)}

/* ════ Mega Menu в шапке ════ */
.megaItem{
  position: relative;
}
.megaItem .megaToggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.megaItem .megaArrow{
  font-size: 9px;
  opacity: .7;
  transition: transform .2s;
}
.megaItem.megaOpen .megaArrow{
  transform: rotate(180deg);
}
/* Активная подсветка в шапке/меню убрана по запросу user (2026-04-27) */
.megaPanel{
  position: fixed;
  top: 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 480px;
  /* Подстраивается под тему сайта: использует CSS-переменные --bg1/--bg2,
     которые меняются при выборе темы профиля */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg1) 92%, transparent),
    color-mix(in srgb, var(--bg2) 95%, transparent)
  );
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 16px;
  /* Псевдо-мост от кнопки к панели через невидимый top padding */
  margin-top: -10px;
  padding-top: 26px;
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 9999;
  pointer-events: none;
}
.megaItem.megaOpen .megaPanel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.megaCol h4{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin: 0 0 8px 0;
  padding: 0 8px;
}
.megaCol .megaLink{
  display: block;
  padding: 8px 10px !important;
  border-radius: 8px;
  background: transparent !important;
  text-decoration: none;
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: 2px;
  transition: background .15s;
}
.megaCol .megaLink:hover{
  background: rgba(255,255,255,.06) !important;
}
/* .megaCol .megaLink.active - подсветка убрана */
.megaLinkTitle{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.megaLinkSub{
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
}
/* .megaCol .megaLink.active .megaLinkSub - подсветка убрана */
.megaOnlineDot{
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ok);
  border-radius: 50%;
  margin-right: 4px;
  animation: megaPulse 2s infinite;
  vertical-align: middle;
}
@keyframes megaPulse{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
/* Мобильное меню - все ссылки развёрнуты вертикально */
@media (max-width: 768px){
  body.menu-open .megaItem{
    width: 100%;
    display: block;
  }
  body.menu-open .megaItem .megaToggle{
    display: block;
    width: 100%;
    padding: 12px 14px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: transparent !important;
    cursor: default;
    pointer-events: none;
  }
  body.menu-open .megaItem .megaArrow{
    display: none;
  }
  body.menu-open .megaPanel{
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    display: block !important;
    grid-template-columns: 1fr !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
  }
  body.menu-open .megaCol{
    margin-bottom: 8px;
  }
  body.menu-open .megaCol h4{
    font-size: 10px;
    color: var(--text-dim);
    padding: 8px 14px 4px;
    opacity: .6;
  }
  body.menu-open .megaCol .megaLink{
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 8px;
    margin: 0 6px;
  }
  body.menu-open .megaLinkSub{
    display: none;  /* скрываем подсказки на мобильных - экономия места */
  }
}

.headerActions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex-shrink:0;
}
/* Узкие кнопки только в шапке - не влияют на остальной сайт */
.headerActions .btn-sm{padding:5px 11px;font-size:12px;border-radius:9px}
.headerActions .userLink{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  padding:3px 9px;
  border-radius:9px;
}
.headerActions .userLink:hover{background:rgba(255,255,255,.05)}
.userLinkName{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.1}
/* Колокольчик сообщений — глобально, виден на любой странице
   2 состояния:
   .userMsgBell--unread → красный бейдж с числом + пульсирующая фиолетовая аура
   .userMsgBell--open   → зелёная точка (просто есть открытый тикет) */
.userMsgBell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  font-size:16px;
  text-decoration:none;
  transition:.2s;
}
.userMsgBell:hover{transform:scale(1.08)}
/* "Непрочитано от админа" — пульсирующий фиолет */
.userMsgBell--unread{
  background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(139,92,246,.18));
  border:1px solid rgba(168,85,247,.5);
  animation:userMsgPulse 2s ease-in-out infinite;
}
.userMsgBell--unread:hover{background:linear-gradient(135deg,rgba(168,85,247,.35),rgba(139,92,246,.25))}
.userMsgBellBadge{
  position:absolute;
  top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 5px;
  background:#ef4444;
  color:#fff;font-size:10.5px;font-weight:800;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg0,#0a0e1a);
  box-shadow:0 0 0 1px rgba(239,68,68,.4);
  line-height:1;
}
/* "Открытый тикет, ждём ответа" — спокойный зелёный */
.userMsgBell--open{
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(20,184,166,.12));
  border:1px solid rgba(16,185,129,.4);
  opacity:.85;
}
.userMsgBell--open:hover{background:linear-gradient(135deg,rgba(16,185,129,.28),rgba(20,184,166,.18));opacity:1}
.userMsgBellDot{
  position:absolute;
  top:1px;right:1px;
  width:9px;height:9px;
  background:#10b981;
  border-radius:50%;
  border:2px solid var(--bg0,#0a0e1a);
  box-shadow:0 0 0 1px rgba(16,185,129,.5);
}
@keyframes userMsgPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}
  50%    {box-shadow:0 0 0 6px rgba(168,85,247,0)}
}
/* Баланс в правой колонке подвала (бывший userLinkBalance из шапки) */
.footerBalance{
  grid-column:3;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:inherit;
  font-weight:700;
  color:#fbbf24;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
  transition:transform .2s, color .2s;
}
.footerBalance:hover{color:#fde047}
.footerBalance--bump{transform:scale(1.18);color:#fde047;text-shadow:0 0 8px rgba(251,191,36,.6)}
.coin-icon{display:inline-block;vertical-align:-0.18em;object-fit:contain;flex-shrink:0}
.coin-float{
    position:absolute;
    top:-4px;right:-4px;
    font-size:11px;
    font-weight:800;
    color:#10b981;
    background:rgba(16,185,129,.15);
    padding:1px 6px;
    border-radius:6px;
    pointer-events:none;
    animation:coinFloat 1.5s ease-out forwards;
    white-space:nowrap;
}
@keyframes coinFloat{
    0%{opacity:0;transform:translateY(0) scale(.8)}
    20%{opacity:1;transform:translateY(-4px) scale(1)}
    80%{opacity:1;transform:translateY(-22px) scale(1)}
    100%{opacity:0;transform:translateY(-30px) scale(.9)}
}
.headerAvatar{
  width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
}
.burger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  margin-left:auto;
}
.burger span{
  display:block;
  width:22px;height:2px;
  background:var(--text);
  margin:5px 0;
  border-radius:2px;
  transition:.2s;
}

.content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* Скрываем системный скроллбар - прокрутка работает но визуально его нет */
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* IE/Edge legacy */
  padding:
    clamp(14px, 3vw, 28px)
    var(--content-side)
    clamp(14px, 3vw, 28px);
}
.content::-webkit-scrollbar{display:none} /* Chrome/Safari/Edge */
.contentInner{
  width:100%;
  max-width:1140px;
  margin:0 auto;
}
.contentInner--sm{max-width:720px}
.contentInner--md{max-width:900px}

.pageTitle{
  margin:0 0 22px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
  line-height:1.15;
}
.pageTitle--center{text-align:center}
.pageTitle-count{
  display:inline-block;
  margin-left:14px;
  padding:4px 12px;
  font-size:.55em;
  font-weight:700;
  letter-spacing:0;
  color:var(--text-dim);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  vertical-align:middle;
  line-height:1;
}

/* ── Кнопка "Предложить программу/тему" в заголовке страницы ── */
.pageTitle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.pageTitle-row .pageTitle{margin-bottom:0}
.btn-suggest{
  appearance:none;
  background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.18));
  border:1px solid rgba(139,92,246,.35);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  padding:10px 18px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  white-space:nowrap;
}
.btn-suggest:hover{
  transform:translateY(-1px);
  border-color:rgba(139,92,246,.6);
  box-shadow:0 8px 22px rgba(139,92,246,.18);
}
.btn-suggest:active{transform:translateY(0)}

/* ── Модалка "Предложить" ── */
.idea-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,12,22,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:idea-fade .18s ease;
}
.idea-modal-backdrop[hidden]{display:none}
@keyframes idea-fade{from{opacity:0}to{opacity:1}}
.idea-modal{
  background:#0e1424;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:28px 28px 22px;
  width:100%;
  max-width:540px;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:idea-pop .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes idea-pop{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.idea-modal-close{
  position:absolute;
  top:12px;right:14px;
  background:none;border:none;
  color:var(--text-dim);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  padding:4px 10px;
  border-radius:8px;
  transition:background .15s, color .15s;
}
.idea-modal-close:hover{background:rgba(255,255,255,.06);color:var(--text)}
.idea-modal-title{
  font-size:20px;
  font-weight:800;
  margin:0 0 8px;
  color:var(--text);
}
.idea-modal-sub{
  font-size:13px;
  color:var(--text-dim);
  margin:0 0 18px;
  line-height:1.5;
}
.idea-form .idea-field{margin-bottom:14px}
.idea-form label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:5px;
  letter-spacing:.01em;
}
.idea-form label .req{color:#fb7185;margin-left:2px}
.idea-form label .muted{color:var(--text-dim);font-weight:400}
.idea-form input[type=text],
.idea-form input[type=email],
.idea-form input[type=url],
.idea-form textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:10px 14px;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  transition:border-color .15s, background .15s;
}
.idea-form input:focus,
.idea-form textarea:focus{
  outline:none;
  border-color:rgba(139,92,246,.6);
  background:rgba(255,255,255,.06);
}
.idea-form textarea{resize:vertical;min-height:80px}
.idea-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;height:1px !important;
  opacity:0 !important;
}
.idea-form-footer{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
}
.idea-form-status{font-size:13px;line-height:1.4;flex:1}
.idea-form-status.is-ok{color:#4ade80}
.idea-form-status.is-err{color:#fb7185}
.pageSubtitle{
  color:var(--text-dim);
  font-size:15px;
  margin:-12px 0 24px;
}

.footerStub{
  position:relative;
  margin: clamp(6px, 1.2vw, 10px) var(--content-side) clamp(8px, 1.5vw, 14px);
  border-radius: clamp(10px, 1.6vw, 14px);
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  padding: clamp(5px, 1.4vw, 8px) clamp(10px, 2vw, 16px);
  /* 3 зоны: пустая слева (баланс перекрывает её визуально), текст в центре, баланс справа.
     Так текст реально посередине футера, а баланс не отжимает его влево. */
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 8px;
  min-height:30px;
  text-align:center;
  color:var(--text-dim);
  font-size: clamp(11px, 2.4vw, 12px);
  line-height:1.3;
  flex-shrink:0;
}
.footerStub .footerText{grid-column:2;justify-self:center}
.footerText{color:var(--text-dim);font-size:inherit;line-height:1.2}
.footerPolicy{color:var(--text-dim);text-decoration:underline;font-size:inherit;transition:color .15s}
.footerPolicy:hover{color:var(--text)}

/* ════ glass card primitives ════ */
.card{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background:
    radial-gradient(260px 220px at 25% 20%, rgba(255,255,255,.10), transparent 65%),
    radial-gradient(280px 240px at 80% 65%, rgba(255,255,255,.06), transparent 70%);
  pointer-events:none;
}
.cardIn{position:relative;z-index:1;padding:26px}
.cardIn--sm{padding:18px}
.cardIn--lg{padding:32px}

/* ════ buttons ════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(226,232,240,.92);
  border-radius: 14px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
  text-decoration:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color:var(--text);
}
.btn-accent,.btn-primary{
  border:none;
  color:#061018;
  background: linear-gradient(90deg, rgba(56,189,248,.95), rgba(139,92,246,.95));
  box-shadow: 0 18px 44px rgba(56,189,248,.20);
}
.btn-accent:hover,.btn-primary:hover{
  color:#061018;
  box-shadow: 0 22px 52px rgba(56,189,248,.28);
}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.10);
  color:var(--text-dim);
}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.04)}
.btn-glass{
  background: rgba(255,255,255,.08);
  color:var(--text);
}
.btn-outline{
  background:transparent;
  border-color:rgba(56,189,248,.55);
  color:var(--a1);
}
.btn-outline:hover{background:rgba(56,189,248,.08);color:var(--a1)}
.btn-danger{
  border:none;
  color:#fff;
  background: linear-gradient(90deg, #f43f5e, #fb7185);
}
.btn-warning{
  border:none;
  color:#1a1a1a;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:11px}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:16px}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ════ forms ════ */
.form-group{margin-bottom:16px}
.form-group label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:13px;
  color:#dbeafe;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius-xs);
  font-size:14px;
  font-family:inherit;
  background: rgba(255,255,255,.04);
  color:var(--text);
  transition:.2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:rgba(148,163,184,.6)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color: var(--a1);
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
  background: rgba(255,255,255,.06);
}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{
  appearance:none;
  -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right:38px;
}
.form-group select option{background:#0f172a;color:var(--text)}
.form-group input:disabled{background:rgba(255,255,255,.02);color:var(--text-dim);cursor:not-allowed}
.form-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
.hint{
  display:block;
  font-size:12px;
  color:var(--text-dim);
  margin-top:5px;
}
.field-hint{display:block;font-size:12px;margin-top:5px;min-height:16px;font-weight:600;transition:.2s}
.field-hint.error{color:var(--bad)}
.field-hint.ok{color:var(--ok)}
.form-group input.input-error{border-color:var(--bad)}
.form-group input.input-ok{border-color:var(--ok)}

/* ════ flash ════ */
.flash{
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  margin-bottom:18px;
  font-size:14px;
  font-weight:500;
  border:1px solid;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.flash p{margin:0 0 4px}
.flash p:last-child{margin:0}
.flash-success{background:rgba(74,222,128,.12);color:#bbf7d0;border-color:rgba(74,222,128,.35)}
.flash-error{background:rgba(251,113,133,.12);color:#fecaca;border-color:rgba(251,113,133,.35)}
.flash-info{background:rgba(56,189,248,.10);color:#bae6fd;border-color:rgba(56,189,248,.28)}

/* ════ hero + features (homepage) ════ */
.hero{
  margin-bottom:38px;
}
.hero-card{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.hero-card .cardIn{
  padding: clamp(26px, 4vw, 42px) clamp(22px, 4vw, 44px);
}
.hero-card h1{
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  line-height: 1.18;
  color: var(--text);
}
.hero-card h1 em{
  font-style: italic;
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-card p{
  font-size: 15px;
  color: var(--text-dim);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.7;
}
.features-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin:38px 0;
}
.feature-card{text-align:center}
.feature-card .cardIn{padding:30px 22px}
.feature-icon{
  font-size:38px;
  margin-bottom:14px;
  display:block;
}
.feature-card h3{
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
  color:var(--text);
}
.feature-card p{
  font-size:13px;
  color:var(--text-dim);
  line-height:1.55;
}

/* ════ section heads ════ */
.section{margin-bottom:38px}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
  gap:12px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}
.section-link{
  font-size:14px;
  font-weight:700;
  color:var(--a1);
}
/* Табы «Популярное» */
.pop-tabs{display:flex;gap:4px;background:rgba(255,255,255,.06);border-radius:8px;padding:3px}
.pop-tab{
  padding:5px 14px;font-size:13px;font-weight:600;border:none;background:none;
  border-radius:6px;cursor:pointer;color:var(--text-dim);transition: background-color .2s, color .2s, box-shadow .2s;white-space:nowrap;
}
.pop-tab:hover{color:var(--text)}
.pop-tab.is-active{background:rgba(255,255,255,.12);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ════ program cards ════ */
.programs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:16px;
  align-items:stretch;
}
/* Обёртка карточки (имеет fav-btn абсолютно позиционированную) -
   должна растягиваться по высоте grid-строки и передавать её внутренней карточке */
.program-card-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
}
.program-card-wrap > .program-card{
  flex:1;
  width:100%;
}
.program-card{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: var(--shadow2);
  /* backdrop-filter убран - на десятках карточек он клал Safari при скролле.
     Под карточками сплошной тёмный фон сайта, блюр всё равно не виден. */
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  display:flex;
  flex-direction:column;
  transition:.3s;
  position:relative;
}
.program-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background: radial-gradient(260px 220px at 25% 20%, rgba(255,255,255,.08), transparent 65%);
  pointer-events:none;
}
.program-card:hover{
  transform: translateY(-6px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.12);
}
.program-card-img{
  aspect-ratio:16/10;
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(139,92,246,.10));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.program-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .4s;
}
.program-card:hover .program-card-img img{transform:scale(1.06)}
.program-card-placeholder{font-size:52px;opacity:.4}
.program-card-body{
  padding:18px;
  flex:1;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
  min-height:0;
}
.program-card-body h3{
  font-size:15px;
  font-weight:800;
  margin-bottom:5px;
  color:var(--text);
  letter-spacing:-.01em;
  /* Ровно 1 строка для заголовка, чтобы все карточки совпадали */
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  line-clamp:1;
}
.program-card-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.program-card-title-row h3{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.program-card-title-row .version{flex-shrink:0;font-size:11px;color:var(--text-dim);white-space:nowrap}
.program-card-body p{
  font-size:12.5px;
  color:var(--text-dim);
  margin-bottom:12px;
  line-height:1.55;
  /* Ровно 3 строки описания - больше не поместится, carды одинаковой высоты */
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  line-clamp:3;
  min-height:calc(1.55em * 3);
}
/* Мета прилипает к низу карточки. nowrap - всё в одну строку, type-chip всегда справа.
   При нехватке места сжимается категория (через min-width:0 + overflow на теге). */
.program-card-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:nowrap;
  margin-top:auto;
  min-width:0;
  overflow:hidden;
}
.program-card-meta .tag{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  max-width:100%;
}
.program-card-meta .version,
.program-card-meta .downloads{
  flex-shrink:0;
  white-space:nowrap;
}
.tag{
  display:inline-block;
  padding:4px 12px;
  border-radius: 100px;
  font-size:11px;
  font-weight:700;
  background: rgba(56,189,248,.12);
  color: var(--a1);
  border:1px solid rgba(56,189,248,.22);
  text-decoration:none;
  transition:.2s;
}
.tag:hover{background: rgba(56,189,248,.2);color:var(--a1)}
.tag-active{background:var(--a1);color:#061018;border-color:var(--a1)}
.tag-sm{padding:3px 10px;font-size:10px}
.version{font-size:11px;color:var(--text-dim);font-weight:600}
.downloads{font-size:11px;color:var(--text-dim);font-weight:600}

/* ════ catalog filters ════ */
.catalog-filters{margin-bottom:28px}
.catalog-sort{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.catalog-sort-label{
  font-size:11px;
  color:var(--text-dim);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-right:4px;
}
.sort-chip{
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--text-dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sort-chip:hover{background:rgba(255,255,255,.08);color:var(--text)}
.sort-chip.is-active{
  background: linear-gradient(90deg, rgba(56,189,248,.2), rgba(139,92,246,.2));
  color:var(--a1);
  border-color:rgba(56,189,248,.5);
}
.search-form{
  display:flex;
  gap:10px;
  margin-bottom:16px;
  max-width:460px;
}
.search-form input{
  flex:1;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius: var(--radius-xs);
  font-size:14px;
  font-family:inherit;
  background: rgba(255,255,255,.04);
  color:var(--text);
}
.search-form input:focus{
  outline:none;
  border-color: var(--a1);
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}
.cat-tags{display:flex;gap:8px;flex-wrap:wrap}

/* ════ program detail page ════ */
.breadcrumb{
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:22px;
}
.breadcrumb a{color:var(--text-dim)}
.breadcrumb a:hover{color:var(--a1)}
.program-layout{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:36px;
  margin-bottom:36px;
}
.program-gallery{min-width:0;display:flex;flex-direction:column}
.gallery-main{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  cursor:zoom-in;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main img{
  max-width:100%;
  max-height:600px;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}
.gallery-thumbs{
  display:flex;
  gap:10px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:4px;
}
.gallery-thumb{
  width:86px;
  height:56px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  border:2px solid transparent;
  opacity:.55;
  transition:.2s;
  flex-shrink:0;
}
.gallery-thumb:hover,
.gallery-thumb.active{opacity:1;border-color:var(--a1)}
.program-info{
  padding:28px;
  display:flex;
  flex-direction:column;
}
.program-info h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:8px;
  color:var(--text);
}
.program-short-desc{
  font-size:15px;
  color:var(--text-dim);
  margin-bottom:22px;
  line-height:1.7;
}
.rating-display{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.stars{color:var(--warn);font-size:17px;letter-spacing:1px}
.rating-num{font-weight:800;color:var(--text)}
.program-meta-compact{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding-top:24px;
  border-top: 1px solid var(--line);
  margin-top:18px;
}
.meta-item{text-align:center;flex:1;min-width:70px}
.meta-label{
  display:block;
  font-size:10px;
  color:var(--text-dim);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.meta-val{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.desc-content{font-size:15px;line-height:1.75;color:#cbd5e1}
.desc-content h3{font-size:16px;font-weight:700;margin:18px 0 8px;color:var(--text)}
.desc-content h3:first-child{margin-top:0}
.desc-content p{margin-bottom:10px}
.desc-content ul{padding-left:22px;list-style:disc;margin-bottom:12px}
.desc-content li{margin-bottom:4px}

/* ════ popups ════ */
.popup-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  /* Используем цвет фона темы (var --bg0), полупрозрачный */
  background: color-mix(in srgb, var(--bg0, #050816) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items:center;
  justify-content:center;
  padding:20px;
}
/* Fallback для браузеров без color-mix */
@supports not (background: color-mix(in srgb, red, blue)){
  .popup-overlay{background: rgba(5,8,22,.78)}
}
.popup-overlay.open{display:flex}
.popup-box{
  max-width:580px;
  width:100%;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  padding:0 !important;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--line2);
  /* Фон берём из темы: собираем из --bg1/--bg2 с небольшой прозрачностью.
     Темы переопределяют эти переменные через :root, значит попапы
     автоматически перекрашиваются под выбранную тему оформления. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg1, #0a1022) 94%, transparent),
      color-mix(in srgb, var(--bg2, #0f172a) 94%, transparent));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}
@supports not (background: color-mix(in srgb, red, blue)){
  .popup-box{background: rgba(12,18,35,.94)}
}
.popup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom: 1px solid var(--line);
  gap:12px;
}
.popup-header h3{font-size:17px;font-weight:800;margin:0;color:var(--text)}
.popup-close{
  background:none;
  border:none;
  font-size:28px;
  cursor:pointer;
  color:var(--text-dim);
  line-height:1;
}
.popup-close:hover{color:var(--text)}
.popup-body{padding:20px 22px;overflow-y:auto;flex:1}
.popup-body-scroll{max-height:560px}
/* Список отзывов в попапе - 6 видимых, дальше скролл (как в блоге) */
#reviewsOverlay .popup-box{max-width:1040px}
.reviews-scroll{max-height:650px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.reviews-scroll::-webkit-scrollbar{width:5px}
.reviews-scroll::-webkit-scrollbar-track{background:transparent}
.reviews-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.popup-card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:12px;
}
.popup-card:last-child{margin-bottom:0}
.popup-card ul{padding-left:22px;list-style:disc}
.popup-card li{font-size:14px;margin-bottom:4px;color:#cbd5e1}
.changelog-header{display:flex;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.changelog-header strong{color:var(--a1);font-size:14px}
.changelog-header span{font-size:13px;color:var(--text-dim)}

/* ════ lightbox ════ */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:1100;
  background: rgba(0,0,0,.92);
  align-items:center;
  justify-content:center;
  padding:24px;
  cursor:pointer;
}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:14px}
.lightbox-close{
  position:absolute;top:24px;right:28px;
  font-size:38px;color:#fff;background:none;border:none;
  cursor:pointer;z-index:1102;
}
.lightbox-counter{
  position:absolute;bottom:24px;left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.6);
  font-size:13px;font-weight:600;
}
/* Lightbox navigation arrows */
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:38px;line-height:1;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:1101;
  transition: background-color .15s, transform .15s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding-bottom:4px;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
  transform:translateY(-50%) scale(1.08);
}
.lightbox-prev{left:28px}
.lightbox-next{right:28px}

/* ════ PWA install banner ════ */
/* Cookie consent banner */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:rgba(10,10,20,.95);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cookie-banner-text{font-size:13px;color:var(--text-dim);line-height:1.5;flex:1}
.cookie-banner-text a{color:var(--a1);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:600px){
  .cookie-banner{flex-direction:column;text-align:center}
  .cookie-banner-actions{width:100%;justify-content:center}
}

.pwa-banner{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(20,25,45,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(56,189,248,.2);
  max-width:calc(100vw - 40px);
  width:auto;
  color:#f1f5f9;
  animation:pwa-slide-up .35s cubic-bezier(.4,0,.2,1);
}
.pwa-banner[hidden]{display:none !important}
@keyframes pwa-slide-up{
  from{opacity:0;transform:translate(-50%, 30px)}
  to  {opacity:1;transform:translate(-50%, 0)}
}
.pwa-banner-icon{
  font-size:28px;flex-shrink:0;
  background:linear-gradient(135deg,#38bdf8,#818cf8);
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.pwa-banner-text{
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.pwa-banner-text strong{font-size:14px;font-weight:700;color:#fff}
.pwa-banner-text span{font-size:12px;color:#94a3b8}
.pwa-banner-dismiss{
  background:none;border:none;color:#94a3b8;
  font-size:24px;cursor:pointer;padding:0 4px;
  line-height:1;transition:color .15s;flex-shrink:0;
}
.pwa-banner-dismiss:hover{color:#fff}
@media (max-width:560px){
  .pwa-banner{
    bottom:10px;
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    padding:12px 14px;
    gap:10px;
  }
  .pwa-banner-icon{width:36px;height:36px;font-size:22px}
  .pwa-banner-text strong{font-size:13px}
  .pwa-banner-text span{font-size:11px}
}

/* ════════════════════════════════════════════════
   БЛОГ
   ════════════════════════════════════════════════ */

/* ── TTS-плеер в блог-посте (компактный, одна кнопка по ширине контента) ─ */
.tts-player-compact {
  display: inline-flex;          /* ширина по содержимому - рамка облегает кнопку */
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font-size: 14px;
  /* sticky к верху страницы - плеер всегда виден во время чтения */
  position: sticky;
  top: 10px;
  z-index: 100;
}
.ttsc-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ttsc-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(56,189,248,.35);
}
.ttsc-main:active { transform: translateY(0); }
.tts-player-compact.ttsc-active .ttsc-main {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.ttsc-icon-play, .ttsc-icon-pause { font-size: 12px; line-height: 1 }
.ttsc-label { white-space: nowrap }
.ttsc-progress-wrap {
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.ttsc-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.ttsc-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6);
  border-radius: 999px;
  transition: width .3s ease-out;
}
.ttsc-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim, #94a3b8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.ttsc-stop {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--text, #fff);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.ttsc-stop:hover {
  background: rgba(239,68,68,.3);
  border-color: rgba(239,68,68,.5);
}
.ttsc-stop:active { transform: scale(.92); }
@media (max-width: 600px) {
  .tts-player-compact { gap: 8px; padding: 6px 10px }
  .ttsc-main { padding: 6px 12px; font-size: 13px }
  .ttsc-label { display: none }
  .ttsc-status { font-size: 11px }
}
@media (prefers-reduced-motion: reduce) {
  .tts-player-compact, .ttsc-progress-fill, .ttsc-main { transition: none }
}

/* Подсветка абзаца, который сейчас читается */
.blog-post-content .tts-reading {
  background: linear-gradient(90deg, rgba(56,189,248,.18), rgba(129,140,248,.10));
  border-left: 3px solid #38bdf8;
  padding: 4px 12px 4px 14px;
  margin-left: -14px;
  border-radius: 0 8px 8px 0;
  transition: background .3s ease, border-color .3s ease;
  box-shadow: 0 2px 12px rgba(56,189,248,.15);
}
@media (prefers-reduced-motion: reduce) {
  .blog-post-content .tts-reading { transition: none; }
}

/* Категории блога (chips) */
.blog-cat-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.blog-cat-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  color:var(--text-dim);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition: background-color .15s, border-color .15s, color .15s;
}
.blog-cat-chip:hover{
  background:rgba(56,189,248,.08);
  border-color:rgba(56,189,248,.35);
  color:var(--text);
}
.blog-cat-chip.active{
  background:linear-gradient(135deg,#38bdf8,#818cf8);
  border-color:transparent;
  color:#fff;
}
.blog-cat-chip .n{
  background:rgba(255,255,255,.15);
  padding:1px 7px;
  border-radius:10px;
  font-size:11px;
  font-weight:700;
}

/* Featured post hero */
.blog-featured{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:0;
  margin-bottom:32px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition: background-color .25s, border-color .25s, transform .25s;
  will-change: transform;
}
.blog-featured:hover{
  border-color:rgba(56,189,248,.35);
  transform:translateY(-2px);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.blog-featured-img{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0f172a;
}
.blog-featured-img img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.blog-featured-body{
  padding:32px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.blog-featured-meta{
  font-size:12px;
  color:#fbbf24;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}
.blog-featured-body h2{
  font-size:28px;
  font-weight:800;
  color:var(--text);
  line-height:1.2;
  margin:0;
}
.blog-featured-body p{
  font-size:14px;
  color:var(--text-dim);
  line-height:1.6;
  margin:0;
}
.blog-featured-footer{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:var(--text-dim);
  margin-top:8px;
}
.blog-featured-footer .read-more{
  margin-left:auto;
  color:var(--a1);
  font-weight:700;
}
@media(max-width:860px){
  .blog-featured{grid-template-columns:1fr}
  .blog-featured-body{padding:22px 24px}
  .blog-featured-body h2{font-size:22px}
}

/* Grid карточек постов */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px;
}
.blog-card{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition: background-color .2s, border-color .2s, transform .2s;
  will-change: transform;
}
.blog-card:hover{
  background:rgba(56,189,248,.06);
  border-color:rgba(56,189,248,.35);
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(0,0,0,.3);
}
.blog-card-img{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0f172a;
  display:flex;align-items:center;justify-content:center;
}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-img-placeholder{font-size:48px;opacity:.3}
.blog-card-body{
  padding:16px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.blog-card-cat{
  display:inline-block;
  padding:2px 10px;
  background:rgba(56,189,248,.12);
  color:#8ecfff;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  align-self:flex-start;
}
.blog-card-body h3{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  margin:0;
  line-height:1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.blog-card-body p{
  font-size:13px;
  color:var(--text-dim);
  margin:0;
  line-height:1.5;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.blog-card-meta{
  margin-top:auto;
  padding-top:8px;
  display:flex;
  gap:6px;
  font-size:11px;
  color:var(--text-dim);
}

/* ═══ Страница поста ═══ */

.blog-post{
  max-width:1200px;
  margin:0 auto;
}
.blog-post-header{
  max-width:860px;
  margin:0 auto 28px;
  text-align:center;
}
.blog-post-cat{
  display:inline-block;
  padding:4px 14px;
  background:rgba(56,189,248,.12);
  color:#8ecfff;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none;
  margin-bottom:14px;
}
.blog-post-header h1{
  font-size:38px;
  font-weight:800;
  color:var(--text);
  line-height:1.2;
  margin:0 0 14px;
}
@media(max-width:640px){
  .blog-post-header h1{font-size:26px}
}
.blog-post-meta{
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--text-dim);
}
.blog-post-meta .bm-item{white-space:nowrap}
.blog-post-meta .bm-sep{opacity:.5}

.blog-post-cover{
  max-width:1100px;
  margin:0 auto 32px;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#0f172a;
}
.blog-post-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:980px){.blog-post-cover{border-radius:14px}}

/* TOC + content layout: контент широкий, TOC справа sticky */
.blog-post-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 260px;
  gap:60px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
}
@media(max-width:1080px){
  .blog-post-layout{
    display:block;
    max-width:none;
  }
  .blog-post-layout > .blog-toc{
    position:static;
    max-height:none;
    margin-bottom:20px;
  }
}

.blog-toc{
  position:sticky;
  top:90px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  padding:20px 22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  order:2;
}
.blog-toc-title{
  font-size:11px;
  font-weight:700;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:12px;
}
.blog-toc ol{
  list-style:none;
  padding:0;margin:0;
  counter-reset:toc;
}
.blog-toc li{
  counter-increment:toc;
  margin-bottom:6px;
  font-size:13px;
  line-height:1.4;
}
.blog-toc li::before{
  content:counter(toc) ".";
  color:var(--text-dim);
  margin-right:6px;
  font-weight:600;
}
.blog-toc li.toc-level-3{
  padding-left:16px;
  font-size:12px;
}
.blog-toc a{
  color:var(--text-dim);
  text-decoration:none;
  transition:color .15s;
}
.blog-toc a:hover{color:var(--a1)}

/* Post content */
.blog-post-content{
  order:1;
  min-width:0;
  font-size:17px;
  line-height:1.8;
  color:#d4d4dc;
}
.blog-post-content h2{
  font-size:28px;
  font-weight:800;
  margin:36px 0 14px;
  color:var(--text);
  line-height:1.3;
  scroll-margin-top:80px;
}
.blog-post-content h3{
  font-size:22px;
  font-weight:700;
  margin:28px 0 12px;
  color:var(--text);
  line-height:1.3;
  scroll-margin-top:80px;
}
.blog-post-content h4{
  font-size:18px;
  font-weight:700;
  margin:22px 0 10px;
  color:var(--text);
}
.blog-post-content p{margin:16px 0}
.blog-post-content a{
  color:var(--a1);
  text-decoration:underline;
  text-decoration-color:rgba(56,189,248,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .15s;
}
.blog-post-content a:hover{text-decoration-color:var(--a1)}
.blog-post-content ul,.blog-post-content ol{
  margin:14px 0;
  padding-left:28px;
}
.blog-post-content li{margin:6px 0}
.blog-post-content blockquote{
  border-left:4px solid var(--a1);
  padding:14px 20px;
  margin:20px 0;
  background:rgba(56,189,248,.05);
  border-radius:0 10px 10px 0;
  font-style:italic;
  color:var(--text);
}
.blog-post-content code{
  background:rgba(255,255,255,.08);
  padding:2px 8px;
  border-radius:5px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:14px;
  color:#8ecfff;
}
.blog-post-content pre{
  background:#0a0f1e;
  border:1px solid rgba(255,255,255,.08);
  padding:18px 22px;
  border-radius:12px;
  overflow-x:auto;
  margin:20px 0;
  font-size:13px;
  line-height:1.6;
}
.blog-post-content pre code{
  background:transparent;
  padding:0;color:#e2e8f0;
}
.blog-post-content img{
  max-width:100%;
  border-radius:12px;
  margin:20px 0;
  display:block;
}
.blog-post-content hr{
  border:none;
  border-top:1px solid rgba(255,255,255,.1);
  margin:30px 0;
}

/* Share buttons */
.blog-share{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  max-width:860px;
  margin:40px auto 30px;
  padding:18px 22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.blog-share-label{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-right:8px;
}
.share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.share-btn:hover{transform:scale(1.08)}
.share-tg:hover{background:rgba(42,171,238,.2);border-color:#2aabee}
.share-vk:hover{background:rgba(70,127,207,.2);border-color:#467fcf}
.share-wa:hover{background:rgba(37,211,102,.2);border-color:#25d366}
.share-tw:hover{background:rgba(0,0,0,.4);border-color:#fff}
.share-copy:hover{background:rgba(56,189,248,.2);border-color:var(--a1)}

/* Linked programs block */
.blog-linked-programs{
  max-width:860px;
  margin:40px auto 0;
}
.blog-linked-programs h2,
.blog-related h2{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  margin:0 0 18px;
}

/* Related posts */
.blog-related{
  max-width:1200px;
  margin:40px auto 0;
}

/* ════ SEO internal linking: categories list on homepage ════ */
.seo-categories{
  list-style:none;
  padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.seo-categories a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.seo-categories a:hover{
  background:rgba(56,189,248,.08);
  border-color:rgba(56,189,248,.35);
  transform:translateX(2px);
}
.seo-cat-count{
  background:rgba(56,189,248,.15);
  color:#8ecfff;
  padding:2px 8px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  min-width:28px;
  text-align:center;
}

/* ════ Related programs block (SEO internal linking) ════ */
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.related-card{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition: background-color .2s, border-color .2s, transform .2s;
  will-change: transform;
}
.related-card:hover{
  background:rgba(56,189,248,.06);
  border-color:rgba(56,189,248,.35);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.related-card-img{
  aspect-ratio:16/10;
  background:rgba(255,255,255,.02);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.related-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.related-card-placeholder{font-size:36px;opacity:.3}
.related-card-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:6px}
.related-card-body h3{
  font-size:14px;font-weight:700;color:var(--text);
  margin:0;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.related-card-body p{
  font-size:12px;color:var(--text-dim);
  margin:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.related-card-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;
}
.related-card-rating,.related-card-downloads{
  font-size:11px;font-weight:600;color:var(--text-dim);white-space:nowrap;
}
.related-card-cat{
  display:inline-block;
  padding:2px 8px;
  background:rgba(56,189,248,.12);
  color:#8ecfff;
  border-radius:6px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}

/* ════ FAQ block (для SEO rich snippets) ════ */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:0;
  transition:background .15s;
}
.faq-item[open]{background:rgba(255,255,255,.05)}
.faq-item summary{
  padding:14px 16px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  list-style:none;
  position:relative;
  padding-right:40px;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  position:absolute;
  right:16px;top:50%;
  transform:translateY(-50%);
  font-size:20px;font-weight:400;
  color:var(--a1);
  transition:transform .2s;
}
.faq-item[open] summary::after{content:'−';transform:translateY(-50%) rotate(180deg)}
.faq-item p{
  margin:0;
  padding:0 16px 14px;
  font-size:13px;
  color:var(--text-dim);
  line-height:1.6;
}
.faq-item p code{
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:5px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:11px;
  color:#8ecfff;
}
.faq-item p a{color:var(--a1)}

/* ════ Network warning (medium/slow connection) ════ */
.net-warning{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  margin-top:16px;
  background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.25);
  border-radius:12px;
  font-size:13px;
  color:#fde68a;
  line-height:1.5;
}
.net-warning[hidden]{display:none !important}
.net-warning-icon{font-size:16px;flex-shrink:0;line-height:1.4}
.net-warning-text{flex:1}
.net-warning-text strong{color:#fff}

/* ════ Infinite scroll spinner ════ */
.inf-spinner{
  display:inline-block;
  width:18px;height:18px;
  border:2px solid rgba(255,255,255,.1);
  border-top-color:var(--a1);
  border-radius:50%;
  animation:inf-spin 0.8s linear infinite;
  margin-right:8px;
  vertical-align:middle;
}
@keyframes inf-spin{to{transform:rotate(360deg)}}

/* ════ View Transitions API - плавные переходы между страницами ════ */
/* View Transitions отключены */
@media(max-width:600px){
  .lightbox-nav{width:44px;height:44px;font-size:28px}
  .lightbox-prev{left:12px}
  .lightbox-next{right:12px}
}

/* ════ reviews ════ */

/* Плашка «Ваш отзыв на модерации» в начале списка */
.moderation-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  margin-bottom:16px;
  border-radius:14px;
  border:1px solid rgba(251,191,36,.45);
  background: linear-gradient(180deg, rgba(251,191,36,.12), rgba(251,191,36,.06));
}
.moderation-note-icon{
  font-size:22px;
  line-height:1;
  flex-shrink:0;
}
.moderation-note strong{
  display:block;
  font-size:14px;
  color:#fde68a;
  margin-bottom:4px;
}
.moderation-note p{
  font-size:13px;
  color:#d4d4d8;
  line-height:1.55;
  margin:0;
}

/* Бейджи в шапке отзыва */
.review-badge{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  padding:2px 7px;
  border-radius:6px;
  margin-left:6px;
  text-transform:uppercase;
  letter-spacing:.02em;
  vertical-align:middle;
}
.review-badge--admin{
  background:var(--a1);
  color:#061018;
}
.review-badge--pending{
  background: rgba(251,191,36,.22);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,.55);
}
.review-badge--coins{
  background: rgba(251,191,36,.10);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.30);
  text-transform: none;
  font-weight: 700;
}
.comment-badge-coins{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:#fbbf24;
  background: rgba(251,191,36,.10);
  border: 1px solid rgba(251,191,36,.30);
  border-radius:6px;
  padding:1px 8px;
  margin-left:6px;
  vertical-align:middle;
}

/* Визуальная обводка для pending-отзывов (видно автору и админу) */
.review-item--pending{
  position:relative;
}
.review-item--pending::before{
  content:"";
  position:absolute;
  left:-16px;
  top:8px;
  bottom:8px;
  width:3px;
  background: linear-gradient(180deg, rgba(251,191,36,.9), rgba(251,191,36,.3));
  border-radius:3px;
}

/* Кнопка одобрения в админском режиме */
.review-approve{
  color: #4ade80;
  font-size:12px;
  font-weight:700;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  padding:0;
}
.review-approve:hover{text-decoration:underline}
.review-approve:disabled{opacity:.5;cursor:not-allowed}

.review-item{padding:0;border-bottom:none}
.review-item.popup-card{padding:18px 20px;margin-bottom:14px}
.review-item:last-child{margin-bottom:0}
/* ── Threading: ответ админа под отзывом ступенькой (аналог блога) ── */
.review-thread{margin-bottom:14px}
.review-thread:last-child{margin-bottom:0}
.review-thread .review-item.popup-card{margin-bottom:0}
.review-replies{margin-left:34px;margin-top:8px;padding-left:12px;border-left:2px solid rgba(129,140,248,.25);display:flex;flex-direction:column;gap:8px}
.review-replies .review-item.popup-card{margin-bottom:0}
@media (max-width:600px){.review-replies{margin-left:14px;padding-left:8px}}
.review-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.review-avatar{
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
}
.review-header strong{font-size:14px;color:var(--text)}
.review-date{font-size:12px;color:var(--text-dim);display:block;margin-top:2px}
.review-stars{margin-left:auto;color:var(--warn);font-size:13px}
.review-body{font-size:14px;color:#cbd5e1;line-height:1.7;margin:10px 0 0}
.review-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;align-items:center}
.review-actions:empty{display:none}
.review-delete{
  color: var(--bad);
  font-size:12px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  padding:0;
}
.review-delete:hover{text-decoration:underline}
.admin-reply-btn{
  color: var(--a1);
  font-size:12px;
  background:none;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-family:inherit;
  padding:0;
}
.star-input{display:flex;gap:4px;margin-bottom:12px}
.star-input span{
  font-size:30px;
  cursor:pointer;
  color: rgba(148,163,184,.35);
  transition:color .15s;
  user-select:none;
}
.star-input span.filled{color:var(--warn)}

/* ════ auth pages ════ */
.auth-card,
.profile-card{
  max-width:460px;
  margin:0 auto;
}
/* Профиль шире потому что вкладок 5 штук — иначе "Тема" не помещается */
.profile-card{max-width:640px}
.profile-card.profile-card--wide{max-width:100%}
.auth-card .cardIn,
.profile-card .cardIn{padding:36px 30px}
.auth-card h1,
.profile-card h1{
  text-align:center;
  font-size:22px;
  font-weight:800;
  margin-bottom:24px;
  color:var(--text);
}
.auth-link{
  text-align:center;
  font-size:14px;
  color:var(--text-dim);
  margin-top:16px;
}
.auth-link a{font-weight:700}
.profile-tabs{
  display:flex;
  gap:4px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
  /* Горизонтальный скролл если вкладок много */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.profile-tabs::-webkit-scrollbar{height:4px}
.profile-tabs::-webkit-scrollbar-track{background:transparent}
.profile-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.tab{
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:.2s;
  white-space:nowrap;
  flex-shrink:0;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--a1);border-bottom-color:var(--a1)}
@media (max-width:720px){
  .tab{padding:10px 12px;font-size:13px}
}
.avatar-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.avatar-preview{
  width:100px;height:100px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--line2);
}

/* ════ contacts page layout ════ */
.contactsLayout{display:flex;flex-direction:column;gap:22px}
.contactsRow1{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}
.contactsLeft{display:grid;grid-template-rows:auto auto auto;gap:18px;align-content:start}
.contactsPairRow{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}

/* Форма обратной связи - тянется на всю высоту левой колонки,
   textarea занимает всё свободное место, кнопка «Отправить» прижата вниз. */
.contactsFormWrap{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.contactsFormWrap > .card{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.contactsFormWrap > .card > .cardIn{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.contactsFormWrap form{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.contactsFormWrap .form-group--message{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.contactsFormWrap .form-group--message textarea{
  flex:1;
  min-height:140px;
  resize:vertical;
}
.donate-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.donate-mini{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.donate-mini strong{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--text-dim);
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.donate-mini .payline{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break:break-all;
}
/* Кликабельный payline - кошелёк копируется при клике по самому адресу */
.donate-mini .payline-copy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition:background .15s, border-color .15s, transform .1s;
  margin-top:6px;
  text-align:left;
}
.donate-mini .payline-copy + .payline-copy{margin-top:8px}
.donate-mini .payline-copy:hover{
  background:rgba(56,189,248,.12);
  border-color:rgba(56,189,248,.35);
}
.donate-mini .payline-copy:active{transform:translateY(1px)}
.donate-mini .payline-copy .payline-text{
  font-size:14px;
  font-weight:700;
  flex:1;
  word-break:break-all;
}
.donate-mini .payline-copy .payline-icon{
  flex-shrink:0;
  opacity:.6;
  transition:opacity .15s;
}
.donate-mini .payline-copy:hover .payline-icon{opacity:1;color:var(--a1)}
.donate-mini a{
  font-size:14px;
  font-weight:700;
  color:var(--a1);
  word-break:break-all;
}
.heart{font-size:38px;line-height:1;margin-bottom:12px;display:block}
.center{text-align:center}
.note{font-size:13px;line-height:1.55;color:#cbd5e1;margin:0}
.muted{color:var(--text-dim);margin:0;line-height:1.55}

/* ════ pagination ════ */
.pagination{
  display:flex;
  gap:6px;
  margin-top:28px;
  justify-content:center;
  flex-wrap:wrap;
}
.page-link{
  padding:8px 14px;
  border-radius: var(--radius-xs);
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  text-decoration:none;
  transition:.2s;
}
.page-link:hover{background: rgba(255,255,255,.08);color:var(--text)}
.page-link.active{
  background: var(--a1);
  color:#061018;
  border-color:var(--a1);
}

/* ════ empty state ════ */
.empty-state{
  text-align:center;
  padding:60px 24px;
}
.empty-state p{
  font-size:16px;
  color:var(--text-dim);
  margin-bottom:18px;
}

/* ════ 404 ════ */
.error-404{
  text-align:center;
  padding:60px 24px 40px;
}
.error-404 .big404{
  font-size:100px;
  font-weight:900;
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
  margin-bottom:14px;
}

/* ════ small responsive ════ */
@media (max-width: 900px){
  .program-layout{grid-template-columns:1fr;gap:28px}
}
@media (max-width: 768px){
  /* Мобильное меню: вместо position:absolute делаем flex-wrap в .windowTop,
     чтобы пункты разворачивались вниз, растягивая саму шапку, а не
     накладывались поверх контента. */
  .windowTop{
    flex-wrap: wrap;
    align-items: center;
  }
  .mainNav{display:none}
  .headerActions{display:none}
  .burger{display:block;margin-left:auto}

  body.menu-open .windowTop{
    height: auto;
    padding-top: 14px;
    padding-bottom: 16px;
    row-gap: 6px;
  }
  body.menu-open .mainNav,
  body.menu-open .headerActions{
    display:flex;
    flex-direction:column;
    flex-basis: 100%;
    width: 100%;
    gap: 4px;
    margin: 0;
    align-items: stretch;
  }
  body.menu-open .mainNav{
    order: 3;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
  body.menu-open .mainNav a{padding: 12px 14px}
  body.menu-open .headerActions{
    order: 4;
    padding-top: 6px;
  }
  body.menu-open .headerActions > .userLink,
  body.menu-open .headerActions > .btn{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }
  body.menu-open .headerActions .userLink{
    border: 1px solid var(--line);
  }

  /* Когда burger открыт - скрываем .content и даём .windowTop весь экран
     для прокрутки полного меню (иначе нижние пункты обрезаются) */
  body.menu-open .content{
    display: none;
  }
  body.menu-open .windowTop{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    align-content: flex-start;
  }

  .contactsRow1,
  .contactsPairRow{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .programs-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 480px){
  .features-grid{grid-template-columns:1fr}
  .programs-grid{grid-template-columns:1fr}
  .traffic{gap:8px}
  .dot{width:11px;height:11px}
  .auth-card .cardIn,
  .profile-card .cardIn{padding:14px 12px}
  /* Профиль на узких экранах - убираем лишние отступы */
  .pl-sidebar{padding:12px !important}
  .pl-content{padding:12px !important}
  .pl-section{padding:14px 0}
  .pl-section-title{font-size:14px}
  /* Поля формы - текст не должен вылезать за пределы */
  .form-group input,
  .form-group textarea,
  .form-group select{min-width:0;max-width:100%}
  .form-group [style*="display:flex"]{min-width:0}
  .form-group [style*="display:flex"] > input{min-width:0}

  /* Сетка статистики «Мои данные» - 4 колонки → 2 на мобильнике */
  .pl-content [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }
  /* Уменьшаем размеры внутри карточек статистики */
  .pl-content [style*="grid-template-columns:repeat(4,1fr)"] > div{
    padding:10px !important;
  }
  .pl-content [style*="grid-template-columns:repeat(4,1fr)"] > div > div:first-child{
    font-size:18px !important;
  }
}

/* ════ theme picker (profile → Оформление) ════ */
.theme-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 22px;
  padding: 14px 18px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.theme-active-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background: rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.35);
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
}
.theme-active-tag strong{font-weight:800;color:var(--a1)}
.dot-pulse{
  width:8px;height:8px;border-radius:50%;
  background: var(--a1);
  box-shadow: 0 0 0 0 rgba(56,189,248,.55);
  animation: dotPulse 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes dotPulse{
  0%  {box-shadow: 0 0 0 0 rgba(56,189,248,.55)}
  70% {box-shadow: 0 0 0 8px rgba(56,189,248,0)}
  100%{box-shadow: 0 0 0 0 rgba(56,189,248,0)}
}

.theme-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
  margin:0;
  padding:0;
}

/* Ручной reset <button> без all:unset, который ломает рендеринг в Safari/Chrome */
button.theme-card{
  /* убираем браузерные дефолты кнопки */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;

  /* собственная геометрия */
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 14px 0;
  margin: 0;
  cursor: pointer;

  /* стеклянная карточка */
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
button.theme-card:hover{
  transform: translateY(-4px);
  border-color: rgba(56,189,248,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
}
button.theme-card:focus{outline:none}
button.theme-card:focus-visible{
  outline: none;
  border-color: var(--a1);
  box-shadow: 0 0 0 3px rgba(56,189,248,.35);
}
button.theme-card.is-active{
  border-color: var(--a1);
  background: linear-gradient(180deg, rgba(56,189,248,.09), rgba(139,92,246,.04));
  box-shadow: 0 0 0 2px rgba(56,189,248,.45), 0 18px 42px rgba(0,0,0,.42);
}

/* Превью - принудительная высота, явный display:block */
.theme-card .theme-preview{
  display: block;
  position: relative;
  width: 100%;
  height: 160px;
  min-height: 160px;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(180deg,#050816 0%,#0a1022 45%,#0f172a 100%);
}

/* Окно macOS - абсолютно позиционированное внутри превью */
.theme-card .theme-preview-window{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(12,18,35,.65);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.38);
}

/* Верхняя панель окна */
.theme-card .theme-preview-top{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  flex-shrink: 0;
}
.theme-card .theme-preview-traffic{
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.theme-card .theme-preview-traffic i{
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.35) inset;
}
.theme-card .theme-preview-topbar{
  display: block;
  height: 3px;
  flex: 1;
  border-radius: 999px;
  opacity: .7;
}

/* Тело окна - цветные блоки, без текста */
.theme-card .theme-preview-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 10px 8px;
  gap: 6px;
  min-height: 0;
}
.theme-card .theme-preview-bar{
  display: block;
  height: 5px;
  width: 88%;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.theme-card .theme-preview-bar--title{
  height: 7px;
  width: 70%;
  opacity: .95;
}
.theme-card .theme-preview-bar--short{width: 48%}
.theme-card .theme-preview-tiles{
  display: flex;
  gap: 5px;
  margin-top: auto;
  height: 28px;
}
.theme-card .theme-preview-tiles span{
  display: block;
  flex: 1;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

/* Чекмарк активной темы в углу превью */
.theme-card .theme-check{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #061018;
  box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.18);
  z-index: 3;
}

/* Название темы под превью */
.theme-card .theme-name{
  display: block;
  padding: 12px 14px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

@media (max-width: 640px){
  .theme-grid{grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));gap:14px}
  .theme-card .theme-preview{height:140px;min-height:140px}
}
@media (max-width: 420px){
  .theme-grid{grid-template-columns: 1fr 1fr}
  .theme-card .theme-preview{height:124px;min-height:124px}
  .theme-card .theme-preview-window{top:10px;left:10px;right:10px;bottom:10px}
  .theme-card .theme-name{padding:10px 12px 0;font-size:13px}
}

/* ════ Шапка блока разработчика + inline «Сообщить о проблеме» ════ */
.dev-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.dev-block-header .dev-block-label{
  margin-bottom:0; /* отступ переносим на .dev-block-header */
}
.dev-block-report{
  font-size:10px;
  font-weight:700;
  color:var(--text-dim);
  text-decoration:none;
  padding:3px 9px;
  border-radius:6px;
  white-space:nowrap;
  transition: color .15s ease, background .15s ease;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.dev-block-report:hover{
  color:var(--bad);
  background:rgba(251,113,133,.10);
}

/* ════ Password strength meter ════ */
.pw-strength{
  margin-top:8px;
}
.pw-strength-bar{
  height:4px;
  background: rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:5px;
}
.pw-strength-bar span{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  transition: width .25s ease, background .25s ease;
}
.pw-strength-label{
  font-size:11px;
  font-weight:700;
  color: var(--text-dim);
  letter-spacing:.02em;
  transition: color .25s ease;
}

/* ════ Chip «Собственное / Стороннее» - в той же строке меты, прижат вправо ════ */
.type-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  line-height:1.3;
  border:1px solid transparent;
  /* Прижимаем к правому краю строки меты. flex-shrink:0 - не сжимается. */
  margin-left:auto;
  flex-shrink:0;
}
.type-chip--own{
  background: rgba(34,197,94,.18);
  color:#86efac;
  border-color: rgba(34,197,94,.45);
}
.type-chip--external{
  background: rgba(99,102,241,.20);
  color:#a5b4fc;
  border-color: rgba(99,102,241,.45);
}

/* ════ Badge в заголовке страницы программы ════ */
.program-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.program-title-row h1{margin-bottom:0}
.type-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid transparent;
  flex-shrink:0;
}
.type-badge--own{
  background: rgba(34,197,94,.18);
  color:#86efac;
  border-color: rgba(34,197,94,.50);
}
.type-badge--external{
  background: rgba(99,102,241,.20);
  color:#a5b4fc;
  border-color: rgba(99,102,241,.50);
}

/* ════ Блок «Разработчик» на странице программы ════ */
.dev-block{
  padding:16px 18px;
  margin:0 0 22px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  position:relative;
}
.dev-block--own{
  border-color: rgba(34,197,94,.35);
  background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(34,197,94,.02));
}
.dev-block--external{
  border-color: rgba(99,102,241,.35);
  background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,.02));
}
.dev-block-label{
  font-size:10px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  margin-bottom:4px;
}
.dev-block-name{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
  margin-bottom:6px;
}
.dev-block-meta{
  font-size:12px;
  color:var(--text-dim);
  line-height:1.55;
}

/* ════ /goto.php - interstitial перехода на внешний сайт ════ */
.goto-card{
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.goto-card-label{
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-bottom: 6px;
}
.goto-card-value{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.goto-card-meta{
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}
.goto-card-desc{
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 8px 0 0;
}
.goto-card--dest{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.08);
}
.goto-dest{
  color: var(--a1) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px !important;
}
.goto-disclaimer{
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(251,191,36,.08);
}
.goto-disclaimer p{
  font-size: 13px;
  color: #fde68a;
  line-height: 1.6;
  margin: 0 0 6px;
}
.goto-disclaimer p:last-child{margin-bottom:0}
.goto-disclaimer a{color: var(--a1);text-decoration: underline}
.goto-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.goto-actions .btn{flex: 1; min-width: 160px}

/* ════ публичный профиль пользователя (/user.php) ════ */
.user-profile-head{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}
.user-profile-avatar{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--line2);
  flex-shrink:0;
}
.user-profile-info{flex:1;min-width:260px}
.user-profile-name{
  font-size:clamp(22px,3vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 4px;
  color:var(--text);
}
.user-profile-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stat-chip{
  padding:10px 16px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  min-width:88px;
}
.stat-chip-value{
  font-size:20px;
  font-weight:800;
  color:var(--text);
  line-height:1.1;
}
.stat-chip-label{
  font-size:11px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:700;
  margin-top:4px;
}

.user-reviews{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.user-review-card{position:relative}
.user-review-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.user-review-thumb{
  flex-shrink:0;
  width:88px;
  height:56px;
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
}
.user-review-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.user-review-thumb-placeholder{
  font-size:24px;
  opacity:.5;
}
.user-review-meta{
  flex:1;
  min-width:0;
}
.user-review-program{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
  display:inline-block;
  margin-bottom:4px;
}
.user-review-program:hover{color:var(--a1)}
.user-review-desc{
  font-size:13px;
  margin:0 0 6px;
  line-height:1.5;
}
.user-review-rating{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  flex-wrap:wrap;
}
.user-review-body{
  margin-top:12px;
  font-size:14px;
  color:#cbd5e1;
  line-height:1.65;
  border-top: 1px solid var(--line);
  padding-top:12px;
}

/* Кликабельные имя автора и аватар в попапе отзывов */
.review-avatar-link{
  display:block;
  flex-shrink:0;
  border-radius:50%;
  transition:opacity .15s;
}
.review-avatar-link:hover{opacity:.8}
.review-author-link{
  text-decoration:none;
  color:inherit;
  transition:color .15s;
}
.review-author-link:hover strong{color:var(--a1)}

/* ════ SHA256 row на странице программы ════ */
.sha-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:11px;
}
.sha-label{
  color:var(--text-dim);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  flex-shrink:0;
}
.sha-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color:#cbd5e1;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
  flex:1;
  min-width:0;
}
.sha-value:hover{
  background: rgba(56,189,248,.08);
  color:var(--a1);
  border-color:rgba(56,189,248,.3);
}

/* ════ toast ════ */
.app-toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 40px);
  background: rgba(12,18,35,.92);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2000;
  max-width: calc(100vw - 40px);
}
.app-toast.visible{
  opacity: 1;
  transform: translate(-50%, 0);
}
.app-toast.is-error{
  border-color: rgba(251,113,133,.55);
  background: rgba(44,12,18,.92);
  color: #fecaca;
}

/* ── User profile: badges, socials, online dot, comments ── */
.user-online-dot{
    position:absolute;bottom:6px;right:6px;
    width:18px;height:18px;border-radius:50%;
    background:#4ade80;
    border:3px solid #0e1424;
    box-shadow:0 0 0 0 rgba(74,222,128,.5);
    animation:online-pulse 1.6s ease-in-out infinite;
}
.user-badges{
    display:flex;flex-wrap:wrap;gap:6px;
    margin:10px 0 14px;
}
.user-badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    font-size:12px;font-weight:600;color:var(--text);
}
.user-badge-ico{font-size:14px;line-height:1}
.user-socials{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-top:10px;
}
.user-social{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    color:var(--text);
    text-decoration:none;
    font-size:13px;font-weight:600;
    transition:background .15s, border-color .15s;
}
.user-social:hover{
    background:rgba(56,189,248,.12);
    border-color:rgba(56,189,248,.35);
}
.user-social svg{flex-shrink:0}

.user-blog-comments{display:flex;flex-direction:column;gap:10px}
.user-blog-comment{margin:0}
.user-blog-comment .ubc-post{font-size:13px}

/* ── Skip-link (a11y): появляется при Tab-навигации ── */
.skip-link{
    position:fixed;
    top:8px;
    left:8px;
    z-index:10000;
    background:#2563eb;
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transform:translateY(-150%);
    transition:transform .18s;
}
.skip-link:focus{
    transform:translateY(0);
    outline:2px solid #fff;
    outline-offset:2px;
}

/* ── Trust-box на странице программы (Проверено + Последнее обновление) ── */
.trust-box{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:14px 0 0;
}
.trust-box-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:rgba(74,222,128,.08);
    border:1px solid rgba(74,222,128,.20);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    color:var(--text);
}
.trust-box-item svg{color:#4ade80;flex-shrink:0}
.trust-box-item:nth-child(2){
    background:rgba(56,189,248,.08);
    border-color:rgba(56,189,248,.22);
}
.trust-box-item:nth-child(2) svg{color:#38bdf8}

/* ── Похожие запросы (SEO long-tail на программе) ── */
.related-searches{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.related-search-chip{
    display:inline-block;
    padding:7px 14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    font-size:13px;
    color:var(--text);
    text-decoration:none;
    transition:background .15s, border-color .15s, transform .1s;
}
.related-search-chip:hover{
    background:rgba(56,189,248,.15);
    border-color:rgba(56,189,248,.35);
    color:var(--text);
}
.related-search-chip:active{transform:translateY(1px)}

/* ── Author bio box (E-E-A-T на блог-постах) ── */
.author-bio{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px 20px;
    margin-top:28px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
}
.author-bio-avatar{
    width:64px;height:64px;
    border-radius:50%;
    object-fit:contain;
    background:rgba(255,255,255,.08);
    padding:8px;
    flex-shrink:0;
}
.author-bio-text{flex:1;min-width:0}
.author-bio-name{font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px}
.author-bio-desc{font-size:13px;line-height:1.5;color:var(--text-dim);margin:0 0 8px}
.author-bio-links{font-size:13px}
.author-bio-links a{color:var(--a1);text-decoration:none}
.author-bio-links a:hover{text-decoration:underline}
.author-bio-sep{color:var(--text-dim);opacity:.5;margin:0 6px}
@media(max-width:600px){
    .author-bio{flex-direction:column;align-items:center;text-align:center}
}

/* ── «Читают/смотрят сейчас N» (social proof на программе/блоге) ── */
.reading-now{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    background:rgba(74,222,128,.10);
    border:1px solid rgba(74,222,128,.25);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    color:var(--text);
    margin:6px 0;
}
.reading-now[hidden]{display:none}
.reading-now .rn-dot{
    width:8px;height:8px;border-radius:50%;
    background:#4ade80;
    animation:rn-pulse 1.5s ease-in-out infinite;
    flex-shrink:0;
}
.reading-now .rn-label{color:var(--text-dim);font-weight:500}
.reading-now .rn-count{font-weight:800;color:#4ade80}
@keyframes rn-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
    50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
}

/* ════ copy-chip (рядом с кошельком/ссылкой доната) ════ */
.copy-chip{
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--a1);
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.copy-chip:hover{background: rgba(56,189,248,.20)}
.copy-chip:active{transform: translateY(1px)}

/* ════ share buttons под программой ════ */
.share-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.share-label{
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
  flex-shrink: 0;
}
.share-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.share-btn:hover{transform: translateY(-2px)}
.share-btn svg{
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  display: block;
}

/* Telegram - голубой */
.share-btn--tg{
  color: #7dd3fc;
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.45);
}
.share-btn--tg:hover{
  background: rgba(56,189,248,.24);
  border-color: rgba(56,189,248,.70);
  box-shadow: 0 6px 16px rgba(56,189,248,.25);
}

/* ВКонтакте - индиго */
.share-btn--vk{
  color: #a5b4fc;
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.45);
}
.share-btn--vk:hover{
  background: rgba(99,102,241,.26);
  border-color: rgba(99,102,241,.70);
  box-shadow: 0 6px 16px rgba(99,102,241,.25);
}

/* Копировать - зелёный */
.share-btn--copy{
  color: #86efac;
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.45);
}
.share-btn--copy:hover{
  background: rgba(34,197,94,.24);
  border-color: rgba(34,197,94,.70);
  box-shadow: 0 6px 16px rgba(34,197,94,.25);
}

/* ════ favorite heart button на карточке программы ════ */
.program-card{position: relative}
.fav-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(12,18,35,.70);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.65);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  z-index: 5;
  padding: 0;
  font-family: inherit;
}
.fav-btn:hover{
  transform: scale(1.08);
  background: rgba(251,113,133,.25);
  border-color: rgba(251,113,133,.60);
  color: #fecaca;
}
.fav-btn.is-fav{
  background: rgba(251,113,133,.35);
  border-color: rgba(251,113,133,.85);
  color: #fff;
}
.fav-btn svg{width:18px;height:18px;display:block}
.fav-btn.is-fav svg{fill: currentColor}

/* ── Developer block footer: «Как установить» link under «Сообщить о проблеме» ── */
.dev-block-footer{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.dev-block-install{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #8ecfff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(142,207,255,.25);
  background: rgba(142,207,255,.08);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dev-block-install:hover{
  background: rgba(142,207,255,.15);
  border-color: rgba(142,207,255,.45);
  color: #bfe2ff;
}

/* ── Review «Пожаловаться» button ── */
.review-report-btn{
  background: transparent;
  border: 1px solid rgba(251,113,133,.25);
  color: #fca5a5;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.review-report-btn:hover{
  background: rgba(251,113,133,.12);
  border-color: rgba(251,113,133,.55);
  color: #fecaca;
}

/* ── Report modal ── */
.report-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.report-modal-backdrop.is-open{display: flex}
.report-modal{
  background: rgba(28,28,32,.96);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  color: #f5f5f7;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.report-modal h3{
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.report-modal label{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 600;
}
.report-modal select,
.report-modal textarea{
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f5f5f7;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 14px;
  resize: vertical;
}
.report-modal select:focus,
.report-modal textarea:focus{
  outline: none;
  border-color: rgba(251,113,133,.5);
}
.report-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.report-modal-actions button{
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.report-modal-cancel{
  background: transparent;
  border-color: rgba(255,255,255,.15);
  color: #d4d4d8;
}
.report-modal-cancel:hover{background: rgba(255,255,255,.06)}
.report-modal-submit{
  background: linear-gradient(135deg,#fb7185,#ef4444);
  color: #fff;
}
.report-modal-submit:hover{filter: brightness(1.1)}

/* ── Admin programs filter tabs (used in admin - also available if needed here) ── */

/* ═══════════════════════════════════════════════════════════
   Skeleton screens — показываются пока карточки грузятся через AJAX
   ═══════════════════════════════════════════════════════════ */
@keyframes skel-shimmer {
    0%   { background-position: -468px 0 }
    100% { background-position: 468px 0 }
}
.card-skeleton {
    border: 1px solid var(--line, rgba(255,255,255,.08));
    border-radius: 16px;
    padding: 0;
    background: rgba(255,255,255,.02);
    overflow: hidden;
    animation: none;
}
.card-skeleton .skel-block {
    background: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 100%);
    background-size: 800px 100%;
    animation: skel-shimmer 1.4s infinite linear;
    border-radius: 6px;
}
.card-skeleton .skel-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 0;
}
.card-skeleton .skel-body {
    padding: 14px 16px 18px;
}
.card-skeleton .skel-title {
    height: 18px;
    width: 70%;
    margin-bottom: 10px;
}
.card-skeleton .skel-desc {
    height: 12px;
    width: 100%;
    margin-bottom: 6px;
}
.card-skeleton .skel-desc.short {
    width: 60%;
    margin-bottom: 14px;
}
.card-skeleton .skel-foot {
    height: 20px;
    width: 40%;
}
@media (prefers-reduced-motion: reduce) {
    .card-skeleton .skel-block { animation: none }
}

/* ── Ночной промо-баннер на главной ────────────────────────────── */
.night-banner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 32px 28px;
    background:
        radial-gradient(1200px 400px at 12% -10%, rgba(139, 92, 246, 0.28), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(14, 165, 233, 0.22), transparent 55%),
        linear-gradient(135deg, #1a1340 0%, #0b1530 55%, #0a1a2e 100%);
    border: 1px solid rgba(165, 180, 252, 0.28);
    box-shadow:
        0 20px 60px rgba(76, 29, 149, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    color: #f3f4ff;
    isolation: isolate;
}
.night-banner__glow {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from 140deg, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6, #8b5cf6);
    filter: blur(24px);
    opacity: 0.28;
    z-index: -1;
    animation: nightBannerGlow 14s linear infinite;
}
@keyframes nightBannerGlow {
    to { transform: rotate(360deg) }
}
.night-banner__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    color: rgba(255, 255, 255, 0.55);
}
.night-banner__stars span {
    position: absolute;
    font-size: 14px;
    animation: nightStar 3.4s ease-in-out infinite;
}
.night-banner__stars span:nth-child(1) { top: 12%; left: 7%;  animation-delay: 0s; font-size: 18px; }
.night-banner__stars span:nth-child(2) { top: 68%; left: 15%; animation-delay: 0.8s; }
.night-banner__stars span:nth-child(3) { top: 22%; right: 8%; animation-delay: 1.4s; font-size: 20px; }
.night-banner__stars span:nth-child(4) { top: 82%; right: 18%; animation-delay: 2.1s; }
.night-banner__stars span:nth-child(5) { top: 48%; left: 4%;  animation-delay: 2.8s; font-size: 12px; }
.night-banner__stars span:nth-child(6) { top: 40%; right: 5%; animation-delay: 1.1s; font-size: 16px; }
@keyframes nightStar {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;     transform: scale(1.15); }
}
.night-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.night-banner__badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(139, 92, 246, 0.35));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.25);
    color: #fff;
    margin-bottom: 14px;
}
.night-banner__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #fda4af 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.night-banner__text {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 18px;
}
.night-banner__text strong {
    color: #fde68a;
    font-weight: 700;
}
.night-banner__why {
    margin: 18px auto;
    max-width: 680px;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.night-banner__why-title {
    font-size: 14px;
    font-weight: 700;
    color: #a5b4fc;
    margin-bottom: 6px;
    text-align: left;
}
.night-banner__why-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
    text-align: left;
}
.night-banner__why-text strong {
    color: #fca5a5;
    font-weight: 700;
}
.night-banner__apology {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    margin: 12px 0 22px;
}
.night-banner__cta {
    margin-top: 8px;
    padding: 18px 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18) 0%, rgba(139, 92, 246, 0.22) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.night-banner__cta-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #fff;
}
.night-banner__cta-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 14px;
}
.night-banner__cta-text strong {
    color: #fde68a;
    font-weight: 800;
}
.night-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    color: #0b1022;
    background: linear-gradient(135deg, #fde68a 0%, #fca5a5 50%, #c4b5fd 100%);
    box-shadow:
        0 8px 20px rgba(252, 165, 165, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.night-banner__btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px rgba(252, 165, 165, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.night-banner__btn svg {
    transition: transform 0.2s ease;
}
.night-banner__btn:hover svg {
    transform: translateX(3px);
}
.night-banner__hi {
    font-size: 15px;
    font-weight: 700;
    color: #fde68a;
    margin-top: 4px;
}
@media (max-width: 600px) {
    .night-banner { padding: 22px 16px; border-radius: 18px; }
    .night-banner__title { font-size: 22px; }
    .night-banner__text { font-size: 14.5px; }
    .night-banner__why { padding: 14px 14px; }
    .night-banner__cta { padding: 14px 14px 16px; }
    .night-banner__cta-title { font-size: 16px; }
    .night-banner__btn { padding: 11px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .night-banner__glow  { animation: none }
    .night-banner__stars span { animation: none; opacity: 0.5 }
}

/* ════════════════════════════════════════════════════════════════
   Boss widget (на /games хабе)
═══════════════════════════════════════════════════════════════════ */
.boss-widget{
    display:grid; grid-template-columns:80px 1fr auto; gap:18px; align-items:center;
    background:
        radial-gradient(circle at 90% 50%, rgba(255,90,120,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,90,120,.10), rgba(255,200,60,.05));
    border:1px solid rgba(255,90,120,.32); border-radius:14px;
    padding:16px 22px; margin:14px 0 22px;
    text-decoration:none; color:inherit;
    transition: transform .15s, box-shadow .15s;
}
.boss-widget:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(255,90,120,.18) }
.boss-widget .bw-art{
    width:64px; height:64px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.boss-widget .bw-art img{
    width:64px; height:64px; object-fit:contain;
    filter: drop-shadow(0 4px 12px rgba(255,200,60,.3)) drop-shadow(0 0 16px rgba(255,90,120,.4));
    animation: bw-art-pulse 3s ease-in-out infinite;
}
@keyframes bw-art-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.boss-widget .bw-body{ min-width:0 }
.boss-widget .bw-title{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:3px}
.boss-widget .bw-name{color:#ffb0c0;font-size:12.5px;margin-bottom:7px}
.boss-widget .bw-bar{
    height:7px; border-radius:4px; background:rgba(0,0,0,.4);
    border:1px solid rgba(255,90,120,.32); overflow:hidden; max-width:340px;
}
.boss-widget .bw-bar > i{
    display:block; height:100%;
    background:linear-gradient(90deg, #ff5a78, #ff7a18 60%, #ffc63a);
}
.boss-widget .bw-meta{
    display:flex; gap:12px; margin-top:6px; font-size:11.5px; color:var(--text-dim);
}
.boss-widget .bw-meta b{color:#ffd980;font-weight:800;font-family:ui-monospace,Menlo,monospace}
.boss-widget .bw-cta{
    background:linear-gradient(135deg, #ff5a78, #ff7a18);
    color:#fff; padding:10px 18px; border-radius:9px;
    font-weight:800; font-size:13px;
    box-shadow:0 4px 14px rgba(255,90,120,.35);
    flex-shrink:0;
}

/* ════════════════════════════════════════════════════════════════
   Boss damage toast (тост при ударе - в правом нижнем углу)
═══════════════════════════════════════════════════════════════════ */
.boss-toast-stack{
    position:fixed; bottom:20px; right:20px;
    display:flex; flex-direction:column; gap:8px;
    z-index:9998; max-width:340px; pointer-events:none;
}
.boss-toast{
    pointer-events:auto;
    background:linear-gradient(180deg, rgba(40,15,30,.96), rgba(20,10,20,.96));
    border:1px solid rgba(255,90,120,.42);
    border-radius:12px; padding:12px 14px;
    display:flex; gap:12px; align-items:center;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 14px 36px rgba(255,90,120,.22);
    color:#fff; font-size:13px;
    animation: boss-toast-in .55s cubic-bezier(.34,1.56,.64,1) forwards;
    transform: translateX(110%); opacity:0;
}
.boss-toast.crit{
    border-color:rgba(255,200,60,.55);
    box-shadow:0 14px 36px rgba(255,200,60,.32);
}
.boss-toast.fade-out{ animation: boss-toast-out .35s ease forwards }
@keyframes boss-toast-in { to{transform:translateX(0);opacity:1} }
@keyframes boss-toast-out{ to{transform:translateX(110%);opacity:0} }
.boss-toast .icon{ font-size:24px; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(255,90,120,.5)) }
.boss-toast.crit .icon{ filter:drop-shadow(0 0 10px rgba(255,200,60,.6)) }
.boss-toast .body{flex:1;min-width:0}
.boss-toast .heading{font-size:10.5px;font-weight:700;color:#ffb0c0;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.boss-toast.crit .heading{color:#ffd980}
.boss-toast .big{font-size:15px;font-weight:800}
.boss-toast .big b{
    background:linear-gradient(135deg, #ff5a78, #ffd83a);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    font-family:ui-monospace,Menlo,monospace;
}
.boss-toast .footer{font-size:11px;color:rgba(255,255,255,.55);margin-top:1px}

/* ════════════════════════════════════════════════════════════════
   Boss slim banner (на страницах конкретных игр)
═══════════════════════════════════════════════════════════════════ */
.boss-slim{
    display:flex; align-items:center; gap:12px;
    background: linear-gradient(180deg, rgba(255,90,120,.10), rgba(255,90,120,.02));
    border:1px solid rgba(255,90,120,.28);
    border-radius:10px; padding:10px 14px; font-size:12.5px;
    margin:14px 0; text-decoration:none; color:inherit;
}
.boss-slim:hover{background:rgba(255,90,120,.10);border-color:rgba(255,90,120,.4)}
.boss-slim .em{font-size:22px}
.boss-slim .text{flex:1;line-height:1.4;color:var(--text-dim)}
.boss-slim .text b{color:#ffb0c0}
.boss-slim .bar-mini{display:inline-block;width:60px;height:6px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden;vertical-align:middle;margin:0 4px;border:1px solid rgba(255,90,120,.3)}
.boss-slim .bar-mini i{display:block;height:100%;background:linear-gradient(90deg,#ff5a78,#ffc63a)}
.boss-slim .link{color:#ff8896;text-decoration:none;font-weight:700;white-space:nowrap}

/* ─── Letter Hunt: подсветка буквы в блог-постах ─── */
.letter-hint{
  display:inline-block;
  background:linear-gradient(135deg,#fde68a,#fbbf24);
  color:#451a03;
  padding:1px 5px;
  border-radius:4px;
  font-weight:800;
  font-family:ui-monospace,Menlo,monospace;
  box-shadow:0 0 0 2px rgba(251,191,36,.25),0 2px 8px rgba(251,191,36,.4);
  cursor:help;
  position:relative;
  animation:lh-letter-glow 2.4s ease-in-out infinite;
  user-select:none;
}
@keyframes lh-letter-glow{
  0%,100%{box-shadow:0 0 0 2px rgba(251,191,36,.25),0 2px 8px rgba(251,191,36,.4);transform:scale(1)}
  50%{box-shadow:0 0 0 4px rgba(251,191,36,.45),0 4px 18px rgba(251,191,36,.7);transform:scale(1.08)}
}

/* ─── Letter Hunt: плавающая плашка-подсказка на странице блога ─── */
.lh-floating{
  position:fixed;
  bottom:20px;
  right:20px;
  width:330px;
  max-width:calc(100vw - 40px);
  background:linear-gradient(135deg,rgba(251,191,36,.95),rgba(251,146,60,.92));
  color:#0c1117;
  border-radius:14px;
  padding:16px 18px 16px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 1px rgba(251,191,36,.5);
  z-index:9998;
  display:flex;
  gap:12px;
  align-items:flex-start;
  animation:lh-floating-in .35s ease-out;
}
@keyframes lh-floating-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.lh-floating-icon{font-size:32px;line-height:1;flex-shrink:0;animation:lh-floating-icon-pulse 2s ease-in-out infinite}
@keyframes lh-floating-icon-pulse{50%{transform:scale(1.12) rotate(-5deg)}}
.lh-floating-body{flex:1;min-width:0}
.lh-floating-title{font-size:14px;font-weight:800;margin-bottom:4px;line-height:1.3}
.lh-floating-text{font-size:12px;line-height:1.5;margin-bottom:10px;color:rgba(12,17,23,.85)}
.lh-floating-text strong{color:#0c1117;font-weight:800}
.lh-floating-actions{display:flex;gap:6px;flex-wrap:wrap}
.lh-floating-btn{display:inline-block;padding:6px 12px;background:#0c1117;color:#fbbf24;text-decoration:none;border-radius:8px;font-size:12px;font-weight:700;transition:transform .15s}
.lh-floating-btn:hover{transform:translateY(-1px);text-decoration:none;color:#fde68a}
.lh-floating-btn-sec{display:inline-block;padding:6px 10px;background:rgba(0,0,0,.15);color:rgba(12,17,23,.8);text-decoration:none;border-radius:8px;font-size:12px;font-weight:600}
.lh-floating-btn-sec:hover{background:rgba(0,0,0,.25);color:#0c1117;text-decoration:none}
.lh-floating-close{position:absolute;top:6px;right:8px;width:22px;height:22px;border:0;background:transparent;color:rgba(12,17,23,.5);font-size:18px;font-weight:800;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.lh-floating-close:hover{background:rgba(0,0,0,.1);color:#0c1117}
@media (max-width:640px){
  .lh-floating{bottom:10px;right:10px;width:calc(100vw - 20px);padding:12px 14px}
}

/* ─── Letter Hunt: интерактивность буквы (клик + анимация + toast) ─── */
.letter-hint{
  cursor:pointer;
  outline:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.letter-hint:hover{transform:scale(1.18);box-shadow:0 0 0 4px rgba(251,191,36,.5),0 4px 18px rgba(251,191,36,.7)}
.letter-hint:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(251,191,36,.7)}
.letter-hint.collected{
  background:linear-gradient(135deg,#bbf7d0,#86efac) !important;
  color:#14532d !important;
  cursor:default;
  box-shadow:0 0 0 1px rgba(34,197,94,.3) !important;
  animation:none !important;
  opacity:.7;
}
.letter-hint.collected::after{
  content:' ✓';
  font-size:.7em;
  vertical-align:1px;
  color:#16a34a;
  font-weight:800;
}
.letter-hint.lh-fly{
  animation:none !important;
  margin:0 !important;
}

/* Toast */
.lh-toast{
  position:fixed;
  top:-80px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 24px;
  background:linear-gradient(135deg,#0c1117,#1a1f29);
  color:#fbbf24;
  border:1px solid rgba(251,191,36,.5);
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  z-index:99999;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  transition:top .35s cubic-bezier(.5,-.2,.7,1.4);
  max-width:90%;
  text-align:center;
  pointer-events:none;
}
.lh-toast.show{top:80px}
.lh-toast-ok{border-color:rgba(126,231,135,.5);color:#7be787}
.lh-toast-err{border-color:rgba(239,68,68,.5);color:#f87171}