:root{
  --bg:#0b1220;
  --text:#eef2ff;
  --muted:rgba(238,242,255,.75);
  --line:rgba(255,255,255,.08);
  --shadow:0 10px 26px rgba(0,0,0,.35);
  --radius:16px;
  --pad:12px;
  --ok:#18d66b;           /* COLORS.OK      zielony          */
  --yellow:#ffd600;       /* COLORS.WARN    żółty            */
  --warn:#ffb020;         /* COLORS.ACTIVE  pomarańczowy     */
  --active:#ffb020;       /* alias = --warn, dla tooltipów   */
  --bad:#ff4d6d;          /* COLORS.ALERT   czerwony         */
  --ext:#b56cff;          /* COLORS.EXTREME fioletowy        */
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(60,120,255,.12), transparent 50%),
              radial-gradient(1000px 700px at 80% 20%, rgba(181,108,255,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}

.wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px;
}

/* Na mobile: panele od krawędzi do krawędzi — zero marginesu zewnętrznego */

/* ── title-main-row: h1 + citySelect w jednej linii ─────────── */
.title-main-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.title-main-row h1 {
  margin: 0;
  white-space: nowrap;
}

/* ── Przyciski mobile (⚙ i i) — ukryte na dużym ekranie ─────── */
.mobile-settings-btn,
.mobile-info-btn {
  display: none;
}

@media (max-width: 600px) {
  /* Panele od krawędzi do krawędzi */
  .wrap {
    padding: 0;
  }

  /* Topbar: padding żeby tytuł nie przylegał do krawędzi */
  .topbar {
    padding: 8px 12px 4px;
    margin-bottom: 8px;
  }

  /* Tytuł w 1 linii: "Portal Zorzowy  miasto" */
  .title {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }
  .title h1 {
    font-size: 15px;
    white-space: nowrap;
  }
  /* "Ostatnia aktualizacja" w nowej linii pod nazwą */
  .title-city-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .title .sub {
    font-size: 11px;
  }

  /* G, S, R + SUVI + galeria — padding od lewej */
  .noaa-scales {
    padding-left: 12px;
  }

  /* Magnetometry — usuń card (border/bg/shadow), zostaw padding */
  #magnetometerCard {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 12px;
    margin-top: 8px !important;
  }

  /* ⚙ przycisk widoczny na mobile — prawy górny róg */
  .mobile-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--text);
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
  }

  /* status-pill: ukryty na mobile — pokazywany po kliknięciu ⚙ */
  .status-pill {
    display: none !important;
    position: fixed;
    top: 52px;
    right: 10px;
    z-index: 199;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: #0d1b2e !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.9) !important;
    min-width: unset !important;
    max-width: 220px;
  }
  .status-pill.mobile-open {
    display: flex !important;
  }
  /* Ukryj status-left (zorza—/podpis) na mobile */
  .status-pill .status-left {
    display: none;
  }

  /* noaa-scales: ukryty na mobile, pokazywany po kliknięciu i */
  .noaa-scales {
    display: none !important;
    position: fixed;
    top: 52px;
    right: 10px;
    z-index: 199;
    flex-direction: row !important;   /* G S R poziomo */
    flex-wrap: wrap;
    align-items: center !important;
    gap: 6px !important;
    background: #0d1b2e !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.9) !important;
  }
  .noaa-scales.mobile-open {
    display: flex !important;
  }
  /* Ukryj separator ::after na mobile — niepotrzebna pionowa kreska */
  .noaa-scales::after {
    display: none !important;
  }

  /* Ikonka "i" — obok koła zębatego */
  .mobile-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    right: 52px;          /* 10px + 34px btn + 8px gap */
    z-index: 200;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--text);
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
  }
}

.topbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}

.title{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.title h1{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.title .sub{
  font-size:12px;
  color:var(--muted);
}

.status-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  min-width: 320px;
  justify-content:space-between;
}
.status-left{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(24,214,107,.15);
  flex:0 0 auto;
}
.status-text{
  display:flex; flex-direction:column; line-height:1.15;
  min-width:0;
}
.status-text b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-text span{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: block;
  margin-top: 5px;}

.btn{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{ filter:brightness(1.08); }

.grid {
  display: flex;
  flex-direction: column; /* Na mobile: jedna karta pod drugą */
  gap: 20px;
  width: 100%;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
  overflow:visible;
}

.card h2{
  margin:0 0 10px 0;
  font-size:13px;
  letter-spacing:.3px;
  color: rgba(238,242,255,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pill{
  font-size:12px;
  color: var(--muted);
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  padding:4px 8px;
  border-radius:999px;
  white-space:nowrap;
}

/* --- FUNDAMENT UKŁADU (GRID) --- */

.grid {
  display: flex;
  flex-direction: column; /* Na mobile: jedna karta pod drugą */
  gap: 20px;
  width: 100%;
}

/* Kluczowe: min-width: 0 zapobiega "rozpychaniu" kolumny przez wykresy */
.left-stack, .right-stack {
  min-width: 0; 
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Desktop: Aktywujemy dwie kolumny od szerokości 1024px */
@media (min-width: 1024px) {
  .grid {
    display: grid;
    /* Twoje proporcje: lewa szersza (1.2), prawa węższa (0.8) */
    grid-template-columns: 1.2fr 0.8fr; 
    align-items: start;
  }
}

/* --- SEKCIJA WYKRESÓW (wewnątrz karty) --- */

.charts {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr; /* Na telefonie: jeden wykres pod drugim */
  gap: 12px;
  margin-bottom: 20px;
}

/* Na tabletach i desktopach: dwa wykresy obok siebie */
@media (min-width: 600px) {
  .charts {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px; /* Stała wysokość dla stabilności */
  }
}

/* Zabezpieczenie dla Chart.js */
.charts canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
}

/* --- TABELE (Zabezpieczenie przed rozsuwaniem) --- */
table {
  width: 100% !important;
  table-layout: fixed; /* Wymusza trzymanie się szerokości kolumny */
  border-collapse: collapse;
}

td {
  padding: 8px 4px;
  overflow: hidden;
  text-overflow: ellipsis; /* Kropki (...) jeśli tekst się nie mieści */
  white-space: nowrap;
}
th, td {
  padding: 8px 10px; /* Twoje oryginalne odstępy są lepsze niż 4px */
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  
  /* Zabezpieczenia przed rozpychaniem kolumn: */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, .03);
}
tr:last-child td {
  border-bottom: none;
}



/* ==========================================================================
   SEKCJA METRYK KPI (Zoptymalizowana: ciasny układ, duża czcionka, trend)
   ========================================================================== */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.kpi-row-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
}

/* Kontener główny KPI */
.kpi {
  --kpi-radius: 10px;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--kpi-radius);
  
  /* Ciasny padding: góra 4px, boki 10px, dół 4px (pasek jest absolute) */
  padding: 4px 10px 4px 10px; 
  
  min-height: 52px; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: visible; /* Ważne dla wyświetlania tooltipów */
}

/* Etykieta (tekst nad liczbą) - MAKSYMALNIE W GÓRĘ */
.kpi .label, 
.kpi.kpi-tip-wrap .kpi-tip-label {
  margin: 0;
  padding: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  opacity: 0.6;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;                  /* rozciągnij na pełną szerokość kpi */
  justify-content: flex-start;  /* tekst + ikona od lewej */
}

/* ── ETA badge — czas obowiązywania KPI (+38 min, teraz, -10 min) ── */
.kpi-eta-badge {
  margin-left: auto;     /* pcha się do prawej krawędzi flexboxa */
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0.9;
  flex-shrink: 0;        /* nie zmniejsza się gdy tekst labela jest długi */
  padding-left: 4px;     /* minimalny odstęp od tekstu labela */
}

/* Ikona pytajnika dla tooltipów */
.kpi-tip-icon {
  width: 13px;
  height: 13px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--muted);
}

/* Główna wartość (Duża liczba) */
.kpi .val {
  /* margin: 6px 0 6px 0; Minimalny odstęp pod etykietą */
  margin: auto 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #fff;
  /*line-height: 0.95; */
  line-height: 1.2;          /* Dajemy liczbom "odetchnąć" */
  display: flex;
  align-items: flex-start; /* Delta "wisi" od góry liczby */
  justify-content: flex-start;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-variant-numeric: tabular-nums; /* Szerokość cyfr jest stała, więc nie skaczą */
  letter-spacing: 0.5px; 
  font-weight: 800; /* Bardzo gruba */
}

.kpi:not(.kpi-tip-wrap) {
  padding-bottom: 8px;  /* Zmniejszamy z 15px na 8px, bo nie ma tam paska */
  min-height: 45px;     /* Pozwalamy kafelkowi być niższym */
  justify-content: center; /* Opcjonalnie: centruje treść pionowo, jeśli jest dużo miejsca */
}

/* Marginesy dla wartości w zwykłych KPI */
.kpi:not(.kpi-tip-wrap) .val {
  margin-top: 8px;      /* Odstęp od napisu "Prawdop" (górny) */
  margin-bottom: 8px;   /* Zerujemy dolny margines liczby */
}
/* Jednostka (%) */
.kpi .unit {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 2px;
  align-self: flex-end; /* Trzyma się dołu linii bazowej liczby */
  margin-bottom: 2px;
}

/* Delta / Trend (Pigułka obok liczby) */
.delta-val span {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  margin-top: 3px; /* Precyzyjne wyrównanie wiszące obok 22px */
  font-weight: 700;
  line-height: 1;
}

.delta-up { color: #ff4d4d; background: rgba(255, 77, 77, 0.12) !important; }
.delta-down { color: #4ade80; background: rgba(74, 222, 128, 0.12) !important; }
.delta-neutral { color: #888; background: rgba(255, 255, 255, 0.05) !important; }


/* --- TABELA SW (Zabezpieczenie i Stylizacja) --- */

#swTable {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: separate; 
  border-spacing: 0;
  margin-top: 8px;           /* Zbliżenie do KPI */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;       
  overflow: hidden;          
}

#swTable th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 10px;           /* Nieco mniejszy nagłówek dla kontrastu */
  text-transform: uppercase;
  letter-spacing: 1px;       /* Większy odstęp liter w nagłówku wygląda pro */
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

/* Wyrównanie nagłówków: Parametr do lewej, wartości do prawej */
#swTable th:first-child { text-align: left; }
#swTable th:not(:first-child) { text-align: right; }

#swTable td {
  padding: 10px 10px;        /* Większy padding góra-dół dla czytelności */
  font-size: 14px;           /* Bazowa czcionka dla nazwy parametru */
  color: var(--text);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}

/* Wyrównanie danych: Parametr do lewej, wartości do prawej */
#swTable td:first-child { 
  text-align: left;
  font-weight: 500; 
}
#swTable td:not(:first-child) { 
  text-align: right;
  font-family: 'Inter', ui-monospace, monospace; /* Monospaced liczby lepiej stoją w kolumnie */
}

/* Podświetlenie wiersza po najechaniu (opcjonalne, fajny efekt) */
#swTable tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

#swTable tr:last-child td {
  border-bottom: none; 
}

/* Styl dla jednostek obok nazw (jeśli używasz <small> lub <span>) */
#swTable td small {
  opacity: 0.4;
  font-size: 0.8em;
  margin-left: 4px;
}

/* --- PASEK POSTĘPU (Zintegrowany z dnem karty) --- */

.kpi-bar-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px; /* Nieco cieńszy dla elegancji */
  background: rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: calc(var(--kpi-radius) - 1px);
  border-bottom-right-radius: calc(var(--kpi-radius) - 1px);
  overflow: hidden; 
  pointer-events: none;
}

.kpi-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--ok);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
  position: relative;
}
/* Sparkline mini-wykres — między .val a .kpi-bar-bg */
/* Wrapper: liczba po lewej, sparkline po prawej, w jednej linii */
.kpi-val-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;  /* wyrównaj dolne krawędzie */
  width: 100%;
  gap: 4px;
  min-height: 0;
}

/* .val wewnątrz kpi-val-row nie rozciąga się na całą szerokość */
.kpi-val-row .val {
  flex-shrink: 0;   /* liczba nigdy nie ściskana */
  margin: 0;
}

.kpi-spark {
  display: block;
  flex: 1;            /* zajmuje całą pozostałą szerokość po prawej */
  min-width: 0;
  height: 20px; /* 32px */
  align-self: center; /* wyśrodkowany pionowo między górą a dołem liczby */
  opacity: 0.65;
  pointer-events: none;
}


/* Kreski progowe (Ticks) */
.bar-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.kpi-tick {
    position: absolute;
    top: -2px;    /* Lekko wystaje nad pasek */
    bottom: -2px; /* Lekko wystaje pod pasek */
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
    z-index: 10;   /* Nad paskiem progresu */
    pointer-events: none;
}

/* Tooltipy (Zachowanie) */
.kpi-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  width: max-content;
  max-width: 340px;
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 300;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.kpi:hover .kpi-tip { display: block; }


/* Styl dla Delty (zmiany) */
/* Delta (Pigułka z trendem) */
.delta-val span {
    font-size: 10px;             /* Stały rozmiar niezależnie od .val */
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    margin-left: 6px;            /* Odstęp od dużej liczby */
    margin-top: 2px;             /* Pozycjonowanie "wiszące" */
    font-weight: 600;
}

.delta-up { 
    color: #ff4d4d; 
    background: rgba(255, 77, 77, 0.1) !important; 
}

.delta-down { 
    color: #4dff4d; 
    background: rgba(77, 255, 77, 0.1) !important; 
}

.delta-neutral { 
    color: #888; 
    background: rgba(255, 255, 255, 0.05) !important; 
}

.moonbox{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
}
.moon-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.moon-icon{ font-size:26px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.moon-meta{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.moon-meta b{ font-size:13px; }
.moon-meta span{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.moon-right{ text-align:right; font-size:12px; color:var(--muted); line-height:1.3; white-space:nowrap; }

/* wykresy: 2 w wierszu, większe */
.charts {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr; /* Na telefonie: jeden wykres pod drugim */
  gap: 12px;
  margin-bottom: 20px;
}

.chart-wide{
  grid-column: 1 / -1;
  height: 400px;
}
.chart-card{
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px 8px 10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.chart-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.chart-title b{ font-size:12px; }
.chart-title span{ font-size:12px; color:var(--muted); }

.chart-area{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.chart-area canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

.footer-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .charts{ grid-template-columns: 1fr; }
  .kpi-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  /* kpi-row-4: 2 kolumny na telefonie (2×2 zamiast 4×1) */
  .kpi-row{ grid-template-columns: 1fr 1fr; }
  /* kpi-row-3: też 2 kolumny, ostatni element rozciąga się */
  .kpi-row-3{ grid-template-columns: 1fr 1fr; }
  .status-pill{ min-width: 100%; }
}

/* --- DESKTOP (od 1024px wzwyż) --- */
@media (min-width: 1024px) {
  .grid {
    display: grid;
    /* Twoje proporcje: lewa szersza (1.2), prawa węższa (0.8) */
    grid-template-columns: 1.2fr 0.8fr; 
    align-items: start;
  }
}

@media (min-width: 600px) {
  .charts {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px; /* Stała wysokość dla stabilności */
  }
}

/* Zabezpieczenie dla Chart.js */
.charts canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
}

.ovation-box{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
}

.ovation-box img{
  display: block;     /* usuwa dziwne odstępy inline */
  width: 100%;        /* 100% szerokości kontenera */
  max-width: 100%;    /* zabezpieczenie */
  height: auto;       /* zachowuje proporcje */
}

.city-select{
  background: rgba(0,0,0,.18);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
}
.city-select:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.08); }

#weatherTable th, #weatherTable td{
  padding: 8px 10px;
}

.links-grid{
  display: flex;
  flex-direction: column; /* ZAWSZE jeden pod drugim */
  gap:10px;
}

.link-tile{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  text-decoration:none;
  color: var(--text);
}

.link-tile:hover{ filter: brightness(1.08); }

.link-left{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.link-left b{
  font-size:13px;
  line-height:1.2;
}

.link-left span{
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.link-badge{
  font-size:12px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding:4px 8px;
  border-radius:999px;
  white-space:nowrap;
}


.loader-overlay{
  position: fixed;
  inset: 0;
  display: none;              /* startowo ukryty */
  place-items: center;
  background: rgba(6,10,20,0.62);
  backdrop-filter: blur(10px);
  z-index: 9999;
}

.loader-overlay.is-on{ display: grid; }

.loader-card{
  width: min(420px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(14,20,36,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.loader-title{
  margin-top: 10px;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(238,242,255,0.92);
}

.loader-sub{
  margin-top: 4px;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(238,242,255,0.65);
}

/* ===== Aurora Blur Loader ===== */
.aurora-loader{
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none; /* nie blokuje scrolla */
  z-index: 9999;
}

.aurora-loader.is-on{
  display: block;
}

/* Glass layer */
.aurora-glass{
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px) saturate(105%);
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  background: rgba(10,14,26,0.10); /* było ~0.18 */
}

.aurora-wave{
  position: absolute;
  inset: -35%;
  background: linear-gradient(
    90deg,
    rgba(24,214,107,0.00),
    rgba(24,214,107,0.30),
    rgba(64,196,255,0.30),
    rgba(181,108,255,0.25),
    rgba(255,77,109,0.00)
  );
  filter: blur(42px);
  opacity: 0.45;
  transform: rotate(-8deg) translateX(-40%);
  animation: auroraMove 2.8s ease-in-out infinite;
}

.aurora-wave.a2{
  opacity: 0.32;
  filter: blur(56px);
  animation-duration: 3.8s;
  animation-delay: -1.2s;
}

.aurora-wave.a3{
  opacity: 0.22;
  filter: blur(72px);
  animation-duration: 5.2s;
  animation-delay: -2.4s;
}


@keyframes auroraMove{
  0%   { transform: translateX(-45%) rotate(-8deg); }
  50%  { transform: translateX( 10%) rotate( 6deg); }
  100% { transform: translateX(-45%) rotate(-8deg); }
}


.aurora-loader{
  transition: opacity .18s ease;
  opacity: 0;
}
.aurora-loader.is-on{
  opacity: 1;
}

/* Center text */
.loader-text{
  position: absolute;
  bottom: 24px;
  right: 24px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(14,20,36,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}

.loader-title{
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(238,242,255,0.92);
}

.loader-sub{
  margin-top: 2px;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(238,242,255,0.65);
}


/*.left-stack{
  display:grid;
  gap:12px;
}*/

/* Zapobieganie "rozpychaniu" przez tabele i wykresy */
.left-stack, .right-stack {
  min-width: 0; 
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.chart-wrap canvas{ 
  width:100% !important;
  height:100% !important;
  display:block;
}

.chart-wrap{
  position: relative;
  min-height: 600px;   /* startowa wysokość */
  flex: 1 1 auto;      /* pozwala rosnąć */
}

.card-chart{
  display: flex;
  flex-direction: column;
}

.card-kp{
  display:flex;
  flex-direction:column;
}

.chart-wrap-kp{
  position:relative;
  height: 200px;
  min-height: 0 !important;  /* override .chart-wrap min-height:600px */
}

.chart-wrap-kp canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

#kpMoonBar {
  min-height: 38px;
}

#moonIllum{
  font-size: 17px;        /* identycznie jak .kpi .val */
  font-weight: 750;
  letter-spacing: .2px;
}

/* ===== NOAA Scales pills ===== */
.noaa-scales {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Separator miedzy scales a status-left */
.noaa-scales::after {
  content: '';
  display: block;
  width: 1px;
  height: 28px;
  background: var(--line);
  margin-left: 4px;
}

.noaa-scale-pill {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  cursor: default;
  transition: border-color .15s;
  user-select: none;
  min-width: 36px;
  text-align: center;
}

.noaa-scale-pill:hover {
  border-color: rgba(255,255,255,.25);
}

.scale-letter {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .5px;
}

.scale-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 16px;
  text-align: center;
}

/* Kolorowanie pill po poziomie */
.noaa-scale-pill[data-level="0"] .scale-val { color: rgba(238,242,255,.4); }
.noaa-scale-pill[data-level="1"] .scale-val { color: #4ade80; }
.noaa-scale-pill[data-level="1"] { border-color: rgba(74,222,128,.3); }
.noaa-scale-pill[data-level="2"] .scale-val { color: #eab308; }
.noaa-scale-pill[data-level="2"] { border-color: rgba(234,179,8,.35); }
.noaa-scale-pill[data-level="3"] .scale-val { color: #f97316; }
.noaa-scale-pill[data-level="3"] { border-color: rgba(249,115,22,.35); }
.noaa-scale-pill[data-level="4"] .scale-val { color: #ef4444; }
.noaa-scale-pill[data-level="4"] { border-color: rgba(239,68,68,.4); }
.noaa-scale-pill[data-level="5"] .scale-val { color: #a855f7; }
.noaa-scale-pill[data-level="5"] { border-color: rgba(168,85,247,.45); }

/* Tooltip */
.noaa-scale-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: rgba(15,23,42,0.97);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.6;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  pointer-events: none;
}

.noaa-scale-tip.visible {
  display: block;
}

.noaa-scale-tip-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #93c5fd;
}

.noaa-scale-tip-desc {
  color: rgba(238,242,255,.7);
  font-size: 11px;
  max-width: 280px;
  white-space: normal;
  line-height: 1.5;
}

/* Alert badge w topbarze */
/*#noaaAlertBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  animation: badgePulse 2s ease-in-out infinite;
}*/

.noaa-sticky-bar {
  width: 100%;
  padding: 12px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  /* Kolory NOAA Alert */
  background: rgba(234, 179, 8, 0.2); 
  color: #ffb020;
  border-bottom: 1px solid rgba(234, 179, 8, 0.4);
  
  /* Ważne: */
  position: relative;
  z-index: 1000;
  white-space: normal; /* Pozwalamy na zawijanie tekstu na telefonach */
  
  /* Twój stary efekt pulsowania, ale na całym pasku */
  animation: stickyPulse 2s ease-in-out infinite;
}

@keyframes stickyPulse {
  0% { background: rgba(234, 179, 8, 0.15); }
  50% { background: rgba(234, 179, 8, 0.30); }
  100% { background: rgba(234, 179, 8, 0.15); }
}

/* Dostosowanie do trybu nocnego */
body.night-mode .noaa-sticky-bar {
  background: rgba(255, 0, 0, 0.2);
  color: #ff4d4d;
  border-bottom-color: rgba(255, 0, 0, 0.5);
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Przycisk PDF na wykresie combo */
.bzint-pdf-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(251,146,60,0.8);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(251,146,60,0.3);
  border-radius: 6px;
  padding: 3px 8px;
  text-decoration: none;
  z-index: 10;
  transition: all .15s;
}
.bzint-pdf-btn:hover {
  color: rgba(251,146,60,1);
  border-color: rgba(251,146,60,0.7);
  background: rgba(0,0,0,0.55);
}

/* ===== Aurora photo pill w topbarze ===== */
.aurora-photo-pill {
  text-decoration: none;
  position: relative;
  padding: 4px;
  cursor: pointer;
}

.aurora-photo-thumb {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  transition: border-color .15s, transform .15s;
}

.aurora-photo-pill:hover .aurora-photo-thumb {
  border-color: rgba(255,255,255,.35);
  transform: scale(1.06);
}

.aurora-photo-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  z-index: 200;
  pointer-events: none;
}

.aurora-photo-pill:hover .aurora-photo-tip {
  display: block;
}

/* ===== KPI tooltips — Metryki zorzy ===== */
.kpi-tip-wrap { position: relative; }

.kpi-tip-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  cursor: default;
  flex-shrink: 0;
}

.kpi-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  width: max-content;
  max-width: 340px;
  background: rgba(15,23,42,0.97);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 300;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.kpi-tip-wrap:hover .kpi-tip { display: block; }

.kpi-tip-wrap:last-child .kpi-tip {
  left: auto;
  right: 0;
  transform: none;
}

.kpi-tip-title {
  font-size: 12px;
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 6px;
}

.kpi-tip-body {
  font-size: 11px;
  color: rgba(238,242,255,.75);
  line-height: 1.6;
}

/* Globalne td/th { white-space:nowrap; overflow:hidden } ucinają tabele w tooltipach */
.kpi-tip td,
.kpi-tip th {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
  border-bottom: none !important;
  background: none !important;
}
/* Pierwsza kolumna (progi) — wąska, ale może zawijać przy skrajnych przypadkach */
.kpi-tip td:first-child,
.kpi-tip th:first-child {
  white-space: nowrap !important;
  width: 28% !important;
  padding-right: 8px !important;
  vertical-align: top !important;
}
/* Druga kolumna (opis) — szeroka, zawija normalnie */
.kpi-tip td:last-child,
.kpi-tip th:last-child {
  width: 72% !important;
  vertical-align: top !important;
}
/* Separatory między wierszami */
.kpi-tip tr + tr td,
.kpi-tip tr + tr th {
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding-top: 5px !important;
}

.kpi-tip-body code {
  display: block;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
  padding: 3px 6px;
  margin: 4px 0;
  font-size: 10px;
  color: #fb923c;
  font-family: monospace;
}

/* Aurora Log pill — wyrównanie do rozmiaru photo pill (44px) */
/* ===== Separator w topbarze ===== */
.topbar-separator {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.12);
  margin: 0 6px;
  align-self: center;
  flex-shrink: 0;
}

/* ===== Aurora Log pill ===== */
.aurora-log-pill {
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.aurora-log-pill:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.09);
}
.aurora-log-icon {
  font-size: 20px;
  line-height: 1;
}
.aurora-log-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  z-index: 200;
  pointer-events: none;
}
.aurora-log-pill:hover .aurora-log-tip {
  display: block;
}

/* ===== Tabela zmierzchów — pasek postępu ===== */
/* ── Aktywny wiersz zmierzchu — pasek tło + tekst w jednej komórce ── */
.tw-row-active td,
.tw-active-cell {
  padding: 7px 10px !important;
  border-radius: 4px;
  transition: background .4s;
}
.tw-active-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  width: 100%;
  padding: 7px 10px;
  box-sizing: border-box;
  border-radius: 4px;
}
.tw-arrow {
  color: var(--ok);
  font-size: 9px;
  flex-shrink: 0;
}
.tw-pct {
  font-size: 11px;
  color: var(--ok);
  font-weight: 700;
  min-width: 32px;
  flex-shrink: 0;
}
.tw-name {
  color: var(--text);
  font-weight: 600;
  flex: 1;
}
.tw-times {
  color: var(--muted);
  font-size: 11px;
  margin-left: auto;
  flex-shrink: 0;
}


/* Kontenery na wykresy - muszą mieć stałą wysokość lub proporcje */
.charts-container {
  position: relative;
  height: 220px;
  width: 100%;
}

/* Styl dla statusu Live (Pulsowanie) */
.status-pill.strong {
  background: var(--bad);
  box-shadow: 0 0 12px var(--bad);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Klasy statusów dla pigułek */
.pill-ok {
  background: var(--ok) !important;
  color: #000 !important; /* Ciemny tekst na jasnym zielonym lepiej wygląda */
  font-weight: 600;
}

.pill-warn {
  background: var(--warn) !important;
  color: #000 !important;
  font-weight: 600;
}

.pill-bad {
  background: var(--bad) !important;
  color: #fff !important;
  font-weight: 600;
}

/* Efekt pulsowania dla alarmu */
.pill-pulse {
  animation: status-pulse 2s infinite;
  box-shadow: 0 0 15px var(--bad);
}

@keyframes status-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Klasa nakładana na body */
body.night-mode {
    /* Filtr: odwraca kolory do czerwieni, zwiększa kontrast */
    filter: sepia(1) hue-rotate(-50deg) saturate(4) brightness(0.8);
    background-color: #1a0000 !important; /* Głębsza czerń z odcieniem czerwieni */
}

/* Opcjonalnie: upewnij się, że białe teksty nie są zbyt jasne */
body.night-mode * {
    text-shadow: none !important;
}

/* Przycisk przełącznika */
.night-toggle {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

body.night-mode .night-toggle {
    background: #4d0000;
    border-color: #ff0000;
}

#torchOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ff0000; /* Czysta czerwień - najbezpieczniejsza dla oka */
    z-index: 9999;
    cursor: pointer;
}

#torchOverlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.torch-instruction {
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.3;
    letter-spacing: 2px;
}

/* Przycisk latarki pokazujemy tylko, gdy włączony jest tryb nocny */
body.night-mode #torchBtn {
    display: flex !important;
}
/* ── Weather source select ───────────────────────────── */
.weather-src-select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}
.weather-src-select:hover {
  background: rgba(255,255,255,.14);
}
.weather-src-select option {
  background: var(--card-bg, #1e293b);
  color: var(--text);
}
/* ── Alert panel toggle button ──────────────────────── */
.alert-panel-toggle {
  margin-left: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(238,242,255,.55);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.alert-panel-toggle:hover {
  background: rgba(255,255,255,.12);
  color: var(--text);
}


.debug-log-container {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  max-height: 250px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #a5f3fc; /* Jasny błękit "techniczny" */
}

.debug-entry {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding: 3px 0;
  white-space: pre-wrap;
}

.debug-entry:last-child {
  border-bottom: none;
}

/* Wyróżnienie słów kluczowych w logach */
.debug-entry b { color: var(--warn); }
.debug-entry i { color: var(--ext); }

/* ============================================================
   VERSION BADGE — klikalny badge v1.1 w tytule
   ============================================================ */
.version-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(147,197,253,.12);
  color: rgba(147,197,253,.8);
  border: 1px solid rgba(147,197,253,.2);
  letter-spacing: .3px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  transition: background .2s, color .2s;
  user-select: none;
}
.version-badge:hover {
  background: rgba(147,197,253,.22);
  color: rgba(147,197,253,1);
}

/* ============================================================
   TITLE ROW — city-select obok lastUpdate
   ============================================================ */
.title-city-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.city-select-topbar {
  font-size: 13px !important;
  padding: 3px 8px !important;
  height: auto !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  cursor: pointer;
}
.city-select-topbar:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(147,197,253,.25);
}

/* ============================================================
   FETCH ALERT BAR — pasek alertów z fetch.php
   ============================================================ */
.fetch-alert-bar {
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  z-index: 1000;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Subtelna animacja — warunki aktywne, ale mail nie poszedł */
  animation: fetchAlertPulse 3s ease-in-out infinite;
}
@keyframes fetchAlertPulse {
  0%,100% { opacity: .75; }
  50%      { opacity: 1;   }
}

/* Tryb pilny — PHP wysłał mail. Mocna animacja z miganiem tła */
.fetch-alert-bar.fetch-alert-urgent {
  animation: fetchAlertUrgent 1.2s ease-in-out infinite;
}
@keyframes fetchAlertUrgent {
  0%   { opacity: 1;    background: var(--alert-bg); box-shadow: none; }
  40%  { opacity: 1;    background: var(--alert-bg);
         box-shadow: 0 0 20px var(--alert-fg), inset 0 0 30px rgba(0,0,0,.2); }
  50%  { opacity: 1;    background: rgba(255,255,255,.12);
         box-shadow: 0 0 35px var(--alert-fg); }
  60%  { opacity: 1;    background: var(--alert-bg);
         box-shadow: 0 0 20px var(--alert-fg), inset 0 0 30px rgba(0,0,0,.2); }
  100% { opacity: 1;    background: var(--alert-bg); box-shadow: none; }
}

.fetch-alert-emoji { font-size: 18px; }
.fetch-alert-label { font-size: 14px; }
.fetch-alert-type  {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 1px;
  opacity: .6;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.15);
}
/* Badge "📧 ALERT" gdy mail poszedł */
.fetch-alert-mail {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--alert-bd, rgba(255,255,255,.3));
  animation: mailBadgePulse 1.2s ease-in-out infinite;
}
@keyframes mailBadgePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .7; transform: scale(1.07); }
}

body.night-mode .fetch-alert-bar {
  filter: hue-rotate(180deg) brightness(.8);
}

/* ============================================================
   ABOUT MODAL
   ============================================================ */
.about-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.about-modal-box {
  background: #0f1a2e;
  border: 1px solid rgba(147,197,253,.15);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 580px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.about-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted, #94a3b8);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  line-height: 1;
  padding: 0;
}
.about-modal-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.about-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.about-modal-logo { font-size: 32px; }
.about-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.1;
}
.about-modal-version {
  font-size: 12px;
  color: rgba(147,197,253,.7);
  font-family: var(--font-mono, monospace);
  letter-spacing: .5px;
}
.about-modal-desc {
  font-size: 14px;
  color: var(--muted, #94a3b8);
  line-height: 1.55;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.about-modal-section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(147,197,253,.65);
  margin: 16px 0 8px;
}
.about-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}
.about-modal-list li {
  font-size: 13px;
  color: var(--muted, #94a3b8);
  padding: 5px 0 5px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
  line-height: 1.45;
}
.about-modal-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(147,197,253,.5);
  font-weight: 700;
}
.about-modal-list li:last-child { border-bottom: none; }
.about-modal-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  color: rgba(148,163,184,.45);
  text-align: center;
  font-family: var(--font-mono, monospace);
  letter-spacing: .3px;
}

/* Cloud chart label */
#cloudChartLabel {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: rgba(148,163,184,.7);
  pointer-events: none;
}


/* ENERGY FLOW RUROCIĄG */
/* --- ENERGIA FLOW: OSTATECZNA OPTYMALIZACJA --- */

/* Główny kontener wewnątrz .card */
#energyFlow {
    margin: -5px 0 0 0; /* Negatywny margines niweluje nadmiar miejsca od góry h2 */
}

/* Nagłówek sekcji */
.flow-section-header {
    margin-bottom: 15px; /* Mniejszy odstęp od tytułu do boxów */
}

.flow-section-header h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Kontener boxów */
.flow-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 5px;
    overflow: visible;  /* tooltipsy mogą wystawać ponad kontener */
}

/* Boxy - lżejszy wygląd */
.flow-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;   /* tooltipsy liczą się od flow-box */
    overflow: visible;     /* tooltip nie jest ucinany przez box */
}

/* Wartości i liczby */
.flow-value {
    display: flex;
    flex-direction: column;
    margin: 4px 0;
    min-height: 40px;
    justify-content: center;
}

.flow-value span {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.flow-unit-label {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.5;
    margin-top: 2px;
}

/* Etykiety i statusy */
.flow-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
}

.flow-status {
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
    text-transform: uppercase;
}

.flow-eta {
    font-size: 10px;
    opacity: 0.3;
}

/* Paski postępu */
.flow-bar-container {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 6px auto;
    width: 75%;
    position: relative;
    overflow: visible;
}

.flow-bar-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.5s ease;
}

/* Strzałki */
.flow-arrow {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.1);
}

.active-flow {
    color: var(--warn) !important;
    animation: flow-pulse 1.5s infinite;
}

/*@keyframes flow-pulse {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    50% { transform: translateX(3px); opacity: 1; }
}*/

@keyframes flow-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* RWD - Bardzo ważne dla telefonów */
@media (max-width: 480px) {
    .flow-container {
        flex-direction: column;
        gap: 10px;
    }
    .flow-arrow {
        transform: rotate(90deg);
        margin: -5px 0;
        height: 15px;
        display: flex;
        align-items: center;
    }
    .flow-box {
        width: 100%;
        padding: 12px;
    }
}


/* ============================================================
   FLOW BOX TOOLTIPS — oparte na .kpi-tip, dopasowane do flow-box
   ============================================================ */
.flow-tip-wrap {
  position: relative;
}
/* Tooltip nad flow-boxem — wysuwa się w górę żeby nie zakrywać wartości */
.flow-tip-wrap .flow-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px) !important;  /* pod box */
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  min-width: 280px !important;
  width: max-content !important;
  max-width: 360px !important;
  background: rgba(15,23,42,0.97) !important;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 400;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.flow-tip-wrap:hover .flow-tip { display: block; }

/* HP (ostatni box) — zakotwicz do prawej żeby nie wypadał za ekran */
#flow-hp .flow-tip {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* ============================================================
   FLOW TICKS
   ============================================================ */
/* Kontener musi być bazą dla pozycjonowania */
/* Kontener paska */
.flow-bar-container {
    position: relative;
    overflow: hidden; /* Upewniamy się, że nic nie wystaje */
    border-radius: 4px; /* Jeśli Twoje paski mają zaokrąglone rogi */
}

/* Styl cieniutkiej kreski 1px */
.flow-tick {
    position: absolute;
    top: 0;
    bottom: 0;                /* Rozciąga się dokładnie od góry do dołu */
    width: 1px;               /* Precyzyjna szerokość */
    background: rgba(255, 255, 255, 0.5); /* Subtelna biel */
    z-index: 5;               /* Nad tłem, ale pod tooltipem jeśli trzeba */
    pointer-events: none;
}


/* ============================================================
   VALVE KRANIK
   ============================================================ */
/* ============================================================
   ZAWÓR MAGNETYCZNY — UKŁAD I KONTENER
   ============================================================ */
.sw-table-row {
  display: flex;
  align-items: stretch; /* obie kolumny tej samej wysokości */
  gap: 12px;
}

/* Tabelka kurczy się do swojej naturalnej szerokości */
.sw-table-row #swTable {
  flex: 1 1 auto;
  min-width: 0;
}

/* Na telefonach valve-widget ukryty — wyświetlaj tylko na szerokich ekranach */
.valve-widget { display: none; }
@media (min-width: 1025px) {
  .valve-widget { display: flex; }
}

/* Główny kontener widżetu — display kontrolowany przez media query powyżej */
.valve-widget {
  flex: 0 0 auto;
  align-self: stretch; /* dopasuj wysokość do tabelki */
  margin-top: 8px;
  width: 104px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 8px 6px 10px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: all 0.4s ease;
}

.valve-widget .flow-label {
  font-size: 9px;
  letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ============================================================
   TARCZA (DIAL) I ETYKIETY
   ============================================================ */
.valve-widget .valve-main-dial {
  width: 68px;
  height: 68px;
  margin: 18px auto; /* Miejsce na etykiety zewn. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  transition: all 0.5s ease;
}

/* Nacięcia na tarczy */
.dial-marks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.1) 0deg 1deg,
    transparent 1deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 88%, black 90%);
  mask: radial-gradient(circle, transparent 88%, black 90%);
  pointer-events: none;
}

/* Wspólny styl dla etykiet (+Bz, -Bz itd) */
.dial-label {
  position: absolute;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.label-north { top: -14px; left: 50%; transform: translateX(-50%); }
.label-south { bottom: -14px; left: 50%; transform: translateX(-50%); }
.label-east  { right: -20px; top: 50%; transform: translateY(-50%); }
.label-west  { left: -20px; top: 50%; transform: translateY(-50%); }

/* ============================================================
   STRZAŁKA (SVG)
   ============================================================ */
.valve-widget .main-arrow {
  width: 85%; 
  height: 85%;
  position: relative;
  z-index: 5;
  color: rgba(120, 130, 150, 0.5); /* Domyślny kolor uśpiony */
  transform-box: fill-box;          /* kluczowe dla SVG: transform-origin relative do własnego bbox */
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.5s ease;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

.dial-center {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  z-index: 10;
}

/* ============================================================
   STATUSY I WARTOŚCI
   ============================================================ */
.valve-angle-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-top: 2px;
  font-family: monospace;
}

.valve-widget .flow-status {
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.4s ease;
}

/* ============================================================
   ANIMACJE I STANY AKTYWNE (Dla JS)
   ============================================================ */

/* Pulsowanie przy poborze energii (klasa dodawana przez JS) */
@keyframes valve-pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.valve-widget.active-flow .valve-main-dial {
  border-width: 2px;
  animation: valve-pulse-glow 2s infinite;
}

/* Jeśli chcesz, by pulsowanie miało kolor aktualnego stanu (dynamiczne w JS) */
.valve-widget.active-flow.status-ok .valve-main-dial { animation-name: valve-pulse-green; }
.valve-widget.active-flow.status-bad .valve-main-dial { animation-name: valve-pulse-red; }

@keyframes valve-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(24, 214, 107, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(24, 214, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 214, 107, 0); }
}

@keyframes valve-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 77, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
}

/* Kąt bliski ±180° — pole czysto południowe, optymalna rekonekcja */
@keyframes valve-pulse-south {
  0%   { box-shadow: 0 0 0 0   rgba(255, 77, 109, 0.70); }
  50%  { box-shadow: 0 0 0 14px rgba(255, 77, 109, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 77, 109, 0); }
}

/*
.valve-widget.near-south .valve-main-dial {
  border-color: #ff4d6d !important;
  animation: valve-pulse-south 2s ease-out infinite;
}*/

.valve-widget.near-south .valve-main-dial {
  /* Stała ramka, żeby element był wyraźny */
  border: 2px solid #ff4d6d !important; 
  /* Przypisanie nowej, subtelnej animacji */
  animation: valve-pulse-subtle 2.5s cubic-bezier(0.25, 0, 0.3, 1) infinite;
}

@keyframes valve-pulse-subtle {
  0% {
    /* Cień zaczyna blisko krawędzi z niskim opacity */
    box-shadow: 0 0 0 0px rgba(255, 77, 109, 0.7);
  }
  70% {
    /* Rozszerza się i staje się bardziej przezroczysty */
    box-shadow: 0 0 0 15px rgba(255, 77, 109, 0);
  }
  100% {
    /* Całkowite wygaszenie na końcu cyklu */
    box-shadow: 0 0 0 0px rgba(255, 77, 109, 0);
  }
}

/* Etykieta kąta też pulsuje na czerwono gdy near-south */
/*.valve-widget.near-south .valve-angle-val {
  color: #ff4d6d !important;
  animation: valve-pulse-south 1.2s ease-out infinite;
}*/

/* ============================================================
   MAGNETOMETRY — wykresy INTERMAGNET
   ============================================================ */
.chart-area-mag {
  position: relative;
  height: 160px;   /* niższe niż standardowe wykresy — jest ich 3 pod sobą */
  min-height: 120px;
}
/* ============================================================
   SUBSTORM — PULSUJĄCE TŁO EKRANU
   Aktywuje się gdy substorm aktywny (LMD >= 60 x2 odczyty)
   Klasy dodawane do <body> przez renderSubstorm() w db-ui.js
   ============================================================ */

/* Warstwa tła — fixed, nad treścią, nie blokuje kliknięć */
body.substorm-active::after,
body.substorm-extreme::after,
body.substorm-extreme::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: screen;
}

/* LOCAL (LMD 60–79): zielonkawa poświata od dołu, wolna */
body.substorm-active::after {
  background: radial-gradient(
    ellipse 140% 65% at 50% 100%,
    rgba(24, 214, 107, 0.75) 0%,
    rgba(0,  180,  80, 0.40) 35%,
    rgba(0,  140,  60, 0.15) 60%,
    transparent              80%
  );
  animation: substorm-bg-pulse 5s ease-in-out infinite alternate;
}

/* EXTREME warstwa 1 — zielona baza na dole (::before) */
body.substorm-extreme::before {
  background: radial-gradient(
    ellipse 160% 70% at 50% 100%,
    rgba(24, 214, 107, 0.90) 0%,
    rgba(0,  180,  80, 0.55) 35%,
    rgba(0,  140,  60, 0.20) 60%,
    transparent              80%
  );
  animation: substorm-bg-pulse 5s ease-in-out infinite alternate;
}

/* EXTREME warstwa 2 — fioletowo-różowy poblask nad zielenią (::after) */
body.substorm-extreme::after {
  background: radial-gradient(
    ellipse 150% 70% at 50% 100%,
    rgba(181, 108, 255, 0.85) 0%,
    rgba(255,  77, 109, 0.50) 28%,
    rgba(181, 108, 255, 0.20) 55%,
    transparent               78%
  );
  animation: substorm-bg-pulse 2.5s ease-in-out infinite alternate;
}

@keyframes substorm-bg-pulse {
  from { opacity: 0.55; }
  to   { opacity: 1.00; }
}

/* Wyłącz przy night mode — czerwone tło latarki nie gra z zorzą */
body.night-mode::after,
body.night-mode::before {
  display: none !important;
}

/* ============================================================
   SUBSTORM PANEL — #substormCard
   ============================================================ */

#substormStatus {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 4px;
  color: var(--muted);
  transition: color .3s;
}

#substormSub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Grid czterech mini-statystyk */
.substorm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

/* Pojedyncza mini-stat — wzorowana na .kpi */
.substorm-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px 8px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.substorm-stat .s-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.substorm-stat .s-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.1;
  transition: color .3s;
}

/* Historia epizodów */
#substormHistory {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

#substormHistory .sh-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 11px;
}
#substormHistory .sh-row:last-child { border-bottom: none; }

#substormHistory .sh-time {
  color: var(--muted);
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}
#substormHistory .sh-lmd  { font-weight: 700; }
#substormHistory .sh-lvl  { color: rgba(238,242,255,.40); font-size: 10px; }
#substormHistory .sh-hlp  { color: rgba(238,242,255,.45); font-size: 10px; margin-left: auto; }
#substormHistory .sh-dur  { color: rgba(238,242,255,.35); font-size: 10px; }

/* Aktywny substorm — pulsująca obwódka */
@keyframes substorm-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

#substormCard.substorm-active {
  border-color: rgba(255,77,109,.40);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,77,109,.15);
}
#substormCard.substorm-active #substormStatus {
  animation: substorm-pulse 2s ease-in-out infinite;
}

#substormCard.substorm-extreme {
  border-color: rgba(181,108,255,.50);
  box-shadow: var(--shadow), 0 0 0 1px rgba(181,108,255,.20);
}

/* Responsive: 2 kolumny na wąskich ekranach */
@media (max-width: 480px) {
  .substorm-stats { grid-template-columns: repeat(2, 1fr); }
}