: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;
  --warn:#ffb020;
  --bad:#ff4d6d;
  --ext:#b56cff;
}

*{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;
}

.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; }

.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;
}

.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;
}
.kpi{
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  min-height: 62px;
}
.kpi .label{
  font-size:12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.kpi .val{
  font-size:17px;
  font-weight:750;
  letter-spacing:.2px;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.kpi .unit{
  font-size:12px;
  color: var(--muted);
  font-weight:600;
}

.right-stack{
  display:grid;
  gap:12px;
}

.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{ grid-template-columns: 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%);
  width: 240px;
  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;
}

.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);
}