/* Wspólny styl portalu (logowanie, dashboardy, panele .dp-*, dialogi .dlg-*, listy .us-*). */
:root {
  --bg: #0a0e13;
  --bg-panel: #12181f;
  --bg-elevated: #1a222b;
  --bg-input: #0e1319;
  --border: #232d38;
  --border-strong: #33404d;
  --text: #eaf0f5;
  --text-muted: #a9b4c0;
  --text-faint: #7c8896;
  --accent: #f3501c;
  --accent-hover: #f5734a;
  --accent-soft: rgba(243, 80, 28, 0.14);
  --teal: #2fa8a0;
  --danger: #e5637a;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --radius: 10px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; }

/* Ciemny pasek przewijania wszędzie tam, gdzie się pojawi. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg-input);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--bg-input); }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
/* Ekrany dotykowe (smartfon): pasek przewijania ukryty, pokazuje się tylko podczas przewijania (klasę .is-scrolling ustawia js/scroll-hint.js) */
@media (pointer: coarse) {
  * { scrollbar-color: transparent transparent; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: transparent; }
  .is-scrolling { scrollbar-color: var(--border-strong) transparent; }
  .is-scrolling::-webkit-scrollbar-thumb { background: var(--border-strong); }
}

/* Pole wyboru pliku (input type=file) — przycisk przeglądarki bywa jasny domyślnie. */
input[type="file"] {
  width: 100%;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 2px 0;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--bg-panel);
  border-color: var(--text-faint);
}

[hidden] { display: none !important; }

/* Pasek górny (identyfikacja + wyloguj) — wspólny dla panelu admina,
   klienta i Data Engineer. */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.app-topbar .brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-topbar .brand-mini img {
  height: 30px;
  width: auto;
}

@media (max-width: 720px) {
  .app-topbar .brand-mini img { height: 24px; }
}

.app-topbar .brand-mini span {
  font-size: 13px;
  color: var(--text-muted);
}

.app-topbar .logout-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.app-topbar .logout-btn:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 15% 20%, rgba(243,80,28,0.05) 0, rgba(243,80,28,0.05) 1px, transparent 1px, transparent 68px),
    repeating-radial-gradient(circle at 85% 80%, rgba(243,80,28,0.04) 0, rgba(243,80,28,0.04) 1px, transparent 1px, transparent 84px);
  background-size: 68px 68px, 84px 84px;
}

.bg-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(243,80,28,0.07), transparent 60%);
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
}

.install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.install-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.install-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.install-btn svg { width: 16px; height: 16px; flex: none; }
.install-btn-text-short { display: none; }          /* krótka etykieta — widoczna tylko na wąskich ekranach, patrz media query niżej */
@media (max-width: 480px) {
  .install-btn-text { display: none; }               /* na wąskim ekranie pełny tekst ustępuje krótkiej etykiecie */
  .install-btn-text-short { display: inline; }        /* zamiast samej ikony pokazujemy krótkie "Instaluj app" */
  .install-btn { padding: 7px 10px; }
}

.lang-switch {
  display: inline-flex;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-btn:hover { color: var(--text); }

.lang-btn.is-active {
  background: var(--bg-elevated);
  color: var(--text);
}

.flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  flex: none;
}

.flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flag-pl {
  background: linear-gradient(to bottom, #ffffff 50%, #dc143c 50%);
}

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 48px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.brand-logo {
  width: 220px;
  height: auto;
  display: block;
}

.brand-tagline {
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
}

.card h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 22px;
}

.tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-btn:hover { color: var(--text); }

.tab-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tab-panel:not(.is-active) {
  display: none;
}

form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field[hidden] { display: none; }

.field-group { display: flex; flex-direction: column; gap: 18px; }
.field-group[hidden] { display: none; }

.privacy-note {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-faint);
}

/* Komunikat informacyjny (nie błąd) — np. „konto czeka na aktywację przez administratora”. */
.form-info {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(47, 168, 160, 0.1);
  border: 1px solid rgba(47, 168, 160, 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.verify-info {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

#client-verify-code {
  text-align: center;
  font-size: 20px;
  letter-spacing: 6px;
  font-family: var(--font-display);
}

.field label,
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.15s ease;
}

textarea {
  resize: vertical;
  min-height: 60px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--accent);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

/* Niektóre przeglądarki (Chrome/Edge) nadpisują wygląd pól email/tekstowych
   swoim silnikiem natywnym (autofill, walidacja) - wymuszamy ciemne tło. */
input[type="email"] {
  -webkit-text-fill-color: var(--text);
}

input,
textarea {
  color-scheme: dark;
}

/* Pola formularzy logowania (Login / Hasło / Email / kod): jasny tekst na stałe, także gdy przeglądarka
   przełącza pole w stan autouzupełnienia albo listy zapisanych loginów. Placeholder zostaje przygaszony. */
.card .field input[type="text"],
.card .field input[type="password"] {
  -webkit-text-fill-color: var(--text);
}
.card .field input::placeholder {
  -webkit-text-fill-color: var(--text-faint);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

.input-with-action {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-suffix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.input-with-suffix:focus-within {
  border-color: var(--accent);
}

.input-with-suffix input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.input-with-suffix input:focus {
  border-color: transparent;
}

.input-suffix {
  display: flex;
  align-items: center;
  padding: 0 13px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 14.5px;
  white-space: nowrap;
  border-left: 1px solid var(--border-strong);
}

.input-with-action input {
  padding-right: 42px;
}

.ghost-icon-btn {
  position: absolute;
  right: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-faint);
  cursor: pointer;
}

.ghost-icon-btn:hover { color: var(--text-muted); background: var(--bg-elevated); }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.checkbox-box {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-input);
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox input:checked + .checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox input:checked + .checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #0a0e13;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox input:focus-visible + .checkbox-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Checkbox zablokowany (np. "Ukryj opis/grupę" wymuszone przez "jedna linia" — js/digital-panels.js: openSettings). */
.checkbox.is-locked { cursor: not-allowed; opacity: 0.55; }
.checkbox.is-locked input { cursor: not-allowed; }

.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.radio input {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.radio-box {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-input);
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.radio input:checked + .radio-box { border-color: var(--accent); }
.radio input:checked + .radio-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.radio input:focus-visible + .radio-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio input:disabled + .radio-box { cursor: not-allowed; }
.radio input:disabled ~ span { cursor: not-allowed; }

.link-muted {
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
}

.link-muted:hover { color: var(--accent); }

.form-error {
  font-size: 13px;
  color: var(--danger);
  background: rgba(229, 99, 122, 0.1);
  border: 1px solid rgba(229, 99, 122, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.submit-btn {
  margin-top: 4px;
  background: var(--accent);
  color: #17130a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.submit-btn:hover { background: var(--accent-hover); }
.submit-btn:active { transform: translateY(1px); }

.submit-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Krok weryfikacji kodem — dwa przyciski obok siebie */
.wizard-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.wizard-actions .ghost-btn {
  flex: 1;
}

.wizard-actions .submit-btn {
  flex: 1;
  margin-top: 0;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ghost-btn:hover { color: var(--text); border-color: var(--text-faint); }

.footer-note {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-faint);
}

@media (max-width: 420px) {
  .card { padding: 26px 20px 22px; }
  .stage { padding-top: 12px; }
}

.dyn-tabs {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  border-bottom: 1px solid var(--border-strong);
}

.dyn-tabs-scroll {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  padding-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.dyn-tab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 6px 6px 6px 12px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.dyn-tab { -webkit-tap-highlight-color: transparent; }
.dyn-tab.is-fixed { padding-right: 12px; }
.dyn-tab:hover { background: var(--bg-input); color: var(--text); }
.dyn-tab:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }

.dyn-tab.is-active {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: inset 0 2px 0 var(--accent);
}

.dyn-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dyn-tab-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.dyn-tab-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }

.dyn-tab.is-dragging {
  z-index: 5;
  transition: none;
  cursor: grabbing;
  background: var(--bg-input);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.dyn-tab.is-shifting { transition: transform 0.12s ease; }

.dyn-tab.is-new { padding: 3px 8px; cursor: default; }
.dyn-tab-input {
  width: 160px;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
}

.dyn-tab-add {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0 0 2px 6px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.dyn-tab-add:hover { background: var(--bg-input); color: var(--accent); }

.dyn-tabs-status {
  align-self: center;
  margin-left: 12px;
  color: var(--danger);
  font-size: 12px;
}
.dyn-tabs-status:empty { display: none; }

.dyn-tabs-extra {
  align-self: center;
  margin: 0 0 4px auto;
  padding-left: 12px;
  flex: none;
}
.dyn-tabs-extra:empty { display: none; }

.dyn-pages { min-width: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.dyn-page { padding-top: 10px; }
.dyn-page:not(.is-active) { display: none; }

/* Wąski ekran: znacznik bazy z paska zakładek chowamy (nazwa bazy jest i tak
   widoczna na każdej stronie zakładki), żeby nie zabierał miejsca zakładkom. */

.dp-root { min-width: 0; }

.dp-statusbar {
  display: flex;
  flex-wrap: wrap;          /* wąski ekran: czas ostatniego rekordu schodzi do drugiej linii, zamiast znikać */
  align-items: center;
  gap: 2px 8px;
  min-height: 20px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
}
.dp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.dp-dot.is-ok   { background: var(--teal); box-shadow: 0 0 0 3px rgba(47, 168, 160, 0.18); }
.dp-dot.is-wait { background: #d9a441; }
.dp-dot.is-bad  { background: var(--danger); }
.dp-time { margin-left: auto; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dp-msg {
  max-width: 560px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.dp-msg.is-error {
  padding: 10px 14px;
  border: 1px solid rgba(229, 99, 122, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(229, 99, 122, 0.1);
  color: var(--danger);
}

.dp-grid {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dp-col {
  position: relative;          /* offsetParent dla pomiarów przy przeciąganiu (layoutPos) */
  flex: 1 1 0;
  min-width: 0;
}

.dp-card, .dp-add {
  margin-bottom: 10px;
}

.dp-card {
  position: relative;
  min-width: 0;
  min-height: 106px;
  padding: 9px 14px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Własne kolory panelu (ustawienia panelu → zębatka) przychodzą jako zmienne --dp-name/--dp-value/--dp-unit/--dp-bg
     ustawiane w js/digital-panels.js; bez zmiennej działa kolor standardowy (drugi argument var()). */
  background: var(--dp-bg, var(--bg-panel));
}
.dp-card-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dp-name {
  color: var(--dp-name, var(--accent));
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.dp-group {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 11.5px;
}
.dp-info {
  min-height: 16px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 12.5px;
}
.dp-card.is-selected .dp-info.is-marquee,
.dp-grid.is-view-only .dp-card:hover .dp-info.is-marquee { text-overflow: clip; }
.dp-card.is-selected .dp-info.is-marquee .dp-info-text,
.dp-grid.is-view-only .dp-card:hover .dp-info.is-marquee .dp-info-text {
  display: inline-block;
  will-change: transform;
}
.dp-valuerow { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; min-width: 0; }
.dp-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dp-value, var(--text));
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
/* Kreska "—" (brak jeszcze danych) ma ten sam kolor co normalna wartość (własny albo standardowy —
   dash sam w sobie już odróżnia "brak danych" od liczby, nie potrzeba osobnego koloru). */
.dp-unit-wrap { flex: none; display: flex; align-items: baseline; }
/* Jednostka: ta sama czcionka co wartość, tylko mniejsza — zwykły tekst tuż za liczbą. */
.dp-unit-text {
  color: var(--dp-unit, var(--text-muted));
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
/* Lista wyboru jednostki: tylko na zaznaczonym panelu (i tylko gdy jednostek jest kilka). */
.dp-unit { display: none; width: auto; max-width: none; padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-input); color: var(--text); font-family: var(--font-body); font-size: 14px; cursor: pointer; }
.dp-card.has-unit-choice.is-selected .dp-unit { display: inline-flex; }
.dp-card.has-unit-choice.is-selected .dp-unit-text { display: none; }
.dp-unit:hover { color: var(--text); border-color: var(--text-faint); }
.dp-unit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dp-card.is-oneline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dp-card.is-twoline {
  align-items: center;
  gap: 10px;
}
.dp-card.is-oneline { min-height: 64px; }
.dp-card.is-oneline .dp-card-head { flex: none; }
.dp-card.is-oneline .dp-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px;   /* w trybie jednej linii nazwa jest jedynym opisem panelu (opis/grupa ukryte) — większa niż standardowe 15px */
  max-width: var(--dp-ol-name-max-w, 50%);
}
.dp-card.is-oneline .dp-valuerow { flex: 0 1 auto; min-width: 0; margin-top: 0; margin-left: auto; }
.dp-card.is-oneline .dp-value { flex: 0 1 auto; }
.dp-card.is-oneline .dp-unit-wrap { flex: none; width: var(--dp-ol-unit-w, auto); }
.dp-card.is-oneline.has-unit-choice.is-selected .dp-unit-wrap { width: auto; }   /* lista wyboru jednostki potrzebuje naturalnej szerokości, patrz komentarz wyżej */

.dp-grid.is-uniform-noinfo .dp-card,
.dp-grid.is-uniform-noinfo .dp-add { min-height: 90px; }
.dp-grid.is-uniform-oneline .dp-card,
.dp-grid.is-uniform-oneline .dp-add { min-height: 64px; }

.dp-card.is-oneline.is-selected { align-items: flex-end; padding-bottom: 2px; }
.dp-card.is-oneline.is-selected .dp-card-head { padding-right: 0; }   /* reguła 68px dla trybu wielolinijkowego (niżej) tu nie ma zastosowania */
/* Sesja 77: ikony w trybie jednej linii mają TEN SAM rozmiar co w trybie dwóch linii (domyślne .dp-tool: 28×28,
   ikona 16px, róg 6px, odstęp 2px) — dawniej pomniejszone do 22×22 / 13px. */

.dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 12, 0.72);
}
.dlg {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  color: var(--text);
}
.dlg-wide { max-width: 560px; height: min(640px, calc(100vh - 32px)); height: min(640px, calc(100dvh - 32px)); }
.dlg-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 4px; }
.dlg-title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.dlg-body { min-height: 0; padding: 4px 16px 16px; overflow-y: auto; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.dlg-wide .dlg-body { flex: 1; display: flex; flex-direction: column; }
.dlg-message { margin: 0 0 14px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-btn {
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.dlg-btn:hover { color: var(--text); border-color: var(--text-faint); }
.dlg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlg-btn.is-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.dlg-btn.is-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.dlg-btn.is-danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.dlg-btn.is-danger:hover { filter: brightness(1.1); }
/* "Zastosuj do innych" (toggle) — margin-right: auto wypycha go na lewą krawędź stopki, Anuluj/Zapisz
   zostają zgrupowane po prawej dzięki .dlg-foot { justify-content: flex-end } bez zmian gdzie indziej. */
.dps-apply-toggle { margin-right: auto; }
.dlg-x {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: transparent; color: var(--text-faint);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.dlg-x:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.dlg-x:focus-visible { outline: 2px solid var(--accent); }

/* --- panele: zaznaczanie, narzędzia w rogu, kafelek "+", przeciąganie --- */
.dp-card {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: border-color 0.12s ease;
}
.dp-card:hover { border-color: var(--border-strong); }
.dp-card:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); border-color: var(--accent); }
.dp-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dp-card.is-selected .dp-card-head { padding-right: 60px; }
.dp-info { padding-right: 4px; }
.dp-unit { -webkit-user-select: auto; user-select: auto; }

.dp-tools {
  position: absolute;
  top: 5px;
  right: 4px;
  display: none;
  gap: 3px;
}
.dp-card.is-selected .dp-tools { display: flex; }
/* Jeden wygląd przycisków narożnych na każdym panelu (też na wykresie): 23 px, ikona 14 px, ramka 1 px */
.dp-tool {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
}
.dp-tool svg { width: 14px; height: 14px; }
.dp-tool:hover { color: var(--accent); border-color: var(--accent); }
.dp-tool.dp-del:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.dp-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dp-add {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 106px;
  padding: 0;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dp-add svg { width: 34px; height: 34px; }
.dp-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dp-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-add:disabled { opacity: 0.4; cursor: not-allowed; }
/* Trwa dodawanie panelu (otwarte okna wyboru): podświetlony TYLKO kliknięty "+" (tu — jak przy najechaniu),
   pozostałe są wyszarzone przez :disabled (updateAddButton w JS). */
.dp-add.is-target { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* Tryb "Do wybranych paneli" — kafelki "+" schowane */
.dp-grid.is-pick-mode .dp-add { display: none; }
/* Tryb edycji WYŁĄCZONY (domyślnie; przycisk „Włącz edycję” w pasku górnym — js/edit-mode.js): brak kafelków "+",
   panele tylko do oglądania (bez zaznaczania i przeciągania). */
.dp-grid.is-view-only .dp-add { display: none; }
.dp-grid.is-view-only .dp-card { cursor: default; }

.edit-toggle {
  flex: none; height: 30px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.edit-toggle svg { flex: none; }
.edit-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Wyłączony = SZARY (także gdy kursor nadal stoi nad przyciskiem tuż po kliknięciu): najechanie tylko lekko
   rozjaśnia szarość, NIE robi z przycisku pomarańczowego (to wyglądałoby jak włączony). */
.edit-toggle:hover { border-color: var(--border-strong); }
.edit-toggle.is-on,
.edit-toggle.is-on:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* mruganie po próbie kliknięcia panelu/zakładki przy wyłączonej edycji (EditMode.hint przełącza klasę kilka razy) */
.edit-toggle.is-attention,
.edit-toggle.is-attention:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }

.dp-pickbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 8px 12px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.dp-pickbar-count { flex: 1 1 auto; min-width: 160px; color: var(--text); font-size: 13px; }
.dp-card.is-pick-mode { cursor: pointer; }
.dp-card.is-pick-mode::before {
  content: ""; position: absolute; top: 8px; left: 8px; z-index: 5;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--bg-input);
}
.dp-card.is-pick-mode:hover::before { border-color: var(--accent); }
.dp-card.is-pick-mode.is-picked::before { background: var(--accent); border-color: var(--accent); }
.dp-card.is-pick-mode.is-picked::after {
  content: ""; position: absolute; top: 12px; left: 13px; z-index: 6;
  width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dp-card.is-pick-mode.is-picked { border-color: var(--accent); }

/* przeciąganie */
body.dp-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.dp-grid.is-reordering .dp-card { cursor: grabbing; }
.dp-card.is-shifting, .dp-card.is-settling, .dp-add.is-shifting { transition: transform 0.16s ease; }
.dp-card.is-dragging {
  z-index: 20;
  transition: none;
  border-color: var(--accent);
  background: var(--dp-bg, var(--bg-elevated));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.dp-card.is-settling { z-index: 20; }

/* okno "Dodaj panel" */
.pk-search {
  flex: none;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.pk-search:focus { border-color: var(--accent); }
.pk-status { padding: 6px 0; color: var(--text-faint); font-size: 13.5px; }
.pk-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.pk-group { border-bottom: 1px solid var(--border); }
.pk-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  user-select: none;
}
.pk-summary::-webkit-details-marker { display: none; }
.pk-summary::before {
  content: ""; flex: none; width: 7px; height: 7px;
  border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(-45deg); margin: 0 4px 0 2px;
  transition: transform 0.15s ease;
}
.pk-group[open] > .pk-summary::before { transform: rotate(45deg); margin-top: -3px; }
.pk-gname { flex: 1; }
.pk-count { color: var(--text-faint); font-size: 12px; font-weight: 500; }
.pk-items { display: flex; flex-direction: column; padding: 0 0 8px 18px; }
.pk-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.pk-item:hover:not(:disabled), .pk-item:focus-visible { background: var(--bg-elevated); color: var(--text); outline: none; }
.pk-item:disabled { opacity: 0.5; cursor: default; }
.pk-name { flex: none; min-width: 108px; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.03em; }
.pk-desc { flex: 1; min-width: 0; }
.pk-tag { flex: none; color: var(--text-faint); font-size: 11.5px; }
@media (max-width: 520px) {
  .pk-item { flex-wrap: wrap; gap: 0 10px; }
  .pk-name { min-width: 0; }
  .pk-desc { flex-basis: 100%; }
  .pk-items { padding-left: 6px; }
}

/* --- panel-zaślepka (typy paneli w przygotowaniu — na razie tylko "graficzny") --- */
.dp-card-stub { border-style: dashed; }
.dp-stub-note { margin-top: 10px; color: var(--text-faint); font-size: 13px; line-height: 1.45; }
.dp-stub-progress { margin-top: 10px; height: 6px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; }
.dp-stub-bar { display: block; height: 100%; background: var(--accent); border-radius: 3px; min-width: 2px; }
.dp-stub-pct { margin-top: 6px; color: var(--text-muted); font-size: 12px; }

.dp-card-analog { display: flex; flex-direction: column; min-height: 0; padding: 7px 5px 5px; }   /* góra/lewa jak .dp-card (panel cyfrowy) — nazwa w tym samym miejscu */
.dp-card-analog .dp-card-head { flex: none; padding-left: 9px; }   /* początek nazwy jak w panelu cyfrowym: 5 px paddingu karty + 9 px = 14 px */
.dp-card-analog .dp-name { white-space: nowrap; }
.dp-analog-body { position: relative; flex: 0 0 auto; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0; }   /* tarcza nadal prawie na całą szerokość (14px − 6px = 8px od krawędzi) */
.dp-analog-svg { display: block; width: 100%; max-width: 360px; height: auto; flex: none; overflow: hidden; }
/* 3D (sesja 52, spójnie z walcem zbiornika): szkło półprzezroczyste + podstawa-elipsa, łuk jako "rurka"
   (jasna krawędź zewnętrzna, cień wewnętrzny), wskazówka dwuścienna z cieniem, piasta jak kulka. */
.dp-analog-glass { fill: rgba(150, 165, 185, 0.10); stroke: none; }
.dp-analog-base { fill: rgba(0, 0, 0, 0.22); stroke: none; }
.dp-analog-baseedge { stroke: var(--border-strong); stroke-width: 0.8; }
.dp-analog-arc { stroke: var(--dp-dial, var(--border-strong)); stroke-width: 5; stroke-linecap: round; }
.dp-analog-arc-hi { stroke: rgba(255, 255, 255, 0.38); stroke-width: 1.1; stroke-linecap: round; }
.dp-analog-arc-lo { stroke: rgba(0, 0, 0, 0.30); stroke-width: 1.3; stroke-linecap: round; }
.dp-analog-needle { transition: transform 0.35s ease; }
.dp-analog-needle-body { fill: var(--dp-needle, var(--accent)); stroke: none; }
.dp-analog-needle-lite { fill: rgba(255, 255, 255, 0.22); }
.dp-analog-needle-dark { fill: rgba(0, 0, 0, 0.30); }
.dp-analog-needle-shadow { fill: rgba(0, 0, 0, 0.35); }
.dp-analog-hub { fill: var(--dp-needle, var(--accent)); }
.dp-analog-tick { stroke: var(--dp-dial, var(--border-strong)); stroke-width: 1.2; }
.dp-analog-ticklabel {
  fill: var(--text-muted); font-family: var(--font-body); font-weight: 600;
  paint-order: stroke; stroke: var(--dp-bg, var(--bg-panel)); stroke-width: 1.6px; stroke-linejoin: round;
}
.dp-analog-row { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 0; margin: 0; white-space: nowrap; text-align: center;   /* jednostka wyśrodkowana nad wartością */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7); }
.dp-analog-body.is-half .dp-analog-row { bottom: 17%; }     /* półkole: nad piastą, między cyframi skali */
.dp-analog-body.is-full .dp-analog-row { top: 68%; transform: translate(-50%, -50%); }   /* środek tekstu na wysokości, gdzie początek skali (kąt −135°) przecina okrąg tarczy: (50 + 46·cos45° − 0,5) / 99 */        /* koło: pod piastą, w przerwie u dołu tarczy */
.dp-card-analog .dp-value { flex: none; overflow: visible; text-overflow: clip; font-size: 22px; line-height: 1.15; }
.dp-analog-row .dp-value, .dp-analog-row .dp-unit-text {   /* halo w kolorze tła wokół wartości i jednostki, jak na zbiorniku */
  text-shadow: 0 0 2px var(--dp-bg, var(--bg-panel)), 0 0 3px var(--dp-bg, var(--bg-panel));
  -webkit-text-stroke: 2px var(--dp-bg, var(--bg-panel)); paint-order: stroke fill;
}
.dp-card-analog .dp-unit-wrap { font-size: 14px; }
.dp-card-analog .dp-unit-text { font-size: inherit; line-height: 1.15; }
.dp-card-analog .dp-unit { font-size: inherit; padding: 1px 5px; }
.dp-card.dp-card-analog.is-selected .dp-value { margin-left: 0; }

.dp-col > .dp-card-tank {
  --dp-tank-gap: 8px;
  display: inline-flex; vertical-align: top;
  width: calc((100% - 3 * var(--dp-tank-gap)) / 4 - 0.3px);
  margin-right: var(--dp-tank-gap);
}
/* czwarta karta w wierszu (klasę ustawia markTankRows) — bez prawego marginesu: 4 walce + 3 odstępy = szerokość kolumny */
.dp-col > .dp-card-tank.is-tank-last { margin-right: 0; }
/* Panel analogowy: po 3 w rzędzie kolumny (tarcza skaluje się z szerokością, teksty też — wg szerokości karty) */
.dp-col > .dp-card-analog {
  --dp-tank-gap: 8px;
  display: inline-flex; vertical-align: top; container-type: inline-size;
  width: calc((100% - 2 * var(--dp-tank-gap)) / 3 - 0.3px);
  margin-right: var(--dp-tank-gap);
}
.dp-col > .dp-card-analog.is-tank-last { margin-right: 0; }
.dp-col > .dp-card-analog { padding: 5px 3px 4px; }
.dp-col > .dp-card-analog .dp-card-head { padding-left: 3px; }
.dp-col > .dp-card-analog .dp-name { font-size: clamp(10px, 6.5cqw, 15px); }
/* Wąski panel analogowy (kilka w rzędzie) zaznaczony w edycji: karta nie zmienia wysokości, nazwa ma całą szerokość z ikoną ołówka za tekstem,
   a przyciski stoją w dwóch kolumnach: zębatka i krzyżyk w górnym rzędzie, łańcuszek pod krzyżykiem */
@container (max-width: 150px) {
  .dp-col > .dp-card.dp-card-analog.is-selected:not(.is-oneline) .dp-card-head,
  .dp-col > .dp-card.dp-card-analog.is-selected.has-link:not(.is-oneline):not(.dp-card-tank) .dp-card-head { padding-right: 52px; min-height: 23px; align-items: center; }
  .dp-col > .dp-card.dp-card-analog.is-selected:not(.dp-card-stub):not(.dp-card-info) .dp-card-head .dp-name { margin: 0 -3px; padding: 0 15px 0 5px; max-width: none; }
  .dp-col > .dp-card.dp-card-analog.is-selected:not(.dp-card-stub):not(.dp-card-info) .dp-card-head .dp-name::after { right: 3px; width: 9px; height: 9px; margin-top: -4.5px; }
  .dp-col > .dp-card.dp-card-analog.is-selected .dp-tools { display: grid; grid-template-columns: 23px 23px; z-index: 2; }
  .dp-col > .dp-card.dp-card-analog.is-selected .dp-tools .dp-link { grid-column: 2; grid-row: 2; }
}
.dp-card-tank { display: flex; flex-direction: column; min-height: 212px; padding: 5px 4px 5px 5px; }
.dps-preview.dp-card-tank { width: 150px; margin: 0 auto 8px; }
.dp-tank-wrap { position: relative; flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.dp-tank-cyl { position: relative; flex: 1 1 auto; min-width: 0; }
.dp-tank-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.dp-tank-glass { fill: rgba(150, 165, 185, 0.10); }
.dp-tank-rim { fill: rgba(255, 255, 255, 0.10); stroke: var(--border-strong); stroke-width: 1; }
.dp-tank-outline { stroke: var(--border-strong); stroke-width: 1.2; }
.dp-tank-liquid { transition: transform 0.35s ease; }
.dp-tank-stop-a { stop-color: var(--dp-level, var(--accent)); }
.dp-tank-stop-b { stop-color: var(--dp-level, var(--accent)); stop-color: color-mix(in srgb, var(--dp-level, var(--accent)) 58%, #000); }
.dp-tank-surface {
  fill: var(--dp-level, var(--accent)); fill: color-mix(in srgb, var(--dp-level, var(--accent)) 72%, #fff);
  stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.8;
}
/* Nakładka w środku walca: trzy linie (nazwa / wartość / jednostka), bez zawijania; JS (fitLabelLines) dobiera
   rozmiar czcionki do szerokości walca. Obwódka tekstu w kolorze tła — czytelność na płynie o dowolnym kolorze. */
.dp-tank-label {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 3px; text-align: center;
}
.dp-tank-label > * { flex: none; white-space: nowrap; max-width: none; }
.dp-tank-label .dp-tank-head { justify-content: center; padding: 0; }
.dp-tank-label .dp-name { white-space: nowrap; font-size: 15px; letter-spacing: 0.02em; }
.dp-tank-label .dp-value { overflow: visible; text-overflow: clip; font-size: 22px; line-height: 1.1; }
.dp-tank-label .dp-unit-wrap { justify-content: center; font-size: 12px; line-height: 1.1; }
.dp-tank-label .dp-unit-text { font-size: inherit; line-height: 1.1; }
.dp-tank-label .dp-unit { font-size: inherit; padding: 0 4px; }
.dp-tank-label .dp-name, .dp-tank-label .dp-value, .dp-tank-label .dp-unit-text {
  text-shadow: 0 0 2px var(--dp-bg, var(--bg-panel)), 0 0 3px var(--dp-bg, var(--bg-panel));
  -webkit-text-stroke: 2px var(--dp-bg, var(--bg-panel)); paint-order: stroke fill;
}
/* Ramki zaznaczonego panelu (nazwa / wartość) — jak na panelu cyfrowym, tylko ciaśniejsze (wąski walec). */
.dp-card.dp-card-tank.is-selected .dp-tank-head { padding-right: 0; }
.dp-card:not(.dp-card-stub):not(.dp-card-info).dp-card-tank.is-selected .dp-tank-head .dp-name { margin: 0; padding: 0 13px 0 4px; }
.dp-card:not(.dp-card-stub):not(.dp-card-info).dp-card-tank.is-selected .dp-tank-head .dp-name::after { right: 3px; width: 9px; height: 9px; margin-top: -4.5px; }
.dp-card.dp-card-tank.is-selected .dp-value { margin: 0; padding: 0 12px 0 4px; }
.dp-card.dp-card-tank.is-selected .dp-value::after { right: 4px; width: 4px; height: 4px; margin-top: -3px; }
.dp-card.dp-card-tank.is-selected .dp-value[aria-expanded="true"]::after { margin-top: -1px; }
/* Zębatka/krzyżyk: w prawym górnym rogu i tego samego rozmiaru co na panelu cyfrowym (domyślne .dp-tools/.dp-tool);
   sesja 77 — dawniej pomniejszone (20×20) i w LEWYM górnym rogu. Tylko z-index, żeby były nad walcem i skalą. */
.dp-card-tank .dp-tools { z-index: 2; }
/* Skala pionowa po PRAWEJ stronie walca: kreska + liczba całkowita przy każdym podziale (dolny/górny kraniec
   skali = środki elips dna/wieczka — .dp-tank-ticks-in ma top/bottom ustawiane z JS). */
.dp-tank-ticks { position: relative; flex: none; width: 24px; }
.dp-tank-ticks-in { position: absolute; left: 0; right: 0; }
.dp-tank-tick { position: absolute; left: 0; right: 0; height: 0; }
.dp-tank-tick::before { content: ""; position: absolute; left: 1px; top: 0; width: 4px; height: 1px; background: var(--dp-dial, var(--border-strong)); }
.dp-tank-ticklabel {
  position: absolute; left: 7px; top: 0; transform: translateY(-50%);
  color: var(--text-muted); font-family: var(--font-body); font-size: 11px; line-height: 1; white-space: nowrap;
}
.dp-tank-tick.is-skipped .dp-tank-ticklabel { visibility: hidden; }

.dp-card-info { display: flex; flex-direction: column; height: 106px; min-height: 0; padding-bottom: 8px; overflow: hidden; }   /* = wysokość dwulinijkowego panelu cyfrowego (.dp-card min-height 106 px) */
.dp-card-info.is-nodesc { height: 64px; padding-bottom: 6px; }   /* bez opisu dodatkowego = wysokość panelu jednolinijkowego (.dp-card.is-oneline) */
.dp-card-info.is-nodesc .dp-info-code { margin-top: 0; }
.dp-info-code {
  flex: none; align-self: flex-start; white-space: nowrap;
  margin-top: 5px; color: var(--dp-value, var(--text));
  font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3;
}
.dps-preview .dp-info-code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dp-info-desc {
  flex: 1 1 auto; margin-top: 2px; color: var(--text-faint);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.dlg-types { max-width: 460px; }
.tp-list { display: flex; flex-direction: column; gap: 6px; }
.tp-item {
  display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.tp-item:hover, .tp-item:focus-visible { border-color: var(--accent); background: var(--bg-elevated); outline: none; }
.tp-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-top: 1px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-faint);
}
.tp-icon svg { width: 26px; height: 26px; }
.tp-item:hover .tp-icon, .tp-item:focus-visible .tp-icon { color: var(--accent); background: var(--accent-soft); }
.tp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-name { color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.tp-desc { line-height: 1.4; }
.pk-back {
  align-self: flex-start; margin: 0 0 8px; padding: 2px 0;
  border: none; background: none; color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.pk-back:hover, .pk-back:focus-visible { color: var(--accent); outline: none; }

/* --- opis parametru: stała linijka (wysokość stała, żeby panel nie skakał) --- */
.dp-info { height: 20px; line-height: 20px; box-sizing: border-box; min-height: 0; }

.dp-card { --dp-frame: var(--border-strong); --dp-frame-bg: var(--bg-input); --dp-frame-hover: var(--text-faint); }
.dp-card.has-bg { --dp-frame: rgba(128, 128, 128, 0.6); --dp-frame-bg: rgba(128, 128, 128, 0.14); --dp-frame-hover: rgba(128, 128, 128, 0.95); }
.dp-card.is-selected .dp-value {
  position: relative;
  cursor: pointer;
  margin-left: -9px; padding: 0 20px 0 9px;          /* prawa strona poszerzona o miejsce na strzałkę (::after niżej) */
  border-radius: 8px;
  background: var(--dp-frame-bg);
  box-shadow: 0 0 0 1px var(--dp-frame);            /* ramka bez wpływu na układ */
}
.dp-card.is-selected .dp-value::after {
  content: "";
  position: absolute; top: 50%; right: 9px;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.6px solid var(--dp-frame-hover);
  border-bottom: 1.6px solid var(--dp-frame-hover);
  transform: rotate(45deg);
  transition: transform 0.12s ease;
  pointer-events: none;
}
.dp-card.is-selected .dp-value[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.dp-card.is-selected .dp-value:hover { box-shadow: 0 0 0 1px var(--dp-frame-hover); }
.dp-card.is-selected .dp-value[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--accent); }
.dp-card.is-selected .dp-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dp-card:not(.dp-card-stub):not(.dp-card-info).is-selected .dp-card-head .dp-name {
  position: relative;
  cursor: pointer;
  margin: 0 -8px; padding: 0 20px 0 8px;             /* prawa strona poszerzona o miejsce na ikonę edycji (::after niżej) */
  border-radius: 8px;
  background: var(--dp-frame-bg);
  box-shadow: 0 0 0 1px var(--dp-frame);
}
.dp-card:not(.dp-card-stub):not(.dp-card-info).is-selected .dp-card-head .dp-name::after {
  content: "";
  position: absolute; top: 50%; right: 6px;
  width: 12px; height: 12px; margin-top: -6px;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNyAzYTIuODI4IDIuODI4IDAgMSAxIDQgNEw3LjUgMjAuNSAyIDIybDEuNS01LjVMMTcgM3oiLz48L3N2Zz4=") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNyAzYTIuODI4IDIuODI4IDAgMSAxIDQgNEw3LjUgMjAuNSAyIDIybDEuNS01LjVMMTcgM3oiLz48L3N2Zz4=") center / contain no-repeat;
  pointer-events: none;
}
.dp-card:not(.dp-card-stub):not(.dp-card-info).is-selected .dp-card-head .dp-name:hover::after { opacity: 0.85; }
.dp-card:not(.dp-card-stub):not(.dp-card-info).is-selected .dp-card-head .dp-name:hover { box-shadow: 0 0 0 1px var(--dp-frame-hover); }
.dp-card:not(.dp-card-stub):not(.dp-card-info).is-selected .dp-card-head .dp-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-name { max-width: 100%; min-width: 0; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-input {
  width: 100%; box-sizing: border-box; margin-bottom: 14px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text);
  font-family: var(--font-body); font-size: 15px; outline: none;
}
.dlg-input:focus { border-color: var(--accent); }
.dlg-foot { flex-wrap: wrap; }
.dlg-restore { display: block; margin: 10px 0 0; }
.dlg-btn:disabled { opacity: 0.4; cursor: default; }
.pk-alias { color: var(--text); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }

/* --- własna lista rozwijana (js/ui-select.js) — zamiast natywnego <select> --- */
.us-btn {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; max-width: none; width: auto;
  padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-input); color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.3;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.us-btn::after {
  content: ""; flex: none; width: 6px; height: 6px; margin: -3px 0 0 2px;
  border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(45deg); transition: transform 0.12s ease;
}
.us-btn[aria-expanded="true"] { border-color: var(--accent); }
.us-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.us-btn:hover { border-color: var(--text-faint); }
.us-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.us-pop {
  position: fixed; z-index: 1500; box-sizing: border-box; overflow-y: auto;
  padding: 4px; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  font-family: var(--font-body); font-size: 14px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.us-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 7px 10px; border-radius: 6px; color: var(--text);
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}
.us-opt.is-active { background: rgba(255, 255, 255, 0.07); }
.us-opt[aria-selected="true"] { color: var(--accent); }
.us-hint { color: var(--text-faint); font-size: 12px; }
@media (pointer: coarse) {
  .us-pop { font-size: 15px; }
  .us-opt { padding: 11px 12px; }
}

/* przycisk miejsc po przecinku: mały, w tym samym wierszu co dawny opis parametru */
/* wybór jednostki widoczny tylko na zaznaczonym panelu (reguła wyższa niż .us-btn) */
.dp-card .dp-unit.us-btn { display: none; }

/* --- <select> zamieniony na własną listę (UiSelect.enhance): natywny zostaje w DOM, ale niewidoczny --- */
.us-wrap { position: relative; display: block; }
.us-native {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0;
  width: 100% !important; max-width: 100% !important; padding: 0 !important;
}
.us-btn.us-field { display: flex; width: 100%; justify-content: space-between; padding: 10px 12px; font-size: 14px; border-radius: var(--radius-sm); }
.us-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-btn.is-placeholder .us-val { color: var(--text-faint); }

.dlg-settings {
  max-width: 480px;
  max-width: min(640px, calc(100vw - 32px));
  max-width: min(640px, calc(100dvw - 32px));
}
.dps-section { margin: 0 0 14px; }
.dps-h { margin: 6px 0 6px; color: var(--text); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.dps-hint { margin: 6px 0 0; color: var(--text-faint); font-size: 12.5px; line-height: 1.45; }
.dps-note { margin: 8px 0 0; color: var(--danger); font-size: 12.5px; line-height: 1.45; }
.dlg-settings .us-btn.us-field { padding: 8px 12px; }

/* podgląd = ta sama karta co na stronie (klasy .dp-*), tylko nieklikalna */
.dps-preview { max-width: 280px; margin: 0 auto 8px; cursor: default; pointer-events: none; }

.dps-row { margin: 10px 0 0; }
/* justify-content: flex-start (nie space-between) — checkbox "zastosuj to ustawienie" siedzi teraz
   ZARAZ ZA nazwą ustawienia (w .dps-rowhead-main, patrz niżej), nie przylepiony do prawej krawędzi. */
.dps-rowhead { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 6px; color: var(--text-muted); font-size: 13px; }
.dps-rowlabel { font-weight: 500; }
.dps-sw-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dps-sw-list {
  display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  padding: 4px 5px;                 /* pierścień zaznaczenia sięga 4 px od kulki — z mniejszym marginesem pierwsza kulka miała ucięty lewy brzeg */
  scrollbar-width: none; -ms-overflow-style: none;
}
.dps-sw-list::-webkit-scrollbar { display: none; height: 0; width: 0; }
.dps-sw-arrow {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 18px; height: 26px; margin: 0; padding: 0;
  border: none; border-radius: 4px; background: transparent; color: var(--text-faint);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dps-sw-arrow svg { width: 15px; height: 15px; }
.dps-sw-arrow.is-prev svg { transform: scaleX(-1); }
.dps-sw-row.can-scroll .dps-sw-arrow { display: flex; }
.dps-sw-arrow:hover:not(:disabled) { color: var(--accent); background: var(--bg-input); }
.dps-sw-arrow:disabled { opacity: 0.25; cursor: default; }
.dps-sw {
  position: relative; flex: none; box-sizing: border-box;
  width: 26px; height: 26px; margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  background: var(--c, transparent); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dps-sw:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.75); }
.dps-sw:focus-visible, .dps-custom:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dps-sw.is-std { border-style: dashed; border-color: rgba(255, 255, 255, 0.55); }
.dps-sw[aria-checked="true"], .dps-custom.is-selected { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent); }
/* własny kolor: tęczowe kółko, po wybraniu — wybrany kolor */
.dps-custom { background: conic-gradient(#ff4d4d, #ffd23f, #5be36a, #38d9f5, #5b8def, #b388ff, #ff4d4d); }
.dps-custom.is-set { background: var(--c); }
.dps-custom input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.dps-check { font-size: 12.5px; }
.dps-rowhead-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dps-applycheck { margin: 0; flex: none; }
.dps-applycheck-hint { display: none; }
@media (max-width: 480px) {
  .dps-applycheck-hint { display: inline; margin-left: 3px; color: var(--text-faint); font-size: 10.5px; font-weight: 400; }
}

/* --- skala (zakres + podziały) — tylko panel analogowy/zbiornika (js/digital-panels.js: scaleSec) --- */
.dps-scale-grid { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 4px; }
.dps-scale-field { display: flex; align-items: center; gap: 8px; }
.dps-scale-flabel { color: var(--text-muted); font-size: 12.5px; }
.dps-scale-inputs { display: flex; align-items: center; gap: 4px; }
.dps-scale-sep { color: var(--text-faint); }
.dps-scale-input {
  width: 64px; padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-input); color: var(--text); font-family: var(--font-body); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.dps-scale-input:focus { outline: none; border-color: var(--accent); }
.dps-scale-input:disabled { opacity: 0.5; }
.dps-scale-auto { margin: 0; gap: 5px; }

.dps-visibility-head { margin: 10px 0 0; }
.dps-visibility { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }

.dps-apply-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dps-apply-radio { font-size: 13px; }
.dps-apply-radio.is-locked { cursor: not-allowed; opacity: 0.55; }
.dps-apply-radio.is-locked input { cursor: not-allowed; }
.dps-apply-confirm { margin-top: 10px; width: 100%; }

@media (pointer: coarse) { .dps-sw { width: 32px; height: 32px; } }

/* Strona admina: strzałka powrotu do konta Data Engineera — tylko wąski ekran (admin/js/back-to-account.js). */
.back-to-account { display: none; }
@media (max-width: 760px) {
  .back-to-account {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; padding: 0; margin-right: 2px;
    background: transparent; color: var(--accent);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
  }
  .stage > .back-to-account { position: fixed; top: 12px; left: 12px; z-index: 5; background: var(--bg-panel); }
}


/* --- panel wykresu czasowego (js/chart-panel.js): legenda u góry, canvas z czasem w pionie --- */
.dp-card-chart { display: flex; flex-direction: column; min-height: 360px; overflow: hidden; cursor: default; padding: 5px 4px 4px; }   /* wykres: minimalne marginesy karty */
.dp-card-chart .dp-card-head { flex: none; }
.dpc-legend { flex: none; display: flex; flex-direction: column; gap: 0; margin-top: 3px; border-radius: 6px; overflow: hidden; }   /* paski przylegają do siebie, zaokrąglony tylko obrys */
/* Legenda jak w DMR: pełny pasek w kolorze parametru; min po lewej, max po prawej, w środku „NAZWA: wartość [jednostka]”.
   Niezaznaczony: ciemna „pigułka” (kolor tła panelu przyciemniony kolorem parametru — --dpc-pill) z tekstem w kolorze parametru; zaznaczony: tekst kontrastowy (--dpc-text) na pełnym kolorze. */
.dpc-leg {
  display: grid;
  grid-template-columns: var(--dpc-side, 56px) minmax(0, 1fr) var(--dpc-side, 56px);   /* te same marginesy → pigułki równej szerokości, wyśrodkowane */
  align-items: stretch;
  gap: 3px;
  min-height: 17px;
  padding: 0 3px;
  background: var(--dpc-color);
}
.dpc-part {
  min-width: 0;
  padding: 0 3px;
  border: 0;
  background: none;
  color: var(--dpc-text);
  font: 700 10.5px/1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.dpc-part:hover, .dpc-part:focus-visible { text-decoration: underline; outline: none; }
.dpc-lname {
  display: flex; align-items: center; justify-content: center;
  margin: 1px 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 12.5px/1.15 var(--font-display);
  letter-spacing: 0.02em;
  border-radius: 999px;
  color: var(--dpc-color);
  background: var(--dpc-pill, rgba(10, 14, 19, 0.85));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}
.dpc-leg.is-sel .dpc-lname { color: var(--dpc-text); background: none; }
.dpc-plot { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 3px; }
.dpc-canvas { position: absolute; left: 0; top: 0; display: block; touch-action: pan-y; }
.dp-card-chart.is-selected .dpc-canvas { touch-action: none; }
.dpc-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: var(--text-faint); font-size: 13px; pointer-events: none;
}
.dpc-overlay[hidden] { display: none; }
.dpc-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-faint); font-size: 13px; text-align: center; padding: 16px; }
.dpc-empty[hidden], .dpc-canvas[hidden] { display: none; }
.pk-item .pk-check {
  flex: none; width: 15px; height: 15px; margin-right: 8px; align-self: center;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
}
.pk-item.is-picked .pk-check { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--bg-panel); }

/* --- okna: ustawienia wykresu i zakres skali --- */
.dpc-range { display: flex; gap: 12px; margin: 8px 0 4px; }
.dpc-range-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; color: var(--text-muted); font-size: 13px; }
.dpc-settings .dpc-set-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
/* Parametr: zwijany blok (domyślnie zwinięty) — nagłówek: strzałka, kolor, nazwa, skrót ustawień, przyciski */
.dpc-set-param { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); }
.dpc-set-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.dpc-set-head::-webkit-details-marker { display: none; }
.dpc-set-arrow { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(-45deg); transition: transform 0.12s ease; margin: 0 2px 0 1px; }
.dpc-set-param[open] > .dpc-set-head .dpc-set-arrow { transform: rotate(45deg); }
.dpc-set-chip { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.dpc-set-name { flex: none; max-width: 40%; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpc-set-sum { flex: 1 1 auto; min-width: 0; color: var(--text-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpc-set-tools { flex: none; display: flex; gap: 4px; margin-left: auto; }
.dpc-set-tool { min-width: 28px; padding: 2px 7px; }
.dpc-set-body { padding: 2px 10px 8px; border-top: 1px solid var(--border); }
/* Wiersz ustawienia: duży ekran — etykieta w stałej kolumnie (pola/kulki zaczynają się zawsze w tym samym miejscu); mały — etykieta nad polem */
.dpc-set-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: center; margin: 8px 0; min-width: 0; }
.dpc-set-lbl { color: var(--text-muted); font-size: 13px; }
@media (min-width: 560px) {
  .dpc-set-line { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
}
.dpc-set-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.dpc-set-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dpc-set-cap { color: var(--text-faint); font-size: 11.5px; }
.dpc-set-ctl { min-width: 0; }
.dpc-set-ctl .us-btn { width: 100%; }
.dpc-set-line .dlg-input.dpc-num { width: 100%; margin-bottom: 0; }
.dpc-settings .dps-sw-row { min-width: 0; }
.dpc-num.is-bad { border-color: var(--danger); }
.dpc-min { text-align: left; }
.dpc-max { text-align: right; }
/* Wykres w trybie normalnym: nazwa bez ramki edycji (zmiana nazwy tylko w trybie edycji) */
.dp-grid.is-view-only .dp-card-chart.is-selected .dp-card-head .dp-name {
  margin: 0; padding: 0; background: none; box-shadow: none; cursor: default;
}
.dp-card-chart .dp-card-head { padding-left: 10px; }   /* początek nazwy w tej samej pozycji co w panelu cyfrowym (1 px ramki + 14 px marginesu): 4 px paddingu karty + 10 px */
.dp-card-chart .dp-name { font-size: 14px; }
/* Wykres: małe przyciski (ustawienia, usuń) w rzędzie z nazwą — nie wchodzą na pierwszy pasek legendy; poza edycją niewidoczne */
.dp-card-chart .dp-card-head { min-height: 23px; align-items: center; }
.dp-card-chart .dp-tools { top: 5px; right: 4px; gap: 3px; }
.dp-card-chart .dp-tool { width: 23px; height: 23px; border-radius: 6px; }   /* = wysokość obramowania nazwy panelu w edycji (21 px + 2 × 1 px ramki) */
.dp-card-chart .dp-tool svg { width: 14px; height: 14px; }
.dp-card-chart.is-selected .dp-card-head { padding-right: 48px; }
.dp-card-chart.is-view .dp-tools { display: none !important; }
.dp-card-chart.is-view.is-selected .dp-card-head { padding-right: 0; }
/* Wykres poza edycją: bez ołówka przy nazwie */
.dp-card.dp-card-chart.is-view .dp-card-head .dp-name::after { display: none; }
.dp-card.dp-card-chart.is-view .dp-card-head .dp-name { margin: 0; padding: 0; background: none; box-shadow: none; cursor: default; }

/* Przycisk „?” (pomoc): widoczny przy zaznaczonym panelu, na lewo od zębatki i krzyżyka */
.dpc-help { position: absolute; top: 5px; right: 4px; z-index: 3; display: none; width: 23px; height: 23px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); font: 700 14px/1 var(--font-display); cursor: pointer; align-items: center; justify-content: center; }
.dpc-help:hover { color: var(--accent); border-color: var(--accent); }
.dp-card-chart.is-selected .dpc-help { display: flex; }
.dp-card-chart:not(.is-view) .dpc-help { right: 56px; }
.dp-card-chart.is-selected.is-view .dp-card-head { padding-right: 26px; }
.dp-card-chart.is-selected:not(.is-view) .dp-card-head { padding-right: 74px; }
.dpc-help-h { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.dpc-help-p { margin: 8px 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.dpc-help-ico { flex: none; display: inline-flex; color: var(--accent); }
.dpc-help-ico svg { width: 18px; height: 18px; }
/* Wykres: checkboxy „kopiuj” przy ustawieniach — widoczne tylko po włączeniu „Zastosuj do innych” */
.dpc-apply-chk { display: none; }
.dpc-settings.is-apply .dpc-apply-chk, .is-apply .dpc-apply-chk { display: inline-flex; vertical-align: middle; margin: 0 6px 0 0; }
.dpc-set-lbl, .dpc-set-cap { display: flex; align-items: center; }
/* Pomoc wykresu — styl jak pomoc w grafiku (.gf-help*): sekcje z wersalikami, wiersze ikona + opis */
.dpc-hp-wrap { display: flex; flex-direction: column; gap: 10px; }
.dpc-hp-intro { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.dpc-hp-sec { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-input); }
.dpc-hp-sec summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; -webkit-tap-highlight-color: transparent; }
.dpc-hp-sec summary::-webkit-details-marker { display: none; }
.dpc-hp-sec summary:hover { background: rgba(255,255,255,.03); }
.dpc-hp-sec summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dpc-hp-sectitle { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.dpc-hp-chev { flex: none; display: inline-flex; color: var(--text-faint); transition: transform .15s ease; }
.dpc-hp-chev svg { width: 14px; height: 14px; }
.dpc-hp-sec[open] .dpc-hp-chev { transform: rotate(180deg); }
.dpc-hp-secbody { padding: 2px 12px 10px; border-top: 1px solid var(--border); }
.dpc-hp-row { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.dpc-hp-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-top: 1px; }
.dpc-hp-ic svg { width: 15px; height: 15px; }
.dpc-hp-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dpc-hp-tx b { font-size: 13px; color: var(--text); }
.dpc-hp-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 640px) { .dpc-hp-row { gap: 8px; } .dpc-hp-ic { width: 22px; height: 22px; } .dpc-hp-ic svg { width: 13px; height: 13px; } }
/* Wykres: „Dodaj parametry” — przycisk jak „+” dodawania paneli (przerywana ramka), na całą szerokość, wysokości wiersza parametru */
.dpc-add-param { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-faint);
  font: inherit; font-size: 13px; cursor: pointer; }
.dpc-add-param svg { width: 16px; height: 16px; flex: none; }
.dpc-add-param:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dpc-add-param:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Okna ustawień/pomocy: ostatni wiersz z przyciskami zawsze widoczny — poza przewijaną treścią (js/ui-dialog.js przenosi .dlg-foot z .dlg-body do .dlg),
   więc pasek przewijania kończy się nad przyciskami. */
.dlg > .dlg-foot { flex: none; padding: 10px 16px 14px; border-top: 1px solid var(--border); }
/* Pełny ekran (toggle): przycisk na lewo od „?”; panel zajmuje całą stronę */
.dpc-fs { position: absolute; top: 5px; right: 30px; z-index: 3; display: none; width: 23px; height: 23px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; }
.dpc-fs svg { width: 14px; height: 14px; }
.dpc-fs .fs-off { display: none; }
.dpc-fs:hover { color: var(--accent); border-color: var(--accent); }
.dpc-fs[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dpc-fs[aria-pressed="true"] .fs-on { display: none; }
.dpc-fs[aria-pressed="true"] .fs-off { display: block; }
.dp-card-chart.is-selected .dpc-fs { display: flex; }
.dp-card-chart:not(.is-view) .dpc-fs { right: 82px; }
.dp-card-chart.is-selected.is-view .dp-card-head { padding-right: 57px; }
.dp-card-chart.is-selected:not(.is-view) .dp-card-head { padding-right: 109px; }
.dp-card-chart.is-full { position: fixed; inset: 0; z-index: 900; width: auto; height: auto; max-width: none; margin: 0; border-radius: 0; min-height: 0; }
.dpc-hp-sec.is-well .dpc-hp-sectitle { color: var(--text); }
/* Panel analogowy: kształt tarczy (półkole / koło) */
.dp-analog-svg.is-full { max-width: 320px; }
.dps-shape-field { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; margin: 2px 0 10px; }
.dps-shape-label { color: var(--text-muted); font-size: 13px; }
.dps-shape-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* Panel analogowy: neonowy pasek wartości na obręczy (jak DMR: poświata → środek → rdzeń → jasna żyłka), kolor wskazówki */
.dp-analog-bar path { stroke: var(--dp-needle, var(--accent)); stroke-linecap: round; }
.dp-analog-bar-glow { stroke-width: 6.3; stroke-opacity: 0.22; }
.dp-analog-bar-mid { stroke-width: 3.4; stroke-opacity: 0.5; }
.dp-analog-bar-core { stroke-width: 2.1; }
.dp-analog-bar .dp-analog-bar-hi { stroke: color-mix(in srgb, var(--dp-needle, var(--accent)) 50%, #fff); stroke-width: 0.84; stroke-opacity: 0.9; }
.dp-analog-tick-minor { stroke-width: 0.8; stroke-opacity: 1; }
/* Okno ustawień panelu: wiersz „Parametr: NAZWA [Zmień parametr…]” pod listą typu panelu */
.dps-param-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 2px; }
.dps-param-label { color: var(--text-muted); font-size: 13px; }
.dps-param-name { color: var(--accent); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.dps-param-btn { margin-left: auto; }
.dpc-empty-hint { max-width: 240px; color: var(--text-faint); font-size: 12.5px; line-height: 1.45; }
.dpc-empty-hint[hidden] { display: none; }

/* Łańcuszek (toggle): na lewo od pełnego ekranu */
.dpc-link { position: absolute; top: 5px; right: 56px; z-index: 3; display: none; width: 23px; height: 23px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; }
.dpc-link svg { width: 14px; height: 14px; }
.dpc-link:hover { color: var(--accent); border-color: var(--accent); }
.dpc-link[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dp-card-chart.is-selected .dpc-link { display: flex; }
.dp-card-chart:not(.is-view) .dpc-link { right: 108px; }
.dp-card-chart.is-selected.is-view .dp-card-head { padding-right: 57px; }
.dp-card-chart.is-view .dpc-link { display: none; }   /* łańcuszek tylko w edycji */
.dp-card-chart.is-selected:not(.is-view) .dp-card-head { padding-right: 135px; }

/* Pełny ekran grupy połączonych wykresów: kolumny wyglądają jak jeden panel (wspólna ramka, jedna oś czasu z lewej) */
.dp-card-chart.is-full.is-grouped { border: 0; border-radius: 0; box-shadow: none; }
.dpc-full-frame { position: fixed; inset: 0; z-index: 901; pointer-events: none; border: 1px solid var(--border-strong); }
html:has(.dp-card-chart.is-grouped.is-selected) .dpc-full-frame { border-color: var(--accent); }
/* W pełnym ekranie przyciski łańcuszka, pełnego ekranu i pomocy są widoczne także po odznaczeniu panelu */
.dp-card-chart.is-full .dpc-fs, .dp-card-chart.is-full .dpc-help { display: flex; }
/* W pełnym ekranie nie ma łańcuszka; przy grupie przyciski pełnego ekranu i „?” ma tylko ostatnia kolumna z prawej */
.dp-card-chart.is-full.is-selected .dpc-link, .dp-card-chart.is-full .dpc-link { display: none; }
.dp-card-chart.is-full.is-grouped:not(.is-grouped-last) .dpc-fs, .dp-card-chart.is-full.is-grouped:not(.is-grouped-last) .dpc-help { display: none; }
.dp-card-chart.is-full.is-view .dp-card-head { padding-right: 57px; }
.dp-card-chart.is-full:not(.is-view) .dp-card-head { padding-right: 109px; }
.dp-card-chart.is-full.is-grouped:not(.is-grouped-last).is-view .dp-card-head { padding-right: 0; }
.dp-card-chart.is-full.is-grouped:not(.is-grouped-last):not(.is-view) .dp-card-head { padding-right: 48px; }

/* Puste pozycje legendy: dopełniają legendę wykresu do wysokości innych połączonych wykresów (pełny ekran grupy) */
.dpc-leg-pad { min-height: 17px; background: color-mix(in srgb, var(--border) 70%, var(--bg-input)); border-top: 1px solid var(--bg-input); }

/* Pełny ekran: przycisk edycji (na lewo od pełnego ekranu; tylko ostatnia kolumna grupy / pojedynczy panel) */
.dpc-edit { position: absolute; top: 5px; right: 56px; z-index: 3; display: none; width: 23px; height: 23px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; }
.dpc-edit svg { width: 14px; height: 14px; }
.dpc-edit:hover { color: var(--accent); border-color: var(--accent); }
.dpc-edit[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dp-card-chart.is-full .dpc-edit { display: flex; }
.dp-card-chart.is-full:not(.is-view) .dpc-edit { right: 108px; }
.dp-card-chart.is-full.is-grouped:not(.is-grouped-last) .dpc-edit { display: none; }
.dp-card-chart.is-full.is-view .dp-card-head { padding-right: 83px; }
.dp-card-chart.is-full:not(.is-view) .dp-card-head { padding-right: 135px; }
.dp-card-chart.is-full.is-grouped:not(.is-grouped-last).is-view .dp-card-head { padding-right: 0; }
.dp-card-chart.is-full.is-grouped:not(.is-grouped-last):not(.is-view) .dp-card-head { padding-right: 48px; }
.dpc-leg-pad { position: relative; display: flex; align-items: center; justify-content: center; }
.dpc-leg-pad svg { width: 14px; height: 14px; opacity: 0; color: var(--accent); }
.dp-card-chart:not(.is-view) .dpc-leg-pad { cursor: pointer; }
.dp-card-chart:not(.is-view) .dpc-leg-pad:hover { background: var(--accent-soft); outline: 1px dashed var(--accent); outline-offset: -1px; }
.dp-card-chart:not(.is-view) .dpc-leg-pad:hover svg { opacity: 1; }

/* Panel z wartością podłączony łańcuszkiem do grupy wykresów: przycisk w narożniku, wartość z czasu znacznika */
.dp-tool.dp-link[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dp-card.is-selected.has-link:not(.is-oneline):not(.dp-card-tank) .dp-card-head { padding-right: 86px; }

/* Zaznaczenie grupy poza edycją: panel z wartością jest tylko podświetlony (bez cech edycji i bez przycisków) */
.dp-card.is-group-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dp-grid.is-view-only .dp-tool.dp-link { display: none; }   /* łańcuszek tylko w edycji */

/* Kafel „+” wielkości zbiornika (edycja): na prawo od ostatniego zbiornika serii, gdy w wierszu jest wolne miejsce */
.dp-col > .dp-add-tank {
  --dp-tank-gap: 8px;
  display: inline-grid; vertical-align: top; box-sizing: border-box;
  width: calc((100% - 3 * var(--dp-tank-gap)) / 4 - 0.3px); min-height: 212px;
  margin-right: var(--dp-tank-gap);
}
.dp-col > .dp-add-tank.is-tank-last { margin-right: 0; }
.dp-col > .dp-add-tank.dp-add-analog { width: calc((100% - 2 * var(--dp-tank-gap)) / 3 - 0.3px); min-height: 60px; }
.dp-grid.is-view-only .dp-add-tank { display: none; }
.dp-grid.is-reordering .dp-add-tank { display: none; }   /* przeciąganie: kafle „+” schowane, przerwy wierszy zostają (rzędy się nie przestawiają pod kursorem) */
.dp-drop-mark { position: absolute; width: 3px; border-radius: 2px; background: var(--accent); z-index: 6; pointer-events: none; }
.dp-col > .dp-row-brk { display: block; width: 100%; height: 0; }   /* przerwa wiersza (markTankRows): po niepełnym rzędzie z kaflem „+” następny rząd idzie do nowej linii */

/* Pełny ekran połączonych wykresów: podłączone panele z wartościami w kolumnach po prawej (układa je layoutFullSide w digital-panels.js) */
.dpc-full-backdrop { position: fixed; top: 0; bottom: 0; z-index: 899; background: var(--bg); }
.dp-col > .dp-card.is-full-side, .dp-card.is-full-side { position: fixed; z-index: 900; width: 232px; margin: 0; }
.dp-col > .dp-card-tank.is-full-side, .dp-col > .dp-card-analog.is-full-side { display: flex; margin: 0; }   /* szerokość zbiornika ustawia layoutFullSide (1/3 kolumny) */

/* Status na żywo i czas ostatniego rekordu w pasku zakładek (po prawej); gdy tam jest miejsce, wiersz pod paskiem znika */
.dp-barinfo { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text-muted); font-size: 12.5px; }
.dp-barinfo[hidden] { display: none; }
.dp-barinfo .dp-time { margin-left: 0; }
.dp-barinfo.is-small { gap: 6px; font-size: 11.5px; }
.dp-barinfo.is-small .dp-time { font-size: 10.5px; }
.dp-statusbar.is-in-tabbar { display: none; }
.dp-statusbar.is-idle .dp-dot, .dp-barinfo.is-idle .dp-dot { visibility: hidden; }
/* W pełnym ekranie panele z wartościami mają zwykłą ramkę, bez koloru zaznaczenia */
.dp-card.is-full-side.is-selected, .dp-card.is-full-side.is-group-sel { border-color: var(--border); box-shadow: none; }

/* Przyciski w rogu paneli bez dodatkowej obwódki (focus) większej niż sam przycisk */
.dp-tool, .dp-tool:focus, .dp-tool:focus-visible,
.dpc-fs, .dpc-fs:focus, .dpc-fs:focus-visible,
.dpc-link, .dpc-link:focus, .dpc-link:focus-visible,
.dpc-edit, .dpc-edit:focus, .dpc-edit:focus-visible,
.dpc-help, .dpc-help:focus, .dpc-help:focus-visible { outline: none; }
.dpc-add-param:focus, .dpc-add-param:focus-visible { outline: none; }
/* W pełnym ekranie panele z wartościami nie mają łańcuszka (zostaje zębatka i krzyżyk w edycji) */
.dp-card.is-full-side .dp-tool.dp-link { display: none; }
.dp-card.is-full-side.is-selected.has-link:not(.is-oneline):not(.dp-card-tank) .dp-card-head { padding-right: 60px; }

/* Panel cyfrowy z kilkoma parametrami: każdy parametr to blok (.dp-sub) w układzie wybranym dla całego panelu; bloki nie mają własnej ramki ani tła */
.dp-card.dp-sub, .dp-card.dp-sub.is-selected { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 1px 0; min-height: 0; }
.dp-card.dp-multi { padding: 0 14px; min-height: 0; }                       /* odstęp od krawędzi daje padding bloków — pierwszy i ostatni blok mają tyle samo miejsca co środkowe */
.dp-card.dp-sub.is-oneline.is-selected { align-items: center; }
/* Zaznaczony panel z kilkoma parametrami: miejsce na przyciski w rogu ma tylko pierwszy blok (reszta nagłówków bez dopełnienia, rozmiar panelu bez zmian) */
.dp-card.dp-multi.is-selected .dp-sub .dp-card-head { padding-right: 0 !important; }
.dp-card.dp-multi.is-selected .dp-sub:first-child:not(.is-oneline) .dp-card-head { padding-right: 86px !important; }
.dp-card.dp-multi.is-full-side.is-selected .dp-sub:first-child:not(.is-oneline) .dp-card-head { padding-right: 60px !important; }
.dp-card.dp-multi.is-selected .dp-sub.is-oneline:first-child { align-items: flex-end; padding-bottom: 0; }
/* Każdy parametr zajmuje tyle samo miejsca w pionie (wiersze siatki o równej wysokości = najwyższy blok), treść wyśrodkowana w bloku */
.dp-multi { display: grid; grid-auto-rows: 1fr; }
.dp-multi .dp-sub + .dp-sub { border-top: 1px solid var(--border); }
.dp-multi .dp-sub:not(.is-oneline) { display: flex; flex-direction: column; justify-content: center; }
.dp-multi.is-selected .dp-sub:not(:first-child) .dp-card-head { padding-right: 0; }
.dp-multi.is-selected .dp-sub.is-oneline .dp-card-head { padding-right: 0; }
/* Ustawienia panelu cyfrowego: lista parametrów (pozycje się nie rozwijają — tylko przesuwanie i usuwanie) i „+” na dole */
.dps-psec { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.dps-plist { display: flex; flex-direction: column; gap: 6px; }
.dps-pitem .dpc-set-head { cursor: default; }
/* Multiparametr w układzie jednej linii: każdy blok ma stałą wysokość (50 px), tak samo w widoku zwykłym, w edycji i po zaznaczeniu */
.dp-card.dp-multi .dp-sub.is-oneline { box-sizing: border-box; height: 50px; min-height: 50px; }
.dp-card.dp-multi.dp-multi-ol { grid-auto-rows: auto; }   /* bloki o stałej wysokości — wiersze bez dodatkowego miejsca */
.dp-card.dp-sub { margin: 0; }   /* bloki parametrów bez odstępu między sobą (margines .dp-card dotyczy tylko paneli w kolumnie) */

/* wiadomości na wykresie: wiersze grup w ustawieniach */
.dpc-msg-rows { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.dpc-msg-row { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0; }
.dpc-msg-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }

/* zaznaczanie przedziału na wykresie: karta z wynikami (Min / Max / Max−Min / Średnia) */
.dpc-iv { position: absolute; top: 6px; right: 6px; z-index: 5; width: min(440px, calc(100% - 12px)); max-height: calc(100% - 12px); display: flex; flex-direction: column;
  background: rgba(10, 14, 19, 0.92); border: 1px solid var(--border-strong, #33404d); border-radius: 8px; color: var(--text, #eaf0f5); font-size: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.dpc-iv[hidden] { display: none; }
.dpc-iv-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 10px; }
.dpc-iv-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.dpc-iv-range { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dpc-iv-dur { flex: none; color: var(--text-muted, #a9b4c0); font-size: 11px; }
.dpc-iv-btn { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted, #a9b4c0); font-size: 16px; line-height: 1; cursor: pointer; outline: none; }
.dpc-iv-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text, #eaf0f5); }
.dpc-iv-body { overflow-y: auto; padding: 0 6px 6px; }
.dpc-iv-msg { padding: 4px 0 6px; color: var(--text-muted, #a9b4c0); }
.dpc-iv-row { padding: 6px 0; border-top: 1px solid var(--border, #232d38); }
.dpc-iv-name { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; min-width: 0; }
.dpc-iv-unit { flex: none; color: var(--text, #eaf0f5); font-weight: 400; opacity: 0.8; }
.dpc-iv-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dpc-iv-cell { display: flex; flex-direction: column; min-width: 0; }
.dpc-iv-lbl { color: var(--text-muted, #a9b4c0); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpc-iv-val { font-variant-numeric: tabular-nums; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpc-iv.is-bottom { top: auto; bottom: 24px; }
@media (max-width: 640px) {
  .dpc-iv { left: 6px; right: 6px; width: auto; max-height: 55%; }
}

/* skala logarytmiczna w ustawieniach wykresu */
.dpc-log-box { margin-top: 10px; }
.dpc-log-box[hidden] { display: none; }

/* rozwijany przycisk okna czasu zaraz za nazwą panelu */
.dpc-range-btn { align-self: center; flex: 0 1 auto; min-width: 0; max-width: 55%; margin-left: 8px; height: 20px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--bg-input); color: var(--text); font: 600 11px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; outline: none; }
.dpc-range-btn:hover { border-color: var(--accent); }
.dpc-range-btn.is-custom { color: var(--accent); border-color: var(--accent); }
.dp-card-chart.is-noaxis .dpc-range-btn { display: none; }
.dpc-range-menu { position: fixed; z-index: 10000; display: flex; flex-direction: column; min-width: 130px; padding: 4px; background: var(--bg-panel, #12181f); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.dpc-range-item { padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: 500 13px var(--font-body); text-align: left; cursor: pointer; outline: none; }
.dpc-range-item:hover { background: rgba(255, 255, 255, 0.08); }
.dpc-range-item.is-on { color: var(--accent); background: var(--accent-soft); }
@media (pointer: coarse) { .dpc-range-btn { height: 28px; } .dpc-range-item { padding: 11px 12px; } }

/* grupa „Parametry” w ustawieniach panelu cyfrowego i graficznego: rozwijany panel */
.dps-acc { border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; padding: 0; gap: 0; }
.dps-acc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: var(--bg-input); color: var(--text); font: 600 13px var(--font-body); letter-spacing: 0.02em; text-align: left; cursor: pointer; outline: none; }
.dps-acc-head:hover, .dps-acc-head:active { background: color-mix(in srgb, var(--bg-input) 86%, #fff); }   /* szare podświetlenie w tonacji strony */
.dps-acc-chev { flex: none; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform 0.15s; }
.dps-acc-head[aria-expanded="true"] .dps-acc-chev { transform: rotate(90deg); }
.dps-acc-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--border); color: var(--text-muted); font-weight: 600; font-size: 12px; text-align: center; }
.dps-acc-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--border-strong); }
.dps-acc-body[hidden] { display: none; }

/* bez obwódki fokusu wokół przycisków (klik myszą/dotykiem nie zostawia ramki w kolorze zaznaczenia) */
button:focus, button:focus-visible, [role="tab"]:focus-visible, .us-btn:focus-visible, .dps-sw:focus-visible, .dps-custom:focus-within,
.dp-unit:focus-visible, .install-btn:focus-visible, .edit-toggle:focus-visible, .dlg-btn:focus-visible, .dlg-x:focus-visible, .dp-add:focus-visible,
.dpc-hp-sec summary:focus-visible, .dp-value:focus-visible, .dp-name:focus-visible, .dp-card.is-selected .dp-value:focus-visible,
.dp-card:not(.dp-card-stub):not(.dp-card-info).is-selected .dp-card-head .dp-name:focus-visible { outline: none !important; }
.dyn-tab:focus-visible { box-shadow: none !important; }

/* Panel zegara: aktualny czas urządzenia (cyfrowy / analogowy / oba); kolory z ustawień panelu: --dp-name, --dp-value (cyfry), --dp-dial (tarcza), --dp-needle (wskazówki), --dp-bg */
.dp-card-clock { display: flex; flex-direction: column; min-height: 0; padding: 7px 8px 9px; }   /* bez minimalnej wysokości 106 px zwykłego panelu */
.dp-card-clock .dp-card-head { flex: none; padding-left: 6px; }
.dp-clock-analog { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-height: 0; margin-top: 2px; }   /* tarcza na środku wolnego miejsca (także gdy rząd jest wyższy niż zegar) */
.dp-clock-svg { display: block; flex: none; width: 100%; max-width: 280px; height: auto; }   /* tarcza (też wstęga) zwężona: panel zegara analogowego niższy */
.dp-clock-base { fill: rgba(0, 0, 0, 0.22); }
.dp-clock-ring { stroke: var(--dp-dial, var(--border-strong)); stroke-width: 1.3; }
.dp-clock-band { stroke: rgba(125, 135, 152, 0.20); stroke: color-mix(in srgb, var(--dp-dial, #7d8798) 22%, transparent); }   /* wstęga tarczy */
.dp-clock-ring.is-inner { stroke-width: 0.8; opacity: 0.8; }
.dp-clock-tick { stroke: var(--dp-dial, var(--border-strong)); stroke-width: 0.7; }
.dp-clock-tick.is-major { stroke-width: 1.6; }
.dp-clock-num, .dp-clock-dig { paint-order: stroke; stroke: var(--dp-bg, var(--bg-panel)); stroke-width: 1.5px; stroke-linejoin: round; }   /* halo w kolorze tła wokół cyfr */
.dp-clock-num { fill: var(--dp-dial, var(--text-muted)); font-family: var(--font-body); font-weight: 600; }
.dp-clock-dig { fill: var(--dp-value, var(--text)); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; display: none; }
.dp-clock-dig.is-date { font-family: var(--font-body); font-weight: 600; opacity: 0.85; }
.dp-clock-svg.has-digits .dp-clock-dig { display: inline; }
.dp-clock-hand-body { fill: var(--dp-needle, var(--accent)); }
.dp-clock-hand-lite { fill: rgba(255, 255, 255, 0.24); }
.dp-clock-hand-dark { fill: rgba(0, 0, 0, 0.30); }
.dp-clock-shadow { fill: rgba(0, 0, 0, 0.35); stroke: rgba(0, 0, 0, 0.35); }
.dp-clock-sec-line { stroke: var(--dp-second, var(--dp-needle, var(--accent))); }
.dp-clock-sec-dot { fill: var(--dp-second, var(--dp-needle, var(--accent))); }
.dp-clock-hub { fill: var(--dp-needle, var(--accent)); }
.dp-clock-digital { text-align: center; margin-top: 4px; }
.dp-clock-time { color: var(--dp-value, var(--text)); font-family: var(--font-display); font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-clock-date { color: var(--dp-value, var(--text-muted)); opacity: 0.8; margin-top: 2px; white-space: nowrap; }
.dp-card-clock.is-clock-digital .dp-clock-digital { margin-top: 10px; }
.clk-sec { margin: 14px 0 4px; font-weight: 600; color: var(--text); }
.clk-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.clk-label { flex: 1 1 auto; color: var(--text-muted); }
.clk-input { flex: 0 1 200px; min-width: 0; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
.clk-color { flex: none; width: 44px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); cursor: pointer; }
.clk-reset { flex: none; padding: 4px 10px; }
.clk-modes { display: flex; flex-direction: column; gap: 6px; }
.clk-mode { display: flex; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer; }
.dlg-settings .clk-input { width: 100%; box-sizing: border-box; }
/* Zegar cyfrowy: zwężony panel; bez nazwy jeszcze niższy — godzina i data w jednym wierszu, ołówek zmiany nazwy po lewej (w edycji) */
.dp-card-clock.is-clock-digital { padding: 5px 8px 6px; }
.dp-card-clock.is-clock-digital .dp-clock-digital { margin-top: 2px; }
.dp-clock-pencil { position: absolute; left: 4px; top: 5px; display: none; width: 23px; height: 23px; padding: 0; place-items: center;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; z-index: 2; }
.dp-clock-pencil svg { width: 14px; height: 14px; }
.dp-clock-pencil:hover { color: var(--accent); border-color: var(--accent); }
.dp-card-clock.is-noname.is-selected .dp-clock-pencil { display: grid; }
.dp-card-clock.is-noname { padding-top: 5px; }
.dp-card-clock.is-noname.is-clock-digital:not(.is-stack) .dp-clock-digital { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 0; }
.dp-card-clock.is-noname.is-clock-digital:not(.is-stack) .dp-clock-date { margin-top: 0; }
.dp-card-clock .dp-clock-digital { min-width: 0; overflow: hidden; }   /* nic nie wychodzi poza panel */
.dp-card-clock.is-noname:not(.is-clock-digital) .dp-clock-analog { margin-top: 0; }

/* Panel analogowy w kształcie koła: nazwa parametru na tarczy, wyśrodkowana w górnej połowie (pozycję pionową ustawia fit()) */
.dp-card.dp-card-analog.is-name-dial .dp-card-head { position: absolute; left: 22%; right: 22%; top: 22%; z-index: 1; padding: 0 !important; min-height: 0 !important; justify-content: center; align-items: center; text-align: center; pointer-events: none; }
.dp-card.dp-card-analog.is-name-dial .dp-card-head .dp-name { pointer-events: auto; text-align: center; margin-left: 0; margin-right: 0; paint-order: stroke; }
.dp-card.dp-card-analog.is-name-dial:not(.is-selected) .dp-card-head .dp-name { text-shadow: 0 0 3px var(--dp-bg, var(--bg-panel)), 0 0 3px var(--dp-bg, var(--bg-panel)); }
.dp-card.dp-card-analog.is-name-dial .dp-analog-body { flex: 1 1 auto; }   /* tarcza (bez wiersza nazwy nad nią) wyśrodkowana w panelu także w wyższym rzędzie */
.dp-card.dp-card-analog.is-name-dial.is-selected .dp-card-head .dp-name { padding: 0 11px 0 3px !important; margin: 0 !important; }
.dp-card.dp-card-analog.is-name-dial.is-selected .dp-card-head .dp-name::after { right: 2px; width: 8px; height: 8px; margin-top: -4px; }

/* Ustawienia panelu cyfrowego z wieloma parametrami: pozycja parametru rozwija się (kolory indywidualne) */
.dps-pitem.is-expandable > .dpc-set-head { cursor: pointer; }
.dps-pitem .dps-acc-chev { margin-right: 2px; }
.dps-pitem.is-open > .dpc-set-head .dps-acc-chev { transform: rotate(90deg); }
.dps-pbody { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 10px; border-top: 1px solid var(--border); }
.dps-pcolors { display: flex; flex-direction: column; gap: 6px; }
.dps-pcolors[hidden] { display: none; }

/* Przycisk „Widok domyślny”: w pasku głównym (duży ekran) albo jako przycisk-ikona w pasku zakładek obok „DM Remote” (mały ekran, od 760 px w dół) */
#default-view-tab { display: none; }
@media (max-width: 760px) {
  #default-view-btn { display: none; }
  .has-default-view #default-view-tab { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
  .has-default-view .topbar-tabs #tab-btn-remote { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; font-size: 13px; }   /* „DM Remote” się zwęża, robiąc miejsce na przycisk */
}
body[data-engineer-tab]:not([data-engineer-tab="remote"]) #default-view-tab { display: none !important; }   /* Data Engineer: przycisk tylko na DM Remote */

/* Okno „Widok”: lista widoków do wgrania i zapis bieżącego widoku */
.dv-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.dv-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dv-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; overflow: hidden; }
.dv-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-tag { flex: none; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
.dv-save { border-top: 1px solid var(--border); padding-top: 12px; }
.dv-h { font-weight: 600; color: var(--text); margin-bottom: 8px; }
.dv-saveline { display: flex; gap: 8px; }
.dv-saveline .dlg-input { flex: 1 1 auto; min-width: 0; }
.dv-saveline { align-items: center; }
.dv-saveline .dlg-input, .dv-saveline .dlg-btn { box-sizing: border-box; height: 36px; margin: 0; }
.dv-saveline .dlg-btn { padding-top: 0; padding-bottom: 0; flex: none; }
/* Godzina i data mają szerokość tekstu (max-content), żeby fitLine mierzył tekst, a nie szerokość kolumny — inaczej czcionka nigdy się nie zmniejszała i tekst wychodził poza wąski panel */
.dp-clock-time, .dp-clock-date { width: max-content; margin-left: auto; margin-right: auto; }
.dp-card-clock.is-noname.is-clock-digital:not(.is-stack) .dp-clock-time, .dp-card-clock.is-noname.is-clock-digital:not(.is-stack) .dp-clock-date { margin-left: 0; margin-right: 0; }
/* Zegar cyfrowy: godzina z datą wyśrodkowane w pionie w wolnym miejscu panelu (pod nazwą, a bez nazwy w całym panelu) */
.dp-card-clock.is-clock-digital .dp-clock-digital { margin-top: auto !important; margin-bottom: auto !important; }
.dp-card-clock.is-clock-digital:not(.is-noname) { padding-bottom: 3px; }   /* odstęp pod godziną równy odstępowi pod nazwą (po wyśrodkowaniu) */