:root{
  --ns-neon: #3bb7ff;
  --ns-neon-soft: rgba(59,183,255,.65);
  --ns-text-main: #eaf6ff;
  --ns-text-muted: rgba(234,246,255,.7);
  --ns-bg-card: rgba(255,255,255,.04);
  --ns-border: rgba(59,183,255,.25);
}

.ns-stats{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:32px 20px 16px;
  color: var(--ns-text-main);
}

/* HERO */
.ns-stats-hero{
  padding:26px 22px 22px;
  border-radius:20px;
  background: linear-gradient(135deg, rgba(59,183,255,.08), rgba(20,30,60,.35));
  border:1px solid var(--ns-border);
}

.ns-stats-hero__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:end;
}

.ns-stats-hero__metric--right{
  text-align:right;
  justify-self:end;
}

.ns-stats-hero__big{
  font-size: clamp(46px, 6.5vw, 86px);
  font-weight:900;
  letter-spacing:.5px;
  color: var(--ns-neon);
  text-shadow: 0 0 14px rgba(59,183,255,.55), 0 0 32px rgba(59,183,255,.25);
}

.ns-stats-hero__big--small{
  font-size: clamp(34px, 4.8vw, 64px);
}

.ns-plus{
  margin-left:6px;
  color: var(--ns-neon-soft);
}

.ns-stats-hero__label{
  margin-top:6px;
  font-size:15px;
  color: var(--ns-text-muted);
}

/* PANEL */
.ns-stats-panel{
  margin-top:22px;
  padding:22px;
  border-radius:20px;
  background: var(--ns-bg-card);
  border:1px solid var(--ns-border);
}

.ns-stats-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ns-stats-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color: var(--ns-text-main);
}

.ns-stats-back{
  background: transparent;
  border:1px solid var(--ns-border);
  color: var(--ns-neon);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:.2s ease;
}
.ns-stats-back:hover{
  box-shadow: 0 0 14px rgba(59,183,255,.6);
}

/* CHART */
.ns-stats-chart{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.ns-bar{
  display:grid;
  grid-template-columns: minmax(80px,160px) 1fr minmax(80px,96px);
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(59,183,255,.15);
  color: var(--ns-text-main);
  cursor:pointer;
  transition:.2s ease;
}
.ns-bar:hover{
  border-color: var(--ns-neon);
  box-shadow: 0 0 12px rgba(59,183,255,.45), inset 0 0 10px rgba(59,183,255,.15);
}

.ns-bar__label{
  font-weight:700;
  color: #9fdcff;
  text-shadow: 0 0 6px rgba(59,183,255,.6), 0 0 14px rgba(59,183,255,.35);
}

.ns-bar__value{
  text-align:right;
  font-weight:800;
  color:#fff;
  text-shadow: 0 0 6px rgba(59,183,255,.45), 0 0 18px rgba(59,183,255,.25);
}

.ns-bar__track{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}

.ns-bar__fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #5fd0ff, #2a9dff);
  box-shadow: 0 0 12px rgba(59,183,255,.8), 0 0 28px rgba(59,183,255,.4);
  transform-origin:left;
  transform:scaleX(0);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.ns-stats-hint{
  margin-top:14px;
  font-size:13px;
  color: var(--ns-text-muted);
}

.ns-fade-out{
  opacity:0;
  transform: translateY(8px);
  transition:.2s ease;
}
.ns-fade-in{
  opacity:1;
}

/* mobile */
@media (max-width: 820px){
  .ns-stats-hero__grid{
    grid-template-columns: 1fr;
    align-items:start;
  }
  .ns-stats-hero__metric--right{
    text-align:left;
    justify-self:start;
  }
}

@media (max-width:640px){
  .ns-bar{ grid-template-columns:1fr; gap:8px; }
  .ns-bar__value{ text-align:left; }
}
/* =========================
   MOBILE / TABLET tuning
   ========================= */

/* tablet i w dół */
@media (max-width: 900px){
  .ns-stats{
    padding: 20px 14px 12px;
  }

  .ns-stats-panel{
    padding: 16px;
  }

  .ns-stats-panel__head{
    gap: 10px;
  }

  .ns-stats-title{
    font-size: 16px;
    line-height: 1.25;
  }

  .ns-stats-back{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* telefon */
@media (max-width: 640px){
  /* HERO: jedna kolumna, ale ładny odstęp */
  .ns-stats-hero{
    padding: 18px 16px 16px;
  }

  .ns-stats-hero__grid{
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .ns-stats-hero__metric--right{
    text-align: left;
    justify-self: start;
  }

  /* większe, czytelne liczby */
  .ns-stats-hero__big{
    font-size: 44px; /* stabilnie na małych ekranach */
    line-height: 1.05;
  }

  .ns-stats-hero__big--small{
    font-size: 36px;
  }

  .ns-stats-hero__label{
    font-size: 13px;
  }

  /* Wykres: karta = pełna szerokość, większy klik */
  .ns-bar{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 14px;
    border-radius: 16px;
  }

  .ns-bar__label{
    font-size: 14px;
  }

  .ns-bar__track{
    height: 12px; /* łatwiej zauważyć */
  }

  .ns-bar__value{
    text-align: left;
    font-size: 15px;
  }

  /* podpowiedź mniej krzykliwa */
  .ns-stats-hint{
    font-size: 12px;
    line-height: 1.35;
    opacity: .75;
  }
}

/* bardzo małe telefony */
@media (max-width: 380px){
  .ns-stats-hero__big{ font-size: 40px; }
  .ns-stats-hero__big--small{ font-size: 32px; }
}
/* MOBILE fix: nie łam liczby w liczniku (Safari/iPhone) */
.ns-stats-hero__big,
.ns-stats-hero__big .ns-count,
.ns-stats-hero__big .ns-plus{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* Mobile: dopasuj rozmiar, żeby się mieściło w 1 linii */
@media (max-width: 640px){
  .ns-stats-hero__big{
    font-size: clamp(38px, 10vw, 52px);
    letter-spacing: 0;
  }
  .ns-stats-hero__big--small{
    font-size: clamp(30px, 8.5vw, 42px);
  }
}