/* Geodema DNS — стили подстраниц (test), подключаются после site.css */

/* ===== Колонка страницы ===== */
.test-col{display:flex;flex-direction:column;gap:72px;max-width:800px;margin:0 auto 100px}
.test-title{margin-bottom:24px;font-size:clamp(28px,3.4vw,40px);text-align:center}
/* в site.css h3 после .card__icon тянется (flex:1 1 0): в колонке карточки лишняя высота уходила бы под заголовок, а не к кнопке */
.test-col .card__icon + h3{flex:none}
.test-back{margin-top:-16px;text-align:center}
.test-back .link-arrow:hover{color:#171717}
#recs-section{scroll-margin-top:24px}

/* ===== Белые карточки ===== */
.test-state,.test-net,.test-recs{border:1px solid rgba(145,123,230,.16);border-radius:28px;background:#fff;box-shadow:0 20px 40px rgba(145,123,230,.08)}
/* состояния и рекомендации показывает скрипт страницы — мягкое появление */
.test-state,.test-recs{animation:test-in .5s cubic-bezier(.22,1,.36,1)}
@keyframes test-in{from{opacity:0;transform:translateY(10px)}}

/* ===== Состояния проверки: акцент 4px сверху (--bar), плитка иконки (--soft, --tone) ===== */
.test-state{--bar:#917be6;--tone:#917be6;--soft:#f1edfc;display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 40px 40px;background:linear-gradient(var(--bar),var(--bar)) top/100% 4px no-repeat border-box,#fff;text-align:center}
.test-state--ok{--bar:#d1f701;--tone:#171717;--soft:#d1f701}
.test-state--partial{--bar:#f59e0b;--tone:#d97706;--soft:#fef3c7}
.test-state--fail{--bar:#ef4444;--tone:#dc2626;--soft:#fee2e2}
.test-state--muted{--bar:#d4d4dc}
.test-state h3{font-size:clamp(22px,2.6vw,28px);font-weight:700}
.test-state p{max-width:600px}
.test-state > .btn,.test-state > .actions{margin-top:8px}
.test-state > .actions{align-self:stretch}
.test-state__icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:4px;border-radius:50%;background:var(--soft);color:var(--tone)}
.test-state__icon svg{width:36px;height:36px}
.test-state__count{color:#171717;font-weight:700}
.test-note{width:100%;padding:12px 18px;border-radius:16px;background:#f7f8fa;font-size:14px;line-height:1.55}
.test-note--good{background:rgba(209,247,1,.18)}
.test-note--warn{background:#fff4dc}
.test-note .mono{color:#171717}

/* ===== Загрузка: точки в плитке и прогресс (ширину бара ставит скрипт) ===== */
.test-dots{gap:6px}
.test-dots span{width:10px;height:10px;border-radius:50%;background:#917be6;animation:test-pulse 1.5s ease-in-out infinite}
.test-dots span:nth-child(2){animation-delay:.2s}
.test-dots span:nth-child(3){animation-delay:.4s}
@keyframes test-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:none}}
.test-progress{width:100%;max-width:520px;height:8px;margin-top:10px;overflow:hidden;border-radius:999px;background:#f0f3fd}
.test-progress__bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,#917be6,#b9a9f2);transition:width 1.25s linear}

/* ===== Информация о сети ===== */
.test-net{margin:0;padding:6px 32px}
.test-net__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;padding:18px 0}
.test-net__row + .test-net__row{border-top:1px solid rgba(23,23,23,.06)}
.test-net dt{color:#6b6b6b}
.test-net dd{flex:1 1 220px;min-width:0;margin:0;color:#171717;font-weight:500;text-align:right;overflow-wrap:anywhere}
.test-net .mono{font-size:15px;font-weight:400}

/* ===== Рекомендации ===== */
.test-recs{display:flex;flex-direction:column;gap:16px;padding:40px}
.test-recs h3{font-size:clamp(20px,2.4vw,24px);font-weight:700}
.test-recs ol{display:grid;gap:18px;padding:0;list-style:none;counter-reset:rec}
.test-recs li{position:relative;padding-left:46px;color:#3d3d3d;counter-increment:rec}
.test-recs li::before{content:counter(rec);position:absolute;top:-2px;left:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#d1f701;color:#171717;font:700 14px/1 Manrope,sans-serif}
.test-recs .mono{padding:.1em .45em;border-radius:8px;background:#f0f3fd;color:#5945fd;font-size:.9em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.test-recs__help{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px;padding-top:24px;border-top:1px solid rgba(23,23,23,.08);text-align:center}

/* ===== Адаптив ===== */
@media (max-width:640px){
  .test-col{gap:56px;margin-bottom:64px}
  .test-back{margin-top:-8px}
  .test-state{gap:12px;padding:36px 20px 28px;border-radius:24px}
  .test-state__icon{width:64px;height:64px}
  .test-state__icon svg{width:32px;height:32px}
  .test-note{padding:12px 14px}
  .test-net{padding:4px 20px;border-radius:24px}
  .test-net__row{flex-direction:column;align-items:stretch;gap:2px;padding:14px 0}
  .test-net dt{font-size:14px}
  .test-net dd{flex:none;text-align:left}
  .test-recs{padding:28px 20px;border-radius:24px}
  .test-recs li{padding-left:42px}
}
@media (prefers-reduced-motion:reduce){
  .test-state,.test-recs,.test-dots span{animation:none}
  .test-dots span{opacity:1}
  .test-progress__bar{transition:none}
}