/* The leak tests: DNS (English and Turkish) and "Is my VPN working". They sit on the
   .toolbox panel from site-v2.css. Heights are set up front, so nothing below the card
   moves when the results come in. */
.toolbox{padding:clamp(14px,3vw,40px)}
.test-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(30,50,140,.45)}

.test-head{padding:26px clamp(20px,4vw,36px) 22px;border-bottom:1px solid var(--line)}
.test-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.test-state{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.test-state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.test-state[data-state="running"]{color:var(--cf)}
.test-state[data-state="running"]::before{animation:lt-pulse 1s ease-in-out infinite alternate}
.test-state[data-state="pass"]{color:#15803d}
.test-state[data-state="leak"]{color:#dc2626}
.test-state[data-state="novpn"]{color:#b45309}
.test-again{border:0;background:none;padding:6px 0;color:var(--ink-3);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.test-again:hover{color:var(--ink)}
.test-again[hidden]{display:block;visibility:hidden}
.test-verdict{margin:12px 0 0;min-height:2.6em;font-size:clamp(20px,2.4vw,25px);line-height:1.3;letter-spacing:-.025em;font-weight:650;color:var(--ink)}

/* Result rows: DNS servers, or the four checks. */
.test-rows{min-height:132px}
.test-rows.checks{min-height:0}
.test-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:66px;padding:12px clamp(20px,4vw,36px);border-bottom:1px solid var(--line)}
.test-row:last-child{border-bottom:0}
.test-row .flag{font-size:20px;line-height:1;text-align:center}
.test-row .num{color:var(--ink-4);font-size:13px;font-weight:600;text-align:center}
.test-row .ip{display:block;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.test-row .name{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.test-row .who{display:block;margin-top:2px;color:var(--ink-3);font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.test-row.wait .ip,.test-row.wait .who{width:62%;height:12px;margin:5px 0;border-radius:6px;background:linear-gradient(90deg,var(--bg-3),var(--bg-2),var(--bg-3));background-size:200% 100%;animation:lt-shimmer 1.2s linear infinite}
.test-row.wait .who{width:40%}
.test-rows .empty{margin:0;padding:22px clamp(20px,4vw,36px);color:var(--ink-3);font-size:15px}

.tag{padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink-2);font-size:12px;font-weight:600;white-space:nowrap}
.tag.ok{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}
.tag.leak{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.tag.warn{color:#92400e;background:#fffbeb;border-color:#fde68a}
.tag.wait{color:var(--ink-4)}

/* One sentence and one button under the result. */
.test-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;min-height:100px;padding:22px clamp(20px,4vw,36px);background:var(--cf-soft);border-top:1px solid var(--line)}
.test-foot p{flex:1 1 260px;margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.test-foot .btn[hidden]{display:none}

@keyframes lt-pulse{from{opacity:.35}to{opacity:1}}
@keyframes lt-shimmer{from{background-position:200% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .test-state[data-state="running"]::before,.test-row.wait .ip,.test-row.wait .who{animation:none}
}
@media (max-width:650px){
  .test-row{grid-template-columns:24px minmax(0,1fr);gap:4px 12px}
  .test-row .tag{grid-column:2;justify-self:start;margin-top:6px}
  .test-rows{min-height:190px}
}