:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(10, 25, 48, 0.86);
  --line: rgba(77, 126, 196, 0.2);
  --line-strong: rgba(69, 124, 206, 0.36);
  --text: #f4f7ff;
  --muted: #93a1bd;
  --blue: #2395ff;
  --green: #1ed278;
  --violet: #8658f3;
  --amber: #f9a11b;
  --red: #ef5350;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 17% 18%, rgba(8, 80, 169, 0.16), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(75, 50, 160, 0.10), transparent 30%),
    linear-gradient(rgba(5, 12, 22, 0.94), rgba(5, 12, 22, 0.97)),
    url("tapeta.jpg") center / cover no-repeat fixed,
    linear-gradient(120deg, #07111e, #081426 57%, #07101d);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.app { min-height: 100vh; }
.hidden { display: none !important; }

/* ── Logowanie ─────────────────────────────────────────────── */
#ekran-login {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-karta { width: 100%; max-width: 340px; text-align: center; }
.login-karta img {
  height: 72px;
  margin-bottom: 18px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.login-karta h1 { font-size: 1.3rem; margin: 0 0 4px; }
.login-karta .podtytul {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
#form-login input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(4, 12, 24, 0.6);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
#form-login input[type="password"]:focus { border-color: var(--blue); }
#form-login button {
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #4fa6ff, var(--blue));
  color: #051426;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
#form-login button:active { opacity: 0.85; }
#blad-login {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239, 83, 80, 0.15);
  border: 1px solid rgba(239, 83, 80, 0.4);
  color: #ffb3af;
  font-size: 0.85rem;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: 154px;
  flex-direction: column;
  border-right: 1px solid rgba(61, 105, 172, 0.16);
  background: linear-gradient(180deg, rgba(12, 27, 51, 0.98), rgba(8, 20, 39, 0.98));
  box-shadow: inset -20px 0 60px rgba(14, 57, 117, 0.06);
  transition: transform .25s ease;
}
.logo {
  position: relative;
  display: grid;
  width: 100px;
  height: 74px;
  margin: 22px auto 21px;
  place-content: center;
  overflow: hidden;
  border-radius: 12px;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-close { position: absolute; top: 12px; right: 10px; }
.main-nav { display: grid; gap: 18px; padding: 20px 15px; border-top: 1px solid rgba(72, 109, 168, .1); }
.nav-item {
  display: flex; min-height: 53px; align-items: center; gap: 15px; padding: 0 17px;
  border: 1px solid transparent; border-radius: 10px; color: #d6deed; font-size: 13px;
  transition: .2s ease; cursor: pointer;
}
.nav-item i { width: 18px; color: #9eafd0; font-size: 19px; text-align: center; }
.nav-item:hover { background: rgba(39, 119, 220, .08); }
.nav-item.active {
  border-color: rgba(30, 131, 248, .2);
  background: linear-gradient(90deg, rgba(14, 91, 186, .34), rgba(34, 82, 154, .14));
  color: #39a9ff;
  box-shadow: inset 2px 0 #1294ff, 0 0 25px rgba(17, 106, 222, .08);
}
.nav-item.active i { color: #269fff; }
.sidebar-bottom { display: grid; gap: 18px; margin-top: auto; padding: 15px 15px 30px; }
.system-card {
  padding: 15px 12px;
  border: 1px solid rgba(17, 148, 121, .2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(6, 75, 72, .25), rgba(8, 38, 48, .2));
}
.system-card.zla { border-color: rgba(239,83,80,.35); background: linear-gradient(145deg, rgba(90,20,20,.3), rgba(48,10,10,.25)); }
.system-label { display: flex; align-items: flex-start; gap: 9px; }
.system-label > i { width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: #21cd72; box-shadow: 0 0 10px rgba(33, 205, 114, .35); flex-shrink: 0; }
.system-card.zla .system-label > i { background: var(--red); box-shadow: 0 0 10px rgba(239,83,80,.4); }
.system-label span { display: grid; gap: 4px; }
.system-label strong { font-size: 11px; }
.system-label small { color: #a9b7cb; font-size: 10px; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(79, 111, 163, .16); }
.sidebar-brand b { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #3484ef, #1047bc); font-size: 16px; }
.sidebar-brand span { white-space: nowrap; font-size: 11px; }
.sidebar-overlay { display: none; }

/* ── Header ────────────────────────────────────────────────── */
.content { min-height: 100vh; margin-left: 154px; padding: 0 30px 34px; }
.header { display: flex; height: 118px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.header-title { display: flex; align-items: center; gap: 15px; }
.header h1 { margin: 0; font-size: 26px; letter-spacing: -.7px; }
.header-title p { margin: 7px 0 0; color: #91a0bc; font-size: 12px; letter-spacing: .2px; }
.header-right { display: flex; align-items: center; gap: 22px; }
.clock { display: grid; justify-items: end; }
.clock strong { color: #4a9dff; font-size: 28px; font-weight: 500; letter-spacing: .3px; text-shadow: 0 0 17px rgba(35, 149, 255, .22); font-variant-numeric: tabular-nums; }
.clock span { margin-top: 2px; color: #a1adc1; font-size: 12px; text-transform: capitalize; }
.clock small { margin-top: 6px; color: #68758c; font-size: 10px; }
.theme-button, .menu-toggle, .sidebar-close, .logout-button {
  display: grid; width: 50px; height: 50px; place-items: center;
  border: 1px solid rgba(57, 101, 166, .23); border-radius: 50%;
  background: rgba(16, 33, 61, .68); color: #dce8ff; cursor: pointer; font-size: 19px; transition: .2s ease;
}
.theme-button:hover, .logout-button:hover { border-color: rgba(51, 152, 255, .45); background: rgba(25, 51, 92, .75); }
.logout-button:hover { border-color: rgba(239,83,80,.5); color: #ffb3af; }
.theme-button:hover { transform: rotate(-10deg); }
.menu-toggle, .sidebar-close { display: none; }

/* ── Agent grid ────────────────────────────────────────────── */
.agents-section { padding-top: 27px; }
.section-header { display: flex; height: 51px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.section-header h2 { margin: 7px 0 0; font-size: 20px; }
.view-controls { display: flex; align-items: center; gap: 10px; color: #8492aa; font-size: 12px; }
.view-toggle { display: flex; overflow: hidden; height: 37px; border: 1px solid rgba(54,100,165,.22); border-radius: 9px; background: rgba(11,27,50,.75); }
.view-toggle button { width: 51px; border: 0; background: transparent; color: #5e7ca5; cursor: pointer; font-size: 17px; }
.view-toggle button.active { background: linear-gradient(135deg, rgba(16,86,175,.62), rgba(10,55,117,.55)); color: #2ba3ff; }

/* Dwa jawne rzedy zamiast jednej siatki o stalej liczbie kolumn - gorny
   (pelne, wysokie karty) i dolny (nizsze, dopasowane do tresci) sa
   przypisywane po ID agenta w pulpit.js (WIERSZ_GORNY), nie po prostu
   przez zawijanie siatki - inaczej nowy agent ladowalby sie losowo w
   dowolnym miejscu przy zawijaniu 4-kolumnowej siatki. */
.agent-grid { display: block; }
.agent-grid-wiersz { display: grid; gap: 24px; }
.agent-grid-wiersz + .agent-grid-wiersz { margin-top: 24px; }
.agent-grid-gorny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-grid-dolny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-grid-dolny .agent-card { height: auto; }

/* Widok "Biuro": Canvas 2D renderuje gre w stalej rozdzielczosci 1672x941,
   a prawdziwe przyciski HTML nad nim zachowuja dostepnosc, status i modal. */
.biuro-scena {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 1120px; margin: 14px auto 0; aspect-ratio: 1672 / 941;
  border: 1px solid rgba(96,165,250,.22); border-radius: 14px;
  background: #0b284a;
  box-shadow: 0 20px 55px rgba(2,8,23,.38), inset 0 0 0 1px rgba(255,255,255,.035);
}
.biuro-scena::after {
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 38px rgba(2,8,23,.2), inset 0 -28px 45px rgba(2,8,23,.08);
}
.biuro-canvas {
  position: absolute; inset: 0; z-index: 0; display: block;
  width: 100%; height: 100%; image-rendering: pixelated;
}
.biuro-tlo { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.biurko { position: absolute; z-index: 5; border: 0; background: transparent; padding: 0; cursor: pointer; }
.biurko:hover .biurko-etykieta { filter: brightness(1.2); }
.biurko:focus-visible .biurko-etykieta { outline: 2px solid rgba(56,160,255,.8); outline-offset: 2px; border-radius: 6px; }
.biurko-etykieta {
  position: absolute; z-index: 6; box-sizing: border-box;
  display: grid; grid-template-rows: minmax(27px, 1fr) 20px;
  align-items: center; justify-items: center; gap: 1px; padding: 4px 8px 5px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a2d50 0%, #082541 100%);
  border: 1px solid rgba(80,145,194,.24);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  box-shadow: 0 5px 8px rgba(4,13,27,.28);
}
.biurko-nazwa {
  font-size: 11px; font-weight: 700; color: #fff; text-align: center; line-height: 1.25;
  width: 100%; height: 2.5em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  align-self: center;
}
.biurko-etykieta .badge {
  box-sizing: border-box; min-width: 92px; height: 19px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: .01em;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 3px rgba(0,0,0,.22);
}
.biurko-etykieta .badge::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 2px rgba(2,23,37,.7), 0 0 6px currentColor;
}
.biurko-etykieta .badge-active { background: linear-gradient(90deg,#0f8752,#096340); color: #74f4b4; }
.biurko-etykieta .badge-waiting { background: linear-gradient(90deg,#6140bc,#3c2887); color: #d6c7ff; }
.biurko-etykieta .badge-blad { background: linear-gradient(90deg,#a93435,#701f28); color: #ffc3c3; }
.biurko-etykieta .badge-uwaga { background: linear-gradient(90deg,#a66b14,#70470c); color: #ffe0a3; }
.biurko:hover { z-index: 8; }
.biurko:hover .biurko-etykieta { transform: translateY(-1px); }
.biurko-etykieta { transition: transform .18s ease, filter .18s ease; }

/* Dymek - odznaka nad biurkiem, gdy jest cos konkretnego do zobaczenia
   (nowy draft do wydania / alarm cisza-blad). Delikatny puls przyciaga
   oko - respektuje prefers-reduced-motion jak animowane linie diagramu. */
.biurko-dymek {
  position: absolute; top: -8%; right: 2%; width: 15%; aspect-ratio: 1;
  min-width: 20px; max-width: 32px;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; font-size: 55%; z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  animation: dymek-puls 1.8s ease-in-out infinite;
}
.biurko-dymek--nowe { background: radial-gradient(circle, rgba(45,212,191,.95), rgba(15,110,90,.95)); }
.biurko-dymek--alarm { background: radial-gradient(circle, rgba(239,83,80,.95), rgba(140,25,20,.95)); }
@keyframes dymek-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .biurko-dymek { animation: none; }
}
@media (max-width: 620px) {
  .biuro-scena { max-width: 100%; }
  .biurko-nazwa { font-size: 9.5px; }
  .biurko-etykieta .badge { font-size: 8.5px; padding: 1px 6px; }
}

/* Czyste tlo v2 nie ma juz robotow wypalonych w grafice, wiec sprite nie
   potrzebuje agresywnej maski. Jest mniejszy, w calosci miesci sie tuz nad
   monitorami i zachowuje wspolna kotwice dla wszystkich stanowisk. */
.biurko-robot-gniazdo {
  position: absolute; left: 34.5%; top: 33%; width: 31%; height: 32%;
  overflow: visible; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 2px 1px rgba(5,15,30,.18));
}
.biurko-robot-gniazdo .biurko-robot {
  position: absolute; inset: 0; width: 100%; height: auto;
  object-fit: contain; image-rendering: pixelated;
}
.biurko-robot-gniazdo--pelny {
  left: 24%; top: 24%; width: 52%; height: 58%; overflow: visible;
}
.biurko-robot-gniazdo--pelny .biurko-robot {
  position: static; left: auto; top: auto; width: 100%; height: 100%; object-fit: contain;
}

/* Okna sa trzema prawdziwymi, przycietymi warstwami. Dzieki temu ptak,
   samolot i refleks swiatla nigdy nie przechodza po framugach ani po pokoju. */
.biuro-okno-szyba {
  position: absolute; top: 2.5%; height: 12.4%; z-index: 1; overflow: hidden;
  pointer-events: none;
}
.biuro-okno-szyba--1 { left: 14.65%; width: 9.55%; }
.biuro-okno-szyba--2 { left: 25.45%; width: 10.15%; }
.biuro-okno-szyba--3 { left: 36.85%; width: 7.75%; }
.biuro-okno-szyba::after {
  content: ""; position: absolute; inset: -35% -55%; opacity: .2;
  background: linear-gradient(112deg, transparent 39%, rgba(255,255,255,.7) 48%, transparent 57%);
  animation: biuro-okno-refleks 18s ease-in-out infinite;
}
.biuro-okno-szyba--2::after { animation-delay: -7s; }
.biuro-okno-szyba--3::after { animation-delay: -12s; }
.biuro-ptak, .biuro-samolot {
  position: absolute; left: var(--lot-start, -24%); top: var(--lot-y, 35%); z-index: 1;
  width: var(--lot-width, 20%);
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(10,55,90,.2));
  animation: biuro-lot-szyby var(--lot-czas, 8s) linear forwards;
}
.biuro-ptak { }
.biuro-samolot { }
@keyframes biuro-lot-szyby { to { left: var(--lot-end, 115%); } }
@keyframes biuro-okno-refleks {
  0%, 32% { transform: translateX(-45%); opacity: 0; }
  43% { opacity: .19; }
  58%, 100% { transform: translateX(45%); opacity: 0; }
}

/* Pelny zegar HTML zakrywa statyczny zegar z tla i pokazuje prawdziwy czas
   Europe/Warsaw. Grube krawedzie i skokowa sekundowa zachowuja pixel-art. */
.biuro-zegar {
  position: absolute; left: 76.72%; top: 3.95%; z-index: 3; width: 5.42%; aspect-ratio: 1;
  box-sizing: border-box; border: clamp(2px, .24vw, 4px) solid #102645;
  border-radius: 50%; background: #fff5dd; pointer-events: none;
  box-shadow: inset 0 0 0 clamp(1px, .09vw, 2px) #8094a8, 2px 3px 0 rgba(8,28,52,.28);
}
.biuro-zegar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8%; aspect-ratio: 1;
  transform: translate(-50%,-50%); border-radius: 50%; background: #14243d; z-index: 5;
}
.biuro-zegar-kreska {
  position: absolute; left: calc(50% - .5px); top: 8%; width: 1px; height: 9%;
  background: #233a56; transform-origin: .5px 467%;
}
.biuro-zegar-kreska:nth-child(3n+1) { width: 2px; height: 12%; background: #102645; }
.biuro-zegar-wskazowka {
  position: absolute; left: 50%; bottom: 50%; z-index: 4; transform-origin: 50% 100%;
  border-radius: 1px; background: #172a45;
}
.biuro-zegar-wskazowka--godzina { width: 3px; height: 24%; margin-left: -1.5px; }
.biuro-zegar-wskazowka--minuta { width: 2px; height: 34%; margin-left: -1px; }
.biuro-zegar-wskazowka--sekunda { width: 1px; height: 38%; margin-left: -.5px; background: #e14c45; }

/* Kartka z lewej drukarki jest osobnym, krotkim zdarzeniem ambientowym. */
.biuro-wydruk {
  position: absolute; left: 5.5%; top: 29.1%; z-index: 3;
  width: 2.1%; aspect-ratio: .72; padding: 3px 2px;
  background: #f7fbff; border: 1px solid #8ab2d2; border-radius: 1px;
  box-shadow: 0 2px 3px rgba(3,20,38,.3); pointer-events: none;
  animation: biuro-drukuje 4.6s ease-in-out forwards;
}
.biuro-wydruk i { display: block; height: 1px; margin: 2px 0; background: #6e93af; opacity: .75; }
@keyframes biuro-drukuje {
  0% { transform: translateY(-30%) scaleY(.12); opacity: 0; }
  16% { opacity: 1; }
  62% { transform: translateY(56%) scaleY(1); opacity: 1; }
  88% { transform: translate(32%, 105%) rotate(8deg); opacity: 1; }
  100% { transform: translate(45%, 125%) rotate(12deg); opacity: 0; }
}

/* Baristka ma prawdziwe klatki chodu i nalewania. JS prowadzi ja po trasie
   miedzy kubkami, zatrzymuje i zmienia stan sprite'a jak w malej grze. */
.biuro-baristka {
  position: absolute; left: -7%; top: 68%; z-index: 9; width: 5.8%;
  pointer-events: none; will-change: left, top;
  filter: drop-shadow(2px 4px 1px rgba(5,20,35,.2));
}
.biuro-baristka img {
  display: block; width: 100%; height: auto; image-rendering: pixelated;
  transform-origin: 50% 100%;
}
.biuro-baristka--lewo img { transform: scaleX(-1); }
.biuro-baristka--krok img { animation: biuro-kawa-krok .42s steps(2, end) infinite; }
@keyframes biuro-kawa-krok { 50% { translate: 0 -2px; } }

@media (prefers-reduced-motion: reduce) {
  .biuro-okno-szyba::after { animation: none; }
  .biuro-ptak, .biuro-samolot, .biuro-wydruk, .biuro-baristka { display: none; }
}

/* ── Inne aplikacje na tym VPS ─────────────────────────────── */
/* .panel.apps-panel (2 klasy), nie .apps-panel - inaczej .panel nizej w
   pliku wygrywa (ta sama specyficznosc, o kolejnosci decyduje kolejnosc
   zrodlowa) i min-height wraca do 294px, robiac pusty dol panelu. */
.panel.apps-panel { min-height: 0; margin-top: 25px; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 6px; }
.app-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border: 1px solid rgba(45,212,191,.3); border-radius: 13px;
  background: linear-gradient(140deg, rgba(10,50,46,.72), rgba(8,28,26,.8));
  text-decoration: none; color: inherit; transition: .2s ease;
}
.app-card:hover { border-color: rgba(45,212,191,.65); transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,.15); }
.app-card-icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(45,212,191,.4);
  background: radial-gradient(circle, rgba(45,212,191,.28), rgba(15,80,72,.35));
  color: #5eead4; font-size: 21px;
}
.app-card-tekst { min-width: 0; }
.app-card-tekst h3 { margin: 0 0 3px; font-size: 14.5px; color: var(--text); }
.app-card-tekst p { margin: 0; color: var(--muted); font-size: 11.5px; }
.app-card-otworz { margin-left: auto; flex: 0 0 auto; color: #5eead4; font-size: 12px; font-weight: 700; white-space: nowrap; }
.app-card-otworz i { margin-left: 5px; }
.agent-card {
  /* Wysokosc STALA (nie min-height) - agenci roznia sie iloscia tresci
     (0 wpisow vs 20), a karty w jednym rzedzie siatki musza sie rownac.
     Nadmiar tresci przewija .agent-body w srodku, karta sama nie rosnie. */
  position: relative; display: flex; height: 500px; min-width: 0; flex-direction: column;
  padding: 20px 21px 0; border: 1px solid rgba(40, 103, 184, .25); border-radius: 13px;
  background: linear-gradient(140deg, rgba(10,35,70,.9), rgba(8,22,43,.88));
  box-shadow: inset 0 0 40px rgba(9,74,164,.05), 0 15px 40px rgba(0,0,0,.08);
  transition: .25s ease;
}
.agent-body {
  flex: 1;
  min-height: 0; /* pozwala flex-childowi sie kurczyc zamiast wypychac karte */
  overflow-y: auto;
  padding-right: 2px; /* miejsce na pasek scrolla, zeby nie zaslanial tekstu */
}
.agent-body::-webkit-scrollbar { width: 5px; }
.agent-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.agent-card:hover { border-color: rgba(45,126,227,.48); transform: translateY(-3px); box-shadow: 0 18px 45px rgba(0,0,0,.17); }
.agent-card.active-agent { border-color: rgba(21,204,105,.58); background: linear-gradient(140deg, rgba(8,42,58,.93), rgba(8,25,45,.9)); box-shadow: inset 0 0 45px rgba(15,142,86,.06), 0 15px 40px rgba(0,0,0,.1); }
.agent-card.active-agent:hover { border-color: rgba(31,230,130,.82); }
.agent-card.blad-agent { border-color: rgba(239,83,80,.55); background: linear-gradient(140deg, rgba(58,15,15,.85), rgba(30,10,10,.85)); box-shadow: inset 0 0 45px rgba(239,83,80,.06), 0 15px 40px rgba(0,0,0,.1); }
.agent-card.blad-agent:hover { border-color: rgba(255,110,105,.8); }
.agent-card.uwaga-agent { border-color: rgba(249,161,27,.5); background: linear-gradient(140deg, rgba(58,42,10,.85), rgba(30,22,8,.85)); }
.agent-card.uwaga-agent:hover { border-color: rgba(255,182,74,.75); }
.checked { position: absolute; top: 10px; right: 10px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 4px; background: linear-gradient(145deg,#2ad881,#0aa450); color: white; box-shadow: 0 0 16px rgba(23,211,113,.25); }
.checked.zla { background: linear-gradient(145deg,#ff7a70,#c62828); box-shadow: 0 0 16px rgba(239,83,80,.3); }
.agent-head { display: flex; align-items: flex-start; gap: 16px; min-height: 84px; }
.bot-avatar { position: relative; display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border: 1px solid; border-radius: 50%; font-size: 29px; }
.bot-avatar b { position: absolute; right: -1px; bottom: 0; width: 16px; height: 16px; border: 2px solid #0a1b35; border-radius: 50%; }
.blue-bot { border-color: rgba(41,111,231,.28); background: radial-gradient(circle, rgba(41,105,216,.45), rgba(10,48,110,.5)); color: #8fc8ff; }
.blue-bot b { background: linear-gradient(145deg,#fff,#a068e8); }
.green-bot { border-color: rgba(26,190,103,.27); background: radial-gradient(circle, rgba(17,154,93,.42), rgba(7,73,55,.52)); color: #53e99e; }
.green-bot b { background: #13c96b; }
.red-bot { border-color: rgba(239,83,80,.3); background: radial-gradient(circle, rgba(200,60,55,.45), rgba(90,20,20,.5)); color: #ff9d98; }
.red-bot b { background: #ef5350; }
.amber-bot { border-color: rgba(249,161,27,.3); background: radial-gradient(circle, rgba(210,129,27,.42), rgba(90,55,10,.5)); color: #ffce85; }
.amber-bot b { background: #f9a11b; }
.agent-head h3 {
  margin: 1px 0 8px; font-size: 15px; line-height: 1.4;
  /* Rezerwacja RÓWNO 2 linijek u wszystkich agentów (nie tylko min.) -
     krótsze tytuły dostają puste miejsce, dłuższe się ucinają (...) -
     inaczej badge/harmonogram/tresc ponizej rozjezdzaly by sie w pionie
     miedzy kartami o roznej dlugosci nazwy (feedback: "zeby bylo rowne"). */
  height: calc(1.4em * 2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.badge { display: inline-block; padding: 5px 11px; border-radius: 12px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge-waiting { background: linear-gradient(90deg,rgba(95,51,194,.82),rgba(54,33,141,.75)); color: #d8c7ff; }
.badge-active { background: linear-gradient(90deg,rgba(15,132,76,.78),rgba(7,82,53,.72)); color: #85f7bb; }
.badge-blad { background: linear-gradient(90deg,rgba(180,40,35,.82),rgba(110,20,20,.75)); color: #ffcfcc; }
.badge-uwaga { background: linear-gradient(90deg,rgba(180,120,20,.82),rgba(110,70,10,.75)); color: #ffe2b0; }
.badge-ai { display: inline-block; background: linear-gradient(90deg,rgba(15,110,140,.82),rgba(8,70,95,.75)); color: #a6e8ff; padding: 3px 9px; border-radius: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; margin-left: 6px; vertical-align: middle; }
.schedule { margin: 4px 0 0; color: #b7c1d4; font-size: 12px; }
.schedule i { margin-right: 8px; color: #97a7c4; }
.odliczanie { margin: 4px 0 0; color: #f0b84f; font-size: 11.5px; }
.odliczanie i { margin-right: 8px; color: #f0b84f; }
.description {
  margin: 16px 0 0; color: #f1f4fa; font-size: 13.5px; line-height: 1.6;
  /* Rezerwacja 2 linijek jak w tytule (h3) - podsumowanie ma bardzo rozna
     dlugosc miedzy agentami (jedna linia u jednego, dwie u drugiego), wiec
     bez tego "i"/chipy/wpisy ponizej zaczynaly sie na roznej wysokosci w
     kazdej karcie - feedback: "niech to jakos sie wyrowna, wyglada
     balaganiarsko". W widoku Lista (ponizej) limit znika - tam ma sie
     pokazac wszystko, nie ucinac. */
  height: calc(1.6em * 2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.description.cisza-opis { color: #ff9d98; font-weight: 600; }
.agent-grid.list-view .description { height: auto; display: block; -webkit-line-clamp: unset; overflow: visible; }
.liczby-wiersz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.liczba-chip { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: #9fb0cc; }
.liczba-chip b { color: var(--text); }

.info-liczb { flex: 0 0 auto; width: 100%; order: -1; margin-bottom: 2px; }
.info-liczb summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; color: #6c93c4; font-size: 12px; padding: 1px 4px; border-radius: 5px; }
.info-liczb summary::-webkit-details-marker { display: none; }
.info-liczb summary:hover { color: #9fd0ff; background: rgba(255,255,255,.06); }
.info-liczb-tresc { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid rgba(67,110,173,.25); border-radius: 8px; background: rgba(5,18,37,.6); }
.info-liczb-wiersz { display: flex; flex-direction: column; gap: 1px; font-size: 11px; }
.info-liczb-wiersz strong { color: var(--text); font-family: monospace; font-size: 11px; }
.info-liczb-wiersz span { color: #9fb0cc; line-height: 1.4; }
.agent-footer { display: flex; min-height: 60px; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(67,110,173,.2); flex-wrap: wrap; gap: 6px 14px; }
.agent-footer button, .agent-footer a { border: 0; background: transparent; color: #5aaaff; cursor: pointer; font-size: 12px; padding: 0; }
.agent-footer button:hover, .agent-footer a:hover { color: #9fd0ff; }
.history-button i { margin-right: 5px; }
.wydaj-zywo-button { border: 1px solid rgba(30,210,120,.4); background: rgba(30,210,120,.14); color: #4fe3a0; cursor: pointer; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 7px; }
.wydaj-zywo-button:hover { background: rgba(30,210,120,.24); color: #7cf0bd; }
.wydaj-zywo-button i { margin-right: 5px; }
.footer-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.draft-oczekujacy { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(30,210,120,.3); border-radius: 8px; background: rgba(30,210,120,.08); font-size: 11.5px; }
.draft-oczekujacy-etykieta { color: #4fe3a0; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .3px; }
.draft-oczekujacy strong { color: var(--text); font-size: 12px; overflow-wrap: break-word; }
.draft-oczekujacy a { color: #4fe3a0; text-decoration: none; font-weight: 600; align-self: flex-start; }
.draft-oczekujacy a:hover { color: #7cf0bd; text-decoration: underline; }
.draft-oczekujacy a i { margin-right: 5px; }
.arrow-button { display: grid; width: 39px; height: 35px; place-items: center; border: 1px solid rgba(31,108,208,.22) !important; border-radius: 8px; background: rgba(15,72,154,.25) !important; }
.footer-time { color: #91a0b8; font-size: 11px; white-space: nowrap; }

.wpisy-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wpis-mini { display: grid; grid-template-columns: 46px 1fr; gap: 10px; min-height: 46px; padding: 7px; overflow: hidden; border: 1px solid rgba(54,96,158,.32); border-radius: 9px; background: rgba(5,18,37,.57); }
.wpis-mini img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; }
.wpis-mini .wpis-mini-brak { width: 46px; height: 46px; border-radius: 6px; background: rgba(255,255,255,.05); }
.wpis-mini--bez-slotu { grid-template-columns: 1fr; }
.wpis-mini--przygaszony { opacity: .5; }
.wpis-mini--przygaszony strong, .wpis-mini--przygaszony strong a { text-decoration: line-through; }
.wpis-tytul-wiersz { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wpis-mini strong { display: block; font-size: 12px; line-height: 1.3; overflow-wrap: break-word; }
.wpis-mini strong a { color: inherit; }
.wpis-mini strong a:hover { text-decoration: underline; }
.wpis-mini p { margin: 3px 0 0; color: #a6b2c6; font-size: 11px; line-height: 1.35; overflow-wrap: break-word; }

.priorytet-badge { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 6px; border-radius: 5px; line-height: 1.6; }
.priorytet-badge.priorytet-p1 { background: rgba(224,62,62,.2); color: #ff9a9a; }
.priorytet-badge.priorytet-p2 { background: rgba(214,158,46,.2); color: #f0b84f; }
.priorytet-badge.priorytet-p3 { background: rgba(255,255,255,.08); color: var(--muted); }

.zadanie-stan { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.zadanie-stan--zalegle { color: #ff9a9a; font-weight: 700; }

.zadania-sekcja-tytul { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.zadania-sekcja-tytul:first-child { margin-top: 0; }

/* Lista = jedna kolumna, karty rozciagniete na pelna wysokosc tresci
   (nie ograniczone do 500px jak w widoku Kart) - zero ukrywania, zero
   wewnetrznego scrolla. Feedback: "nie pokazuje wszystkiego... rozwinac
   na maksa, pokazac wszystko co w nich siedzi". Wpisy w tym widoku
   renderowane sa BEZ limitu 3 (patrz zbudujKartaAgenta) - stad brak tu
   "display:none" na .wpisy-lista/.liczby-wiersz, w przeciwienstwie do
   wczesniejszej wersji tego widoku. */
.agent-grid.list-view .agent-grid-gorny, .agent-grid.list-view .agent-grid-dolny { grid-template-columns: 1fr; }
.agent-grid.list-view .agent-card { height: auto; }
.agent-grid.list-view .agent-body { overflow: visible; padding-right: 0; }

/* ── Panele dolne ──────────────────────────────────────────── */
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 25px; }
.panel { position: relative; min-height: 294px; overflow: hidden; padding: 16px 20px; border: 1px solid rgba(47,101,175,.25); border-radius: 13px; background: linear-gradient(140deg, rgba(10,29,55,.92), rgba(7,21,40,.87)); box-shadow: inset 0 0 45px rgba(12,71,149,.035); }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-title h2 { margin: 0; font-size: 16px; }
.panel-title button { height: 34px; padding: 0 13px; border: 1px solid rgba(47,96,164,.24); border-radius: 8px; background: rgba(12,42,81,.55); color: #9bb7dd; cursor: pointer; font-size: 11px; }
.panel-title button:hover { border-color: rgba(48,137,255,.45); color: #dbeaff; }
.panel-title button i { margin-left: 5px; }
.activity-row { display: grid; grid-template-columns: 82px minmax(0,1fr) auto; min-height: 56px; align-items: center; gap: 10px; }
.activity-row time { display: flex; align-items: center; gap: 14px; color: #98a5ba; font-size: 11px; }
.activity-row time i, .tomorrow-row time i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.success-dot { background: #1eca70; }
.planned-dot { background: #8556e9; }
.blad-dot { background: var(--red); }
.uwaga-dot { background: var(--amber); }
.activity-row > div { display: grid; gap: 4px; min-width: 0; }
.activity-row strong, .tomorrow-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.activity-row span, .tomorrow-row span { color: #8491a7; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { padding: 7px 14px; border-radius: 14px; font-size: 10px; white-space: nowrap; }
.status.success { background: rgba(7,95,60,.32); color: #33dc83; }
.status.planned { background: rgba(76,43,144,.35); color: #bd94ff; }
.status.blad { background: rgba(150,30,25,.35); color: #ff9d98; }
.status.uwaga { background: rgba(150,95,10,.35); color: #ffce85; }
.tomorrow-list { position: relative; z-index: 2; width: 58%; }
.tomorrow-row { display: grid; grid-template-columns: 73px 1fr; min-height: 56px; align-items: center; }
.tomorrow-row time { display: flex; align-items: center; justify-content: space-between; padding-right: 14px; color: #a8b3c8; font-size: 11px; }
.tomorrow-row > div { display: grid; gap: 4px; padding-left: 28px; border-left: 1px solid rgba(70,111,168,.25); }
.robot-art { position: absolute; right: 7px; bottom: 6px; width: 200px; height: auto; opacity: .9; pointer-events: none; }
.panel-pusto { color: var(--muted); font-size: 12px; padding: 20px 0; }

/* ── Ustawienia ────────────────────────────────────────────── */
.settings-panel { margin-top: 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); gap: 14px; flex-wrap: wrap; }
.settings-row:last-child { border-bottom: 0; }
.settings-row strong { display: block; font-size: 13px; }
.settings-row span { color: var(--muted); font-size: 11.5px; }
.settings-notion-lista { display: flex; flex-direction: column; padding: 4px 0 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.settings-notion-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 12.5px; }
.settings-notion-wiersz a { color: #5aaaff; text-decoration: none; }
.settings-notion-wiersz a:hover { color: #9fd0ff; }
.settings-notion-wiersz a i { margin-right: 6px; }
.settings-notion-brak { color: var(--muted); font-style: italic; }
.settings-btn { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: rgba(12,42,81,.5); color: #cfe0ff; cursor: pointer; font-size: 12px; }
.settings-btn:hover { border-color: rgba(48,137,255,.5); }
.settings-btn.danger { border-color: rgba(239,83,80,.4); color: #ffb3af; }
.settings-btn.danger:hover { border-color: rgba(239,83,80,.7); background: rgba(90,20,20,.3); }

/* ── Modal historii ────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(2,8,17,.72); backdrop-filter: blur(3px);
}
.modal-overlay.widoczny { display: flex; }
.modal {
  width: 100%; max-width: 960px; max-height: 80vh; display: flex; flex-direction: column;
  border: 1px solid rgba(47,101,175,.35); border-radius: 14px;
  background: linear-gradient(150deg, rgba(12,32,60,.98), rgba(7,17,32,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-close { border: 0; background: rgba(255,255,255,.06); color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.modal-close:hover { color: var(--text); background: rgba(255,255,255,.12); }
.modal-body { overflow-y: auto; padding: 6px 20px 18px; }
/* Modal agenta (klik na biurko) wstrzykuje CALA .agent-card - zdejmujemy
   jej wlasna ramke/tlo/wysokosc, zeby nie wygladalo jak "karta w karcie",
   modal juz ma wlasna ramke i tlo. */
.modal-body--karta { padding: 4px 20px 20px; }
.modal-body--karta .agent-card { height: auto; border: 0; background: none; box-shadow: none; padding: 0; }
.modal-body .wpis-mini { margin-bottom: 8px; }
.modal-wpis { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12.5px; }
.modal-wpis .co { min-width: 0; }
.modal-wpis .kiedy { color: var(--muted); white-space: nowrap; font-size: 11px; }

.historia-wiersz { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.historia-wiersz:last-child { border-bottom: none; }
.historia-glowna { min-width: 0; flex: 1; }
.historia-glowna .co { font-size: 12.5px; }
.historia-wiecej { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.historia-kiedy { color: var(--muted); white-space: nowrap; font-size: 11px; padding-top: 2px; }

.sidebar-overlay { display: none; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(35,149,255,.28); border-radius: 10px; background: #0b2947; color: #dceeff; box-shadow: 0 20px 45px rgba(0,0,0,.3); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(14px); transition: .22s ease; max-width: calc(100vw - 48px); }
.toast i { color: #35a8ff; }
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-link { display: none; flex: none; color: #7cc4ff; font-weight: 700; text-decoration: none; white-space: nowrap; margin-left: 4px; }
.toast-link:hover { text-decoration: underline; }
.dim-mode { filter: brightness(.82); }
.pusto { color: var(--muted); grid-column: 1 / -1; }

@media (max-width: 1250px) {
  .bottom-grid { grid-template-columns: 1fr; }
  .robot-art { right: 4%; width: 150px; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 25px 0 60px rgba(0,0,0,.4); }
  .content { margin-left: 0; padding: 0 20px 30px; }
  .menu-toggle { display: grid; width: 42px; height: 42px; border-radius: 10px; font-size: 16px; }
  .sidebar-close { position: absolute; top: 12px; right: 10px; display: grid; width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 35; border: 0; background: rgba(2,8,17,.7); backdrop-filter: blur(3px); }
  .sidebar-overlay.visible { display: block; }
}

@media (max-width: 620px) {
  .content { padding: 0 14px 25px; }
  .header { height: auto; padding: 16px 0; }
  .header h1 { font-size: 20px; }
  .header-title p { font-size: 9px; }
  .clock span, .clock small { display: none; }
  .clock strong { font-size: 17px; }
  .header-right { gap: 9px; }
  .theme-button, .logout-button { width: 40px; height: 40px; font-size: 15px; }
  .agent-grid-gorny, .agent-grid-dolny { grid-template-columns: 1fr; }
  .view-controls > span { display: none; }
  .activity-row { grid-template-columns: 58px minmax(0,1fr); }
  .activity-row .status { display: none; }
  .panel { padding: 15px; }
  .panel-title button { font-size: 0; }
  .panel-title button i { margin: 0; font-size: 12px; }
  .tomorrow-list { width: 100%; }
  .robot-art { display: none; }
  .toast { right: 14px; bottom: 14px; max-width: calc(100vw - 28px); }
}

/* ── "Jak to się łączy" i "Ustawienia" obok siebie — oba czytelniejsze
     niz rozciagniete na cala szerokosc. Diagram dostaje nieco wiecej
     miejsca (wezszy niz .bottom-grid) bo SVG i tak ma wlasny scroll. ── */
.laczy-ustawienia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 1250px) {
  .laczy-ustawienia-grid { grid-template-columns: 1fr; }
}

/* ── Diagram powiazan (agenci <-> systemy <-> serwery) ─────────── */
/* Gwiazdy w 2 warstwach (::before dalsza, ::after blizsza) - JS (pulpit.js,
   nasluch mousemove na #siec) ustawia --mx/--my (-0.5..0.5, pozycja
   kursora wzgledem panelu). Blizsza warstwa ma wiekszy mnoznik w
   translate3d, wiec rusza sie bardziej - stad wrazenie glebi/3D.
   inset:-20px (wieksze niz panel), zeby przy ruchu nie odslonic krawedzi. */
.siec-panel {
  margin-top: 0; position: relative; overflow: hidden;
  --mx: 0; --my: 0;
}
.siec-panel::before, .siec-panel::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  transition: transform .2s ease-out;
  will-change: transform;
}
.siec-panel::before {
  opacity: .55;
  background-size: 220px 200px;
  transform: translate3d(calc(var(--mx) * 7px), calc(var(--my) * 7px), 0);
  background-image:
    radial-gradient(1.3px 1.3px at 18px 24px, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(1px   1px   at 54px 78px, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(1.6px 1.6px at 92px 34px, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(1px   1px   at 124px 98px, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 158px 54px, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1px   1px   at 184px 118px, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(1.4px 1.4px at 26px 140px, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1px   1px   at 64px 162px, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 106px 172px, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(1px   1px   at 142px 150px, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(1.5px 1.5px at 172px 16px, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1px   1px   at 8px  96px, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1.1px 1.1px at 102px 8px, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(1px   1px   at 196px 166px, rgba(255,255,255,.5), transparent 70%);
}
.siec-panel::after {
  opacity: .4;
  background-size: 280px 260px;
  transform: translate3d(calc(var(--mx) * 16px), calc(var(--my) * 16px), 0);
  background-image:
    radial-gradient(2px   2px   at 40px 50px, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1.6px 1.6px at 130px 20px, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(2.2px 2.2px at 200px 100px, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(1.6px 1.6px at 70px 160px, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(2px   2px   at 220px 210px, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1.8px 1.8px at 160px 230px, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(2px   2px   at 10px 220px, rgba(255,255,255,.65), transparent 70%);
}
.siec-panel > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .siec-panel::before, .siec-panel::after { transition: none; }
}
.siec-scroll { overflow-x: auto; }
.siec-svg { width: 100%; max-width: 720px; min-width: 560px; height: auto; display: block; margin: 0 auto; }
.siec-wezel rect {
  stroke-width: 1.5;
  transition: filter .15s ease;
}
.siec-wezel:hover rect { filter: brightness(1.3); }
.siec-agent rect { fill: rgba(35,149,255,.14); stroke: rgba(35,149,255,.55); }
.siec-system rect { fill: rgba(134,88,243,.14); stroke: rgba(134,88,243,.5); }
.siec-serwer rect { fill: rgba(147,161,189,.1); stroke: rgba(147,161,189,.45); stroke-dasharray: 3 3; }
.siec-app rect { fill: rgba(45,212,191,.16); stroke: rgba(45,212,191,.6); }
a:has(.siec-app) { cursor: pointer; }
.siec-wezel text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.siec-wezel text.siec-mala { font-size: 9.5px; font-weight: 400; fill: var(--muted); }

/* Polaczenia "danowe" (agent<->system, system<->system) - ciagle,
   animowany przeplyw kropek wzdluz linii sugeruje ruch danych. */
.siec-polaczenia line, .siec-luki path {
  stroke: rgba(147, 161, 189, .45);
  stroke-width: 1.5;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  fill: none;
  /* --delay (ustawiany inline per-linia w HTML) rozklada start animacji,
     zeby drugi odcinek lancucha (np. agent -> Shoper) ruszal chwile PO
     pierwszym (bady.pl -> agent) - czytelna sztafeta, nie caly diagram
     migajacy jednoczesnie. Domyslnie 0s dla linii bez wlasnego --delay. */
  animation: siec-przeplyw 1.1s linear infinite;
  animation-delay: var(--delay, 0s);
  transition: stroke .15s ease, stroke-width .15s ease;
}
.siec-polaczenia line:hover, .siec-luki path:hover { stroke: var(--blue); stroke-width: 2.5; animation-play-state: paused; }
@keyframes siec-przeplyw { to { stroke-dashoffset: -16; } }

/* Polaczenia "hostingowe" (serwer->system) - przerywane, BEZ animacji
   przeplywu (rozroznienie: "tu stoi", nie "tu plynie"). */
.siec-serwery line {
  stroke: rgba(147, 161, 189, .35);
  stroke-width: 1.3;
  stroke-dasharray: 5 4;
  fill: none;
  transition: stroke .15s ease, stroke-width .15s ease;
}
.siec-serwery line:hover { stroke: rgba(147, 161, 189, .8); stroke-width: 2; }

.siec-grot { fill: rgba(147, 161, 189, .6); }
.siec-podpis { margin: 10px 2px 0; color: var(--muted); font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .siec-polaczenia line, .siec-luki path { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}