:root {
  --bg:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --accent:#22c55e; --card:#111827; --btn:#1f2937;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial }

/* Header / Footer */
.site-header,.site-footer{ display:flex; align-items:center; justify-content:center; padding:12px 16px; color:var(--muted) }
.site-header{ position:relative; }
.brand{ font-weight:800; letter-spacing:.5px; color:var(--text) }

.container{ max-width:960px; margin:0 auto; padding:24px 16px 48px }
.hero{ display:grid; gap:12px; place-items:center; text-align:center }

/* Meter */
.meter{ display:flex; align-items:baseline; gap:8px }
.speed{ font-size:clamp(56px,12vw,120px); font-weight:800 }
.unit{ font-size:18px; color:var(--muted); margin-top:22px }
.status{ color:var(--muted); min-height:1.5em }

/* Buttons */
.btn{ border:1px solid #334155; background:var(--btn); color:var(--text); padding:10px 16px; border-radius:12px; cursor:pointer; text-decoration:none }
.btn:hover{ filter:brightness(1.1) }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn.btn-primary{ background:#22c55e; border-color:#22c55e; color:#0b1220 }
.btn.btn-secondary{ background:#0b1220; border-color:#334155; color:#e2e8f0 }

/* Cards & chart */
.results{ margin-top:28px; display:grid; gap:16px }
.cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
.card{ background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:14px; text-align:center }
.card.small .value{ font-size:26px }
.label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.8px }
.value{ font-size:32px; font-weight:700; margin-top:4px }
.sub{ color:var(--muted); font-size:12px }
.chartwrap{ background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:12px }

/* SWITCHER WYKRESÓW */
.chartbox{ display:grid; gap:10px }
.chart-switch{ display:flex; gap:6px; align-items:center; justify-content:flex-start; }
.chart-tab{
  background:#0b1220; border:1px solid #1f2937; color:var(--text);
  padding:6px 10px; border-radius:999px; font-size:13px; cursor:pointer;
}
.chart-tab:hover{ border-color:#334155 }
.chart-tab.active{ background:#111827; border-color:#22c55e; }

/* Top right menu */
.topbar-right{ position:absolute; right:16px; top:10px; display:flex; gap:16px; align-items:center }
.topbar-link{ border:0; background:transparent; color:var(--text); font-size:14px; cursor:pointer; padding:4px 6px; text-decoration:none }
.topbar-link:hover{ color:var(--accent) }

/* Language dropdown + flags */
.lang-switch{ position:relative }
#langBtn{ border:0; background:transparent; color:var(--text); font-size:14px; cursor:pointer; padding:4px 6px }
#langBtn:hover{ color:var(--accent) }
.lang-with-flag{ display:flex; align-items:center; gap:6px; }
.lang-menu{
  position:absolute; right:0; top:120%; background:#0b1220; border:1px solid #1f2937; border-radius:10px;
  padding:6px; list-style:none; margin:0; display:none; min-width:160px; z-index:30;
}
.lang-menu.open{ display:block }
.lang-menu li{ margin:0 }
.lang-menu button{ width:100%; text-align:left; border:0; background:transparent; color:var(--text); padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.lang-menu button:hover{ background:#111827 }
.flag{ display:inline-block; font-size:16px; line-height:1; transform:translateY(1px); }
.lang-label{ line-height:1; }

/* Client info under chart */
.clientbox{ margin-top:10px; display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; color:var(--text) }
.clientbox .label{ color:var(--text); font-weight:700; text-transform:none; letter-spacing:0 }
#client-location,#client-ip,#client-isp{ color:var(--muted) }

/* Floating retest button */
.retest-fab{
  position:fixed; right:16px; bottom:80px; width:56px; height:56px; border-radius:50%;
  background:transparent; border:none; padding:0; cursor:pointer; display:grid; place-items:center; z-index:20;
}
.retest-fab .ring{ stroke:#22c55e }
.retest-fab .arrow{ stroke:#e2e8f0 }
.retest-fab:hover .ring{ filter:brightness(1.2) }

/* Corner © year footer */
.site-footer--year{ position:fixed; right:0; bottom:0; background:transparent; border:0; padding:0 12px 10px 0; z-index:10 }
.site-footer--year > div{ color:var(--muted); font-size:12px; opacity:.8; pointer-events:none; user-select:none }

/* Cookie banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:#0b1220; border-top:1px solid #1f2937; color:var(--text);
}
.cookie-inner{
  max-width:960px; margin:0 auto; padding:14px 16px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-text{ max-width:680px }
.cookie-title{ font-weight:700; margin-bottom:4px }
.cookie-desc{ color:var(--muted); margin:0 0 6px 0 }
.cookie-link{ color:var(--accent); text-decoration:none }
.cookie-link:hover{ text-decoration:underline }
.cookie-actions{ display:flex; gap:8px }

/* Helpers */
.hidden{ display:none !important; }

/* Responsive */
@media (max-width:960px){ .cards{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:640px){ .cards{ grid-template-columns:repeat(2,1fr) } }

/* ===== Page Loader (overlay + progress bar + spinner) ===== */
.loader-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.85);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.loader-overlay.is-active{ opacity:1; pointer-events:auto; }

.loader-box{ display:grid; gap:12px; place-items:center; text-align:center; padding:20px 24px; }
.loader-text{ color:var(--text); font-weight:600; opacity:.9; }

.loader-bar{
  position:absolute; left:0; right:0; top:0; height:3px; overflow:hidden;
  background:linear-gradient(90deg, transparent, rgba(34,197,94,.3), transparent);
}
.loader-bar:before{
  content:""; position:absolute; left:-30%; top:0; height:100%; width:30%;
  background:#22c55e; filter:drop-shadow(0 0 6px #22c55e);
  animation:loader-sweep 1.6s linear infinite;
}

/* Spinner (SVG) */
.loader-spinner{ width:56px; height:56px; }
.loader-spinner circle{
  stroke:#22c55e; stroke-width:6; stroke-linecap:round; fill:none;
  stroke-dasharray:140; stroke-dashoffset:100; animation:loader-spin 1s ease-in-out infinite;
}

@keyframes loader-sweep{
  0%{ left:-30%; width:30% }
  50%{ left:35%; width:40% }
  100%{ left:100%; width:30% }
}
@keyframes loader-spin{
  0%{ transform:rotate(0deg); stroke-dashoffset:120 }
  50%{ transform:rotate(180deg); stroke-dashoffset:40 }
  100%{ transform:rotate(360deg); stroke-dashoffset:120 }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .loader-overlay{ transition:none }
  .loader-bar:before, .loader-spinner circle{ animation:none }
}

/* ===== Custom Scrollbar (global) ===== */

/* (opcjonalnie) kolory jako zmienne motywu */
:root{
  --scroll-track: #0b1220;          /* tło toru */
  --scroll-thumb: #475569;          /* kciuk */
  --scroll-thumb-hover: #22c55e;    /* kciuk w hover (akcent) */
}

/* Firefox */
html{
  scrollbar-width: thin;                                /* thin/auto */
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-gutter: stable both-edges;                  /* mniej „skakania” layoutu */
}

/* WebKit (Chrome/Edge/Safari/Opera) */
*::-webkit-scrollbar{
  width: 10px;               /* grubość pionowego */
  height: 10px;              /* grubość poziomego */
}
*::-webkit-scrollbar-track{
  background: var(--scroll-track);
}
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #475569, #64748b);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);   /* optyczny odstęp od krawędzi */
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scroll-thumb-hover), #16a34a);
}
*::-webkit-scrollbar-corner{
  background: var(--scroll-track);
}

/* (opcjonalnie) cieńszy wariant do wybranych kontenerów: dodaj klasę .thin-scrollbar */
.thin-scrollbar{
  scrollbar-width: thin;
}
.thin-scrollbar::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

/* ====== MOBILE IMPROVEMENTS (responsive tweaks) ====== */

/* 1) Małe i średnie ekrany – header: brand po lewej, menu po prawej (bez absolute) */
@media (max-width: 768px){
  .site-header{
    justify-content: space-between;   /* logo lewo, menu prawo */
    padding: 10px 12px;
  }
  .topbar-right{
    position: static;                 /* już nie absolute */
    right: auto; top: auto;
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .brand{ font-size: 18px; }
  .topbar-link{ font-size: 14px; padding: 4px 6px; }
  #langBtn{ padding: 4px 6px; }
}

/* 2) Bardzo małe ekrany – uprość przełącznik języka (sama flaga), linki ściślej */
@media (max-width: 480px){
  .brand{ font-size: 16px; }
  .topbar-right{ gap: 6px; }
  .lang-with-flag .lang-label{ display: none; } /* zostaje tylko 🇵🇱 / 🇬🇧 */
  .topbar-link{ font-size: 13px; }
}

/* 3) Siatka kart – 2 kolumny na telefonie, 1 kolumna na naprawdę wąskich */
@media (max-width: 640px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px){
  .cards{ grid-template-columns: 1fr; }
}

/* 4) Wykresy – mniejsza wysokość i wewnętrzne odstępy, żeby nie „uciekały” poza ekran */
@media (max-width: 640px){
  .chartwrap{ padding: 8px; }
  #chart-line, #chart-bar, #chart-pie{
    max-height: 220px;   /* było 120px height atrybutem; max-height pilnuje, by nie było za małe/za duże */
  }
  .chart-switch{
    flex-wrap: wrap;
    gap: 6px;
  }
  .chart-tab{ padding: 6px 10px; font-size: 12px; }
}

/* 5) Sekcja hero – licznik niech będzie ciut mniejszy na telefonach */
@media (max-width: 480px){
  .speed{ font-size: clamp(40px, 18vw, 72px); }
  .unit{ margin-top: 12px; font-size: 16px; }
  .status{ font-size: 14px; }
}

/* 6) Dane klienta pod wykresem – zawijanie w kolumny i drobniejsza typografia */
@media (max-width: 640px){
  .clientbox{
    gap: 10px;
    font-size: 14px;
  }
  #client-location, #client-ip, #client-isp{
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

/* 7) Pływający „Ponów test” – niech nie wchodzi pod belkę cookies i uwzględnia safe-area */
.retest-fab{
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* wyżej nad banerem cookies */
  right: calc(16px + env(safe-area-inset-right, 0px));
}
@media (max-width: 480px){
  .retest-fab{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* 8) Stopka z © w rogu – niech nie nachodzi na FAB i uwzględnia notchy */
.site-footer--year{
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)) 0;
}

/* 9) Drobne korekty ogólne na mobile */
@media (max-width: 640px){
  .container{ padding: 20px 12px 40px; }
  .card{ padding: 12px; }
  .value{ font-size: 28px; }
}

/* Hide floating retest button on phones */
@media (max-width: 640px){
  .retest-fab{ display:none !important; }
}

/* Inline retest button: hidden by default, visible on phones */
.retest-inline{ display:none; margin-top:6px; }
@media (max-width: 640px){
  .retest-inline{ display:inline-flex; align-items:center; gap:8px; }
}

/* Corner © w sekcji hero tylko na mobile */
@media (max-width: 640px){
  .hero{ position: relative; } /* potrzebne dla pozycjonowania absolutnego */
  .hero-corner-year{
    position: absolute;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    color: var(--muted);
    font-size: 12px;
    opacity: .85;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  /* ukryj stałą stopkę w rogu na telefonach, żeby nic nie „latało” */
  .site-footer--year{ display: none !important; }
}

/* Domyślnie ukryj wewnętrzny © */
.hero-corner-year{ display:none; }

/* Mobile: pokaż © w prawym-dolnym rogu hero, a stałą stopkę ukryj */
@media (max-width: 640px){
  .hero{ position: relative; }
  .hero-corner-year{
    display:block;
    position:absolute;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    color: var(--muted);
    font-size: 12px;
    opacity: .85;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 1; /* nad tłem wykresu, pod FAB */
  }
  .site-footer--year{ display:none !important; } /* jak „retest” FAB – desktop only */
}

/* Mobilna linia © pod wersją */
.site-footer--copy-mobile{
  display:none;                 /* domyślnie ukryta (desktop) */
  justify-content:center;
  padding:6px 16px 12px;
  color:var(--muted);
  font-size:12px;
}

/* Na telefonach: pokazujemy linię pod wersją, a rożny footer w prawym dolnym rogu chowamy */
@media (max-width: 640px){
  .site-footer--copy-mobile{ display:flex; }
  .site-footer--year{ display:none !important; }
}

/* Rząd z selektorem pod wykresem */
.server-select-row{
  display:flex;
  justify-content:flex-end;   /* prawa krawędź */
  margin-top: 10px;
}

/* Pudełko selektora (używamy istniejących styli .server-select + .server-select-wrap) */
.server-select-bottom .label{
  margin-right:8px;
}

/* Na telefonach wyśrodkuj pod wykresem */
@media (max-width: 768px){
  .server-select-row{ justify-content:center; }
}

/* =======================
   Server selector (modern)
   ======================= */

/* wiersz z flagą i selectem */
.server-row,
.server-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* flaga / badge z kodem kraju (np. "FR" albo emoji) */
#serverFlag,
.server-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: #111827;                /* tło ciemne */
  border: 1px solid #1f2937;          /* subtelna ramka */
  color: #e2e8f0;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 14px;                    /* jeśli emoji flagi – możesz zwiększyć do 18px */
}

/* sam <select> */
#serverSelect,
.server-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 36px;
  padding: 0 40px 0 12px;             /* miejsce na custom strzałkę z prawej */
  border-radius: 10px;
  border: 1px solid #253046;          /* bazowa ramka */
  background:
    /* strzałka (SVG) */
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 12px center,
    /* tło */
    linear-gradient(#0b1220, #0b1220);
  color: #e2e8f0;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* hover/focus states */
#serverSelect:hover {
  border-color: #2f3c57;
}
#serverSelect:focus {
  outline: none;
  border-color: #22c55e;              /* zielony akcent */
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

/* wygląd listy opcji (ciemne tło) */
#serverSelect option {
  background: #0b1220;
  color: #e2e8f0;
}

/* ukryj starą strzałkę w IE/Edge Legacy (jakby ktoś trafił) */
#serverSelect::-ms-expand { display: none; }

/* notka o korekcie – krótko i subtelnie */
#routeNote,
.server-note {
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
  opacity: .9;
}

/* responsywnie – select na pełną szerokość, flaga zostaje */
@media (max-width: 640px) {
  #serverSelect { width: 100%; }
  #serverFlag   { height: 34px; min-width: 36px; }
}

/* opcjonalnie: tytuł "SERWER" jako label */
.server-title {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* === Neutralizacja starego wrappera .select tylko w bloku serwera === */
.server-row .select {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: static !important;
}

.server-row .select:before,
.server-row .select:after,
.server-row .select .fa-angle-down,
.server-row .select .icon-angle-down {
  display: none !important;
}

/* upewnij się, że wewnętrzny select nie traci naszego wyglądu */
.server-row .select > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 36px;
  padding: 0 40px 0 12px;
  border-radius: 10px;
  border: 1px solid #253046;
  background:
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 12px center,
    linear-gradient(#0b1220, #0b1220);
  color: #e2e8f0;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.server-row .select > select:hover { border-color: #2f3c57; }
.server-row .select > select:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}
.server-row .select > select option {
  background: #0b1220;
  color: #e2e8f0;
}

.downloadbox{ margin:14px 0 0; display:flex; justify-content:flex-start }
.hidden{ display:none !important }

/* Gdy aktywny „kill switch” – overlay nie pokazuje się w ogóle */
body[data-loader-suppress] #pageLoader,
body[data-loader-suppress] .loader-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Header na telefonach – bez absolute */
@media (max-width: 768px){
  .site-header{ justify-content:space-between; padding:10px 12px; }
  .topbar-right{ position:static; margin-left:auto; gap:10px; }
}

/* Statystyki – tabela przewijalna poziomo na małych ekranach */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.stats-table th, .stats-table td{ white-space:nowrap; }

/* ===== Smart advice ===== */
.advice-card{ margin-top:12px; }
.advice-list{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px; }
.advice-item{ display:flex; gap:10px; align-items:flex-start; background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:10px 12px; }
.advice-text{ line-height:1.5; }

/* kolory wg ważności */
.sev-high  .advice-dot{ background:#ef4444; } /* czerwony */
.sev-mid   .advice-dot{ background:#f59e0b; } /* bursztyn */
.sev-low   .advice-dot{ background:#22c55e; } /* zielony */

/* ukrywanie extra tipów + przycisk */
#adviceMore.hidden{ display:none !important; }
.advice-item.extra.hidden{ display:none !important; }

/* Porady – kontener pozwala „wylać” animację poza element */
.advice-item{ overflow:visible; }

/* Kolor wg „severity” */
.advice-item.sev-high{ --dot:#ef4444; }  /* czerwony */
.advice-item.sev-mid { --dot:#f59e0b; }  /* pomarańczowy */
.advice-item.sev-low { --dot:#22c55e; }  /* zielony */

/* Kropka + falujący pierścień */
.advice-dot{
  position:relative;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--dot);
  flex:0 0 10px;
}
.advice-dot::after{
  content:"";
  position:absolute;
  inset:-3px;                    /* grubość pierścienia */
  border-radius:inherit;
  border:2px solid var(--dot);
  opacity:.7;
  transform:scale(1);
  animation:advice-pulse 1.6s ease-out infinite;
}
@keyframes advice-pulse{
  0%   { opacity:.7; transform:scale(1);   }
  70%  { opacity:0;  transform:scale(2);   }
  100% { opacity:0;  transform:scale(2);   }
}

/* (opcjonalnie) tryb accessibility – wolniejsza animacja zamiast wyłączać */
@media (prefers-reduced-motion: reduce){
  .advice-dot::after{ animation-duration:3s; }
}

/* --- FIX: idealne wyśrodkowanie kropki w poradach --- */
.advice-item{
  display:flex;
  align-items:center !important;   /* wymuś centrowanie w osi Y */
  gap:10px;
}

/* niech kropka ma sztywny box, żeby animacja jej nie „podbijała” */
.advice-dot{
  flex:0 0 12px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--dot);
  position:relative;
  margin:0;                        /* zeruje ewentualne dziedziczone marginesy */
  box-shadow:none;                 /* wyłącz cień z poprzedniej wersji */
  animation:none;                  /* animację przenosimy do pseudo-elementu */
}

/* puls przeniesiony do ::after – nie wpływa na layout, więc kropka jest w osi */
.advice-dot{
  flex:0 0 12px; width:12px; height:12px; border-radius:50%;
  background:var(--dot); position:relative; margin:0; box-shadow:none; animation:none;
}
.advice-dot::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:advice-pulse 1.6s ease-out infinite;
}
.advice-item.sev-high .advice-dot::after{ box-shadow:0 0 0 0 rgba(239,68,68,.6); }
.advice-item.sev-mid  .advice-dot::after{ box-shadow:0 0 0 0 rgba(245,158,11,.6); }
.advice-item.sev-low  .advice-dot::after{ box-shadow:0 0 0 0 rgba(34,197,94,.6); }
@keyframes advice-pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 currentColor; }
  60%{ transform:scale(1.06); box-shadow:0 0 0 12px rgba(0,0,0,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

/* --- FAB RETEST (bez zmian) --- */
#retestBtn.retest-fab{
  position:fixed; right:16px; bottom:calc(72px + env(safe-area-inset-bottom,0));
  width:56px; height:56px; border-radius:50%;
  background:#0b1220; border:1px solid #1f2937;
  display:grid; place-items:center; cursor:pointer; z-index:2000; pointer-events:auto;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
#retestBtn .ring{ stroke:#22c55e; }
#retestBtn .arrow{ stroke:#e2e8f0; }
@media (max-width:640px){ #retestBtn.retest-fab{ display:grid !important; } }

/* --- PAGER / SORT (bez zmian) --- */
.pager{ display:flex; gap:6px; align-items:center; margin:10px 0 0; flex-wrap:wrap }
.pager .page-btn{
  border:1px solid #1f2937; background:#0b1220; color:#e2e8f0;
  padding:6px 10px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.pager .page-btn[aria-current="page"]{ background:#111827; border-color:#22c55e; }
.pager .page-btn:disabled{ opacity:.5; cursor:not-allowed }
.pager .dots{ color:#94a3b8; padding:0 4px }
.stats-table th[role="button"]{ cursor:pointer; position:relative; user-select:none }
.stats-table th.sorted-asc::after,
.stats-table th.sorted-desc::after{
  content:""; position:absolute; right:10px; top:50%; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; transform:translateY(-50%);
}
.stats-table th.sorted-asc::after{ border-bottom:7px solid #22c55e; }
.stats-table th.sorted-desc::after{ border-top:7px solid #22c55e; }

/* --- KARTY METRYK (bez zmian) --- */
.btn.btn-ghost{ background:transparent; border-color:#253046; }
.btn.btn-ghost:hover{ background:#0b1220; }
.metric-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.metric{ background:#0b1220; border:1px solid #1f2937; border-radius:14px; padding:14px; display:grid; gap:6px; }
.metric .label{ color:#94a3b8; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.metric .value{ font-weight:800; line-height:1; font-size:clamp(22px,2.8vw,28px); }

/* --- PANEL AKCJI NA WYKRESIE --- */
.chartwrap{ position:relative; overflow:visible; }       /* kotwica dla absolutów */

.chartwrap .panel-actions{
  position:absolute;
  top:16px;                                              /* odsunięte od zaokrąglenia ramki */
  right:16px;
  display:flex;
  gap:8px;
  z-index:4;                                             /* ponad canvasem i siatką */
}

/* ZMNIEJSZ przycisk w panelu – nadpisz bazowe .btn */
.chartwrap .panel-actions .btn,
.chartwrap .panel-actions .btn.btn-secondary,
.chartwrap .panel-actions .btn.btn-ghost{
  display:inline-flex;
  align-items:center;
  height:30px;                                           /* kompaktowy */
  padding:4px 10px;                                      /* mniejszy padding */
  font-size:13px;
  line-height:1;
  border-radius:8px;                                     /* mniejsze niż 14px kontenera */

  /* pełne tło, aby nie przebijały linie wykresu */
  background:#111827;                                    /* kolor kart */
  border:1px solid #253046;                              /* spójna ramka */
  color:#e2e8f0;
  box-shadow:0 2px 10px rgba(0,0,0,.25);                 /* delikatny lift */
}

/* hover/focus – subtelne, bez „prześwitów” */
.chartwrap .panel-actions .btn:hover{
  background:#1a2336;
  border-color:#2f3c57;
}
.chartwrap .panel-actions .btn:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
}

/* „Resetuj zoom” w lewym-dolnym rogu ramki z wykresem */
#zoomResetBtn{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:4;

  height:30px;
  padding:4px 10px;
  font-size:13px;
  line-height:1;
  border-radius:8px;
  background:#111827;
  border:1px solid #253046;
  color:#e2e8f0;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
#zoomResetBtn:hover{
  background:#1a2336;
  border-color:#2f3c57;
}

/* Utility */
.hidden{ display:none !important; }

/* Mobile: przenieś panel w dół, zostaw reset w lewym-dolnym */
@media (max-width:640px){
  .chartwrap .panel-actions{ top:auto; bottom:16px; right:16px; }
}

@media (max-width:640px){
  .chartwrap .panel-actions{ top:auto; bottom:16px; right:16px; }
}

/* --- Chart area: jedna wysokość, canvas wypełnia kontener --- */
.chart-area{ height:460px; }                     /* desktop */
@media (max-width:1100px){ .chart-area{ height:360px; } }
@media (max-width: 640px){ .chart-area{ height:260px; } }

/* Canvas ignoruje height="" z HTML i rozciąga się do kontenera */
.chartwrap canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
}