/* BitarNet Speed Test — iframe skin (LibreSpeed engine, custom chrome) */

:root {
  --bn-brand-300: #67e8f9;
  --bn-brand-400: #22d3ee;
  --bn-brand-500: #06b6d4;
  --bn-brand-600: #0891b2;
  --bn-brand-700: #0e7490;
  --bn-surface: #0c1520;
  --bn-surface-2: #111c2a;
  --bn-border: rgba(34, 211, 238, 0.22);
  --bn-text: #e8f4f8;
  --bn-text-soft: #94b8c4;
  --bn-ring-empty: rgba(148, 184, 196, 0.2);
  --bn-ring-fill: var(--bn-brand-400);
  --bn-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --bn-surface: #f4f9fc;
    --bn-surface-2: #ffffff;
    --bn-border: rgba(14, 116, 144, 0.18);
    --bn-text: #0f1e2c;
    --bn-text-soft: #475569;
    --bn-ring-empty: rgba(14, 116, 144, 0.12);
    --bn-shadow: 0 10px 36px rgba(15, 30, 44, 0.08);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(
      120% 80% at 50% 0%,
      rgba(34, 211, 238, 0.12),
      transparent 55%
    ),
    var(--bn-surface);
  color: var(--bn-text);
  -webkit-font-smoothing: antialiased;
}

.bn-st {
  max-width: 420px;
  margin: 0 auto;
  padding: 6px 12px 8px;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Customer App embed (?embed=1): parent iframe is sized to fit; avoid inner scrollbar + nested scroll. */
.bn-st.bn-st--embedded {
  overflow-y: hidden;
  scrollbar-width: none;
}
.bn-st.bn-st--embedded::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.bn-st__head {
  text-align: center;
}

/* Parent app passes embed=1: hide duplicate title/subtitle (still in DOM for screen readers). */
.bn-st--embedded .bn-st__title,
.bn-st--embedded .bn-st__subtitle {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.bn-st__logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
  padding: 4px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: light) {
  .bn-st__logo-plate {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 12px rgba(15, 30, 44, 0.08);
  }
}

.bn-st__logo {
  display: block;
  max-height: 36px;
  width: auto;
  max-width: min(260px, 88vw);
  height: auto;
  object-fit: contain;
}

.bn-st__logo-fallback {
  font-weight: 800;
  font-size: 1rem;
  color: #0e7490;
  padding: 2px 0;
}

.bn-st__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.bn-st__subtitle {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bn-text-soft);
  line-height: 1.35;
}

.bn-st__gauge {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-block-end: 0;
  flex-shrink: 0;
}

.bn-st__ring-wrap {
  width: min(220px, 58vw);
  height: min(220px, 58vw);
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
}

.bn-st__ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--bn-ring-fill) calc(var(--bn-p, 0) * 360deg),
    var(--bn-ring-empty) 0
  );
  mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  transition: background 0.12s ease-out;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.25));
}

.bn-st__gauge-center {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  width: min(200px, 53vw);
  height: min(200px, 53vw);
  border-radius: 50%;
  background: var(--bn-surface-2);
  border: 1px solid var(--bn-border);
  box-shadow: var(--bn-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.bn-st__mbps {
  font-size: clamp(1.42rem, 6.2vw, 1.95rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--bn-brand-300);
}

@media (prefers-color-scheme: light) {
  .bn-st__mbps {
    color: var(--bn-brand-700);
  }
}

.bn-st__mbps-unit {
  font-size: 0.68rem;
  color: var(--bn-text-soft);
  margin-top: 2px;
}

.bn-st__phase {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bn-text-soft);
  max-width: 9rem;
  line-height: 1.3;
}

.bn-st__btn {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #042028;
  background: linear-gradient(
    135deg,
    var(--bn-brand-300),
    var(--bn-brand-500) 55%,
    var(--bn-brand-600)
  );
  box-shadow: 0 6px 22px rgba(6, 182, 212, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bn-st__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.42);
}

.bn-st__btn:active {
  transform: translateY(0);
}

.bn-st__btn.is-running {
  background: linear-gradient(135deg, #fecaca, #f87171 60%, #ef4444);
  color: #1f0707;
  box-shadow: 0 6px 22px rgba(248, 113, 113, 0.35);
}

.bn-st__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 0;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.bn-st__card {
  background: var(--bn-surface-2);
  border: 1px solid var(--bn-border);
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
}

.bn-st__k {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--bn-text-soft);
  line-height: 1.3;
}

.bn-st__v {
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.bn-st__v small {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--bn-text-soft);
  margin-inline-start: 3px;
}

.bn-st__foot {
  margin: 2px 0 0;
  padding-top: 2px;
  text-align: center;
  font-size: 0.54rem;
  line-height: 1.28;
  color: var(--bn-text-soft);
  opacity: 0.78;
}