/* ====== Base ====== */
:root{
  --bg: #ffffff;
  --fg: #111111;
  --subtle: #8a8a8a;
  --muted: #bdbdbd;
  --line: #e8e8e8;
  --brand: #111111;         /* минимализм: чёрный как акцент */
  --badge-ge: #0d6efd;      /* GE */
  --badge-eu: #6c757d;      /* EU */
}

*{box-sizing:border-box;}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ====== Layout ====== */
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.brand{
  font-weight: 800;
  letter-spacing: .2px;
}
.note{
  color: var(--subtle);
  font-size: 12px;
}

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1.1fr 0.9fr; gap: 22px; }
}

/* ====== Card ====== */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 16px;
}
.card h3{ margin:0 0 12px 0; font-size:16px; font-weight:700; }

/* ====== Key-value rows ====== */
.kv{
  display:grid; grid-template-columns:140px 1fr;
  align-items:center; gap:8px;
  padding:8px 0; border-bottom:1px solid #f2f2f2;
}
.kv b{ font-weight:600; }
.kv:last-child{ border-bottom:0; }

/* ====== Button ====== */
.btn{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:600;
  transition:transform .06s ease, opacity .2s ease, background .2s ease;
}
.btn:disabled{ opacity:.55; cursor:default; }
.btn:active{ transform:scale(.98); }

/* ====== Speed dial (ультра-минимализм) ====== */
.speed{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:360px;
}
@media (min-width: 900px){ .speed{ min-height:420px; } }

/* ----- Dial (чистая реализация без mask; толщина = --ring) ----- */
.dial{
  --size: min(82vw, 520px);
  --ring: 8px;           /* ТОЛЩИНА кольца: 6–10px по вкусу */
  --start: 225deg;       /* начало 270° дуги */
  width: var(--size);
  aspect-ratio: 1/1;
  position: relative;
  margin: 6px auto 0;

  /* Сброс любых старых стилей */
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}

/* Рисуем прогресс и трек на всём круге */
.dial::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:
    /* ПРОГРЕСС: var(--p) * 0.75  => максимум 75% круга (=270°) */
    conic-gradient(from var(--start),
      var(--fg) calc(var(--p, 0) * 0.75),
      #0000 0),
    /* ТРЕК: 75% круга */
    conic-gradient(from var(--start),
      #eee 75%,
      #0000 0);
}

/* Белая «втулка» внутри: её inset = толщина кольца */
.dial::after{
  content:"";
  position:absolute;
  inset: var(--ring);     /* ← толщина кольца */
  background:#fff;
  border-radius:50%;
  z-index:1;
}

/* Цифры и статус поверх */
.num{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  font-weight:800; line-height:1; letter-spacing:-0.02em;
  font-size: clamp(40px, 12vw, 96px);
}
.num::after{
  content:"Mbps";
  display:block; text-transform:uppercase; letter-spacing:.35em;
  color:#8a8a8a; font-size:10px; margin-top:8px;
}
.status{
  position:absolute; left:0; right:0; bottom:18px; z-index:2;
  text-align:center; color:#8a8a8a; font-size:12px;
}


/* ====== Results table ====== */
.results{ padding:10px 0 2px; }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th, .table td{
  padding:10px 10px; text-align:left; border-bottom:1px solid #f2f2f2;
}
.table thead th{
  font-size:12px; color:var(--subtle); font-weight:600; border-bottom:1px solid var(--line);
}

/* Badges */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:18px; padding:0 6px;
  border-radius:999px; font-size:11px; font-weight:700; color:#fff;
}
.badge.ge{ background:var(--badge-ge); }
.badge.eu{ background:var(--badge-eu); }

/* Footnote in first card */
.card .foot{ margin-top:10px; color:var(--subtle); font-size:12px; }

/* Small helpers */
.ip{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

@media (max-width: 480px){
  .kv{ grid-template-columns:1fr; gap:4px; }
  /* скрыть «Примечание» на узких экранах */
  .table th:nth-child(3), .table td:nth-child(3){ display:none; }
}