/* ================================================
   STATUS KSEF - GPU-Accelerated Design System
   Based on DESIGN.md "High-Tech Editorial"
   All animations use transform3d/opacity (GPU layer)
   ================================================ */

/* --- Tokens (Dark - domyslny) --- */
:root, .dark {
  --surface-lowest: #0d0e13;
  --surface: #131319;
  --surface-low: #1b1b21;
  --surface-container: #1f1f25;
  --surface-high: #2a2930;
  --primary: #f2ca50;
  --primary-container: #d4af37;
  --on-primary: #3d2f00;
  --success: #22c55e;
  --warning: #eab308;
  --error: #ef4444;
  --error-container: #93000a;
  --on-surface: #e4e1ea;
  --on-surface-variant: #d0c5af;
  --outline: #99907c;
  --glass-bg: rgba(31, 31, 37, 0.7);
  --shadow: 0 12px 40px rgba(13, 14, 19, 0.5);
  --ghost: rgba(153, 144, 124, 0.15);
  --scrollbar-track: #0d0e13;
  --scrollbar-thumb: #2a2930;
}

/* --- Tokens (Light) --- */
.light {
  --surface-lowest: #faf8f5;
  --surface: #f5f2ed;
  --surface-low: #edeae4;
  --surface-container: #e3e0d9;
  --surface-high: #d9d5ce;
  --surface-border: #cdc9c1;
  --on-surface-muted: #7a756b;
  --on-surface-secondary: #5a5549;
  --primary: #b8860b;
  --primary-container: #996f00;
  --on-primary: #ffffff;
  --success: #16a34a;
  --warning: #ca8a04;
  --error: #dc2626;
  --error-container: #fdf5f0;
  --on-surface: #2c2a25;
  --on-surface-variant: #5a5549;
  --outline: #9c9689;
  --glass-bg: rgba(250, 248, 245, 0.85);
  --shadow: 0 8px 30px rgba(44, 42, 37, 0.06);
  --ghost: rgba(44, 42, 37, 0.06);
  --scrollbar-track: #edeae4;
  --scrollbar-thumb: #c5c0b7;
}

:root {
  --font-headline: 'Poppins', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --ease: cubic-bezier(0.3, 0, 0.1, 1);
}

/* Light mode specific overrides */
.light { color-scheme: light; }
.light body { background: var(--surface); color: var(--on-surface); }
.light .nav-logo { color: var(--primary-container); }
.light .status-dot__core { background: rgba(34, 197, 94, 0.08); }
.light .kpi-card, .light .metric-card, .light .chart-card, .light .env-card {
  background: var(--surface-lowest);
  outline-color: var(--ghost);
}
.light .tool-card { background: var(--surface-lowest); outline-color: var(--ghost); }
.light .tool-details { background: var(--surface-low); outline-color: var(--ghost); }
.light .faq-item { background: var(--surface-lowest); }
.light .faq-item summary { background: var(--surface-low); }
.light .faq-item summary:hover { background: var(--surface-container); }
.light .faq-group { border-color: var(--ghost); }
.light .faq-category { background: rgba(0,0,0,0.02); border-bottom-color: var(--ghost); }
.light .search-box { background: var(--surface-lowest); outline-color: var(--ghost); }
.light .search-results { background: var(--surface-lowest); outline-color: var(--ghost); }
.light .search-result-item:hover { background: var(--surface-low); }
.light .newsletter-inner { background: var(--surface-lowest); outline-color: var(--ghost); }
.light .newsletter-input { background: var(--surface-low); color: var(--on-surface); }
.light .footer { background: var(--surface-low); border-top-color: var(--ghost); }
.light .alert-banner--down { background: #fdf0ee; color: var(--error); }
.light .alert-banner--warn { background: #fdf8e8; color: var(--warning); }
.light .alert-banner--maint { background: #eeeffa; color: #4f46e5; }
.light .dev-panel { background: var(--surface-lowest); outline-color: var(--ghost); }
.light .tool-card--full { background: var(--surface-lowest); outline-color: var(--ghost); }
.light .api-info-value { color: var(--on-surface-variant); }
.light .api-info-label { color: var(--on-surface-variant); }
.light .kpi-label { color: var(--on-surface-variant); }
.light .env-stat-label { color: var(--on-surface-variant); }
.light .env-bars-legend { color: var(--on-surface-variant); }
.light .heatmap-hour { color: var(--on-surface-variant); }
.light .heatmap-day { color: var(--on-surface-variant); }
.light .tool-meta { color: var(--on-surface-variant); }
.light .tool-desc { color: var(--on-surface-variant); }
.light .tools-sub { color: var(--on-surface-variant); }
.light .tools-footnote { color: var(--on-surface-variant); }
.light .metric-label { color: var(--on-surface-variant); }
.light .metric-trend { color: var(--on-surface-variant); }
.light .section-meta { color: var(--on-surface-variant); }
.light .hero-sub { color: var(--on-surface-variant); }
.light .bar-head span:last-child { color: var(--on-surface-variant); }
.light .env-ping { color: var(--on-surface-variant); }
.light .search-input::placeholder { color: rgba(0,0,0,0.35); }
.light .newsletter-input::placeholder { color: rgba(0,0,0,0.35); }
.light .newsletter-desc { color: var(--on-surface-variant); }
.light .faq-body { color: var(--on-surface-variant); }
.light .footer-legal { color: var(--on-surface-variant); }
.light .footer-col a { color: var(--on-surface-variant); opacity: 0.8; }
.light .footer-bottom { color: var(--on-surface-variant); }
.light .env-status-badge--ok { background: rgba(22, 163, 74, 0.1); color: #15803d; }
.light .kpi-value--accent { color: #15803d; }

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--on-surface);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* Material Symbols - ukryj tekst zanim font sie zaladuje */
.material-symbols-outlined { overflow: hidden; display: inline-block; vertical-align: middle; }
img { display: block; max-width: 100%; }

/* --- GPU Animation Keyframes --- */
@keyframes pulse-ring {
  0%   { transform: scale3d(1, 1, 1);   opacity: 0.7; }
  70%  { transform: scale3d(1.8, 1.8, 1); opacity: 0; }
  100% { transform: scale3d(1.8, 1.8, 1); opacity: 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale3d(0.92, 0.92, 1); }
  to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes slide-right {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heatmap-cell {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Ciagle zywe animacje - strona "oddycha" */
@keyframes subtle-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -3px, 0); }
}
@keyframes counter-tick {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 1; }
}
@keyframes bar-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); }
}

/* Stagger delays */
.kpi-card--stagger-1, .metric-card--stagger-1 { animation-delay: 0.1s; }
.kpi-card--stagger-2, .metric-card--stagger-2 { animation-delay: 0.2s; }
.kpi-card--stagger-3, .metric-card--stagger-3 { animation-delay: 0.3s; }
.metric-card--stagger-4 { animation-delay: 0.4s; }

/* --- Scroll-triggered visibility (IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: transform, opacity;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ======================== NAV ======================== */
#nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  background: var(--surface);
  box-shadow: var(--shadow);
  will-change: transform;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
}
.nav-logo {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.25rem;
  color: var(--primary); letter-spacing: -0.03em;
}
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-family: var(--font-headline); font-size: 0.875rem; font-weight: 500;
  color: var(--on-surface-variant); transition: color 0.3s var(--ease);
  letter-spacing: -0.01em;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-links a.active { border-bottom: 2px solid var(--primary); padding-bottom: 4px; }
.nav-theme {
  background: none; border: none; cursor: pointer; padding: 8px;
  border-radius: 8px; transition: background 0.3s;
  color: var(--primary);
}
.nav-theme:hover { background: var(--surface-high); }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span {
  display: block; width: 20px; height: 2px; background: var(--on-surface);
  margin: 4px 0; transition: all 0.3s;
}

/* ======================== HERO ======================== */
.hero {
  padding: 100px 32px 32px;
  display: flex; align-items: center; justify-content: center;
}
.hero-inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero-main {
  text-align: center;
  animation: fade-up 0.8s var(--ease) both;
}

/* Status dot - GPU composited */
.status-dot {
  position: relative; width: 72px; height: 72px;
  margin: 0 auto 24px;
  will-change: transform;
  animation: scale-in 0.5s var(--ease) both;
}
.status-dot__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--success);
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: transform, opacity;
}
.status-dot__core {
  width: 100%; height: 100%; border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  display: flex; align-items: center; justify-content: center;
  animation: glow-pulse 3s ease-in-out infinite;
}
.status-dot__core .material-symbols-outlined {
  font-size: 36px; color: var(--success);
}

/* Status: warn */
.status-dot--warn .status-dot__ring { border-color: var(--warning); }
.status-dot--warn .status-dot__core { background: rgba(234, 179, 8, 0.12); }
.status-dot--warn .status-dot__core .material-symbols-outlined { color: var(--warning); }
@keyframes glow-pulse-warn {
  0%, 100% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(234, 179, 8, 0.6); }
}
.status-dot--warn .status-dot__core { animation-name: glow-pulse-warn; }

/* Status: down */
.status-dot--down .status-dot__ring {
  border-color: var(--error);
  animation-duration: 1s;
}
.status-dot--down .status-dot__core { background: rgba(239, 68, 68, 0.12); }
.status-dot--down .status-dot__core .material-symbols-outlined { color: var(--error); }
@keyframes glow-pulse-down {
  0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
  50%      { box-shadow: 0 0 50px rgba(239, 68, 68, 0.7); }
}
.status-dot--down .status-dot__core { animation-name: glow-pulse-down; }

.hero-title {
  font-family: var(--font-headline); font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.02em; margin: 0;
}
.hero-title--down { color: var(--error); }
.hero-sub {
  font-size: 0.875rem; color: var(--on-surface-variant);
  margin-top: 8px; letter-spacing: 0.03em;
  animation: counter-tick 4s ease-in-out infinite;
}

/* KPI Cards */
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.kpi-card {
  background: var(--surface-low); border-radius: 12px; padding: 24px 20px;
  text-align: center;
  outline: 1px solid var(--ghost);
  animation: scale-in 0.5s var(--ease) both;
  will-change: transform, opacity;
  transition: transform 0.3s var(--ease);
}
.kpi-card:hover { transform: translate3d(0, -2px, 0); }
/* Ciagle zywe animacje - karty "oddychaja" */
.kpi-card { animation: scale-in 0.5s var(--ease) both, subtle-float 6s ease-in-out infinite; }
.kpi-card--stagger-1 { animation-delay: 0.1s, 0s; }
.kpi-card--stagger-2 { animation-delay: 0.2s, 2s; }
.kpi-card--stagger-3 { animation-delay: 0.3s, 4s; }
.kpi-label {
  display: block; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(208, 197, 175, 0.6); font-weight: 600;
}
.kpi-value {
  display: block; font-family: var(--font-headline); font-size: 1.5rem;
  font-weight: 700; margin-top: 6px;
}
.kpi-value--accent { color: var(--primary); }
.kpi-value--error { color: var(--error); }

/* Environment cards */
.env-row {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; width: 100%;
}
.env-card {
  background: var(--surface-container); border-radius: 12px; padding: 20px 28px;
  outline: 1px solid var(--ghost); min-width: 280px; flex: 1 1 calc(33.333% - 12px); max-width: 380px;
  animation: slide-right 0.6s var(--ease) both;
  will-change: transform, opacity;
}
.env-card:nth-child(2) { animation-delay: 0.15s; }
.env-card:nth-child(3) { animation-delay: 0.3s; }
.env-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.env-head-left { display: flex; align-items: center; gap: 10px; }
.env-name { font-family: var(--font-headline); font-weight: 700; font-size: 1rem; }
.env-name--down { color: var(--error); }
.env-name--warn { color: var(--warning); }
.env-version {
  font-size: 0.6875rem; padding: 2px 10px; background: var(--surface-high);
  border-radius: 4px; color: var(--on-surface-variant);
}
.env-status-badge {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 4px; text-transform: uppercase;
}
.env-status-badge--ok { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.env-status-badge--warn { background: rgba(234, 179, 8, 0.12); color: var(--warning); }
.env-status-badge--down { background: rgba(239, 68, 68, 0.15); color: var(--error); }

/* Stats row - 4 mini metryki w rzedzie */
.env-stats {
  display: flex; gap: 16px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ghost);
}
.env-stat { display: flex; flex-direction: column; gap: 2px; }
.env-stat-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(208, 197, 175, 0.45); font-weight: 600;
}
.env-stat-value {
  font-family: var(--font-headline); font-size: 0.8125rem; font-weight: 700;
  color: var(--on-surface);
}
.env-stat--ok { color: var(--success); }
.env-stat--warn { color: var(--warning); }
.env-stat--error { color: var(--error); }

.env-bars { display: flex; gap: 3px; height: 24px; }
.env-bar {
  position: relative;
  flex: 1; border-radius: 2px; background: var(--success); opacity: 0.9;
  transform-origin: bottom;
  animation: fade-in 0.3s var(--ease) both;
  will-change: opacity;
}
.env-bar[title]::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface-container); color: var(--on-surface);
  font-size: 0.6875rem; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.env-bar[title]:hover::after { opacity: 1; }
.env-bar--warn { background: var(--warning); opacity: 1; }
.env-bar--down { background: var(--error); opacity: 1; }

.env-bars-legend {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 0.6875rem; color: rgba(208, 197, 175, 0.3); letter-spacing: 0.03em;
}

/* API Info bar - techniczne dane pod srodowiskami */
.api-info-bar {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  padding: 12px 0 0;
  margin-top: 8px;
}
.api-info-item { display: flex; align-items: center; gap: 6px; }
.api-info-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(208, 197, 175, 0.35); font-weight: 600;
}
.api-info-value {
  font-family: var(--font-headline); font-size: 0.6875rem; font-weight: 600;
  color: rgba(208, 197, 175, 0.6);
}

/* ======================== SEARCH FAQ ======================== */
.search-section {
  padding: 0 32px 8px;
}
.search-inner {
  max-width: 700px; margin: 0 auto;
}
.search-box {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-low); border-radius: 12px;
  padding: 14px 20px;
  outline: 1px solid var(--ghost);
  transition: outline-color 0.3s;
}
.search-box:focus-within {
  outline-color: rgba(242, 202, 80, 0.35);
}
.search-ico { color: var(--on-surface-variant); opacity: 0.4; font-size: 22px; }
.search-input {
  flex: 1; background: none; border: none; color: var(--on-surface);
  font-family: var(--font-body); font-size: 0.9375rem;
  outline: none;
}
.search-input::placeholder { color: rgba(208, 197, 175, 0.35); }

/* Autocomplete dropdown */
.search-results {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-container); border-radius: 10px;
  outline: 1px solid var(--ghost);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  max-height: 320px; overflow-y: auto; z-index: 50;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.search-results.visible { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(153, 144, 124, 0.08);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--surface-high); }
.search-result-item .material-symbols-outlined {
  color: var(--primary-container); font-size: 18px; flex-shrink: 0;
}
.search-result-text {
  font-size: 0.8125rem; color: var(--on-surface);
}
.search-result-cat {
  font-size: 0.625rem; color: var(--on-surface-variant); opacity: 0.5;
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: auto;
  white-space: nowrap;
}
.search-highlight { color: var(--primary); font-weight: 700; }
.search-no-results {
  padding: 16px 18px; text-align: center;
  font-size: 0.8125rem; color: var(--on-surface-variant); opacity: 0.5;
}

/* ======================== SECTIONS ======================== */
.section { padding: 48px 32px; overflow-x: clip; }
.section--alt { background: var(--surface-lowest); }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px;
}
.section-title {
  font-family: var(--font-headline); font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700; letter-spacing: -0.02em;
}
.section-meta {
  font-size: 0.6875rem; color: var(--on-surface-variant); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Metrics grid */
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px;
}
.metric-card {
  background: var(--surface-low); border-radius: 12px; padding: 24px;
  outline: 1px solid var(--ghost);
  animation: scale-in 0.5s var(--ease) both;
  will-change: transform, opacity;
}
.metric-label { font-size: 0.875rem; color: var(--on-surface-variant); font-weight: 500; }
.metric-val-row { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.metric-value {
  font-family: var(--font-headline); font-size: 1.625rem; font-weight: 700;
}
.metric-value--gold { color: var(--primary); }
.metric-value--error { color: var(--error); }
.metric-trend { font-size: 0.75rem; color: var(--on-surface-variant); font-weight: 600; }
.metric-trend--up { color: var(--success); }
.metric-trend--down { color: var(--error); }

/* Charts row */
.charts-row { display: flex; flex-direction: column; gap: 24px; }
.chart-card {
  background: var(--surface-low); border-radius: 12px; padding: 32px;
  outline: 1px solid var(--ghost);
}
.chart-title {
  font-family: var(--font-headline); font-size: 1.125rem; font-weight: 700; margin-bottom: 24px;
}

/* Hint icon - tooltip przy naglowkach */
.hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ghost); color: var(--on-surface-variant);
  font-size: 0.6875rem; font-weight: 700; font-style: normal;
  cursor: help; vertical-align: middle; margin-left: 6px;
  position: relative; font-family: var(--font-body);
  transition: background 0.15s;
}
.hint-icon:hover { background: var(--surface-high); color: var(--on-surface); }
.hint-icon::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: 260px;
  background: var(--surface-container); color: var(--on-surface);
  font-size: 0.75rem; font-weight: 400; line-height: 1.5;
  padding: 10px 14px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s;
  z-index: 100; text-align: left;
}
.hint-icon:hover::after { opacity: 1; }
.kpi-label .hint-icon { width: 16px; height: 16px; font-size: 0.625rem; }
.kpi-label .hint-icon::after { width: 220px; }
.metric-label .hint-icon { width: 16px; height: 16px; font-size: 0.625rem; vertical-align: middle; margin-left: 4px; }
.metric-label .hint-icon::after { width: 240px; }

/* Heatmap - GPU animated cells */
.heatmap {
  display: grid;
  grid-template-columns: 40px repeat(24, 1fr);
  grid-template-rows: auto repeat(7, 1fr);
  gap: 3px;
}
.heatmap-corner { /* pusty naroznik lewy-gorny */ }
.heatmap-hour {
  font-size: 0.5625rem; color: rgba(208, 197, 175, 0.4); font-weight: 600;
  text-align: center; padding-bottom: 4px; letter-spacing: 0.02em;
}
.heatmap-day {
  font-size: 0.625rem; color: rgba(208, 197, 175, 0.5); font-weight: 700;
  display: flex; align-items: center; letter-spacing: 0.05em;
}
.heatmap-cell {
  aspect-ratio: 1; border-radius: 3px;
  animation: heatmap-cell 0.6s var(--ease) both;
  will-change: opacity;
}
.heatmap-days { display: none; /* labels are now inside the grid */ }
.heatmap-cell--nodata {
  background: var(--ghost) !important;
  opacity: 0.4;
}
/* Legenda heatmapy */
.heatmap-legend {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 8px; padding-top: 8px;
}
.heatmap-legend-label {
  font-size: 0.6875rem; color: var(--on-surface-variant); margin: 0 4px;
}
.heatmap-legend-cell {
  width: 14px; height: 14px; border-radius: 2px;
}
/* Nodata state dla uptime bars */
.env-bar--nodata {
  background: var(--ghost); opacity: 0.3;
}

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 20px; }
.bar-head { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 6px; }
.bar-head span:last-child { color: var(--on-surface-variant); }
.bar-track {
  height: 8px; background: var(--surface-high); border-radius: 999px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: var(--bar-w);
  background: linear-gradient(90deg, var(--primary), var(--primary-container));
  border-radius: 999px;
  transform-origin: left;
  animation: bar-grow 1s var(--ease) both;
  animation-delay: 0.5s;
  will-change: transform;
}

/* ======================== FAQ ======================== */
/* FAQ - 2 kolumny obok siebie */
.faq-header { text-align: center; margin-bottom: 28px; }
.faq-desc { color: var(--on-surface-variant); margin-top: 8px; line-height: 1.7; }
.faq-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.faq-col { display: flex; flex-direction: column; gap: 10px; }
.faq-list { display: flex; flex-direction: column; gap: 20px; }

/* FAQ Group - ramka grupujaca kategorie */
.faq-group {
  border: 1px solid rgba(153, 144, 124, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.faq-category {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-headline); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary-container);
  margin: 0; padding: 12px 18px;
  background: rgba(212, 175, 55, 0.04);
  border-bottom: 1px solid rgba(153, 144, 124, 0.06);
}
.faq-cat-ico { font-size: 16px; opacity: 0.6; }
/* Pytania wewnatrz grupy - bez border-radius */
.faq-group .faq-item { border-radius: 0; outline: none; border-bottom: 1px solid rgba(153, 144, 124, 0.04); }
.faq-group .faq-item:last-child { border-bottom: none; }
.faq-item {
  background: var(--surface-lowest); border-radius: 10px; overflow: hidden;
  outline: 1px solid rgba(153, 144, 124, 0.08);
  transition: outline-color 0.3s;
}
.faq-item[open] { outline-color: rgba(242, 202, 80, 0.15); }
.faq-item summary {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  cursor: pointer; font-family: var(--font-headline); font-weight: 600;
  font-size: 0.875rem; list-style: none; -webkit-user-select: none; user-select: none;
  background: var(--surface-low);
  transition: background 0.3s;
}
.faq-item summary:hover { background: var(--surface-container); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { color: var(--primary-container); font-size: 18px; flex-shrink: 0; opacity: 0.7; }
.faq-arrow {
  margin-left: auto; color: var(--on-surface-variant); font-size: 18px; opacity: 0.4;
  transition: transform 0.3s var(--ease); flex-shrink: 0;
}
.faq-item[open] .faq-arrow { transform: rotate(180deg); opacity: 0.7; }

/* FAQ highlight from search */
@keyframes faq-flash {
  0%   { outline-color: var(--primary); box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.25); }
  50%  { outline-color: var(--primary); box-shadow: 0 0 12px 4px rgba(184, 134, 11, 0.15); }
  100% { outline-color: transparent; box-shadow: none; }
}
.faq-highlight {
  animation: faq-flash 2.5s ease-out;
  outline: 2px solid var(--primary) !important;
  z-index: 2;
}
.faq-body {
  padding: 14px 20px 16px 52px; color: var(--on-surface-variant);
  font-size: 0.8125rem; line-height: 1.7;
  border-top: 1px solid rgba(153, 144, 124, 0.06);
  animation: fade-up 0.2s var(--ease) both;
}
.faq-badge {
  display: inline-block; padding: 2px 10px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 700; margin: 0 2px;
}
.faq-badge--ok { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.faq-badge--warn { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.faq-badge--down { background: rgba(239, 68, 68, 0.15); color: var(--error); }

/* ======================== TOOLS (dyskretna) ======================== */
.tools-section { background: var(--surface-lowest); }
.tools-head { text-align: center; margin-bottom: 36px; }
.tools-title {
  font-family: var(--font-headline); font-size: 1.25rem; font-weight: 700;
  color: var(--on-surface-variant);
}
.tools-sub { font-size: 0.8125rem; color: rgba(208, 197, 175, 0.5); margin-top: 4px; }
.tools-label-line {
  display: flex; align-items: center; gap: 16px; margin: 24px 0 16px;
}
.tools-label-line::before, .tools-label-line::after {
  content: ''; flex: 1; height: 1px; background: var(--ghost);
}
.tools-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--primary-container); font-weight: 600; white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.state-ok .tools-label { color: var(--success); }
.state-warn .tools-label { color: var(--warning); }
.state-down .tools-label { color: var(--error); }
.state-maint .tools-label { color: #818cf8; }
.tools-grid {
  display: grid; gap: 12px;
}
.tools-grid--1 { grid-template-columns: 1fr; }
.tools-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tools-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Rozwijana karta produktu */
.tool-expand {
  display: flex; flex-direction: column;
}
.tool-expand > .tool-card {
  cursor: pointer; list-style: none;
}
.tool-expand > .tool-card::-webkit-details-marker { display: none; }
.tool-details {
  background: var(--surface-container); border-radius: 0 0 10px 10px;
  padding: 16px 20px; margin-top: -4px;
  outline: 1px solid var(--ghost);
  animation: fade-up 0.3s var(--ease) both;
}
.tool-details ul {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.tool-details li {
  font-size: 0.8125rem; color: var(--on-surface-variant);
  padding-left: 14px; position: relative;
}
.tool-details li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary-container);
}
.tool-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.tool-cta {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px 18px; border-radius: 6px;
  font-family: var(--font-headline); font-size: 0.75rem; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary); text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.tool-cta:hover { transform: translate3d(0, -1px, 0); }
.tool-cta--ghost {
  background: none; border: 1px solid var(--ghost); color: var(--on-surface-variant);
}

/* Tools group - ramka grupujaca jak FAQ */
.tools-group {
  border: 1px solid rgba(153, 144, 124, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.tools-group-header {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-headline); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--on-surface-variant); opacity: 0.6;
  padding: 10px 18px;
  background: rgba(153, 144, 124, 0.04);
  border-bottom: 1px solid rgba(153, 144, 124, 0.06);
}
.tools-group-ico { font-size: 16px; opacity: 0.5; }
.tools-grid--grouped { gap: 1px; background: rgba(153, 144, 124, 0.1); }
.tools-grid--grouped .tool-expand { background: var(--surface-lowest); }
.tools-grid--grouped .tool-card { border-radius: 0; outline: none; }
.tools-grid--grouped .tool-details { border-radius: 0; outline: none; margin-top: 0; border-top: 1px solid rgba(153, 144, 124, 0.1); }

/* DOKimo - pelna szerokosc */
.tool-card--full {
  display: block; background: var(--surface-low); border-radius: 10px;
  padding: 24px 28px; outline: 1px solid var(--ghost);
  transition: background 0.3s var(--ease), opacity 0.3s; opacity: 0.85;
}
.tool-card--full:hover { background: var(--surface-container); opacity: 1; }
.tool-card--full-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.tool-card--full-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0;
}
.tool-card--full-right .tool-cta {
  margin: 0; white-space: nowrap;
  background: linear-gradient(135deg, var(--dev-cta-from), var(--dev-cta-to));
  color: var(--dev-cta-color);
}
.tool-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-low); border-radius: 10px; padding: 18px 20px;
  outline: 1px solid var(--ghost);
  transition: background 0.3s var(--ease), opacity 0.3s;
  opacity: 0.8;
}
.tool-card:hover { background: var(--surface-container); opacity: 1; }
.tool-name { font-family: var(--font-headline); font-weight: 600; font-size: 1rem; }
.tool-desc { font-size: 0.8125rem; color: var(--on-surface-variant); }
.tool-meta { font-size: 0.75rem; color: rgba(208, 197, 175, 0.45); }
/* Dev tools - kolor zalezy od stanu (CSS custom properties) */
:root {
  --dev-accent: 34, 197, 94;
  --dev-text: #6ee7a0;
  --dev-cta-from: #22c55e;
  --dev-cta-to: #16a34a;
  --dev-cta-color: #052e16;
}
.tools-grid--dev .tool-card {
  background: linear-gradient(135deg, rgba(var(--dev-accent), 0.07) 0%, rgba(var(--dev-accent), 0.01) 50%, var(--surface-lowest) 100%);
  outline-color: rgba(var(--dev-accent), 0.15);
}
.tools-grid--dev .tool-card:hover {
  background: linear-gradient(135deg, rgba(var(--dev-accent), 0.12) 0%, rgba(var(--dev-accent), 0.03) 50%, var(--surface-low) 100%);
}
.tools-grid--dev .tool-name { color: var(--dev-text); }
.tools-grid--dev .tool-details {
  background: linear-gradient(135deg, rgba(var(--dev-accent), 0.03) 0%, var(--surface-lowest) 60%);
  outline-color: rgba(var(--dev-accent), 0.08);
}
.tools-grid--dev .tool-cta {
  background: linear-gradient(135deg, var(--dev-cta-from), var(--dev-cta-to));
  color: var(--dev-cta-color);
}
.tools-grid--dev .tool-cta--ghost {
  background: none; border-color: rgba(var(--dev-accent), 0.2); color: var(--dev-text);
}
/* Dev tools per-state overrides */
.state-ok  { --dev-accent: 34, 197, 94;  --dev-text: #6ee7a0; --dev-cta-from: #22c55e; --dev-cta-to: #16a34a; --dev-cta-color: #052e16; }
.state-warn { --dev-accent: 234, 179, 8; --dev-text: #fbbf24; --dev-cta-from: #eab308; --dev-cta-to: #ca8a04; --dev-cta-color: #422006; }
.state-down { --dev-accent: 239, 68, 68; --dev-text: #f87171; --dev-cta-from: #ef4444; --dev-cta-to: #b91c1c; --dev-cta-color: #fff; }
.state-maint { --dev-accent: 99, 102, 241; --dev-text: #a5b4fc; --dev-cta-from: #6366f1; --dev-cta-to: #4f46e5; --dev-cta-color: #e0e7ff; }

.tools-footnote {
  text-align: center; font-size: 0.6875rem; color: rgba(208, 197, 175, 0.35);
  margin-top: 20px;
}

/* ======================== NEWSLETTER ======================== */
.newsletter {
  background: var(--surface); padding: 60px 32px;
}
.newsletter-inner {
  max-width: 1000px; margin: 0 auto;
  background: var(--surface-low); border-radius: 16px; padding: 40px 48px;
  outline: 1px solid var(--ghost);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.newsletter-title { font-family: var(--font-headline); font-size: 1.375rem; font-weight: 800; }
.newsletter-desc { color: var(--on-surface-variant); font-size: 0.875rem; margin-top: 4px; }
.newsletter-form { display: flex; gap: 12px; flex-shrink: 0; }
.newsletter-input {
  background: var(--surface-lowest); border: none; border-radius: 8px;
  padding: 14px 20px; color: var(--on-surface); font-family: var(--font-body);
  font-size: 0.875rem; width: 280px;
  outline: 1px solid transparent;
  transition: outline-color 0.3s;
}
.newsletter-input:focus { outline-color: rgba(242, 202, 80, 0.4); }
.newsletter-input::placeholder { color: rgba(208, 197, 175, 0.3); }
.newsletter-btn {
  background: linear-gradient(135deg, var(--success), #16a34a);
  color: #052e16; border: none; border-radius: 8px;
  padding: 14px 28px; font-family: var(--font-headline); font-weight: 700;
  font-size: 0.875rem; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.newsletter-btn:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}

/* ======================== ALERT BANNER ======================== */
/* Alert banner - miedzy nav a hero, pelna szerokosc */
.alert-banner {
  display: none;
  width: 100%; z-index: 90;
  padding: 12px 24px; text-align: center;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: center; justify-content: center; gap: 10px;
  margin-top: 64px; /* pod fixed nav */
}
.alert-banner--warn { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.alert-banner--down { background: var(--error-container); color: #ffdad6; }
/* Gdy banner widoczny, hero nie potrzebuje margin-top pod nav */
.alert-banner[style*="flex"] + .hero { padding-top: 32px; }

/* ======================== DEV PANEL - przelacznik stanow ======================== */
.dev-panel {
  position: fixed; bottom: 20px; left: 20px; z-index: 200;
  background: var(--surface-container); border-radius: 12px;
  padding: 16px 20px;
  outline: 1px solid var(--ghost);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-family: var(--font-body); font-size: 0.75rem;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 280px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.dev-panel__title {
  font-family: var(--font-headline); font-weight: 700; font-size: 0.8125rem;
  color: var(--primary); display: flex; align-items: center; gap: 6px;
}
.dev-panel__row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dev-btn {
  padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  will-change: transform;
}
.dev-btn:hover { transform: translate3d(0, -1px, 0); }
.dev-btn--ok { background: var(--success); color: #000; }
.dev-btn--warn { background: var(--warning); color: #000; }
.dev-btn--down { background: var(--error); color: #fff; }
.dev-btn--maint { background: #6366f1; color: #fff; }
.dev-btn.active { box-shadow: 0 0 0 2px var(--on-surface), 0 0 12px currentColor; }
.dev-panel__ico { font-size: 16px; }
.dev-btn--live {
  background: var(--surface-high); color: var(--on-surface); width: 100%;
  border: 1px dashed var(--ghost);
}
.dev-panel__info {
  font-size: 0.625rem; color: var(--on-surface-variant); opacity: 0.5;
  line-height: 1.5;
}
.dev-panel__timer {
  font-family: var(--font-headline); font-size: 1.25rem; font-weight: 800;
  color: var(--error); text-align: center; padding: 4px 0;
  display: none;
}
.dev-panel__timer.visible { display: block; }

/* ======================== FOOTER ======================== */
.footer {
  background: var(--surface-lowest); padding: 60px 32px 24px;
  border-top: 1px solid rgba(153, 144, 124, 0.12);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand {
  padding-right: 32px;
  border-right: 1px solid rgba(153, 144, 124, 0.08);
}
.footer-logo {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.125rem;
  color: var(--on-surface); display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.footer-logo::before {
  content: ''; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
.footer-legal {
  font-size: 0.75rem; color: var(--on-surface-variant); line-height: 1.8;
  max-width: 360px; opacity: 0.6;
}
.footer-heading {
  font-family: var(--font-headline); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary-container); margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 0.8125rem; color: var(--on-surface-variant);
  transition: color 0.3s; opacity: 0.65;
}
.footer-col a:hover { color: var(--primary); opacity: 1; }
.footer-bottom {
  max-width: 1280px; margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(153, 144, 124, 0.08);
  font-size: 0.6875rem; color: var(--on-surface-variant); opacity: 0.4;
  text-align: center;
}

/* ======================== GLOBAL STATE THEMES ======================== */
/* Plynne GPU transitions na KAZDYM elemencie reagujacym na stan */
.env-card, .metric-card, .chart-card, .kpi-card, .faq-item,
.newsletter-inner, .hero, .section, .bar-track, .newsletter-btn {
  transition: outline-color 0.6s var(--ease), border-color 0.6s var(--ease),
              background 0.6s var(--ease), color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}

/* ---- STATE: OK - zielone akcenty ---- */
.state-ok .hero { border-left: none; }
.state-ok .metric-card { outline-color: rgba(34, 197, 94, 0.1); }
.state-ok .chart-card { outline-color: rgba(34, 197, 94, 0.08); }
.state-ok .section-title { color: var(--on-surface); }
.state-ok #stats {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.02) 0%, transparent 100%);
}
.state-ok .bar-fill {
  background: linear-gradient(90deg, var(--success), #16a34a) !important;
}
.state-ok .metric-value--gold { color: var(--success); }
.state-ok .metric-trend--up { color: var(--success); }
.state-ok .faq-group { border-color: rgba(34, 197, 94, 0.08); }
.state-ok .faq-category { background: rgba(34, 197, 94, 0.03); border-bottom-color: rgba(34, 197, 94, 0.06); color: var(--success); }
.state-ok .faq-cat-ico { color: var(--success); }
.state-ok .faq-ico { color: var(--success); }
.state-ok .faq-item[open] { outline-color: rgba(34, 197, 94, 0.12); }
.state-ok .newsletter-inner { outline-color: rgba(34, 197, 94, 0.12); }

/* ---- STATE: DOWN - CZERWONY ---- */
.state-down .hero {
  border-left: 4px solid var(--error);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, var(--surface) 50%);
}
.state-down .env-card { outline-color: rgba(239, 68, 68, 0.35); }
.state-down .kpi-card { outline-color: rgba(239, 68, 68, 0.2); }
.state-down .metric-card { outline-color: rgba(239, 68, 68, 0.2); }
.state-down .metric-card:nth-child(1),
.state-down .metric-card:nth-child(2) { border-bottom: 2px solid rgba(239, 68, 68, 0.5); }
.state-down .chart-card { outline-color: rgba(239, 68, 68, 0.2); }
.state-down #stats { background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, transparent 100%); }
/* FAQ */
.state-down .faq-group { border-color: rgba(239, 68, 68, 0.12); }
.state-down .faq-category { background: rgba(239, 68, 68, 0.04); border-bottom-color: rgba(239, 68, 68, 0.08); color: var(--error); }
.state-down .faq-cat-ico { color: var(--error); }
.state-down .faq-ico { color: var(--error); }
.state-down .faq-item[open] { outline-color: rgba(239, 68, 68, 0.15); }
/* Newsletter */
.state-down .newsletter-inner {
  outline-color: rgba(239, 68, 68, 0.25);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, var(--surface-low) 60%);
}
.state-down .newsletter-btn {
  background: linear-gradient(135deg, var(--error), #b91c1c) !important;
  color: #fff !important;
}
.state-down .newsletter-input:focus { outline-color: rgba(239, 68, 68, 0.4); }

/* Bar fill error variant */
.bar-fill--error {
  background: linear-gradient(90deg, var(--error), #b91c1c) !important;
}
.bar-val--error { color: var(--error); font-weight: 700; }

/* ---- STATE: WARN - ZOLTY ---- */
.state-warn .hero {
  border-left: 4px solid var(--warning);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.03) 0%, var(--surface) 50%);
}
.state-warn .env-card { outline-color: rgba(234, 179, 8, 0.25); }
.state-warn .kpi-card { outline-color: rgba(234, 179, 8, 0.15); }
.state-warn .metric-card { outline-color: rgba(234, 179, 8, 0.15); }
.state-warn .chart-card { outline-color: rgba(234, 179, 8, 0.12); }
.state-warn #stats { background: linear-gradient(180deg, rgba(234, 179, 8, 0.02) 0%, transparent 100%); }
.state-warn .bar-fill { background: linear-gradient(90deg, var(--warning), #ca8a04) !important; }
/* FAQ */
.state-warn .faq-group { border-color: rgba(234, 179, 8, 0.1); }
.state-warn .faq-category { background: rgba(234, 179, 8, 0.03); border-bottom-color: rgba(234, 179, 8, 0.06); color: var(--warning); }
.state-warn .faq-cat-ico { color: var(--warning); }
.state-warn .faq-ico { color: var(--warning); }
.state-warn .faq-item[open] { outline-color: rgba(234, 179, 8, 0.12); }
/* Newsletter */
.state-warn .newsletter-inner { outline-color: rgba(234, 179, 8, 0.15); }
.state-warn .newsletter-btn {
  background: linear-gradient(135deg, var(--warning), #ca8a04) !important;
  color: #422006 !important;
}

/* ---- STATE: MAINT (przerwa techniczna) - NIEBIESKI ---- */
.state-maint .hero {
  border-left: 4px solid #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, var(--surface) 50%);
}
.state-maint .env-card { outline-color: rgba(99, 102, 241, 0.25); }
.state-maint .kpi-card { outline-color: rgba(99, 102, 241, 0.15); }
.state-maint .metric-card { outline-color: rgba(99, 102, 241, 0.15); }
.state-maint .chart-card { outline-color: rgba(99, 102, 241, 0.15); }
.state-maint .newsletter-inner { outline-color: rgba(99, 102, 241, 0.2); }
.state-maint .newsletter-btn {
  background: #6366f1 !important; color: #fff !important;
}
.state-maint #stats {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.03) 0%, transparent 100%);
}
.state-maint .bar-fill { background: linear-gradient(90deg, #6366f1, #4f46e5) !important; }
/* FAQ */
.state-maint .faq-group { border-color: rgba(99, 102, 241, 0.1); }
.state-maint .faq-category { background: rgba(99, 102, 241, 0.03); border-bottom-color: rgba(99, 102, 241, 0.06); color: #818cf8; }
.state-maint .faq-cat-ico { color: #818cf8; }
.state-maint .faq-ico { color: #818cf8; }
.state-maint .faq-item[open] { outline-color: rgba(99, 102, 241, 0.12); }
/* Newsletter */
.state-maint .newsletter-inner { outline-color: rgba(99, 102, 241, 0.2); }
/* Status dot maint */
.status-dot--maint .status-dot__ring { border-color: #6366f1; animation-duration: 2.5s; }
.status-dot--maint .status-dot__core { background: rgba(99, 102, 241, 0.12); }
.status-dot--maint .status-dot__core .material-symbols-outlined { color: #6366f1; }
@keyframes glow-pulse-maint {
  0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(99, 102, 241, 0.5); }
}
.status-dot--maint .status-dot__core { animation-name: glow-pulse-maint; }
/* Alert banner maint */
.alert-banner--maint { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; }

/* --- Ping chart - wykres czasu odpowiedzi --- */
.ping-chart-svg {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ghost);
  padding-bottom: 12px;
}

/* --- KPI row: 4 kolumny --- */
.kpi-card--stagger-4 { animation-delay: 0.4s, 6s; }

/* --- Env card: 6 kafelkow (3 per row desktop) --- */
.env-card:nth-child(4) { animation-delay: 0.45s; }
.env-card:nth-child(5) { animation-delay: 0.6s; }
.env-card:nth-child(6) { animation-delay: 0.75s; }

/* --- WCAG Touch targets (44px minimum) --- */
.nav-burger { min-width: 44px; min-height: 44px; }
.nav-theme { min-width: 44px; min-height: 44px; }
.a11y-toggle { min-height: 44px; }
.a11y-btn { padding: 10px 14px; }
.cc-close { min-width: 44px; min-height: 44px; }
.cc-btn { min-height: 44px; }
.cc-toggle { min-height: 44px; }
.tool-cta { min-height: 44px; }

/* --- Z-index fix: a11y panel nad cookie banner --- */
.a11y-panel { z-index: 9998; }

/* ======================== DASHBOARD CARDS ======================== */

/* Dashboard cards layout */
.dashboard-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

/* Hourly bars - 24 slupki */
.hourly-bars {
  display: flex; gap: 2px; align-items: flex-end; height: 80px; margin: 16px 0 8px;
}
.hourly-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; position: relative; height: 100%;
}
.hourly-bar-fill {
  width: 100%; height: var(--h, 0%); border-radius: 2px 2px 0 0;
  transition: height 0.3s var(--ease);
}
.hourly-bar--fast .hourly-bar-fill { background: var(--success); }
.hourly-bar--normal .hourly-bar-fill { background: var(--warning); }
.hourly-bar--slow .hourly-bar-fill { background: var(--error); }
.hourly-bar--nodata .hourly-bar-fill { background: var(--ghost); height: 4px; }
.hourly-bar-label {
  font-size: 0.5625rem; color: var(--on-surface-variant); margin-top: 4px;
  font-family: var(--font-body);
}
/* Pokaz label co 3 godziny */
.hourly-bar:not(:nth-child(3n+1)) .hourly-bar-label { visibility: hidden; }

.hourly-legend {
  display: flex; gap: 16px; justify-content: center; margin-top: 8px;
}
.hourly-legend-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; color: var(--on-surface-variant);
}
.hourly-dot { width: 8px; height: 8px; border-radius: 2px; }
.hourly-dot--fast { background: var(--success); }
.hourly-dot--normal { background: var(--warning); }
.hourly-dot--slow { background: var(--error); }

.dashboard-subtitle {
  font-size: 0.75rem; color: var(--on-surface-variant); margin: 0;
}

/* Streak */
.streak-section { text-align: center; padding: 20px 0; }
.streak-number {
  font-family: var(--font-headline); font-size: 3rem; font-weight: 800;
  color: var(--success); line-height: 1;
}
.streak-label {
  font-size: 0.875rem; color: var(--on-surface-variant); margin-top: 4px;
}

/* Recommendation banner */
.recommendation-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin: 12px 0;
  font-size: 0.8125rem; line-height: 1.5;
}
.recommendation--green { background: rgba(34, 197, 94, 0.1); color: var(--success); }
.recommendation--yellow { background: rgba(234, 179, 8, 0.1); color: var(--warning); }
.recommendation--red { background: rgba(239, 68, 68, 0.1); color: var(--error); }
.recommendation--blue { background: rgba(99, 102, 241, 0.1); color: #a5b4fc; }
.recommendation-icon {
  font-size: 1.5rem;
  font-variation-settings: 'FILL' 1, 'wght' 500;
  flex-shrink: 0;
  line-height: 1;
}

/* Month stats */
.month-stats {
  display: flex; justify-content: space-around; padding-top: 12px;
  border-top: 1px solid var(--ghost);
}
.month-stat { text-align: center; }
.month-stat-value {
  display: block; font-family: var(--font-headline); font-size: 1.125rem;
  font-weight: 700; color: var(--on-surface);
}
.month-stat-label {
  font-size: 0.6875rem; color: var(--on-surface-variant); text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Incidents */
.incidents-list { max-height: 200px; overflow-y: auto; }
.incidents-empty { font-size: 0.8125rem; color: var(--on-surface-variant); text-align: center; padding: 20px 0; }
.incident-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--ghost);
}
.incident-item:last-child { border-bottom: none; }
.incidents-day-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--ghost);
  margin-top: 8px;
}
.incidents-day-header:first-child { margin-top: 0; }
.incident-icon { font-size: 1.125rem; }
.incident--down .incident-icon { color: var(--error); }
.incident--warn .incident-icon { color: var(--warning); }
.incident--maint .incident-icon { color: #a5b4fc; }
.incident-info { display: flex; flex-direction: column; gap: 2px; }
.incident-date { font-size: 0.8125rem; color: var(--on-surface); }
.incident-duration { font-size: 0.6875rem; color: var(--on-surface-variant); }

/* Messages MF */
.messages-title {
  font-family: var(--font-headline); font-size: 0.875rem; font-weight: 600;
  margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--ghost);
  color: var(--on-surface);
}
.message-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  font-size: 0.8125rem; color: var(--on-surface-variant);
}
.message-item .material-symbols-outlined { font-size: 1rem; color: var(--warning); flex-shrink: 0; margin-top: 2px; }

/* ======================== RESPONSIVE ======================== */
@media (max-width: 1024px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-cards { grid-template-columns: 1fr 1fr; }
  .faq-columns { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .tools-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .tool-card--full-inner { flex-direction: column; align-items: flex-start; }
  .tool-card--full-right { align-items: flex-start; }
  /* Env cards: 2 per row na tablecie */
  .env-card { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 8px); }
  /* KPI: 2x2 na tablecie */
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  html, body { overflow-x: clip; overscroll-behavior-x: none; }

  /* --- Mobile menu panel --- */
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--surface); border-top: 1px solid var(--ghost);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    padding: 12px 0;
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 14px 32px; border-bottom: none; font-size: 1rem;
  }
  .nav-links a:hover, .nav-links a.active {
    background: var(--surface-low);
  }
  .nav-links a.active { border-bottom: none; padding-bottom: 14px; }
  .nav-burger { display: block; }
  .nav-inner { flex-wrap: nowrap; }
  .nav-theme { order: 2; margin-left: auto; }
  .nav-burger { order: 3; margin-left: 4px; }
  .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

  /* === MOBILE LAYOUT === */
  .hero { padding: 100px 20px 40px; }
  .section { padding: 40px 20px; }

  /* Spojne wyrownanie - wszystko centrowane na mobile */
  .section-head { flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
  .section-title { text-align: center; font-size: 1.125rem; }
  .section-meta { text-align: center; font-size: 0.75rem; margin-top: 4px; }

  /* Spojne gapy miedzy sekcjami */
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 16px 12px; }
  .kpi-label { font-size: 0.6875rem; }
  .kpi-value { font-size: 1.25rem; }
  .kpi-sub { font-size: 0.6875rem; }

  .env-row { flex-direction: column; gap: 10px; }
  .env-card { max-width: none; padding: 16px 20px; }

  .metrics-grid { grid-template-columns: 1fr; gap: 10px; }
  .metric-card { padding: 16px 20px; }
  .metric-label { font-size: 0.8125rem; }
  .metric-value { font-size: 1.375rem; }

  /* Heatmapa - miesci sie bez scrolla */
  .chart-card { overflow: hidden; border-radius: 12px; padding: 16px; }
  .chart-title { font-size: 0.95rem; margin-bottom: 12px; text-align: center; }
  .heatmap { min-width: 0; width: 100%; grid-template-columns: 24px repeat(24, 1fr); gap: 1px; }
  .heatmap-cell { aspect-ratio: auto; min-height: 8px; border-radius: 1px; }
  .heatmap-hour { font-size: 0.375rem; padding-bottom: 1px; }
  .heatmap-day { font-size: 0.5rem; }

  /* API info bar */
  .api-info-bar { gap: 6px; flex-wrap: wrap; justify-content: center; padding: 8px 12px; }
  .api-info-item { font-size: 0.625rem; }

  /* Dashboard cards */
  .dashboard-cards { grid-template-columns: 1fr; gap: 10px; }
  .hourly-bar-label { font-size: 0.5rem; }
  .hourly-bar:not(:nth-child(6n+1)) .hourly-bar-label { visibility: hidden; }
  .streak-number { font-size: 2.5rem; }
  .hint-icon::after { width: 180px; font-size: 0.6875rem; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(100% + 8px); top: auto; z-index: 9999; pointer-events: none; }
  .kpi-card, .metric-card, .chart-card, .dashboard-card { overflow: visible; }
  .kpi-card:has(.hint-icon:hover), .metric-card:has(.hint-icon:hover), .chart-card:has(.hint-icon:hover), .dashboard-card:has(.hint-icon:hover) { z-index: 100; }

  /* Tools */
  .tools-grid--3, .tools-grid--4 { grid-template-columns: 1fr; }
  .tools-footnote { font-size: 0.75rem; text-align: center; }

  /* FAQ */
  .faq-columns { grid-template-columns: 1fr; }

  /* Newsletter */
  .newsletter-inner { flex-direction: column; padding: 24px 20px; text-align: center; }
  .newsletter-form { width: 100%; flex-direction: column; }
  .newsletter-input { width: 100%; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; text-align: center; }

  /* Cookie banner */
  .cc-banner { padding: 12px; }
  .cc-banner-content { padding: 16px; max-width: 100%; }
}

/* ======================== SKIP LINK ======================== */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 10000;
  background: var(--primary); color: #000; padding: 8px 16px; border-radius: 4px;
  font-size: 0.875rem; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ======================== A11Y PANEL ======================== */
.a11y-panel { position: fixed; left: 12px; bottom: 12px; }
.a11y-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-low); border: 1px solid var(--surface-border);
  color: var(--on-surface-muted); padding: 8px 14px; border-radius: 20px;
  font-size: 0.75rem; cursor: pointer; transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}
.a11y-toggle:hover { background: var(--surface-high); color: var(--on-surface); }
.a11y-options {
  position: absolute; bottom: 44px; left: 0; width: 260px;
  background: var(--surface-low); border: 1px solid var(--surface-border);
  border-radius: 12px; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: opacity 0.2s, transform 0.2s;
}
.a11y-options[aria-hidden="true"] { opacity: 0; pointer-events: none; transform: translateY(8px); }
.a11y-options[aria-hidden="false"] { opacity: 1; pointer-events: auto; transform: translateY(0); }
.a11y-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.a11y-header span { font-family: 'Poppins', sans-serif; font-size: 0.8125rem; font-weight: 600; color: var(--on-surface); }
.a11y-close { background: none; border: none; color: var(--on-surface-muted); cursor: pointer; padding: 4px; }
.a11y-close:hover { color: var(--on-surface); }
.a11y-group { margin-bottom: 12px; }
.a11y-group-label { display: block; font-size: 0.6875rem; color: var(--on-surface-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.a11y-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.a11y-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--surface-border);
  color: var(--on-surface-secondary); padding: 6px 10px; border-radius: 6px;
  font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
  font-family: 'Manrope', sans-serif;
}
.a11y-btn:hover { background: var(--surface-high); color: var(--on-surface); }
.a11y-btn-toggle.active { background: var(--primary); color: #000; border-color: var(--primary); }
.a11y-btn-reset { color: var(--on-surface-muted); font-size: 0.6875rem; }
.a11y-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--surface-border); }

/* A11Y states */
.a11y-high-contrast { filter: contrast(1.35); }
.a11y-reduce-motion *, .a11y-reduce-motion *::before, .a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
.a11y-underline-links a { text-decoration: underline !important; }
.a11y-readable-font * { font-family: 'Verdana', 'Geneva', sans-serif !important; }

/* ======================== COOKIE CONSENT ======================== */
.cc-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9995;
  display: none; justify-content: center; padding: 16px;
  background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cc-banner-content {
  max-width: 680px; width: 100%;
  background: var(--surface-low); border: 1px solid var(--surface-border);
  border-radius: 12px; padding: 20px 24px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}
.cc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cc-header h2 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: var(--on-surface); margin: 0; }
.cc-close { background: none; border: none; color: var(--on-surface-muted); cursor: pointer; padding: 4px; }
.cc-close:hover { color: var(--on-surface); }
.cc-text { font-size: 0.8125rem; color: var(--on-surface-secondary); line-height: 1.6; margin: 0 0 14px; }
.cc-link { color: var(--primary); text-decoration: underline; }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; border: none;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  font-family: 'Manrope', sans-serif; transition: all 0.15s;
}
.cc-btn-settings { background: var(--surface); color: var(--on-surface-secondary); border: 1px solid var(--surface-border); }
.cc-btn-settings:hover { background: var(--surface-high); }
.cc-btn-reject { background: var(--surface); color: var(--on-surface-secondary); border: 1px solid var(--surface-border); }
.cc-btn-reject:hover { background: var(--surface-high); }
.cc-btn-accept { background: var(--primary); color: #000; }
.cc-btn-accept:hover { filter: brightness(1.1); }
.cc-btn-save { background: var(--success); color: #000; }
.cc-btn-save:hover { filter: brightness(1.1); }
.cc-settings { margin-bottom: 14px; }
.cc-category { padding: 10px; border: 1px solid var(--surface-border); border-radius: 8px; margin-bottom: 8px; }
.cc-category-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.cc-category-info { display: flex; align-items: center; gap: 8px; }
.cc-category-name { font-size: 0.8125rem; font-weight: 600; color: var(--on-surface); }
.cc-badge { font-size: 0.625rem; background: var(--success); color: #000; padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; }
.cc-category-desc { font-size: 0.75rem; color: var(--on-surface-muted); margin: 6px 0 0; }
.cc-toggle { width: 40px; height: 22px; appearance: none; background: var(--surface); border-radius: 11px; position: relative; cursor: pointer; border: 1px solid var(--surface-border); transition: 0.2s; }
.cc-toggle:checked { background: var(--success); border-color: var(--success); }
.cc-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: 0.2s; }
.cc-toggle:checked::after { left: 20px; }
.cc-toggle:disabled { opacity: 0.6; cursor: not-allowed; }
.cc-toggle-slider { display: none; }

/* ======================== LIGHT MODE OVERRIDES (extra) ======================== */
:root.light .a11y-toggle { background: var(--surface-low); border-color: var(--surface-border); }
:root.light .a11y-options { background: var(--surface-lowest); border-color: var(--surface-border); box-shadow: 0 8px 32px rgba(44,42,37,0.08); }
:root.light .a11y-btn { background: var(--surface); border-color: var(--surface-border); }
:root.light .cc-banner { background: rgba(250,248,245,0.75); }
:root.light .cc-banner-content { background: var(--surface-lowest); border-color: var(--surface-border); box-shadow: 0 -4px 24px rgba(44,42,37,0.08); }
:root.light .cc-btn-settings, :root.light .cc-btn-reject { background: var(--surface-low); border-color: var(--surface-border); }
.light .ping-chart-svg line { stroke: var(--ghost); }

@media (max-width: 768px) {
  .a11y-panel { left: 8px; bottom: 8px; }
  .a11y-options { width: 240px; }
  .cc-actions { flex-direction: column; }
  .cc-btn { width: 100%; justify-content: center; }
}

/* ======================== SPIKE BANNER ======================== */
.spike-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, rgba(234,179,8,0.18), rgba(234,179,8,0.08));
  border-left: 4px solid #eab308;
  padding: 14px 20px; margin: 0 auto; max-width: 1280px;
  border-radius: 0 8px 8px 0;
  font-family: 'Manrope', sans-serif;
}
.spike-banner-icon {
  font-size: 28px !important; color: #eab308;
  filter: drop-shadow(0 0 8px rgba(234,179,8,0.4));
}
.spike-banner-text { font-size: 0.9375rem; color: var(--on-surface); line-height: 1.5; }
.spike-banner-text strong { color: #eab308; font-weight: 700; }
:root.light .spike-banner { background: linear-gradient(90deg, rgba(234,179,8,0.12), rgba(234,179,8,0.04)); }

/* ======================== ENV GROUP CARDS (2 grupowane multi-line wykresy) ======================== */
.env-group-card {
  background: var(--surface-container);
  border-radius: 16px;
  outline: 1px solid var(--ghost);
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 20px;
  margin-bottom: 16px;
  box-shadow: 0 32px 64px rgba(228, 225, 234, 0.04);
}

/* HEADER: tytul + opis | [LIVE pill] [tabs] */
.env-group-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.env-group-heading { min-width: 0; flex: 1 1 auto; }
.env-group-title {
  font-family: var(--font-headline, 'Poppins', sans-serif);
  font-size: 1.25rem; font-weight: 700; color: var(--on-surface);
  letter-spacing: -0.01em;
  margin: 0;
}
.env-group-desc {
  font-size: 0.8125rem; color: var(--on-surface-variant);
  margin: 4px 0 0; line-height: 1.5;
  opacity: 0.7;
}
.env-group-controls {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0; flex-wrap: wrap;
}

/* LIVE pill - zloto (nasz primary color) bo to nasz branding, nie zielen */
.env-group-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(242, 202, 80, 0.1);
  border: 1px solid rgba(242, 202, 80, 0.25);
  cursor: help;
}
.env-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: live-pulse 2s ease-in-out infinite;
}
.env-live-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary);
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Taby 1h/24h/7d/30d */
.env-group-tabs {
  display: inline-flex; gap: 2px;
  background: var(--surface-lowest, var(--bg));
  border: 1px solid var(--ghost);
  border-radius: 8px; padding: 3px;
}
.env-group-tabs button {
  background: transparent; border: none;
  padding: 5px 12px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 700;
  color: var(--on-surface-variant); cursor: pointer;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.03em; transition: all 0.15s;
}
.env-group-tabs button:hover { color: var(--on-surface); }
.env-group-tabs button.active {
  background: var(--surface-high, var(--primary));
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* CHART AREA - chart wypelnia pelna szerokosc, Y/X labels jako HTML overlay */
.env-group-chart-wrap {
  position: relative;
  background: var(--surface-lowest, var(--bg));
  border: 1px solid var(--ghost);
  border-radius: 12px;
  /* padding lewa = Y labels, dol = X labels */
  padding: 12px 12px 28px 52px;
  min-height: 260px;
}
.env-group-chart {
  position: relative;
  width: 100%; height: 230px;
}
.env-group-svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}
.env-multiline-path {
  stroke-dasharray: 2000;
}

/* Y axis - POZA obszarem chart (w wrap padding-left 52px). Parent = .env-group-chart (relative) */
.env-chart-y-axis {
  position: absolute;
  left: -44px;  /* wypycha do padding-left wrapa, 2-4px bufora od SVG */
  top: 0;
  height: 100%;
  width: 40px;
  pointer-events: none;
}
.env-chart-y-axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem; color: var(--on-surface-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  line-height: 1;
  white-space: nowrap;
}

/* X axis - POD chartem (w wrap padding-bottom 28px), pelna szerokosc chart */
.env-chart-x-axis {
  position: absolute;
  left: 0; right: 0; bottom: -24px;
  height: 18px;
  pointer-events: none;
}
.env-chart-x-axis span {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem; color: var(--on-surface-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.7;
}
.env-chart-x-axis span:first-child { transform: translateX(0); }
.env-chart-x-axis span:last-child { transform: translateX(-100%); }

/* LEGEND - pod wykresem, kolorowe paski pionowe zamiast kropki */
.env-group-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.env-legend-item {
  display: flex; gap: 14px; align-items: stretch;
  padding: 14px 16px;
  background: var(--surface-lowest, var(--bg));
  border: 1px solid var(--ghost);
  border-radius: 10px;
  min-height: 78px;
  transition: border-color 0.2s, transform 0.2s;
}
.env-legend-item:hover {
  border-color: var(--stripe-color, var(--ghost));
  transform: translateY(-1px);
}
.env-legend-stripe {
  width: 3px; border-radius: 3px;
  background: var(--stripe-color, #22c55e);
  box-shadow: 0 0 12px var(--stripe-color, #22c55e);
  flex-shrink: 0;
  align-self: stretch;
  animation: stripe-glow 2.5s ease-in-out infinite;
}
@keyframes stripe-glow {
  0%, 100% { box-shadow: 0 0 8px var(--stripe-color); }
  50% { box-shadow: 0 0 16px var(--stripe-color); }
}
.env-legend-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.env-legend-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.env-legend-top strong {
  font-family: var(--font-headline, 'Poppins', sans-serif);
  font-size: 0.9375rem; color: var(--on-surface); font-weight: 700;
  letter-spacing: -0.01em;
}
.env-legend-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 4px;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  font-family: 'Manrope', sans-serif;
  border: 1px solid currentColor;
}
.env-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.env-legend-status--ok {
  background: rgba(34,197,94,0.1); color: var(--success);
  border-color: rgba(34,197,94,0.3);
}
.env-legend-status--warn {
  background: rgba(234,179,8,0.1); color: var(--warning);
  border-color: rgba(234,179,8,0.3);
}
.env-legend-status--down {
  background: rgba(239,68,68,0.1); color: var(--error);
  border-color: rgba(239,68,68,0.3);
}
.env-legend-status--maint {
  background: rgba(99,102,241,0.1); color: #6366f1;
  border-color: rgba(99,102,241,0.3);
}
.env-legend-sub {
  font-size: 0.75rem; color: var(--on-surface-muted);
  opacity: 0.75;
}
.env-legend-stats {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 4px;
  font-size: 0.75rem; color: var(--on-surface-muted);
  font-family: 'Manrope', sans-serif;
  font-variant-numeric: tabular-nums;
}
.env-legend-stats [data-env-uptime] {
  font-weight: 700; color: var(--success);
  font-family: var(--font-headline, 'Poppins'); font-size: 0.8125rem;
}
.env-legend-stats [data-env-uptime].low { color: var(--warning); }
.env-legend-stats [data-env-uptime].critical { color: var(--error); }
.env-legend-sep { color: var(--on-surface-muted); opacity: 0.35; }

@media (max-width: 900px) {
  .env-group-card { padding: 18px 20px; }
  .env-group-legend { grid-template-columns: 1fr; }
  .env-group-header { flex-direction: column; align-items: stretch; }
  .env-group-controls { justify-content: space-between; }
}

/* ======================== PER-ENV DETAIL CARDS (unused - legacy) ======================== */
.env-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; width: 100%;
}
.env-detail-empty-state {
  grid-column: 1 / -1;
  padding: 40px; text-align: center;
  color: var(--on-surface-muted); background: var(--surface-container); border-radius: 12px;
}
.env-detail-card {
  background: var(--surface-container); border-radius: 12px;
  outline: 1px solid var(--ghost);
  min-width: 0;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

.env-detail-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.env-detail-title { min-width: 0; flex: 1 1 auto; }
.env-detail-title strong {
  display: inline; font-family: var(--font-headline, 'Poppins', sans-serif);
  font-size: 1rem; font-weight: 700; color: var(--on-surface);
}
.env-detail-sub {
  display: block; margin-top: 3px;
  font-size: 0.8125rem; color: var(--on-surface-variant);
  font-family: 'Manrope', sans-serif; font-weight: 400;
  letter-spacing: 0;
}
.env-detail-status {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 4px; text-transform: uppercase;
  white-space: nowrap;
}
.env-detail-status--ok { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.env-detail-status--warn { background: rgba(234, 179, 8, 0.12); color: var(--warning); }
.env-detail-status--down { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.env-detail-status--maint { background: rgba(99, 102, 241, 0.15); color: #6366f1; }

.env-detail-tabs {
  display: inline-flex; gap: 2px;
  background: var(--surface-high, var(--bg));
  border: 1px solid var(--ghost);
  border-radius: 6px; padding: 2px;
}
.env-detail-tabs button {
  background: transparent; border: none;
  padding: 3px 9px; border-radius: 4px;
  font-size: 0.6875rem; font-weight: 700;
  color: var(--on-surface-variant); cursor: pointer;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.03em; transition: all 0.15s;
}
.env-detail-tabs button:hover { color: var(--on-surface); }
.env-detail-tabs button.active {
  background: var(--primary); color: #000;
}

/* Summary: uptime + percentyle w jednej linii jak env-stats */
.env-detail-summary {
  display: flex; gap: 14px; align-items: baseline;
  padding-bottom: 8px; border-bottom: 1px solid var(--ghost);
  flex-wrap: wrap;
}
.env-detail-kpi { display: flex; flex-direction: column; gap: 2px; }
.env-detail-kpi .kpi-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(208, 197, 175, 0.45); font-weight: 600;
}
.env-detail-kpi .kpi-value {
  font-family: var(--font-headline, 'Poppins'); font-size: 0.9375rem; font-weight: 700;
  color: var(--success); line-height: 1.2;
}
.env-detail-perc {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--on-surface-variant);
  font-family: 'Manrope', sans-serif;
  align-self: center; margin-left: auto;
}
.env-detail-perc span { white-space: nowrap; font-weight: 600; }

/* Wykres */
.env-detail-chart-wrap {
  position: relative;
  height: 120px;
  margin: 0;
}
.env-detail-chart { width: 100%; height: 100%; }
.env-detail-svg { width: 100%; height: 100%; display: block; max-height: 120px; }
.env-detail-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--on-surface-muted);
  font-size: 0.75rem; text-align: center;
}

.env-detail-stats {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 0.75rem; color: var(--on-surface-variant);
  font-family: 'Manrope', sans-serif;
}
.env-detail-stats span { display: inline-flex; gap: 4px; white-space: nowrap; }
.env-detail-stats strong { color: var(--on-surface); font-weight: 700; }
.env-detail-stats .env-detail-count {
  font-size: 0.6875rem; color: rgba(208, 197, 175, 0.5);
  margin-left: auto; font-weight: 500;
}
.env-detail-stats .env-stat-anomaly strong { color: var(--error); }
.env-detail-stats .env-stat-anomaly { color: var(--error); font-weight: 600; }

/* Uptime kolory wg wartosci - nadpisuje .kpi-value */
.env-detail-kpi .kpi-value.low { color: var(--warning); }
.env-detail-kpi .kpi-value.critical { color: var(--error); }

@media (max-width: 640px) {
  .env-detail-list { grid-template-columns: 1fr; gap: 12px; }
  .env-detail-tabs button { padding: 3px 7px; font-size: 0.625rem; }
  .env-detail-chart-wrap { height: 110px; }
  .env-detail-svg { max-height: 110px; }
  .env-detail-stats { font-size: 0.6875rem; }
  .spike-banner { padding: 12px 16px; gap: 10px; }
  .spike-banner-text { font-size: 0.8125rem; }
}

/* Light mode */
:root.light .env-detail-tabs button.active { color: var(--bg); }

/* ============================================================
   PER-ENV DETAIL CARDS - inspirowane konkurencja (recharts style)
   Dashboard per srodowisko z percentile pills, saturation bar,
   area chart z gradient, reference lines, hover tooltip, stats
   ============================================================ */
/* Wysrodkowany naglowek sekcji envs-detail */
.envs-detail-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 0 16px;
}
.envs-detail-header .section-title {
  display: block;
  margin: 0 0 10px;
}
.envs-detail-header .section-meta {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  opacity: 0.8;
}

.per-env-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Karta grupowa - zewnetrzny wrapper dla 3 mini-kart */
.per-env-group {
  background: var(--surface-container, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--ghost, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 22px 24px;
}
.per-env-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.per-env-group-title-block { flex: 1; min-width: 240px; }
.per-env-group-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem; font-weight: 600;
  color: var(--on-surface);
  margin: 0 0 4px;
}
.per-env-group-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 0.875rem;
  color: var(--on-surface-muted);
  opacity: 0.85;
  margin: 0;
}
.per-env-group-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-lowest, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--ghost);
  border-radius: 8px;
  flex-shrink: 0;
}

/* Mini-karty grid (3 kolumny w karcie grupowej) */
.per-env-mini-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.per-env-mini { padding: 16px 16px 12px; }

.per-env-card {
  background: var(--surface-container, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--ghost, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 18px 20px 14px;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}
.per-env-card:hover {
  border-color: color-mix(in srgb, var(--env-color, #d4af37) 40%, transparent);
}

/* HEADER */
.per-env-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.per-env-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.per-env-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.per-env-color-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px var(--env-color);
}
.per-env-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem; font-weight: 600;
  color: var(--on-surface);
  margin: 0;
}
.per-env-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  color: var(--on-surface-muted);
  opacity: 0.8;
}
.per-env-percentiles {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-muted);
}
.per-env-percentiles .perc-pill {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.per-env-percentiles b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: 4px;
}
.perc-dash {
  display: inline-block;
  width: 16px; height: 2px;
  border-top: 1px dashed currentColor;
  opacity: 0.7;
  position: relative;
  top: -1px;
}
.perc-p50 { color: #22c55e; }
.perc-p50 b { color: #22c55e; }
.perc-p95 { color: #f59e0b; }
.perc-p95 b { color: #f59e0b; }
.perc-p99 b { color: #ef4444; }

/* TABS 1h / 24h / 7d / 30d (w mini karcie nieuzywane - na poziomie grupy) */
.per-env-controls { display: none; }
.per-env-mini .per-env-tabs { display: none; }
.per-env-tab {
  padding: 5px 11px;
  border: none;
  background: transparent;
  color: var(--on-surface-muted);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.per-env-tab:hover { color: var(--on-surface); }
.per-env-tab.active {
  background: var(--primary, #f2ca50);
  color: var(--surface-lowest, #0d0e13);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(242, 202, 80, 0.3);
}

/* SATURATION BAR (pasek wysycenia z P95/P99 tickami) */
.per-env-saturation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sat-track {
  position: relative;
  flex: 1;
  height: 8px;
  background: var(--ghost, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  overflow: visible;
}
.sat-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, box-shadow 0.3s;
  width: 0%;
}
.sat-fill--ok {
  background: linear-gradient(90deg, #22c55e 0%, #22c55e99 100%);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
.sat-fill--warn {
  background: linear-gradient(90deg, #22c55e 0%, #f59e0b 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.sat-fill--alert {
  background: linear-gradient(90deg, #22c55e 0%, #f59e0b 50%, #ef4444 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.sat-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.sat-tick-p95 { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.sat-tick-p99 { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.sat-value {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
  font-weight: 600;
  color: var(--on-surface);
  transition: color 0.2s;
}
.sat-value--ok { color: var(--on-surface); }
.sat-value--warn { color: #f59e0b; }
.sat-value--down { color: #ef4444; }

/* CHART WRAP */
.per-env-chart-wrap {
  position: relative;
  height: 180px;
  padding: 0 12px 24px 44px; /* padding Y-axis labels left + X-axis labels bottom */
  margin-bottom: 4px;
}
.per-env-chart-loading, .per-env-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--on-surface-muted);
  font-size: 0.875rem;
  opacity: 0.6;
}
.per-env-chart-svg-container {
  position: relative;
  width: 100%;
  height: 140px;
  cursor: crosshair;
}
.per-env-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Y axis labels (poza SVG po lewej) */
.per-env-chart-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 140px;
  pointer-events: none;
}
.per-env-chart-y-axis span {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem;
  color: var(--on-surface-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  line-height: 1;
  white-space: nowrap;
}

/* X axis labels (pod chart) */
.per-env-chart-x-axis {
  position: absolute;
  left: 44px;
  right: 12px;
  top: 142px;
  height: 18px;
  pointer-events: none;
}
.per-env-chart-x-axis span {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem;
  color: var(--on-surface-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  white-space: nowrap;
}
.per-env-chart-x-axis span:first-child { transform: translateX(0); }
.per-env-chart-x-axis span:last-child { transform: translateX(-100%); }

/* Reference line colors teraz sa w percentile pills z kropkowanym dash */

/* TOOLTIP */
.per-env-tooltip-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--on-surface);
  opacity: 0.35;
  pointer-events: none;
  transform: translateX(-0.5px);
}
.per-env-tooltip-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 2px solid var(--surface-container, #1a1a1f);
}
.per-env-tooltip {
  position: absolute;
  background: var(--surface-container, rgba(20, 20, 24, 0.98));
  border: 1px solid var(--ghost, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  padding: 8px 12px;
  pointer-events: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
  min-width: 120px;
  backdrop-filter: blur(8px);
}
.per-env-tooltip .tooltip-time {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--on-surface);
}
.per-env-tooltip .tooltip-value {
  color: var(--env-color, var(--on-surface));
  font-size: 0.75rem;
}
.per-env-tooltip .tooltip-value b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* FOOTER (stats) */
.per-env-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ghost, rgba(255, 255, 255, 0.06));
  padding-top: 10px;
  margin-top: 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-muted);
}
.per-env-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.per-env-stats b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--on-surface);
  margin-left: 3px;
}
.per-env-stats .stat-min { color: #22c55e; }
.per-env-stats .stat-max { color: #ef4444; }
.per-env-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* MOBILE ADAPTATION */
@media (max-width: 1100px) {
  .per-env-mini-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .per-env-group { padding: 16px 14px; }
  .per-env-group-title { font-size: 1rem; }
  .per-env-group-desc { font-size: 0.8125rem; }
  .per-env-card { padding: 14px 14px 12px; }
  .per-env-title-row { gap: 8px; }
  .per-env-title { font-size: 0.9375rem; }
  .per-env-sub { font-size: 0.75rem; }
  .per-env-percentiles { font-size: 0.6875rem; gap: 8px; }
  .per-env-chart-wrap { height: 170px; padding: 0 8px 22px 40px; }
  .per-env-chart-svg-container { height: 130px; }
  .per-env-chart-y-axis { height: 130px; width: 36px; }
  .per-env-chart-x-axis { left: 40px; right: 8px; top: 132px; }
  .per-env-tab { padding: 4px 9px; font-size: 0.75rem; }
  .per-env-stats { gap: 10px; font-size: 0.6875rem; }
  .per-env-count { font-size: 0.6875rem; }
  .per-env-controls { justify-content: flex-start; }
}

/* Light mode adjustments */
:root.light .per-env-card {
  background: var(--surface-container, #fff);
  border-color: rgba(0, 0, 0, 0.08);
}
:root.light .per-env-tab.active {
  background: var(--on-surface);
  color: var(--bg);
}
:root.light .per-env-tooltip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}
:root.light .sat-track {
  background: rgba(0, 0, 0, 0.08);
}