/* ===== VeilNode Speedtest — стиль синхронизирован с veilnode.ru ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#080C14;color:#CBD5E1;line-height:1.6;min-height:100vh;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
small{font-size:.6em;color:#556880;font-weight:500}
[hidden]{display:none!important}   /* иначе .stage{display:flex} перебивает атрибут hidden */

.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* ===== Кнопки ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:12px;cursor:pointer;transition:all .25s;border:none;font-family:inherit;font-size:.95rem;letter-spacing:.01em}
.btn-primary{background:linear-gradient(135deg,#1A8CFF,#0A6FD4);color:#fff;padding:12px 28px}
.btn-primary:hover{background:linear-gradient(135deg,#3DA0FF,#1A8CFF);transform:translateY(-1px);box-shadow:0 8px 30px rgba(26,140,255,.3)}
.btn-outline{background:transparent;border:1.5px solid rgba(26,140,255,.4);color:#1A8CFF;padding:12px 28px}
.btn-outline:hover{border-color:#1A8CFF;background:rgba(26,140,255,.08)}
.btn-nav{padding:10px 22px;font-size:.9rem}

/* ===== Фоновое свечение ===== */
.bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.bg-glow--1{width:600px;height:600px;top:-200px;left:-150px;background:radial-gradient(circle,rgba(26,140,255,.22),transparent 70%)}
.bg-glow--2{width:500px;height:500px;bottom:-180px;right:-120px;background:radial-gradient(circle,rgba(10,111,212,.16),transparent 70%)}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(26,140,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,140,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%)}

/* ===== Хедер ===== */
.header{position:sticky;top:0;z-index:100;background:rgba(8,12,20,.8);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav{display:flex;align-items:center;height:68px;gap:20px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:34px;height:34px}
.logo-text{font-size:1.1rem;font-weight:700;color:#fff}
.nav .btn-nav{margin-left:auto}

/* ===== Основной каркас ===== */
.main{min-height:calc(100vh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:48px;padding-bottom:64px}
.stage{width:100%;display:flex;flex-direction:column;align-items:center;animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ===== Экран старта ===== */
.stage--intro{text-align:center}
.intro-title{font-size:3rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.intro-sub{font-size:1.15rem;color:#8899B0;max-width:560px;margin:18px auto 0}

.start-btn{position:relative;width:220px;height:220px;margin:48px 0 8px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.start-btn__core{position:relative;z-index:3;width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#1A8CFF,#0A6FD4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 12px 50px rgba(26,140,255,.45),inset 0 2px 12px rgba(255,255,255,.2);transition:transform .25s}
.start-btn:hover .start-btn__core{transform:scale(1.05)}
.start-btn:active .start-btn__core{transform:scale(.97)}
.start-btn__label{color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.start-btn__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(26,140,255,.4);animation:startPulse 2.6s ease-out infinite}
.start-btn__ring--2{animation-delay:1.3s}
@keyframes startPulse{0%{transform:scale(.68);opacity:.9}100%{transform:scale(1.05);opacity:0}}

.intro-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px;max-width:560px}
.intro-chips li{font-size:.85rem;color:#8FB4D8;background:rgba(26,140,255,.08);border:1px solid rgba(26,140,255,.18);border-radius:999px;padding:6px 16px}
.intro-note{margin-top:28px;font-size:.85rem;color:#556880}

/* ===== Метр (процесс + результат) ===== */
.stage--test{text-align:center}
.meter{position:relative;width:260px;height:260px}
.meter__svg{width:100%;height:100%;transform:rotate(-90deg)}
.meter__track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:14}
.meter__fill{fill:none;stroke:#1A8CFF;stroke-width:14;stroke-linecap:round;stroke-dasharray:603;stroke-dashoffset:603;transition:stroke-dashoffset .4s ease;filter:drop-shadow(0 0 8px rgba(26,140,255,.5))}
.meter__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.meter__value{font-size:3.4rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.meter__unit{font-size:.95rem;color:#556880;margin-top:6px;font-weight:500}

.phase{margin-top:28px;font-size:1.1rem;font-weight:600;color:#8FB4D8;min-height:1.6em}

.livestats{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.livestat{background:linear-gradient(145deg,rgba(14,22,36,.8),rgba(10,16,28,.9));border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 22px;min-width:120px}
.livestat__label{display:block;font-size:.78rem;color:#556880;margin-bottom:4px}
.livestat__value{display:block;font-size:1.25rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

/* ===== Результаты ===== */
.stage--results{max-width:760px}

.results-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:22px}
.results-top__title{font-size:1.1rem;font-weight:700;color:#fff}
.rescan-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;color:#1A8CFF;background:rgba(26,140,255,.1);border:1.5px solid rgba(26,140,255,.4);transition:all .2s;white-space:nowrap;flex-shrink:0}
.rescan-btn:hover{background:rgba(26,140,255,.18);border-color:#1A8CFF;transform:translateY(-1px)}
.rescan-btn__icon{transition:transform .5s ease}
.rescan-btn:hover .rescan-btn__icon{transform:rotate(-180deg)}

.verdict{text-align:center;width:100%;border-radius:24px;padding:36px 32px;margin-bottom:28px;border:1px solid rgba(255,255,255,.08)}
.verdict--good{background:linear-gradient(145deg,rgba(0,200,120,.14),rgba(10,16,28,.6));border-color:rgba(0,200,120,.35)}
.verdict--warn{background:linear-gradient(145deg,rgba(251,180,36,.14),rgba(10,16,28,.6));border-color:rgba(251,180,36,.35)}
.verdict--bad{background:linear-gradient(145deg,rgba(251,80,80,.14),rgba(10,16,28,.6));border-color:rgba(251,80,80,.35)}
.verdict__emoji{font-size:3rem;line-height:1}
.verdict__title{font-size:1.7rem;font-weight:800;color:#fff;margin:12px 0 8px;letter-spacing:-.01em}
.verdict__text{font-size:1rem;color:#B8C6DA;max-width:540px;margin:0 auto}

.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin-bottom:36px}
.summary-card{background:linear-gradient(145deg,rgba(14,22,36,.8),rgba(10,16,28,.9));border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:22px 20px;text-align:center}
.summary-card__label{font-size:.82rem;color:#556880;margin-bottom:10px}
.summary-card__value{font-size:2rem;font-weight:800;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.summary-card__value--yt{font-size:1.25rem}
.summary-card--yt{background:linear-gradient(145deg,rgba(26,140,255,.12),rgba(10,16,28,.85));border-color:rgba(26,140,255,.28)}

.block-title{align-self:flex-start;font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:16px}

.services{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:36px}
.svc{display:flex;align-items:center;gap:14px;background:linear-gradient(145deg,rgba(14,22,36,.8),rgba(10,16,28,.9));border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;animation:fadeUp .4s ease both}
.svc__logo{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1rem;flex-shrink:0}
.svc__body{flex:1;min-width:0}
.svc__name{font-size:.98rem;font-weight:600;color:#fff}
.svc__meta{font-size:.8rem;color:#556880}
.svc__status{font-size:.82rem;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.svc__status--ok{color:#00C87A;background:rgba(0,200,122,.12);border:1px solid rgba(0,200,122,.3)}
.svc__status--slow{color:#FBB424;background:rgba(251,180,36,.12);border:1px solid rgba(251,180,36,.3)}
.svc__status--bad{color:#FF6B6B;background:rgba(251,80,80,.12);border:1px solid rgba(251,80,80,.3)}
.svc__status--wait{color:#556880;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.svc--pending{opacity:.55}

/* ===== CTA ===== */
.cta{display:flex;align-items:center;gap:22px;width:100%;background:linear-gradient(145deg,rgba(26,140,255,.1),rgba(14,22,36,.9));border:1px solid rgba(26,140,255,.3);border-radius:20px;padding:26px 28px;margin-bottom:32px}
.cta__icon{width:56px;height:56px;border-radius:14px;background:rgba(26,140,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta__body{flex:1;min-width:0}
.cta__body h3{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:6px}
.cta__body p{font-size:.9rem;color:#8899B0;line-height:1.6}
.cta__btn{flex-shrink:0;white-space:nowrap}

/* ===== Поделиться ===== */
.share{width:100%;text-align:center;margin-bottom:28px}
.share__label{display:block;font-size:.85rem;color:#556880;margin-bottom:14px}
.share__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#CBD5E1;transition:all .2s;font-family:inherit}
.share-btn:hover{transform:translateY(-1px)}
.share-btn--native{background:linear-gradient(135deg,#1A8CFF,#0A6FD4);color:#fff;border-color:transparent}
.share-btn--tg{color:#4FB4E8}
.share-btn--tg:hover{background:rgba(34,158,217,.14);border-color:rgba(34,158,217,.4)}
.share-btn--vk{color:#5A93F5}
.share-btn--vk:hover{background:rgba(0,119,255,.14);border-color:rgba(0,119,255,.4)}
.share-btn--copy:hover{background:rgba(255,255,255,.1);color:#fff}

.retry-btn{margin-top:4px}

/* ===== Футер ===== */
.footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-note{font-size:.8rem;color:#3E5068;max-width:460px;text-align:right}

/* ===== Toast ===== */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#22C55E;padding:12px 26px;border-radius:12px;font-weight:600;font-size:.92rem;z-index:1000;transition:transform .3s,opacity .3s;opacity:0;pointer-events:none;backdrop-filter:blur(12px)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ===== Адаптив ===== */
@media(max-width:680px){
    .intro-title{font-size:2.1rem}
    .intro-sub{font-size:1rem}
    .start-btn{width:190px;height:190px}
    .start-btn__core{width:132px;height:132px}
    .meter{width:220px;height:220px}
    .meter__value{font-size:2.8rem}
    .summary-grid{grid-template-columns:1fr;gap:12px}
    .summary-card{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:16px 18px}
    .summary-card__label{margin-bottom:0}
    .summary-card__value{font-size:1.5rem}
    .summary-card__value--yt{font-size:1.15rem}
    .services{grid-template-columns:1fr}
    .cta{flex-direction:column;text-align:center}
    .cta__btn{width:100%}
    .footer-inner{flex-direction:column;text-align:center}
    .footer-note{text-align:center}
}