:root {
  --navy-950: #07141f;
  --navy-900: #0b1c29;
  --navy-850: #102536;
  --navy-800: #173448;
  --teal-600: #0f9d83;
  --teal-500: #18b694;
  --teal-100: #dff7f1;
  --amber-500: #e9a23b;
  --amber-100: #fff2d9;
  --red-600: #cc3e45;
  --red-100: #ffeaeb;
  --green-700: #177455;
  --green-100: #e0f5eb;
  --slate-900: #17212b;
  --slate-700: #465665;
  --slate-600: #627281;
  --slate-500: #7d8a96;
  --slate-300: #ccd4da;
  --slate-200: #dde3e7;
  --slate-100: #edf1f3;
  --slate-50: #f6f8f9;
  --white: #fff;
  --shadow: 0 12px 40px rgba(14, 34, 49, 0.08);
  --radius: 16px;
  --sidebar-width: 272px;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--slate-900);
  background: var(--slate-50);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  color: #d6e2e9;
  background:
    radial-gradient(circle at 20% 0%, rgba(24, 182, 148, 0.14), transparent 30%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 20px;
  color: white;
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: #042018;
  background: var(--teal-500);
  border-radius: 11px 4px 11px 4px;
  box-shadow: 0 8px 20px rgba(24, 182, 148, 0.2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.brand strong { display: block; font-size: 18px; letter-spacing: 0.01em; }
.brand small { display: block; color: #8fa6b5; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.main-nav {
  flex: 1;
  min-height: 0;
  padding: 6px 12px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #365064 transparent;
}

.nav-item, .nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: #b8c7d1;
  border-radius: 9px;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.nav-item { margin-bottom: 3px; font-weight: 650; }
.nav-item:hover, .nav-subitem:hover { color: white; background: rgba(255, 255, 255, 0.055); }
.nav-item.active, .nav-subitem.active { color: white; background: rgba(24, 182, 148, 0.14); }
.nav-dot { width: 7px; height: 7px; background: #577183; border-radius: 50%; }
.nav-item.active .nav-dot { background: var(--teal-500); box-shadow: 0 0 0 4px rgba(24, 182, 148, 0.12); }

.nav-group { margin-top: 13px; }
.nav-group summary {
  padding: 7px 11px;
  color: #6f899a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  list-style: none;
  text-transform: uppercase;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { float: right; content: "+"; font-size: 14px; }
.nav-group[open] summary::after { content: "−"; }
.nav-subitem { min-height: 35px; margin: 1px 0 1px 8px; padding: 7px 10px 7px 16px; font-size: 13px; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.sidebar-user .avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: var(--navy-950); background: #d7f3ec; border-radius: 50%; font-size: 11px; font-weight: 800; }
.sidebar-user strong, .sidebar-user small { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: white; font-size: 13px; }
.sidebar-user small { color: #8fa6b5; font-size: 11px; }

.app-main { display: flex; min-height: 100vh; margin-left: var(--sidebar-width); flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 18px;
  padding: 10px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--slate-200);
  backdrop-filter: blur(14px);
}
.topbar-title { margin-right: auto; }
.topbar-title strong { display: block; font-size: 16px; }
.topbar-actions { display: flex; align-items: center; gap: 5px; }
.topbar-link { padding: 8px 10px; color: var(--slate-600); border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 650; }
.topbar-link:hover { color: var(--slate-900); background: var(--slate-100); }
.topbar-note-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; color: white; background: var(--red-600); border-radius: 99px; font-size: 10px; font-weight: 850; }
.topbar-actions form { margin: 0; }
.topbar-search { display: flex; width: clamp(180px, 20vw, 330px); flex: 0 1 330px; }
.topbar-search label { min-width: 0; flex: 1; }
.topbar-search input { width: 100%; height: 36px; padding: 7px 11px; color: var(--slate-900); background: var(--slate-50); border: 1px solid var(--slate-300); border-right: 0; border-radius: 8px 0 0 8px; outline: none; font-size: 12px; }
.topbar-search input:focus { background: white; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(15, 157, 131, 0.09); }
.topbar-search button { width: 38px; color: white; background: var(--navy-800); border: 0; border-radius: 0 8px 8px 0; cursor: pointer; font-size: 19px; }

.eyebrow { display: block; margin-bottom: 2px; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow.accent { color: var(--teal-600); }

.content { width: min(100%, 1580px); flex: 1; margin: 0 auto; padding: 28px; }

.app-credit {
  width: min(100%, 1580px);
  margin: 0 auto;
  padding: 10px 28px 18px;
  color: var(--slate-500);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-align: right;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 24px;
}
.page-heading h1 { margin: 2px 0 4px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.035em; }
.page-heading p { max-width: 720px; margin: 0; color: var(--slate-600); }
.compact-heading h1 { font-size: 29px; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.back-link { display: inline-block; margin-bottom: 5px; color: var(--teal-600); text-decoration: none; font-size: 13px; font-weight: 700; }
.back-link:hover { text-decoration: underline; }

.button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--teal-600); box-shadow: 0 7px 18px rgba(15, 157, 131, 0.16); }
.button-primary:hover { background: #0a896f; }
.button-secondary { color: var(--slate-900); background: white; border-color: var(--slate-300); }
.button-secondary:hover { border-color: #9aa8b2; background: var(--slate-50); }
.button-quiet { min-height: 34px; color: var(--slate-600); background: transparent; }
.button-quiet:hover { background: var(--slate-100); }
.button-danger { color: white; background: var(--red-600); }
.button:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.button-wide { width: 100%; min-height: 46px; }
.icon-button { display: inline-grid; width: 38px; height: 38px; place-items: center; padding: 0; color: var(--slate-700); background: white; border: 1px solid var(--slate-200); border-radius: 9px; cursor: pointer; }
.menu-button { display: none; }

.alert { margin-bottom: 18px; padding: 12px 15px; border: 1px solid; border-radius: 10px; }
.alert ul { margin: 5px 0 0 20px; padding: 0; }
.alert-success { color: var(--green-700); background: var(--green-100); border-color: #b7e4d0; }
.alert-error { color: #8a2228; background: var(--red-100); border-color: #f3bfc2; }
.alert-warning { color: #79500f; background: var(--amber-100); border-color: #efd39b; }

.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dashboard-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.compact-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-card {
  position: relative;
  min-height: 138px;
  padding: 18px;
  overflow: hidden;
  color: var(--slate-900);
  background: linear-gradient(145deg, #ffffff 0%, #f1fbf8 100%);
  border: 1px solid #c9e9e1;
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(14, 34, 49, 0.045);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.stat-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--teal-500); content: ""; }
.stat-card:hover { transform: translateY(-2px); border-color: #adc4ca; box-shadow: var(--shadow); }
.stat-card strong { display: block; margin: 12px 0 1px; font-size: 31px; letter-spacing: -0.04em; }
.stat-card small { color: var(--slate-500); font-size: 11px; }
.stat-label { color: var(--slate-700); font-size: 12px; font-weight: 750; }
.stat-danger::before { background: var(--red-600); }
.stat-danger strong { color: var(--red-600); }
.stat-warning::before { background: var(--amber-500); }
.stat-warning strong { color: #ad6b08; }

.panel {
  margin-bottom: 18px;
  padding: 20px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(14, 34, 49, 0.035);
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -0.015em; }
.panel-heading > a { color: var(--teal-600); text-decoration: none; font-size: 12px; font-weight: 750; }
.panel-heading > a:hover { text-decoration: underline; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr); gap: 18px; }

.bar-chart { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 72px 1fr 35px; align-items: center; gap: 10px; }
.bar-row span { color: var(--slate-600); font-size: 12px; }
.bar-row strong { text-align: right; font-size: 12px; }
.bar-row progress { width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 20px; background: var(--slate-100); }
.bar-row progress::-webkit-progress-bar { background: var(--slate-100); border-radius: 20px; }
.bar-row progress::-webkit-progress-value { background: linear-gradient(90deg, var(--teal-600), #4cc9aa); border-radius: 20px; }
.bar-row progress::-moz-progress-bar { background: linear-gradient(90deg, var(--teal-600), #4cc9aa); border-radius: 20px; }

.activity-list { display: grid; gap: 3px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px; color: inherit; border-radius: 9px; text-decoration: none; }
a.activity-item:hover { background: var(--slate-50); }
.activity-item > span:last-child { min-width: 0; }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; white-space: nowrap; }
.activity-item small { color: var(--slate-600); font-size: 11px; }
.activity-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 7px; background: var(--teal-500); border-radius: 50%; }
.danger-dot { background: var(--red-600); }
.compact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.empty-state { padding: 22px 8px; color: var(--slate-500); text-align: center; }
.empty-state strong, .empty-state span { display: block; }

.count-pill { padding: 5px 9px; color: #8a590b; background: var(--amber-100); border-radius: 99px; font-size: 11px; font-weight: 800; }
.note-list { display: grid; gap: 7px; }
.note-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; color: inherit; background: var(--slate-50); border: 1px solid transparent; border-radius: 10px; text-decoration: none; }
.note-row:hover { background: white; border-color: var(--slate-200); box-shadow: 0 6px 18px rgba(14, 34, 49, 0.05); }
.note-row.is-unread { background: #f1fbf8; border-color: #c6e8df; }
.note-state { width: 8px; height: 8px; background: var(--teal-500); border-radius: 50%; }
.note-state.is-sent { width: auto; height: auto; color: var(--slate-500); background: none; border-radius: 0; font-weight: 900; }
.note-main { min-width: 0; }
.note-main strong, .note-main small, .note-progress strong, .note-progress small { display: block; }
.note-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-main small, .note-progress small { color: var(--slate-500); font-size: 11px; }
.note-progress { min-width: 72px; text-align: right; }
.note-content { min-height: 150px; line-height: 1.7; white-space: pre-wrap; }
.recipient-picker { margin: 20px 0 0; padding: 0; border: 0; }
.recipient-picker legend { margin-bottom: 9px; color: var(--slate-700); font-size: 12px; font-weight: 800; }
.recipient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.recipient-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; cursor: pointer; }
.recipient-option:has(input:checked) { background: var(--teal-100); border-color: var(--teal-600); }
.recipient-option input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal-600); }
.recipient-option strong, .recipient-option small { display: block; }
.recipient-option small { color: var(--slate-500); font-size: 11px; }
.recipient-status-list { display: grid; gap: 7px; }
.recipient-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--slate-50); border-radius: 9px; }
.recipient-status-row strong, .recipient-status-row small { display: block; }
.recipient-status-row small { color: var(--slate-500); font-size: 11px; }
.historical-filter { display: grid; grid-template-columns: minmax(230px, 420px) auto; align-items: end; gap: 12px; }
.historical-filter .button { min-height: 42px; }

.audit-filter { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 0.75fr)) repeat(2, minmax(135px, 0.55fr)); align-items: end; gap: 10px; padding: 16px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.audit-filter-actions { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; }
.audit-table { white-space: normal; }
.audit-table td { max-width: 280px; vertical-align: top; }
.audit-table td:first-child, .audit-table td:nth-child(2), .audit-table td:last-child { white-space: nowrap; }
.audit-code { display: block; margin-top: 4px; color: var(--slate-500); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.audit-summary { min-width: 190px; line-height: 1.45; }
.audit-change-cell { min-width: 160px; overflow: visible !important; }
.audit-details summary { color: var(--teal-700); cursor: pointer; font-weight: 800; }
.audit-change-list { display: grid; gap: 8px; min-width: 430px; margin-top: 9px; }
.audit-change { display: grid; grid-template-columns: minmax(115px, 0.75fr) repeat(2, minmax(130px, 1fr)); gap: 1px; overflow: hidden; background: var(--slate-200); border: 1px solid var(--slate-200); border-radius: 7px; }
.audit-change > * { padding: 7px 8px; overflow-wrap: anywhere; background: white; font-size: 10.5px; }
.audit-change > strong { color: var(--slate-700); background: var(--slate-50); }
.audit-change span small { display: block; margin-bottom: 2px; color: var(--slate-500); font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.audit-before { color: #8e2930; background: #fff8f8 !important; }
.audit-after { color: #087762; background: #f4fcfa !important; }
.muted { color: var(--slate-500); }

.table-panel { min-width: 0; padding: 0; overflow: hidden; }
.filter-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 11px 14px; color: var(--slate-700); background: var(--teal-100); border: 1px solid #b9e5da; border-radius: 10px; font-size: 12px; }
.filter-notice a { flex: 0 0 auto; color: var(--teal-700); text-decoration: none; font-weight: 800; }
.filter-notice a:hover { text-decoration: underline; }
.table-toolbar, .report-toolbar { display: flex; align-items: flex-end; gap: 9px; padding: 15px 16px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.search-field { flex: 1; }
.search-field input { width: 100%; }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 11px 13px; color: var(--slate-600); background: #f8fafb; border-bottom: 1px solid var(--slate-200); text-align: left; font-size: 10.5px; letter-spacing: 0.035em; text-transform: uppercase; }
.data-table th a { color: inherit; text-decoration: none; }
.data-table td { max-width: 340px; padding: 10px 13px; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #edf0f2; }
.data-table tbody tr:hover { background: #f9fbfb; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.actions-column { width: 82px; text-align: right !important; }
.row-link, .text-link { color: var(--teal-600); text-decoration: none; font-weight: 750; }
.row-link:hover, .text-link:hover { text-decoration: underline; }
.empty-cell { padding: 50px !important; color: var(--slate-500); text-align: center; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 13px 16px; border-top: 1px solid var(--slate-200); font-size: 12px; }
.pagination a { color: var(--teal-600); text-decoration: none; font-weight: 750; }
.pagination a:last-child { text-align: right; }

.detail-panel { padding: 0; overflow: hidden; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.detail-grid > div { min-height: 88px; padding: 18px; border-right: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); }
.detail-grid > div:nth-child(3n) { border-right: 0; }
.detail-grid dt { margin-bottom: 6px; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 650; white-space: pre-wrap; }
.record-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.record-footer form { margin: 0; }
.record-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.record-tabs a span { min-width: 24px; padding: 1px 6px; color: var(--slate-600); background: rgba(255, 255, 255, 0.75); border-radius: 99px; font-size: 10px; }
.record-tabs a.active span { color: var(--navy-800); }
.archive-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-left: 4px solid var(--teal-500); }
.archive-panel h2 { margin: 0 0 4px; font-size: 17px; }
.archive-panel p { margin: 0; color: var(--slate-600); font-size: 12px; }
.archive-panel form { flex: 0 0 auto; margin: 0; }
.service-state-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; border-left: 4px solid #735c9b; }
.service-state-panel h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; font-size: 17px; }
.service-state-panel p { margin: 0; color: var(--slate-600); font-size: 12px; }
.service-state-panel .button { flex: 0 0 auto; }
.danger-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; border-color: #f0c7ca; }
.danger-panel h2 { margin: 0 0 4px; font-size: 17px; }
.danger-panel p, .admin-note { margin: 0; color: var(--slate-600); font-size: 12px; }
.danger-panel form { flex: 0 0 auto; margin: 0; }
.admin-note { margin: -5px 2px 18px; }

.form-panel { max-width: 1080px; }
.narrow-panel { max-width: 680px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.stack-form { display: grid; gap: 16px; }
.field { display: grid; align-content: start; gap: 6px; }
.field > span:first-child { color: var(--slate-700); font-size: 12px; font-weight: 750; }
.field > span small { font-weight: 500; }
.field > small { color: var(--slate-500); font-size: 11px; }
.field input, .field select, .field textarea, .search-field input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--slate-900);
  background: white;
  border: 1px solid var(--slate-300);
  border-radius: 8px;
  outline: none;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .search-field input:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(15, 157, 131, 0.11); }
.filterable-select { display: grid; gap: 7px; }
.filterable-select > input { min-height: 38px; background: var(--slate-50); }
.filterable-select .filter-status { min-height: 16px; color: var(--teal-700); font-weight: 750; }
.pair-status-fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.pair-status-fieldset legend { margin-bottom: 7px; color: var(--slate-700); font-size: 12px; font-weight: 750; }
.pair-status-option { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid var(--slate-200); border-radius: 10px; cursor: pointer; }
.pair-status-option:hover { border-color: #adc4ca; background: var(--slate-50); }
.pair-status-option:has(input:checked) { border-color: var(--teal-600); background: var(--teal-100); box-shadow: inset 3px 0 var(--teal-600); }
.pair-status-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal-600); }
.pair-status-option span, .pair-status-option strong, .pair-status-option small { display: block; }
.pair-status-option strong { font-size: 13px; }
.pair-status-option small { margin-top: 1px; color: var(--slate-600); font-size: 11px; }
.pair-device-field[hidden] { display: none; }
.field input[readonly] { color: var(--slate-600); background: var(--slate-100); }
.full-field { grid-column: 1 / -1; }
.checkbox-field { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 8px 11px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 8px; }
.checkbox-field input { width: 18px; min-height: auto; height: 18px; accent-color: var(--teal-600); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }

.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.report-card { display: flex; min-height: 160px; align-items: flex-start; gap: 18px; padding: 22px; color: inherit; background: white; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: 0 8px 25px rgba(14, 34, 49, 0.035); text-decoration: none; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.report-card:hover { transform: translateY(-2px); border-color: #adc4ca; box-shadow: var(--shadow); }
.report-card-featured { border-color: #9fd8cb; background: linear-gradient(135deg, #fff 0%, #f2fbf8 100%); }
.report-icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; color: var(--teal-600); background: var(--teal-100); border-radius: 12px; font-size: 12px; font-weight: 900; }
.report-card h2 { margin: 0 0 7px; font-size: 18px; }
.report-card p { margin: 0 0 14px; color: var(--slate-600); font-size: 13px; }
.report-summary { padding: 10px 16px; color: var(--slate-600); border-bottom: 1px solid var(--slate-200); font-size: 12px; }
.report-toolbar .field { min-width: 180px; }
.report-toolbar .field:first-child { flex: 1; }
.report-table { width: 100%; table-layout: fixed; font-size: 11.5px; line-height: 1.3; white-space: normal; }
.report-table-wrap {
  max-height: clamp(260px, calc(100vh - 365px), 720px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--slate-300) var(--slate-50);
  scrollbar-gutter: stable;
}
.report-table th, .report-table td, .report-table .report-column-wide { min-width: 0; max-width: none; overflow-wrap: anywhere; white-space: normal; }
.report-table td { vertical-align: top; }
.report-table-compact { font-size: 10.5px; }
.report-table-compact th { padding: 8px 6px; font-size: 9px; line-height: 1.2; }
.report-table-compact td { padding: 8px 6px; }
.report-table-stan-urzadzen th:nth-child(1), .report-table-stan-urzadzen td:nth-child(1) { width: 12%; }
.report-table-stan-urzadzen th:nth-child(2), .report-table-stan-urzadzen td:nth-child(2) { width: 9%; }
.report-table-stan-urzadzen th:nth-child(3), .report-table-stan-urzadzen td:nth-child(3) { width: 9%; }
.report-table-stan-urzadzen th:nth-child(4), .report-table-stan-urzadzen td:nth-child(4) { width: 8%; }
.report-table-stan-urzadzen th:nth-child(5), .report-table-stan-urzadzen td:nth-child(5) { width: 13%; }
.report-table-stan-urzadzen th:nth-child(6), .report-table-stan-urzadzen td:nth-child(6) { width: 24%; }
.report-table-stan-urzadzen th:nth-child(7), .report-table-stan-urzadzen td:nth-child(7) { width: 8%; }
.report-table-stan-urzadzen th:nth-child(8), .report-table-stan-urzadzen td:nth-child(8) { width: 9%; }
.report-table-stan-urzadzen th:nth-child(9), .report-table-stan-urzadzen td:nth-child(9) { width: 8%; }
.report-table-remont-serwis th:nth-child(1), .report-table-remont-serwis td:nth-child(1) { width: 10%; }
.report-table-remont-serwis th:nth-child(2), .report-table-remont-serwis td:nth-child(2) { width: 14%; }
.report-table-remont-serwis th:nth-child(3), .report-table-remont-serwis td:nth-child(3) { width: 10%; }
.report-table-remont-serwis th:nth-child(4), .report-table-remont-serwis td:nth-child(4) { width: 10%; }
.report-table-remont-serwis th:nth-child(5), .report-table-remont-serwis td:nth-child(5) { width: 9%; }
.report-table-remont-serwis th:nth-child(6), .report-table-remont-serwis td:nth-child(6) { width: 11%; }
.report-table-remont-serwis th:nth-child(7), .report-table-remont-serwis td:nth-child(7) { width: 17%; }
.report-table-remont-serwis th:nth-child(8), .report-table-remont-serwis td:nth-child(8) { width: 19%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(1), .report-table-zdublowane-numery-kopalniane td:nth-child(1) { width: 9%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(2), .report-table-zdublowane-numery-kopalniane td:nth-child(2) { width: 11%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(3), .report-table-zdublowane-numery-kopalniane td:nth-child(3) { width: 10%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(4), .report-table-zdublowane-numery-kopalniane td:nth-child(4) { width: 10%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(5), .report-table-zdublowane-numery-kopalniane td:nth-child(5) { width: 9%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(6), .report-table-zdublowane-numery-kopalniane td:nth-child(6) { width: 8%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(7), .report-table-zdublowane-numery-kopalniane td:nth-child(7) { width: 8%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(8), .report-table-zdublowane-numery-kopalniane td:nth-child(8) { width: 25%; }
.report-table-zdublowane-numery-kopalniane th:nth-child(9), .report-table-zdublowane-numery-kopalniane td:nth-child(9) { width: 10%; }
.report-table-wymiany-urzadzen th:nth-child(1), .report-table-wymiany-urzadzen td:nth-child(1) { width: 10%; }
.report-table-wymiany-urzadzen th:nth-child(2), .report-table-wymiany-urzadzen td:nth-child(2) { width: 8%; }
.report-table-wymiany-urzadzen th:nth-child(3), .report-table-wymiany-urzadzen td:nth-child(3) { width: 9%; }
.report-table-wymiany-urzadzen th:nth-child(4), .report-table-wymiany-urzadzen td:nth-child(4) { width: 22%; }
.report-table-wymiany-urzadzen th:nth-child(5), .report-table-wymiany-urzadzen td:nth-child(5) { width: 16%; }
.report-table-wymiany-urzadzen th:nth-child(6), .report-table-wymiany-urzadzen td:nth-child(6) { width: 16%; }
.report-table-wymiany-urzadzen th:nth-child(7), .report-table-wymiany-urzadzen td:nth-child(7) { width: 19%; }
.meo-range-panel { max-width: 880px; }
.meo-range-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 14px; }
.meo-range-form .button { min-height: 42px; }
.meo-range-help { margin: 13px 0 0; color: var(--slate-600); font-size: 12px; }
.meo-table td:nth-child(8) { min-width: 260px; white-space: normal; }
.badge-muted { color: var(--slate-600); background: #e8edf0; }

.history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.history-grid .panel { margin: 0; }
.timeline { position: relative; display: grid; gap: 2px; }
.timeline::before { position: absolute; inset: 7px auto 7px 5px; width: 1px; background: var(--slate-200); content: ""; }
.timeline-item { position: relative; padding: 4px 8px 17px 24px; }
.timeline-item::before { position: absolute; top: 8px; left: 1px; width: 9px; height: 9px; background: white; border: 3px solid var(--teal-500); border-radius: 50%; content: ""; }
.timeline-item strong, .timeline-item span, .timeline-item small { display: block; }
.timeline-item strong { font-size: 13px; }
.timeline-item span { color: var(--slate-700); font-size: 12px; }
.timeline-item small { color: var(--slate-500); font-size: 11px; }
.timeline-protocol-link { display: inline-block !important; margin-top: 5px; color: var(--teal-600) !important; text-decoration: none; font-size: 11px; font-weight: 750; }
.timeline-protocol-link:hover { text-decoration: underline; }
.history-protocols-panel { grid-column: 1 / -1; }
.history-protocols-panel .panel-heading p { margin: 3px 0 0; color: var(--slate-600); font-size: 12px; }
.protocol-history-list { display: grid; gap: 8px; }
.protocol-history-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 14px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; }
.protocol-history-item strong, .protocol-history-item span, .protocol-history-item small { display: block; }
.protocol-history-item strong { font-size: 13px; }
.protocol-history-item span { color: var(--slate-700); font-size: 12px; }
.protocol-history-item small { color: var(--slate-500); font-size: 11px; }
.protocol-history-actions { display: flex; flex: 0 0 auto; gap: 7px; }

.badge { display: inline-flex; align-items: center; padding: 3px 8px; color: var(--slate-700); background: var(--slate-100); border-radius: 99px; font-size: 10px; font-weight: 800; }
.badge-success { color: var(--green-700); background: var(--green-100); }
.badge-muted { color: var(--slate-600); background: var(--slate-200); }
.badge-warning { color: #8a5406; background: var(--amber-100); }
.badge-service { color: #5e4588; background: #f0eafb; }

.movement-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 18px;
}
.movement-card {
  position: relative;
  display: flex;
  min-height: 168px;
  align-items: flex-start;
  gap: 17px;
  padding: 22px;
  overflow: hidden;
  color: inherit;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(14, 34, 49, 0.035);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.movement-card::after { position: absolute; inset: auto 0 0; height: 4px; background: var(--teal-500); content: ""; }
.movement-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.movement-card h2 { margin: 0 0 7px; font-size: 20px; letter-spacing: -0.02em; }
.movement-card p { margin: 0; color: var(--slate-600); font-size: 13px; }
.movement-number {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal-600);
  background: var(--teal-100);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 900;
}
.movement-install { background: linear-gradient(145deg, #ffffff 0%, #edf9f6 100%); border-color: #c6e8df; }
.movement-withdraw { background: linear-gradient(145deg, #ffffff 0%, #fff8e8 100%); border-color: #f0ddb0; }
.movement-withdraw::after { background: var(--amber-500); }
.movement-withdraw .movement-number { color: #98600b; background: var(--amber-100); }
.movement-replace { background: linear-gradient(145deg, #ffffff 0%, #eef5fa 100%); border-color: #c8dae6; }
.movement-replace::after { background: var(--navy-800); }
.movement-replace .movement-number { color: white; background: var(--navy-800); }
.movement-pair { background: linear-gradient(145deg, #ffffff 0%, #f6f9e9 100%); border-color: #dce5b9; }
.movement-pair::after { background: #687a3b; }
.movement-pair .movement-number { color: #4d5e25; background: #eff4df; }
.movement-pair-swap { background: linear-gradient(145deg, #ffffff 0%, #f7f2fc 100%); border-color: #dfd1ee; }
.movement-pair-swap::after { background: #735c9b; }
.movement-pair-swap .movement-number { color: #5e4588; background: #f0eafb; }
.movement-service { background: linear-gradient(145deg, #ffffff 0%, #fff1ee 100%); border-color: #efccc3; }
.movement-service::after { background: #b85745; }
.movement-service .movement-number { color: #954231; background: #fbe3dd; }
.device-label-threshold-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.device-label-threshold-note { margin: -4px 0 16px; color: var(--slate-500); font-size: 11px; line-height: 1.5; }
.movement-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-table { table-layout: fixed; white-space: normal; }
.service-table th, .service-table td { min-width: 0; padding-right: 8px; padding-left: 8px; overflow-wrap: anywhere; }
.service-table th:nth-child(1), .service-table td:nth-child(1) { width: 9%; }
.service-table th:nth-child(2), .service-table td:nth-child(2) { width: 14%; }
.service-table th:nth-child(3), .service-table td:nth-child(3) { width: 9%; }
.service-table th:nth-child(4), .service-table td:nth-child(4) { width: 9%; }
.service-table th:nth-child(5), .service-table td:nth-child(5) { width: 9%; }
.service-table th:nth-child(6), .service-table td:nth-child(6) { width: 8%; }
.service-table th:nth-child(7), .service-table td:nth-child(7) { width: 8%; }
.service-table th:nth-child(8), .service-table td:nth-child(8) { width: 25%; }
.service-table th:nth-child(9), .service-table td:nth-child(9) { width: 9%; }
.service-description strong, .service-description span { display: block; }
.service-description span { margin-top: 2px; color: var(--slate-600); font-size: 11px; }
.secondary-row-link { display: block; margin-top: 5px; }
.compact-field { min-width: 190px; }
.compact-field select { min-height: 38px; }

.area-tabs { display: inline-flex; gap: 4px; margin: -8px 0 18px; padding: 4px; background: var(--slate-100); border-radius: 11px; }
.area-tabs a { min-width: 130px; padding: 8px 15px; color: var(--slate-600); border-radius: 8px; text-align: center; text-decoration: none; font-size: 12px; font-weight: 800; }
.area-tabs a:hover { color: var(--slate-900); }
.area-tabs a.active { color: white; background: var(--navy-800); box-shadow: 0 4px 12px rgba(7, 20, 31, 0.16); }

.movement-form { max-width: 1140px; }
.form-section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.form-section-heading > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: var(--teal-600); background: var(--teal-100); border-radius: 9px; font-size: 10px; font-weight: 900; }
.form-section-heading h2 { margin: 0; font-size: 17px; }
.form-section-heading p { margin: 2px 0 0; color: var(--slate-500); font-size: 11px; }
.section-spacer { margin-top: 28px; }
.device-picker { overflow: hidden; background: white; border: 1px solid var(--slate-300); border-radius: 14px; box-shadow: 0 10px 30px rgba(14, 34, 49, 0.05); }
.device-picker-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; padding: 16px; background: var(--slate-50); }
.device-picker-field { display: grid; gap: 5px; }
.device-picker-field > span { color: var(--slate-700); font-size: 11px; font-weight: 800; }
.device-picker-field input, .device-picker-field select { width: 100%; min-height: 43px; padding: 9px 11px; color: var(--slate-900); background: white; border: 1px solid var(--slate-300); border-radius: 8px; outline: none; }
.device-picker-field input:focus, .device-picker-field select:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(15, 157, 131, 0.11); }
.device-picker-options { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); }
.device-picker-options p { margin: 0; color: var(--slate-500); font-size: 11px; }
.device-picker-options > div { display: flex; align-items: center; gap: 8px; }
.picker-toggle { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 10px; color: var(--slate-700); background: white; border: 1px solid var(--slate-300); border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.picker-toggle input { width: 17px; height: 17px; accent-color: var(--teal-600); }
.device-picker-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 450px; }
.device-results { min-width: 0; border-right: 1px solid var(--slate-200); }
.device-results-heading { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; background: #fbfcfc; border-bottom: 1px solid var(--slate-200); }
.device-results-heading strong, .device-results-heading small { display: block; }
.device-results-heading > div > strong { font-size: 13px; }
.device-results-heading small { color: var(--slate-500); font-size: 10px; }
.device-results-heading > span { flex: 0 0 auto; padding: 5px 9px; color: var(--slate-600); background: var(--slate-100); border-radius: 99px; font-size: 10px; }
.device-results-heading > span strong { display: inline; color: var(--teal-600); }
.device-choice-list { max-height: 510px; margin: 0; padding: 0; overflow: auto; list-style: none; scrollbar-color: var(--slate-300) transparent; scrollbar-width: thin; }
.device-choice-item { margin: 0; border-bottom: 1px solid var(--slate-100); }
.device-choice-item:last-child { border-bottom: 0; }
.device-choice-item[hidden] { display: none; }
.device-choice { display: grid; min-width: 0; min-height: 68px; grid-template-columns: 24px minmax(170px, 1fr) minmax(280px, 0.95fr); align-items: center; gap: 13px; padding: 11px 16px; cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
.device-choice:hover { background: #f5faf8; }
.device-choice.is-selected { background: var(--teal-100); box-shadow: inset 4px 0 var(--teal-600); }
.device-choice-checkbox { width: 19px; height: 19px; margin: 0; accent-color: var(--teal-600); cursor: pointer; }
.device-choice span { min-width: 0; }
.device-main strong, .device-main small, .device-identifiers strong, .device-identifiers small { display: block; }
.device-main strong { overflow: hidden; text-overflow: ellipsis; font-size: 14px; white-space: nowrap; }
.device-main small { color: var(--slate-500); font-size: 11px; }
.device-identifiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.device-identifiers > span { min-width: 0; }
.device-identifiers small { margin-bottom: 1px; color: var(--slate-500); font-size: 9px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; }
.device-identifiers strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.selected-devices { min-width: 0; padding: 17px; background: #f8fafb; }
.selected-devices-heading { padding-bottom: 12px; border-bottom: 1px solid var(--slate-200); }
.selected-devices-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.selected-devices-heading span { font-size: 13px; font-weight: 800; }
.selected-devices-heading strong { display: grid; min-width: 29px; height: 29px; place-items: center; color: white; background: var(--teal-600); border-radius: 20px; }
.selected-devices-heading strong span { font-size: 12px; }
.selected-devices-heading small { color: var(--slate-500); font-size: 10px; }
.selected-device-list { display: grid; max-height: 395px; gap: 7px; padding-top: 12px; overflow: auto; }
.selected-device-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; background: white; border: 1px solid var(--slate-200); border-radius: 9px; }
.selected-device-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 750; white-space: nowrap; }
.selected-device-item button { width: 26px; height: 26px; flex: 0 0 auto; padding: 0; color: var(--slate-600); background: var(--slate-100); border: 0; border-radius: 7px; cursor: pointer; font-size: 18px; line-height: 1; }
.selected-device-item button:hover { color: white; background: var(--red-600); }
.selected-device-empty, .picker-no-results { padding: 36px 12px; color: var(--slate-500); text-align: center; font-size: 11px; }

.area-badge, .status-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 99px; font-size: 9px; font-weight: 850; letter-spacing: 0.025em; }
.area-underground { color: white; background: var(--navy-800); }
.area-surface { color: var(--green-700); background: var(--green-100); }
.status-pending { color: #8a590b; background: var(--amber-100); }
.status-ready { color: var(--teal-600); background: var(--teal-100); }
.status-closed { color: var(--slate-600); background: var(--slate-200); }
.status-damaged { color: #8a2228; background: var(--red-100); }
.fault-table td { vertical-align: top; }
.fault-description { min-width: 240px; white-space: normal; }
.fault-actions { min-width: 155px; white-space: normal !important; }
.fault-actions .row-link { display: block; margin-bottom: 6px; }
.fault-actions .row-link:last-child { margin-bottom: 0; }
.movement-row-actions { min-width: 92px; white-space: normal !important; }
.movement-row-actions .row-link { display: block; margin-bottom: 5px; }
.movement-row-actions .row-link:last-child { margin-bottom: 0; }
.device-label-form { display: grid; gap: 18px; }
.device-label-ready { margin: 0; padding: 14px 16px; color: var(--slate-700); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; font-size: 12px; }
.device-label-print-note { margin: 0; }
.danger-link { color: var(--red-600); }
.fault-summary-panel { display: grid; grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr); gap: 24px; }
.fault-summary-panel h2 { margin: 9px 0 3px; font-size: 19px; }
.fault-summary-panel p { margin: 0; color: var(--slate-600); }
.fault-summary-panel dl { display: grid; gap: 13px; margin: 0; }
.fault-summary-panel dl > div { padding-bottom: 10px; border-bottom: 1px solid var(--slate-200); }
.fault-summary-panel dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.fault-summary-panel dt { margin-bottom: 3px; color: var(--slate-500); font-size: 9px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.fault-summary-panel dd { margin: 0; font-size: 13px; font-weight: 650; white-space: pre-wrap; }
.order-table .location-cell { min-width: 380px; }
.cable-tabs { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); width: min(100%, 720px); }
.cable-tabs a { min-width: 0; }
.cable-table td { vertical-align: top; }
.cable-table .actions-column { min-width: 110px; }
.pair-label, .mapping-label { display: block; color: var(--slate-900); font-weight: 800; white-space: nowrap; }
.mapping-label { color: var(--teal-600); }
.cell-note { display: block; margin-top: 2px; color: var(--slate-500); font-size: 10px; font-weight: 500; }
.muted-value { color: var(--slate-500); }
.device-lines { display: grid; gap: 5px; }
.device-lines span, .device-lines strong, .device-lines small { display: block; }
.device-lines small { color: var(--slate-500); font-size: 10px; }
.location-cell { max-width: 430px !important; white-space: normal; }
.location-cell strong, .location-cell span { display: block; }
.location-cell strong { margin-bottom: 2px; font-size: 11px; }
.secondary-row-link { display: block; margin-top: 5px; color: var(--slate-600); font-size: 10px; }
.protocol-panel-heading { padding: 18px 20px 0; }
.protocol-close-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.protocol-close-panel h2 { margin: 0 0 5px; font-size: 18px; }
.protocol-close-panel p { max-width: 760px; margin: 0; color: var(--slate-600); font-size: 12px; }
.protocol-close-panel form { flex: 0 0 auto; margin: 0; }
.protocol-template-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 18px; }
.protocol-template-form { min-width: 0; }
.protocol-template-section { padding: 22px; }
.protocol-template-section .panel-heading, .protocol-template-meta .panel-heading { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--slate-200); }
.protocol-layout-editor { padding: 0; overflow: hidden; }
.protocol-layout-editor > summary { display: flex; padding: 18px 21px; cursor: pointer; list-style: none; }
.protocol-layout-editor > summary::-webkit-details-marker { display: none; }
.protocol-layout-editor > summary::after { margin-left: auto; color: var(--teal-600); content: "+"; font-size: 24px; font-weight: 700; }
.protocol-layout-editor[open] > summary::after { content: "−"; }
.protocol-layout-editor > summary strong, .protocol-layout-editor > summary small { display: block; }
.protocol-layout-editor > summary small { margin-top: 2px; color: var(--slate-500); font-size: 11px; font-weight: 500; }
.protocol-layout-fields { padding: 0 21px 21px; border-top: 1px solid var(--slate-200); padding-top: 20px; }
.protocol-template-actions { position: sticky; z-index: 3; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; border-color: #a9d9ce; box-shadow: 0 14px 42px rgba(14, 34, 49, 0.16); }
.protocol-template-actions > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.protocol-version-panel { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow: auto; }
.version-explanation { margin: -4px 0 15px; color: var(--slate-600); font-size: 11px; }
.protocol-version-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.protocol-version-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 11px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; }
.protocol-version-number { display: grid; width: 38px; height: 38px; place-items: center; color: var(--teal-600); background: var(--teal-100); border-radius: 9px; font-size: 11px; font-weight: 900; }
.protocol-version-list strong, .protocol-version-list span, .protocol-version-list small, .protocol-version-list a { display: block; }
.protocol-version-list strong { overflow-wrap: anywhere; font-size: 12px; }
.protocol-version-list span { color: var(--slate-700); font-size: 10px; }
.protocol-version-list small { margin: 2px 0 6px; color: var(--slate-500); font-size: 9px; }
.protocol-version-list a { font-size: 10px; }

.global-search-panel { padding: 14px; }
.global-search-page-form { display: flex; gap: 9px; }
.search-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.search-group { min-width: 0; margin: 0; }
.search-result-list { display: grid; gap: 6px; }
.search-result-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 9px; text-decoration: none; }
.search-result-item:hover { background: var(--teal-100); border-color: #b9e5da; }
.search-result-item > span:first-child { min-width: 0; }
.search-result-item strong, .search-result-item small { display: block; }
.search-result-item strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.search-result-item small { margin-top: 2px; color: var(--slate-600); font-size: 10px; }
.search-result-item > span:last-child { color: var(--teal-600); font-weight: 900; }

.alert-center-list { display: grid; gap: 12px; }
.alert-center-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0; padding: 18px 20px; }
.alert-center-count { display: grid; min-height: 58px; place-items: center; padding: 8px; color: var(--slate-700); background: var(--slate-100); border-radius: 12px; font-size: 19px; font-weight: 900; text-align: center; }
.alert-center-item h2 { margin: 0 0 3px; font-size: 17px; }
.alert-center-item p { margin: 0; color: var(--slate-600); font-size: 11px; }
.alert-center-critical { border-left: 5px solid var(--red-600); }
.alert-center-critical .alert-center-count { color: #8a2228; background: var(--red-100); }
.alert-center-warning { border-left: 5px solid var(--amber-500); }
.alert-center-warning .alert-center-count { color: #80520a; background: var(--amber-100); }
.alert-center-info { border-left: 5px solid var(--teal-600); }
.alert-empty-panel { display: flex; align-items: center; gap: 18px; }
.alert-empty-panel h2, .alert-empty-panel p { margin: 0; }
.alert-empty-panel p { color: var(--slate-600); }
.alert-ok-mark { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; font-size: 25px; font-weight: 900; }
.dashboard-alert-panel { margin-bottom: 18px; }
.dashboard-alert-panel.has-critical-alerts { border-color: #efc0c3; }
.dashboard-alert-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-alert-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 9px; text-decoration: none; }
.dashboard-alert-item > span:first-child { display: grid; min-height: 38px; place-items: center; background: white; border-radius: 8px; }
.dashboard-alert-item b, .dashboard-alert-item small { display: block; }
.dashboard-alert-item b { font-size: 11px; }
.dashboard-alert-item small { overflow: hidden; color: var(--slate-500); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-alert-critical > span:first-child { color: #8a2228; background: var(--red-100); }
.dashboard-alert-warning > span:first-child { color: #80520a; background: var(--amber-100); }

.backup-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.unified-timeline-panel { margin-bottom: 18px; }
.unified-timeline { display: grid; gap: 0; }
.unified-timeline-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 13px 16px; border-left: 3px solid var(--teal-500); border-bottom: 1px solid var(--slate-200); }
.unified-timeline-item:last-child { border-bottom: 0; }
.unified-timeline-item time { color: var(--slate-500); font-size: 11px; font-weight: 800; }
.unified-timeline-item strong, .unified-timeline-item span, .unified-timeline-item small { display: block; }
.unified-timeline-item span { margin-top: 3px; color: var(--slate-600); font-size: 12px; }
.unified-timeline-item small { margin-top: 3px; color: var(--slate-500); font-size: 10px; }
.timeline-kind-fault { border-left-color: #d6424f; }
.timeline-kind-service { border-left-color: #8b64c5; }
.timeline-kind-pair { border-left-color: #657d3d; }
.timeline-kind-withdraw { border-left-color: #6d7f8a; }
.timeline-kind-replace { border-left-color: #8b64c5; }
.timeline-kind-reversed { border-left-color: #d79728; opacity: .8; }
.channel-history-search-panel { margin-bottom: 18px; }
.channel-history-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 14px; }
.channel-history-form .button { min-height: 43px; }
.channel-history-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.channel-history-timeline .unified-timeline-item { grid-template-columns: 165px minmax(0, 1fr); }
.channel-history-timeline time span, .channel-history-timeline time small { display: block; }
.channel-history-timeline time small { margin-top: 5px; font-weight: 650; }
.channel-history-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.channel-history-item-heading .badge { display: inline-flex; flex: 0 0 auto; margin: 0; color: inherit; font-size: 9px; }
.channel-history-timeline b { color: var(--slate-700); }
.operation-reversed { background: #fff8f0; color: var(--slate-600); }
.operation-reversed td { text-decoration-color: #d79728; }
.operation-table { table-layout: fixed; }
.operation-table th:nth-child(1) { width: 86px; }
.operation-table th:nth-child(2) { width: 105px; }
.operation-table th:nth-child(3) { width: 96px; }
.operation-table th:nth-child(4) { width: 100px; }
.operation-table th:nth-child(6) { width: 120px; }
.operation-table th:nth-child(7) { width: 130px; }
.operation-table td { white-space: normal; overflow-wrap: anywhere; }
.reversal-summary { margin-bottom: 18px; }
.reversal-summary ul { margin: 12px 0 0; padding-left: 20px; }
.reason-new-form { display: grid; grid-template-columns: minmax(240px, 1fr) 130px auto auto; align-items: end; gap: 12px; }
.compact-input { width: 100%; min-width: 64px; padding: 7px 8px; border: 1px solid var(--slate-300); border-radius: 8px; }
.batch-label-panel { padding: 0; overflow: visible; }
.batch-label-toolbar { position: sticky; top: 68px; z-index: 8; align-items: center; border-radius: 15px 15px 0 0; box-shadow: 0 12px 26px -24px rgba(5, 27, 39, .8); }
.batch-label-table-wrap { border-radius: 0 0 15px 15px; }
.batch-label-toolbar-meta, .batch-label-actions { display: flex; align-items: center; gap: 10px; }
.batch-label-toolbar-meta { flex: 0 0 auto; }
.batch-label-toolbar .report-summary { white-space: nowrap; }
.batch-label-actions .button { min-height: 38px; padding: 8px 12px; white-space: nowrap; }
.report-record-link { display: inline-flex; max-width: 100%; align-items: center; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.batch-label-table { table-layout: fixed; font-size: 11px; }
.batch-label-table th:nth-child(1) { width: 62px; }
.batch-label-table th:nth-child(2) { width: 88px; }
.batch-label-table th:nth-child(4) { width: 95px; }
.batch-label-table th:nth-child(6), .batch-label-table th:nth-child(7) { width: 95px; }
.batch-label-table td { white-space: normal; overflow-wrap: anywhere; }
.pair-current-panel { margin-bottom: 18px; }
.pair-current-panel h2 { margin-top: 0; }
.backup-stat-date { font-size: 20px !important; line-height: 1.2; }
.pending-restore-panel, .restore-warning-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; border-color: #efce8f; background: #fffbf2; }
.pending-restore-panel h2, .pending-restore-panel p, .restore-warning-panel h2, .restore-warning-panel p { margin: 0; }
.pending-restore-panel h2, .restore-warning-panel h2 { font-size: 17px; }
.pending-restore-panel p, .restore-warning-panel p { margin-top: 4px; color: var(--slate-600); font-size: 11px; }
.backup-list-heading { padding: 18px 20px 0; }
.backup-list-heading p, .attachment-list-heading p { margin: 3px 0 0; color: var(--slate-600); font-size: 11px; }
.backup-table { table-layout: fixed; }
.backup-table th:nth-child(1) { width: 190px; }
.backup-table th:nth-child(3) { width: 110px; }
.backup-table .actions-column { width: 230px; }
.backup-table code { display: block; overflow: hidden; color: var(--slate-700); font-size: 10px; text-overflow: ellipsis; }
.backup-actions-cell { overflow: visible !important; }
.backup-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px 12px; flex-wrap: wrap; white-space: normal; }
.backup-actions form { margin: 0; }
.link-button { padding: 0; color: var(--teal-600); background: transparent; border: 0; cursor: pointer; font-size: 11px; font-weight: 800; }
.link-button:hover { text-decoration: underline; }
.backup-note h2, .backup-note p { margin: 0; }
.backup-note h2 { font-size: 16px; }
.backup-note p { margin-top: 4px; color: var(--slate-600); font-size: 11px; }
.backup-location-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr); align-items: center; gap: 24px; margin-bottom: 18px; }
.backup-location-panel h2, .backup-location-panel p { margin: 0; }
.backup-location-panel h2 { margin-top: 4px; font-size: 18px; }
.backup-location-panel p { max-width: 760px; margin-top: 5px; color: var(--slate-600); font-size: 11px; }
.backup-location-panel code { display: inline-block; margin-top: 12px; padding: 8px 10px; color: var(--navy-800); background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 8px; font-size: 11px; font-weight: 800; }
.backup-location-status { min-width: 0; padding: 14px 16px; background: var(--amber-100); border: 1px solid #efce8f; border-radius: 10px; }
.backup-location-status.is-ready { background: var(--teal-50); border-color: var(--teal-200); }
.backup-location-status span, .backup-location-status strong, .backup-location-status small { display: block; }
.backup-location-status span { color: var(--slate-500); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.backup-location-status strong { margin-top: 4px; font-size: 16px; }
.backup-location-status small { margin-top: 4px; overflow-wrap: anywhere; color: var(--slate-600); font-size: 10px; }
.restore-warning-panel { justify-content: flex-start; }
.restore-warning-mark { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; color: #80520a; background: var(--amber-100); border-radius: 50%; font-size: 25px; font-weight: 900; }
.restore-form-panel { max-width: 900px; }
.restore-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 22px; border: 1px solid var(--slate-200); border-radius: 10px; }
.restore-details > div { min-width: 0; padding: 12px; border-right: 1px solid var(--slate-200); }
.restore-details > div:last-child { border-right: 0; }
.restore-details dt { color: var(--slate-500); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.restore-details dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; }

.attachment-upload-panel { max-width: 1000px; }
.attachment-list-heading { padding: 18px 20px 0; }
.attachment-list { display: grid; gap: 8px; padding: 0 20px 20px; }
.attachment-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; }
.attachment-file-mark { display: grid; width: 50px; height: 50px; place-items: center; color: var(--teal-600); background: var(--teal-100); border-radius: 9px; font-size: 10px; font-weight: 900; }
.attachment-copy { min-width: 0; }
.attachment-copy strong, .attachment-copy span, .attachment-copy small { display: block; }
.attachment-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.attachment-copy span { margin-top: 2px; color: var(--slate-600); font-size: 10px; }
.attachment-copy small { margin-top: 3px; color: var(--slate-500); font-size: 9px; }
.attachment-actions { display: flex; align-items: center; gap: 6px; }
.attachment-actions form { margin: 0; }

.public-body {
  display: grid;
  place-items: center;
  padding: 30px 18px;
  background:
    linear-gradient(rgba(7, 20, 31, 0.86), rgba(7, 20, 31, 0.94)),
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(255, 255, 255, 0.025) 28px 29px),
    var(--navy-950);
}
.public-shell { width: min(100%, 650px); }
.public-credit { margin-top: 18px; color: #8297a6; font-size: 11px; letter-spacing: 0.02em; text-align: center; }
.public-brand { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: 20px; color: white; }
.public-brand strong, .public-brand span { display: block; }
.public-brand strong { font-size: 18px; }
.public-brand > div > span { color: #92a8b6; font-size: 12px; }
.brand-mark-large { width: 48px; height: 48px; }
.auth-card, .error-card { padding: clamp(24px, 5vw, 38px); background: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32); }
.auth-copy { margin-bottom: 24px; }
.auth-copy h1, .error-card h1 { margin: 3px 0 8px; font-size: 28px; letter-spacing: -0.035em; }
.auth-copy p, .error-card p { margin: 0; color: var(--slate-600); }
.wide-auth-card { width: min(100vw - 36px, 720px); }
.error-card { text-align: center; }
.error-code { display: block; color: var(--teal-600); font-size: 54px; font-weight: 900; letter-spacing: -0.05em; }
.error-card .button { margin-top: 15px; }
.sidebar-backdrop { display: none; }

/* Ewidencja MEŁM 2.6 — interfejs premium */
:root {
  --premium-emerald: #19d6a2;
  --premium-cyan: #39a9ff;
  --premium-violet: #9b6dff;
  --premium-gold: #ffbd4a;
  --premium-red: #ff5263;
  --premium-lime: #a4d65e;
  --premium-aqua: #20c5d8;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --surface-muted: #f3f7f8;
  --surface-border: rgba(124, 154, 169, 0.25);
  --premium-shadow: 0 18px 54px rgba(5, 29, 43, 0.1);
  --premium-shadow-hover: 0 24px 70px rgba(5, 29, 43, 0.16);
  --premium-glow: 0 0 0 1px rgba(25, 214, 162, 0.18), 0 14px 36px rgba(25, 214, 162, 0.14);
}

html { scroll-behavior: smooth; }
html[data-theme="dark"] {
  --slate-900: #eaf4f7;
  --slate-700: #b5c8d0;
  --slate-600: #91a8b3;
  --slate-500: #728c99;
  --slate-300: #385361;
  --slate-200: #294451;
  --slate-100: #18313e;
  --slate-50: #081821;
  --white: #0e2430;
  --surface: rgba(12, 33, 44, 0.88);
  --surface-solid: #0c212c;
  --surface-muted: #0a1b25;
  --surface-border: rgba(110, 165, 184, 0.2);
  --premium-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  --premium-shadow-hover: 0 28px 76px rgba(0, 0, 0, 0.42);
}

body {
  background:
    radial-gradient(circle at 76% -12%, rgba(57, 169, 255, 0.09), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(155, 109, 255, 0.065), transparent 30%),
    linear-gradient(145deg, #f4f8f9 0%, #edf3f5 45%, #f7f9fa 100%);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  transition: color 220ms ease, background 220ms ease;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 78% -8%, rgba(57, 169, 255, 0.15), transparent 34%),
    radial-gradient(circle at 18% 75%, rgba(155, 109, 255, 0.11), transparent 32%),
    linear-gradient(145deg, #06131c 0%, #081922 48%, #07151e 100%);
}

.ui-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-main { position: relative; isolation: isolate; }
.app-main::before {
  position: fixed;
  inset: 68px 0 0 var(--sidebar-width);
  z-index: -1;
  opacity: 0.33;
  background-image:
    linear-gradient(rgba(67, 111, 129, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 111, 129, 0.055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
  content: "";
  pointer-events: none;
}

.sidebar {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 28, 40, 0.78), rgba(4, 16, 25, 0.96)),
    #07131f;
  border-right-color: rgba(83, 181, 208, 0.14);
  box-shadow: 16px 0 60px rgba(3, 14, 22, 0.16);
}
.sidebar::before {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(114, 188, 210, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 188, 210, 0.13) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
  content: "";
  pointer-events: none;
}
.sidebar-aurora { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.sidebar-aurora-one { top: -90px; left: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(25, 214, 162, 0.2), transparent 67%); }
.sidebar-aurora-two { right: -130px; bottom: 80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(155, 109, 255, 0.14), transparent 70%); }
.brand, .main-nav, .sidebar-user { position: relative; z-index: 1; }
.brand { padding-top: 24px; padding-bottom: 23px; }
.brand-mark {
  position: relative;
  overflow: hidden;
  color: #041c18;
  background: linear-gradient(135deg, #70f7d4 0%, var(--premium-emerald) 47%, #2bb6ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 13px 5px 13px 5px;
  box-shadow: 0 0 0 5px rgba(25, 214, 162, 0.07), 0 10px 30px rgba(25, 214, 162, 0.3);
}
.brand-mark::before { position: absolute; inset: -50%; background: linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, 0.65) 50%, transparent 64%); transform: translateX(-60%) rotate(18deg); content: ""; animation: brand-shine 8s ease-in-out infinite; }
.brand-mark > span { position: relative; z-index: 1; }
.brand strong { font-size: 19px; }
.brand small { color: #73d9c1; font-size: 9px; font-weight: 750; letter-spacing: 0.16em; }

.nav-item, .nav-subitem { position: relative; border: 1px solid transparent; }
.nav-item .ui-icon, .nav-subitem .ui-icon { width: 17px; height: 17px; color: #7292a4; transition: color 150ms ease, filter 150ms ease, transform 150ms ease; }
.nav-item > span, .nav-subitem > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover .ui-icon, .nav-subitem:hover .ui-icon { color: #9cebd8; transform: translateX(1px); }
.nav-item.active, .nav-subitem.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(25, 214, 162, 0.18), rgba(57, 169, 255, 0.07));
  border-color: rgba(81, 230, 194, 0.12);
  box-shadow: inset 3px 0 0 var(--premium-emerald), 0 7px 24px rgba(0, 0, 0, 0.12);
}
.nav-item.active .ui-icon, .nav-subitem.active .ui-icon { color: var(--premium-emerald); filter: drop-shadow(0 0 7px rgba(25, 214, 162, 0.5)); }
.nav-group summary { position: relative; z-index: 1; color: #6f98aa; }
.sidebar-user { background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)); border-color: rgba(121, 195, 215, 0.12); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.sidebar-user .avatar { color: #062119; background: linear-gradient(135deg, #c5fff0, #49d7b4); box-shadow: 0 0 0 4px rgba(25, 214, 162, 0.08); }
.sidebar-user small { display: flex; align-items: center; gap: 6px; }
.presence-dot { width: 6px; height: 6px; background: var(--premium-emerald); border-radius: 50%; box-shadow: 0 0 7px var(--premium-emerald); }

.topbar {
  min-height: 72px;
  padding-top: 11px;
  padding-bottom: 11px;
  background: rgba(250, 252, 253, 0.82);
  border-bottom-color: rgba(114, 147, 161, 0.2);
  box-shadow: 0 7px 28px rgba(7, 31, 45, 0.045);
  backdrop-filter: blur(22px) saturate(145%);
}
html[data-theme="dark"] .topbar { background: rgba(7, 23, 32, 0.84); border-bottom-color: rgba(98, 157, 177, 0.16); }
.topbar-title strong { font-size: 15px; letter-spacing: -0.01em; }
.topbar .eyebrow { color: var(--premium-emerald); }
.topbar-actions { gap: 3px; }
.topbar-link { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; border: 1px solid transparent; }
.topbar-link .ui-icon { width: 15px; height: 15px; }
.topbar-link:hover { color: var(--slate-900); background: var(--surface); border-color: var(--surface-border); box-shadow: 0 7px 20px rgba(8, 35, 48, 0.08); }
.theme-toggle { padding: 8px; cursor: pointer; }
.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: block; color: var(--premium-gold); }
.topbar-logout { min-height: 36px; padding: 8px 10px; }
.topbar-logout .ui-icon { width: 15px; height: 15px; }
.topbar-search input { height: 39px; padding-left: 13px; background: var(--surface-muted); border-color: var(--surface-border); }
.topbar-search input:focus { background: var(--surface-solid); border-color: rgba(25, 214, 162, 0.62); box-shadow: 0 0 0 3px rgba(25, 214, 162, 0.12), 0 9px 26px rgba(7, 41, 52, 0.08); }
.topbar-search button { height: 39px; display: grid; place-items: center; background: linear-gradient(135deg, #13384a, #0c2635); }
.topbar-search button:hover { color: #031b15; background: linear-gradient(135deg, #5be8c5, var(--premium-emerald)); }
.topbar-search button .ui-icon { width: 17px; height: 17px; }
.nav-count { background: linear-gradient(135deg, #ff6c7a, var(--premium-red)); box-shadow: 0 0 12px rgba(255, 82, 99, 0.42); }

.content { width: min(100%, 1640px); padding: 32px; }
.app-credit { width: min(100%, 1640px); opacity: 0.75; }
.page-heading { margin-top: 2px; margin-bottom: 26px; }
.page-heading h1 { background: linear-gradient(120deg, var(--slate-900), #244d61 65%, #147966); background-clip: text; -webkit-background-clip: text; color: transparent; }
html[data-theme="dark"] .page-heading h1 { background-image: linear-gradient(120deg, #ffffff, #9ed0df 62%, #62e4c3); }
.eyebrow { color: #718894; }
.eyebrow.accent { color: var(--teal-600); }

.button {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}
.button::after { position: absolute; inset: -80% auto -80% -55%; width: 42%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent); transform: rotate(18deg); content: ""; transition: left 450ms ease; pointer-events: none; }
.button:hover::after { left: 125%; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #032019; background: linear-gradient(135deg, #6bf1cf 0%, var(--premium-emerald) 52%, #10b893 100%); box-shadow: 0 9px 24px rgba(25, 214, 162, 0.2); }
.button-primary:hover { background: linear-gradient(135deg, #83f7d9, #22dfad 52%, #11c59d); box-shadow: 0 13px 34px rgba(25, 214, 162, 0.3); }
.button-secondary { color: var(--slate-900); background: var(--surface); border-color: var(--surface-border); box-shadow: 0 6px 18px rgba(10, 38, 52, 0.05); backdrop-filter: blur(12px); }
.button-glass { color: #eafcff; background: rgba(255, 255, 255, 0.075); border-color: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); }
.button-glass:hover { color: #ffffff; background: rgba(255, 255, 255, 0.13); border-color: rgba(112, 247, 212, 0.34); box-shadow: 0 9px 28px rgba(0, 0, 0, 0.18); }
.button-electric { color: white; background: linear-gradient(135deg, #427cff, #805cff 68%, #9b6dff); box-shadow: 0 10px 28px rgba(112, 86, 255, 0.23); }
.button-electric:hover { box-shadow: 0 15px 38px rgba(112, 86, 255, 0.34); }
.button-glow { animation: button-breathe 4s ease-in-out infinite; }
.icon-button { color: var(--slate-700); background: var(--surface); border-color: var(--surface-border); }

.panel, .form-panel, .auth-card, .error-card, .report-card, .record-card, .detail-card {
  background: var(--surface);
  border-color: var(--surface-border);
  box-shadow: var(--premium-shadow);
  backdrop-filter: blur(18px) saturate(125%);
}
.panel { border-radius: 18px; box-shadow: 0 13px 42px rgba(7, 34, 48, 0.065); }
.panel:hover { border-color: rgba(92, 162, 181, 0.3); }
.panel-heading h2 { font-size: 19px; }
.panel-heading > a { display: inline-flex; align-items: center; gap: 5px; color: #078e74; }
html[data-theme="dark"] .panel-heading > a { color: #59ddbc; }
.panel-title-with-icon { display: flex; align-items: center; gap: 12px; }
.panel-icon { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; color: var(--premium-emerald); background: rgba(25, 214, 162, 0.11); border: 1px solid rgba(25, 214, 162, 0.18); border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.panel-icon .ui-icon { width: 20px; height: 20px; }
.panel-icon-alert, .panel-icon-danger { color: var(--premium-red); background: rgba(255, 82, 99, 0.1); border-color: rgba(255, 82, 99, 0.18); }
.panel-icon-chart { color: var(--premium-cyan); background: rgba(57, 169, 255, 0.1); border-color: rgba(57, 169, 255, 0.18); }
.panel-icon-activity { color: var(--premium-violet); background: rgba(155, 109, 255, 0.1); border-color: rgba(155, 109, 255, 0.18); }

.dashboard-hero {
  position: relative;
  display: flex;
  min-height: 242px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(115deg, rgba(7, 24, 35, 0.94), rgba(11, 45, 57, 0.91) 58%, rgba(22, 39, 64, 0.92)),
    #07131f;
  border: 1px solid rgba(108, 218, 214, 0.18);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(4, 26, 39, 0.22);
  isolation: isolate;
}
.dashboard-hero::before { position: absolute; inset: 0; z-index: -1; opacity: 0.16; background-image: linear-gradient(rgba(130, 222, 226, 0.19) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 222, 226, 0.19) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, #000, transparent 82%); content: ""; }
.dashboard-hero::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.04) 50%, transparent 65%); transform: translateX(-100%); content: ""; animation: hero-scan 10s ease-in-out infinite; }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
.hero-glow-one { top: -160px; right: 12%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(57, 169, 255, 0.26), transparent 66%); }
.hero-glow-two { right: -100px; bottom: -210px; width: 430px; height: 430px; background: radial-gradient(circle, rgba(155, 109, 255, 0.22), transparent 68%); }
.dashboard-hero-copy { max-width: 720px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: #8af5d8; font-size: 10px; font-weight: 850; letter-spacing: 0.16em; }
.hero-kicker > span { width: 8px; height: 8px; background: var(--premium-emerald); border-radius: 50%; box-shadow: 0 0 0 5px rgba(25,214,162,0.1), 0 0 15px rgba(25,214,162,0.75); }
.dashboard-hero h1 { margin: 9px 0 8px; font-size: clamp(31px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.045em; }
.dashboard-hero p { max-width: 610px; margin: 0; color: #b5cad5; font-size: 15px; }
.system-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 25px; color: #dcebf0; }
.system-status strong { font-size: 11px; }
.system-status small { padding-left: 8px; color: #829eab; border-left: 1px solid rgba(255,255,255,0.16); font-size: 10px; text-transform: capitalize; }
.system-status-pulse { width: 8px; height: 8px; background: var(--premium-emerald); border-radius: 50%; box-shadow: 0 0 12px var(--premium-emerald); animation: status-pulse 2.4s ease-out infinite; }
.dashboard-hero-actions { display: flex; max-width: 310px; flex-direction: column; align-items: stretch; gap: 9px; }
.dashboard-hero-actions .button { min-width: 215px; }

.stats-grid { gap: 14px; }
.stat-card {
  --card-accent: var(--premium-emerald);
  --card-rgb: 25, 214, 162;
  min-height: 150px;
  padding: 20px;
  background:
    radial-gradient(circle at 96% 4%, rgba(var(--card-rgb), 0.17), transparent 42%),
    linear-gradient(145deg, var(--surface-solid), var(--surface-muted));
  border-color: rgba(var(--card-rgb), 0.2);
  border-radius: 17px;
  box-shadow: 0 13px 38px rgba(7, 34, 48, 0.075);
}
.stat-card::before { inset: auto 18px 0; width: auto; height: 3px; background: linear-gradient(90deg, transparent, var(--card-accent), transparent); border-radius: 4px 4px 0 0; box-shadow: 0 0 14px rgba(var(--card-rgb), 0.55); }
.stat-card::after { position: absolute; top: -45px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(var(--card-rgb), 0.14), transparent 68%); border-radius: 50%; content: ""; pointer-events: none; }
.stat-card:hover { transform: translateY(-5px); border-color: rgba(var(--card-rgb), 0.45); box-shadow: var(--premium-shadow-hover), 0 0 32px rgba(var(--card-rgb), 0.1); }
.stat-card strong { margin-top: 14px; color: var(--slate-900); font-size: 34px; }
.stat-icon { position: absolute; top: 16px; right: 17px; display: grid; width: 37px; height: 37px; place-items: center; color: var(--card-accent); background: rgba(var(--card-rgb), 0.1); border: 1px solid rgba(var(--card-rgb), 0.17); border-radius: 11px; }
.stat-icon .ui-icon { width: 19px; height: 19px; }
.stat-devices { --card-accent: var(--premium-violet); --card-rgb: 155, 109, 255; }
.stat-installed { --card-accent: var(--premium-emerald); --card-rgb: 25, 214, 162; }
.stat-danger { --card-accent: var(--premium-red); --card-rgb: 255, 82, 99; }
.stat-warning { --card-accent: var(--premium-gold); --card-rgb: 255, 189, 74; }
.stat-cables { --card-accent: var(--premium-cyan); --card-rgb: 57, 169, 255; }
.stat-service { --card-accent: var(--premium-aqua); --card-rgb: 32, 197, 216; }
.stat-activity { --card-accent: var(--premium-violet); --card-rgb: 155, 109, 255; }
.stat-danger strong, .stat-warning strong { color: var(--slate-900); }

.dashboard-alert-panel.has-critical-alerts { border-color: rgba(255, 82, 99, 0.3); box-shadow: 0 15px 48px rgba(255, 82, 99, 0.08); }
.dashboard-alert-item { position: relative; overflow: hidden; background: var(--surface-muted); border-color: var(--surface-border); transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; }
.dashboard-alert-item:hover { transform: translateX(3px); background: var(--surface-solid); border-color: rgba(57, 169, 255, 0.28); }
.dashboard-alert-item > span:first-child { background: var(--surface-solid); box-shadow: 0 7px 18px rgba(6, 32, 45, 0.08); }
.bar-row progress { height: 10px; overflow: hidden; border: 0; border-radius: 99px; }
.bar-row progress::-webkit-progress-bar { background: var(--surface-muted); border-radius: 99px; }
.bar-row progress::-webkit-progress-value { background: linear-gradient(90deg, var(--premium-emerald), var(--premium-cyan), var(--premium-violet)); border-radius: 99px; box-shadow: 0 0 14px rgba(57, 169, 255, 0.3); }
.bar-row progress::-moz-progress-bar { background: linear-gradient(90deg, var(--premium-emerald), var(--premium-cyan), var(--premium-violet)); border-radius: 99px; }
.activity-item { position: relative; border-radius: 10px; transition: background 140ms ease, transform 140ms ease; }
a.activity-item:hover { transform: translateX(3px); background: var(--surface-muted); }
.activity-dot { box-shadow: 0 0 0 5px rgba(25,214,162,0.08), 0 0 12px rgba(25,214,162,0.32); }
.danger-dot { box-shadow: 0 0 0 5px rgba(255,82,99,0.08), 0 0 12px rgba(255,82,99,0.32); }

.movement-actions { gap: 17px; }
.movement-card {
  --movement-accent: var(--premium-emerald);
  --movement-rgb: 25, 214, 162;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  min-height: 188px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% -15%, rgba(var(--movement-rgb), 0.22), transparent 46%),
    linear-gradient(145deg, var(--surface-solid), var(--surface-muted));
  border-color: rgba(var(--movement-rgb), 0.24);
  border-radius: 19px;
  box-shadow: 0 14px 42px rgba(7, 34, 48, 0.08);
}
.movement-card::before { position: absolute; inset: 0; opacity: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.28) 48%, transparent 70%); transform: translateX(-100%); content: ""; transition: opacity 200ms ease, transform 650ms ease; pointer-events: none; }
.movement-card::after { inset: auto 19px 0; height: 3px; background: linear-gradient(90deg, transparent, var(--movement-accent), transparent); box-shadow: 0 0 15px rgba(var(--movement-rgb), 0.58); }
.movement-card:hover { transform: translateY(-6px); border-color: rgba(var(--movement-rgb), 0.48); box-shadow: var(--premium-shadow-hover), 0 0 36px rgba(var(--movement-rgb), 0.11); }
.movement-card:hover::before { opacity: 0.42; transform: translateX(100%); }
.movement-card h2 { font-size: 21px; }
.movement-number { color: var(--movement-accent); background: rgba(var(--movement-rgb), 0.11); border: 1px solid rgba(var(--movement-rgb), 0.17); border-radius: 11px; }
.movement-icon { display: grid; width: 44px; height: 44px; place-items: center; color: var(--movement-accent); background: rgba(var(--movement-rgb), 0.1); border: 1px solid rgba(var(--movement-rgb), 0.18); border-radius: 13px; box-shadow: 0 9px 26px rgba(var(--movement-rgb), 0.1); }
.movement-icon .ui-icon { width: 23px; height: 23px; }
.movement-arrow { color: var(--movement-accent); opacity: 0.48; transition: transform 150ms ease, opacity 150ms ease; }
.movement-card:hover .movement-arrow { opacity: 1; transform: translateX(4px); }
.movement-install { --movement-accent: var(--premium-emerald); --movement-rgb: 25, 214, 162; }
.movement-withdraw { --movement-accent: var(--premium-gold); --movement-rgb: 255, 189, 74; }
.movement-replace { --movement-accent: var(--premium-cyan); --movement-rgb: 57, 169, 255; }
.movement-pair { --movement-accent: var(--premium-lime); --movement-rgb: 164, 214, 94; }
.movement-pair-swap { --movement-accent: var(--premium-violet); --movement-rgb: 155, 109, 255; }
.movement-service { --movement-accent: var(--premium-aqua); --movement-rgb: 32, 197, 216; }
.movement-withdraw .movement-number, .movement-replace .movement-number, .movement-pair .movement-number, .movement-pair-swap .movement-number, .movement-service .movement-number { color: var(--movement-accent); background: rgba(var(--movement-rgb), 0.11); }

.table-panel { border-radius: 18px; }
.table-toolbar, .report-toolbar { background: linear-gradient(135deg, var(--surface-muted), var(--surface-solid)); border-bottom-color: var(--surface-border); }
.table-wrap { overflow-x: hidden; scrollbar-color: rgba(57, 169, 255, 0.45) transparent; }
.data-table { width: 100%; table-layout: fixed; white-space: normal; }
.data-table th {
  color: #55717e;
  background: color-mix(in srgb, var(--surface-muted) 86%, var(--premium-cyan) 14%);
  border-bottom-color: var(--surface-border);
  box-shadow: inset 0 -1px 0 rgba(57, 169, 255, 0.08);
}
html[data-theme="dark"] .data-table th { color: #a7c0ca; background: #102c39; }
.data-table th, .data-table td { min-width: 0; overflow-wrap: anywhere; }
.data-table .actions-column {
  width: 112px;
  min-width: 112px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.data-table th.actions-column { white-space: nowrap; }
.data-table td.actions-column :is(a, button, span) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.data-table .fault-actions { width: 156px; min-width: 156px; }
.data-table.backup-table .actions-column { width: 230px; min-width: 230px; }
.data-table tbody tr { transition: background 120ms ease, box-shadow 120ms ease; }
.data-table tbody tr:nth-child(even) { background: rgba(106, 158, 177, 0.035); }
.data-table tbody tr:hover { background: rgba(57, 169, 255, 0.075); box-shadow: inset 3px 0 0 var(--premium-cyan); }
.data-table td { border-bottom-color: color-mix(in srgb, var(--surface-border) 70%, transparent); }
.row-link { color: #078e74; font-weight: 750; }
html[data-theme="dark"] .row-link { color: #61dfc0; }
.badge, .status-badge, .area-badge { border: 1px solid rgba(119, 151, 164, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }

.field > span, .field-label { color: var(--slate-700); }
.field input, .field select, .field textarea, .search-field input, input, select, textarea {
  color: var(--slate-900);
  background: var(--surface-solid);
  border-color: var(--surface-border);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus, .search-field input:focus, input:focus, select:focus, textarea:focus {
  background: var(--surface-solid);
  border-color: rgba(25, 214, 162, 0.72);
  box-shadow: 0 0 0 4px rgba(25, 214, 162, 0.11), 0 10px 30px rgba(6, 43, 51, 0.08);
  outline: none;
}
.form-panel { border-radius: 19px; }
.form-section + .form-section { border-top-color: var(--surface-border); }
.form-section-heading > span { color: #05251d; background: linear-gradient(135deg, #7ff6d8, var(--premium-emerald)); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 8px 24px rgba(25,214,162,0.2); }
.form-section-heading h2 { font-size: 18px; }
.select-filter-box, .filterable-select, .device-picker, .protocol-template-actions { background: var(--surface-muted); border-color: var(--surface-border); }

.alert { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 26px rgba(7, 34, 48, 0.06); animation: notice-in 280ms ease-out both; }
.alert::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: currentColor; opacity: 0.75; content: ""; }
.alert-success { color: #087253; background: linear-gradient(135deg, rgba(224,245,235,0.95), rgba(229,255,248,0.95)); }
.alert-error { color: #9b2831; background: linear-gradient(135deg, rgba(255,234,235,0.96), rgba(255,243,244,0.96)); }
.alert-warning { color: #80530d; background: linear-gradient(135deg, rgba(255,242,217,0.96), rgba(255,249,234,0.96)); }
html[data-theme="dark"] .alert-success { color: #85efd2; background: rgba(23, 116, 85, 0.18); border-color: rgba(25,214,162,0.28); }
html[data-theme="dark"] .alert-error { color: #ff9ca5; background: rgba(204, 62, 69, 0.16); border-color: rgba(255,82,99,0.3); }
html[data-theme="dark"] .alert-warning { color: #ffd68a; background: rgba(233,162,59,0.15); border-color: rgba(255,189,74,0.28); }
.empty-state, .empty-cell { color: var(--slate-500); }
.empty-state::before { display: block; margin: 0 auto 8px; color: color-mix(in srgb, var(--slate-500) 65%, var(--premium-cyan)); font-size: 19px; content: "◇"; }

.report-grid { gap: 16px; }
.report-card { position: relative; overflow: hidden; border-radius: 17px; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.report-card::after { position: absolute; inset: auto 18px 0; height: 3px; opacity: 0; background: linear-gradient(90deg, transparent, var(--premium-cyan), transparent); content: ""; transition: opacity 150ms ease; }
.report-card:hover { transform: translateY(-5px); border-color: rgba(57,169,255,0.34); box-shadow: var(--premium-shadow-hover); }
.report-card:hover::after { opacity: 1; }
.report-icon { color: var(--premium-cyan); background: linear-gradient(135deg, rgba(57,169,255,0.12), rgba(155,109,255,0.09)); border: 1px solid rgba(57,169,255,0.17); border-radius: 12px; }
.report-icon .ui-icon { width: 24px; height: 24px; }
.report-card-emergency { color: #ffffff; background: linear-gradient(130deg, #092a36, #112a49 60%, #34275b); border-color: rgba(110, 224, 216, 0.2); box-shadow: 0 18px 54px rgba(8, 31, 53, 0.22); }
.report-card-emergency h2 { color: white; }
.report-card-emergency p { color: #b6cad7; }
.report-card-emergency .report-icon { color: #70f4d2; background: rgba(25,214,162,0.12); border-color: rgba(112,244,210,0.2); box-shadow: 0 0 30px rgba(25,214,162,0.12); }
.report-card-emergency .text-link { color: #70f4d2; }
.report-card-kicker { display: block; margin-bottom: 3px; color: #6ce9c9; font-size: 9px; font-weight: 850; letter-spacing: 0.13em; }

.emergency-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 30px;
  overflow: hidden;
  color: white;
  background: linear-gradient(125deg, #071c29, #0a3540 50%, #2d2856);
  border: 1px solid rgba(94, 224, 213, 0.2);
  border-radius: 21px;
  box-shadow: 0 22px 64px rgba(4,27,42,0.23);
}
.emergency-hero::before { position: absolute; inset: 0; opacity: 0.14; background-image: linear-gradient(rgba(110,220,219,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(110,220,219,.2) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg,#000,transparent); content:""; }
.emergency-glow { position: absolute; right: -80px; bottom: -180px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(155,109,255,.3), transparent 67%); border-radius: 50%; }
.emergency-hero-icon { position: relative; display: grid; width: 76px; height: 76px; place-items: center; color: #6af2cf; background: rgba(25,214,162,.11); border: 1px solid rgba(106,242,207,.22); border-radius: 20px; box-shadow: 0 0 38px rgba(25,214,162,.13); }
.emergency-hero-icon .ui-icon { width: 35px; height: 35px; }
.emergency-hero-copy { position: relative; }
.emergency-hero h2 { margin: 6px 0 6px; font-size: 24px; letter-spacing: -.025em; }
.emergency-hero p { max-width: 760px; margin: 0 0 12px; color: #b6ccd5; }
.emergency-hero small { color: #819fac; }
.emergency-hero small strong { color: #d8ebf0; }
.emergency-actions { position: relative; display: flex; min-width: 180px; flex-direction: column; gap: 9px; }
.emergency-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.emergency-guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.emergency-guide-grid > div { position: relative; padding: 18px; overflow: hidden; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 13px; }
.emergency-guide-grid > div > span { position: absolute; top: 9px; right: 12px; color: rgba(155,109,255,.22); font-size: 26px; font-weight: 900; }
.emergency-guide-grid strong { display: block; margin-bottom: 5px; }
.emergency-guide-grid p { margin: 0; color: var(--slate-600); font-size: 12px; }

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .movement-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .report-card:not(.report-card-emergency),
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .error-card { box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26); }
html[data-theme="dark"] .button-secondary { background: rgba(16,42,54,.84); }
html[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: rgba(114,181,202,.035); }
html[data-theme="dark"] .data-table tbody tr:hover { background: rgba(57,169,255,.09); }

.public-body { min-height: 100vh; padding: 0; background: #06131d; }
.public-shell { display: grid; width: 100%; min-height: 100vh; grid-template-columns: minmax(0, 1.25fr) minmax(440px, .75fr); }
.public-visual { position: relative; display: flex; min-width: 0; padding: clamp(36px, 5vw, 74px); overflow: hidden; flex-direction: column; color: white; background: linear-gradient(135deg, #06131d 0%, #092533 56%, #172443 100%); isolation: isolate; }
.public-grid { position: absolute; inset: 0; z-index: -2; opacity: .22; background-image: linear-gradient(rgba(116,211,218,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(116,211,218,.18) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(120deg,#000,transparent 82%); }
.login-aurora { position: absolute; z-index: -1; border-radius: 50%; }
.login-aurora-one { top: -220px; left: -180px; width: 620px; height: 620px; background: radial-gradient(circle,rgba(25,214,162,.25),transparent 66%); }
.login-aurora-two { right: -250px; bottom: -300px; width: 720px; height: 720px; background: radial-gradient(circle,rgba(155,109,255,.28),transparent 68%); }
.public-visual .public-brand { justify-content: flex-start; margin: 0; }
.public-visual .public-brand strong { font-size: 20px; }
.public-visual .public-brand > div > span { color: #72ddc3; font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.public-hero { max-width: 730px; margin: auto 0; }
.public-hero h1 { margin: 15px 0 17px; font-size: clamp(42px,5vw,72px); line-height: 1.03; letter-spacing: -.055em; }
.public-hero h1 em { color: transparent; background: linear-gradient(90deg,#5ef0c9,#46b4ff 48%,#b48aff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.public-hero > p { max-width: 620px; color: #a9c1cc; font-size: clamp(14px,1.2vw,18px); }
.public-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.public-features > span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; color: #c9dbe2; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; font-size: 10px; backdrop-filter: blur(10px); }
.public-features .ui-icon { width: 14px; height: 14px; color: #6ceacb; }
.signal-orbit { position: absolute; right: clamp(30px,8vw,150px); bottom: clamp(25px,7vh,80px); width: 170px; height: 170px; opacity: .5; border: 1px solid rgba(94,240,203,.22); border-radius: 50%; animation: orbit-spin 20s linear infinite; }
.signal-orbit::before,.signal-orbit::after { position:absolute; inset:25px; border:1px solid rgba(77,176,255,.22); border-radius:50%; content:""; }
.signal-orbit::after { inset:56px; background:radial-gradient(circle,rgba(155,109,255,.42),transparent 65%); border-color:rgba(170,124,255,.3); }
.signal-orbit > span { position:absolute; width:9px; height:9px; background:var(--premium-emerald); border-radius:50%; box-shadow:0 0 16px var(--premium-emerald); }
.signal-orbit > span:nth-child(1){top:-5px;left:80px}.signal-orbit > span:nth-child(2){right:9px;bottom:24px;background:var(--premium-cyan);box-shadow:0 0 16px var(--premium-cyan)}.signal-orbit > span:nth-child(3){bottom:18px;left:12px;background:var(--premium-violet);box-shadow:0 0 16px var(--premium-violet)}
.public-content { display: flex; min-width: 0; padding: clamp(28px,5vw,70px); flex-direction: column; justify-content: center; background: linear-gradient(145deg,#f8fafb,#edf3f5); }
.public-content > .alert, .public-content > .auth-card, .public-content > .wide-auth-card, .public-content > .error-card, .public-content > .public-credit { width: min(100%, 520px); margin-right: auto; margin-left: auto; }
.public-mobile-brand { display: none; }
.auth-card { padding: clamp(28px,4vw,44px); border-radius: 22px; box-shadow: 0 28px 80px rgba(3,24,36,.16); }
.auth-copy h1 { font-size: 34px; }
.auth-card .button-wide { min-height: 50px; }
.public-credit { color: #708792; }

@keyframes brand-shine { 0%,72%,100%{transform:translateX(-70%) rotate(18deg)} 84%{transform:translateX(160%) rotate(18deg)} }
@keyframes hero-scan { 0%,68%,100%{transform:translateX(-100%)} 84%{transform:translateX(100%)} }
@keyframes status-pulse { 0%{box-shadow:0 0 0 0 rgba(25,214,162,.5)} 75%,100%{box-shadow:0 0 0 10px rgba(25,214,162,0)} }
@keyframes button-breathe { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.05)} }
@keyframes notice-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes orbit-spin { to{transform:rotate(360deg)} }

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

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compact-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-card { min-height: 122px; }
  .protocol-template-layout { grid-template-columns: 1fr; }
  .protocol-version-panel { position: static; max-height: none; }
  .topbar-search { width: 190px; flex-basis: 190px; }
  .topbar-actions .topbar-link:nth-of-type(n+3) { display: none; }
  .audit-filter { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .audit-search { grid-column: span 2; }
}

@media (max-width: 980px) {
  .sidebar { transform: translateX(-102%); box-shadow: 25px 0 70px rgba(0, 0, 0, 0.28); transition: transform 180ms ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .menu-button { display: inline-grid; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(3, 13, 21, 0.5); border: 0; }
  .menu-open .sidebar-backdrop { display: block; }
  .topbar-actions .topbar-link { display: none; }
  .topbar-search { width: min(42vw, 300px); flex-basis: min(42vw, 300px); }
  .dashboard-grid, .history-grid { grid-template-columns: 1fr; }
  .movement-actions { grid-template-columns: 1fr; }
  .movement-card { min-height: auto; }
  .movement-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-table { min-width: 0; font-size: 11px; }
  .cable-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid > div:nth-child(3n) { border-right: 1px solid var(--slate-200); }
  .detail-grid > div:nth-child(2n) { border-right: 0; }
  .search-groups { grid-template-columns: 1fr; }
  .backup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backup-location-panel { grid-template-columns: 1fr; }
  .reason-new-form { grid-template-columns: 1fr 1fr; }
  .device-picker-layout { grid-template-columns: 1fr; }
  .device-results { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .selected-devices { min-height: 130px; }
}

@media (max-width: 700px) {
  .content { padding: 20px 14px; }
  .app-credit { padding: 10px 14px 16px; text-align: center; }
  .topbar { padding: 9px 14px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; justify-content: flex-start; }
  .heading-actions .button { flex: 1; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 116px; padding: 15px; }
  .stat-card strong { margin-top: 7px; font-size: 27px; }
  .compact-list, .report-grid, .form-grid, .detail-grid, .fault-summary-panel { grid-template-columns: 1fr; }
  .recipient-grid, .historical-filter { grid-template-columns: 1fr; }
  .channel-history-form, .channel-history-stats { grid-template-columns: 1fr; }
  .note-row { grid-template-columns: 10px minmax(0, 1fr); }
  .note-row > .badge, .note-row > .note-progress { grid-column: 2; justify-self: start; text-align: left; }
  .recipient-status-row { align-items: flex-start; flex-direction: column; }
  .device-label-threshold-grid { grid-template-columns: 1fr; }
  .meo-range-form { grid-template-columns: 1fr; }
  .device-picker-toolbar { grid-template-columns: 1fr; }
  .device-picker-options { align-items: stretch; flex-direction: column; }
  .device-picker-options > div { align-items: stretch; flex-direction: column; }
  .device-picker-options .button, .picker-toggle { width: 100%; justify-content: center; }
  .device-results-heading { align-items: flex-start; }
  .device-choice { grid-template-columns: 24px minmax(0, 1fr); }
  .device-identifiers { grid-column: 2; }
  .protocol-history-item { align-items: stretch; flex-direction: column; }
  .protocol-history-actions { width: 100%; }
  .protocol-history-actions .button { flex: 1; }
  .protocol-close-panel { align-items: stretch; flex-direction: column; }
  .protocol-close-panel form, .protocol-close-panel .button { width: 100%; }
  .protocol-template-actions { position: static; align-items: stretch; flex-direction: column; }
  .protocol-template-actions .compact-field, .protocol-template-actions > div, .protocol-template-actions .button { width: 100%; }
  .detail-grid > div { border-right: 0 !important; }
  .report-card { min-height: auto; padding: 17px; }
  .table-toolbar, .report-toolbar { align-items: stretch; flex-direction: column; }
  .batch-label-toolbar { position: static; }
  .batch-label-toolbar-meta { align-items: stretch; flex-direction: column; }
  .batch-label-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .batch-label-actions .button { width: 100%; }
  .filter-notice { align-items: flex-start; flex-direction: column; }
  .table-toolbar .button, .report-toolbar .button { width: 100%; }
  .report-toolbar .field { width: 100%; }
  .record-footer { align-items: stretch; flex-direction: column; }
  .record-footer .button, .record-footer form, .record-footer form button { width: 100%; }
  .archive-panel { align-items: stretch; flex-direction: column; }
  .archive-panel form, .archive-panel .button { width: 100%; }
  .service-state-panel { align-items: stretch; flex-direction: column; }
  .service-state-panel .button { width: 100%; }
  .form-actions .button { flex: 1; }
  .danger-panel { align-items: stretch; flex-direction: column; }
  .danger-panel form, .danger-panel .button { width: 100%; }
  .global-search-page-form, .pending-restore-panel, .alert-center-item, .attachment-item { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .global-search-page-form { display: flex; }
  .global-search-page-form .button, .pending-restore-panel form, .pending-restore-panel .button, .alert-center-item .button { width: 100%; }
  .dashboard-alert-list { grid-template-columns: 1fr; }
  .alert-center-count { min-height: 44px; }
  .restore-details { grid-template-columns: 1fr; }
  .restore-details > div { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .restore-details > div:last-child { border-bottom: 0; }
  .attachment-actions { flex-wrap: wrap; }
  .backup-table th:nth-child(1) { width: 145px; }
  .backup-table th:nth-child(3) { width: 82px; }
  .backup-table .actions-column { width: 150px; min-width: 150px; }
  .unified-timeline-item { grid-template-columns: 1fr; gap: 4px; }
  .reason-new-form { grid-template-columns: 1fr; }
  .audit-filter { grid-template-columns: 1fr; }
  .audit-search { grid-column: auto; }
  .audit-change-list { min-width: 330px; }
  .audit-change { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .stats-grid { grid-template-columns: 1fr; }
  .movement-stats { grid-template-columns: 1fr; }
  .service-stats { grid-template-columns: 1fr; }
  .cable-tabs { grid-template-columns: 1fr; }
  .stat-card { min-height: 105px; }
  .topbar-title .eyebrow { display: none; }
  .topbar-title strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-title { display: none; }
  .topbar-search { width: auto; flex: 1; }
}

@media (max-width: 1280px) {
  .dashboard-hero { min-height: 220px; }
  .dashboard-hero-actions { max-width: 260px; }
  .topbar-link span:not(.nav-count) { display: none; }
  .topbar-link { justify-content: center; padding-right: 8px; padding-left: 8px; }
  .topbar-actions .topbar-link:nth-of-type(n+3) { display: inline-flex; }
  .public-shell { grid-template-columns: minmax(0,1fr) minmax(410px,.72fr); }
  .public-hero h1 { font-size: clamp(39px,5vw,62px); }
}

@media (max-width: 980px) {
  .app-main::before { left: 0; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .dashboard-hero-actions { width: 100%; max-width: none; flex-flow: row wrap; }
  .dashboard-hero-actions .button { min-width: 0; flex: 1; }
  .movement-card { grid-template-columns: auto auto minmax(0,1fr) auto; }
  .public-shell { grid-template-columns: minmax(0,1fr) minmax(390px,.86fr); }
  .public-visual { padding: 42px; }
  .public-features { display: grid; grid-template-columns: 1fr; align-items: start; }
  .public-features > span { width: max-content; }
  .signal-orbit { display: none; }
  .emergency-hero { grid-template-columns: auto minmax(0,1fr); }
  .emergency-actions { grid-column: 1 / -1; flex-direction: row; }
  .emergency-actions .button { flex: 1; }
}

@media (max-width: 800px) {
  .public-shell { display: flex; min-height: 100vh; flex-direction: column; background: radial-gradient(circle at 15% 0,rgba(25,214,162,.14),transparent 32%),linear-gradient(145deg,#071722,#111b34); }
  .public-visual { display: none; }
  .public-content { min-height: 100vh; justify-content: center; background: transparent; }
  .public-mobile-brand { display: flex; width: min(100%,520px); align-items: center; gap: 12px; margin: 0 auto 20px; color: white; }
  .public-mobile-brand strong,.public-mobile-brand span { display: block; }
  .public-mobile-brand > div > span { color:#74dcc4;font-size:9px;font-weight:750;letter-spacing:.13em;text-transform:uppercase; }
  .public-credit { color: #7993a0; }
  .emergency-stats, .emergency-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .content { padding: 18px 13px; }
  .dashboard-hero { min-height: 0; padding: 25px 21px; border-radius: 19px; }
  .dashboard-hero h1 { font-size: 33px; }
  .dashboard-hero-actions { flex-direction: column; }
  .dashboard-hero-actions .button { width: 100%; }
  .system-status { align-items: flex-start; flex-direction: column; }
  .system-status small { padding-left: 0; border-left: 0; }
  .stat-card { min-height: 132px; }
  .movement-card { grid-template-columns: auto auto minmax(0,1fr); padding: 19px; }
  .movement-card .movement-arrow { display: none; }
  .movement-card p { grid-column: 1 / -1; }
  .emergency-hero { grid-template-columns: 1fr; padding: 23px; }
  .emergency-hero-icon { width: 62px; height: 62px; }
  .emergency-actions { grid-column: auto; flex-direction: column; }
  .panel-title-with-icon { align-items: flex-start; }
  .data-table { font-size: 10px; }
  .data-table th,.data-table td { padding: 8px 5px; }
}

@media (max-width: 430px) {
  .topbar-actions { display: flex; }
  .topbar-actions > :not(.theme-toggle) { display: none !important; }
  .topbar-actions .theme-toggle { display: inline-flex; }
  .stats-grid { grid-template-columns: 1fr; }
  .dashboard-hero h1 { font-size: 29px; }
  .movement-card { grid-template-columns: auto minmax(0,1fr); }
  .movement-card .movement-icon { display: none; }
  .public-content { padding: 24px 15px; }
}

/* Tabele 2.0 i odświeżone historie */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--premium-cyan) 72%, white);
  outline-offset: 2px;
}
.modern-table-panel .table-toolbar { align-items: center; justify-content: space-between; gap: 16px; }
.table-toolbar-search { display: flex; min-width: 280px; flex: 1; align-items: center; gap: 8px; }
.table-toolbar-search .search-field { min-width: 180px; }
.table-toolbar-meta { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 12px; }
.table-result-range { color: var(--slate-500); font-size: 10.5px; white-space: nowrap; }
.table-result-range strong { color: var(--slate-700); }
.table-density-button { min-height: 36px; padding: 7px 10px; color: var(--slate-700); background: var(--surface-solid); border: 1px solid var(--surface-border); font-size: 10.5px; }
.table-density-button[aria-pressed="true"] { color: var(--teal-700); background: var(--teal-100); border-color: color-mix(in srgb, var(--teal-600) 45%, var(--surface-border)); }
.table-scroll-hint { display: none; }
.modern-table-panel .table-wrap { max-height: clamp(390px, calc(100vh - 315px), 760px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.modern-table-panel .table-wrap:focus-visible { outline-offset: -3px; }
.modern-data-table { min-width: max(760px, 100%); table-layout: fixed; }
.modern-data-table th { z-index: 3; }
.modern-data-table td:not(.actions-column) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modern-data-table .actions-column { width: 164px; min-width: 164px; }
.modern-data-table th.actions-column,
.modern-data-table td.actions-column { position: sticky; right: 0; z-index: 2; background: var(--surface-solid); box-shadow: -8px 0 14px -14px rgba(5, 27, 39, .7); }
.modern-data-table th.actions-column { z-index: 4; background: color-mix(in srgb, var(--surface-muted) 86%, var(--premium-cyan) 14%); }
.modern-data-table tbody tr:nth-child(even) td.actions-column { background: color-mix(in srgb, var(--surface-solid) 96%, var(--premium-cyan) 4%); }
.modern-data-table tbody tr:hover td.actions-column { background: color-mix(in srgb, var(--surface-solid) 91%, var(--premium-cyan) 9%); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.row-actions .row-link { display: inline-flex; min-height: 30px; align-items: center; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--teal-600) 22%, var(--surface-border)); border-radius: 7px; font-size: 10px; line-height: 1; text-decoration: none; white-space: nowrap; }
.row-actions .row-link:hover { background: var(--teal-100); border-color: color-mix(in srgb, var(--teal-600) 50%, var(--surface-border)); text-decoration: none; }
.row-actions .secondary-row-link { color: var(--slate-600); border-color: var(--surface-border); }
.table-density-compact .modern-data-table th { padding-top: 7px; padding-bottom: 7px; font-size: 9px; }
.table-density-compact .modern-data-table td { padding-top: 5px; padding-bottom: 5px; font-size: 10.5px; }
.table-density-compact .row-actions .row-link { min-height: 25px; padding-top: 3px; padding-bottom: 3px; }

.current-state-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; margin-bottom: 18px; border-left: 4px solid var(--green-700); }
.current-state-mark { width: 12px; height: 12px; background: var(--green-700); border: 3px solid color-mix(in srgb, var(--green-100) 75%, white); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-700) 16%, transparent); }
.current-state-copy h2 { margin: 2px 0 4px; font-size: 18px; }
.current-state-copy p { margin: 0; color: var(--slate-600); font-size: 12px; }
.current-state-archive { border-left-color: var(--slate-500); }
.current-state-archive .current-state-mark { background: var(--slate-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--slate-500) 16%, transparent); }
.current-state-service { border-left-color: #8b64c5; }
.current-state-service .current-state-mark { background: #8b64c5; box-shadow: 0 0 0 4px rgba(139, 100, 197, .16); }
.current-state-reserve { border-left-color: var(--amber-500); }
.current-state-reserve .current-state-mark { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(215, 151, 40, .16); }
.timeline-year { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; color: var(--slate-500); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.timeline-year::after { height: 1px; flex: 1; background: var(--surface-border); content: ""; }
.channel-current-panel { margin-bottom: 18px; padding: 0; overflow: hidden; border-left: 4px solid var(--green-700); }
.channel-current-panel.closed-channel { border-left-color: var(--slate-500); }
.channel-current-panel > .panel-heading { margin-bottom: 15px; padding: 18px 18px 0; }
.channel-current-panel > .panel-heading > div { min-width: 0; }
.channel-current-panel > .panel-heading h2,
.channel-current-panel > .panel-heading p { overflow-wrap: anywhere; }
.channel-current-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; }
.channel-current-card { padding: 14px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 11px; }
.channel-current-card > div { display: flex; align-items: center; gap: 9px; }
.channel-current-card strong { font-size: 13px; }
.channel-current-card p { margin: 7px 0 4px; color: var(--slate-700); font-size: 11px; }
.channel-current-card small { display: block; color: var(--slate-500); font-size: 10px; }
.channel-current-card .text-link { display: inline-flex; margin-top: 9px; font-size: 10px; }
.replacement-link { margin-top: 7px !important; padding: 7px 9px; color: var(--slate-700) !important; background: color-mix(in srgb, #8b64c5 9%, var(--surface-muted)); border-left: 3px solid #8b64c5; border-radius: 4px; }

@media (max-width: 700px) {
  .modern-table-panel .table-toolbar { align-items: stretch; }
  .table-toolbar-search { width: 100%; }
  .table-toolbar-search .button { width: auto; }
  .table-toolbar-meta { width: 100%; justify-content: space-between; }
  .table-toolbar-meta .button { width: auto; }
  .table-scroll-hint { display: block; margin: 0; padding: 8px 12px; color: var(--slate-500); background: var(--surface-muted); border-bottom: 1px solid var(--surface-border); font-size: 9px; text-align: center; }
  .modern-table-panel .table-wrap { max-height: 68vh; -webkit-overflow-scrolling: touch; }
  .modern-data-table { min-width: 720px; font-size: 10.5px; }
  .modern-data-table th, .modern-data-table td { padding: 8px 7px; }
  .modern-data-table .actions-column { width: 156px; min-width: 156px; }
  .current-state-panel { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 17px; }
  .current-state-panel .button { grid-column: 1 / -1; width: 100%; }
  .channel-current-panel > .panel-heading { padding: 16px 14px 0; }
  .channel-current-grid { grid-template-columns: 1fr; padding: 0 14px 14px; }
  .channel-history-item-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .timeline-year { padding-right: 12px; padding-left: 12px; }
}

@media (max-width: 430px) {
  .table-toolbar-search { flex-wrap: wrap; }
  .table-toolbar-search .search-field { width: 100%; flex-basis: 100%; }
  .table-toolbar-search .button { flex: 1; }
  .table-toolbar-meta { align-items: stretch; flex-direction: column; }
  .table-toolbar-meta .button { width: 100%; }
}

.access-source-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.access-stat-value { overflow: hidden; font-size: 18px !important; text-overflow: ellipsis; white-space: nowrap; }
.access-import-panel { padding: 0; overflow: hidden; }
.access-upload-form { display: grid; gap: 18px; padding: 20px; }
.access-upload-form input[type="file"] { min-height: 48px; padding: 9px; }
.access-safety-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.access-safety-list > div { padding: 13px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 10px; }
.access-safety-list strong, .access-safety-list span { display: block; }
.access-safety-list strong { margin-bottom: 4px; color: var(--slate-700); font-size: 11px; }
.access-safety-list span { color: var(--slate-500); font-size: 10px; }
.access-preview-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; border-left: 4px solid var(--green-700); }
.access-preview-hero h2 { margin: 3px 0 5px; }
.access-preview-hero p { margin: 0; color: var(--slate-500); font-size: 10px; }
.access-preview-hero code { overflow-wrap: anywhere; }
.access-preview-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.access-compare-panel { margin-bottom: 18px; }
.access-compare-panel .table-wrap { max-height: 560px; overflow: auto; }
.access-compare-table { min-width: 760px; }
.access-compare-table th:nth-child(1), .access-compare-table th:nth-child(2) { width: 28%; }
.access-compare-table th:nth-child(n+3) { width: 14.66%; text-align: right; }
.access-compare-table td:nth-child(n+3) { text-align: right; }
.access-delta { display: inline-flex; min-width: 52px; justify-content: flex-end; color: var(--slate-500); font-weight: 800; }
.access-delta.is-positive { color: var(--green-700); }
.access-delta.is-negative { color: var(--red-600); }
.access-details-panel { margin-bottom: 18px; }
.access-details-panel h2, .access-details-panel p { margin: 0; }
.access-details-panel h2 { margin-bottom: 5px; font-size: 16px; }
.access-details-panel p { color: var(--slate-600); font-size: 11px; }
.access-confirm-panel { align-items: flex-end; margin-bottom: 18px; }
.access-confirm-panel > div { min-width: 0; flex: 1; }
.access-confirm-form { display: grid; min-width: 300px; grid-template-columns: 125px auto; align-items: end; gap: 9px; }
.access-confirm-form .field { min-width: 0; }
.access-confirm-form .button { min-height: 42px; }
.access-entry-panel { align-items: center; margin-bottom: 18px; }
.access-entry-panel .button { flex: 0 0 auto; }
.access-pending-panel { margin-bottom: 18px; }

@media (max-width: 900px) {
  .access-preview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-confirm-panel { align-items: stretch; flex-direction: column; }
  .access-confirm-form { width: 100%; min-width: 0; }
}

@media (max-width: 700px) {
  .access-source-stats, .access-safety-list, .access-preview-stats { grid-template-columns: 1fr; }
  .access-preview-hero { align-items: flex-start; flex-direction: column; }
  .access-confirm-form { grid-template-columns: 1fr; }
  .access-confirm-form .button { width: 100%; }
  .access-entry-panel { align-items: stretch; flex-direction: column; }
  .access-entry-panel .button { width: 100%; }
}

/* Moja praca, kartoteka urządzenia i ekran wersji 2.7 */
.app-credit { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.app-credit a { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-600); font-weight: 750; text-decoration: none; }
.app-credit a:hover { text-decoration: underline; }
.app-credit .ui-icon { width: 13px; height: 13px; }
.app-credit span { padding-left: 12px; border-left: 1px solid var(--surface-border); }

.managed-table-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 14px; padding: 13px 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal-100) 72%, var(--surface-solid)), var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--teal-600) 25%, var(--surface-border)); border-radius: 13px; }
.managed-table-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--teal-600); background: color-mix(in srgb, var(--teal-100) 82%, white); border-radius: 11px; }
.managed-table-icon .ui-icon { width: 21px; height: 21px; }
.managed-table-notice strong, .managed-table-notice span { display: block; }
.managed-table-notice strong { margin-bottom: 2px; color: var(--slate-800); font-size: 11px; }
.managed-table-notice div > span { color: var(--slate-600); font-size: 10px; }

.workbench { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .55fr); gap: 14px; margin-bottom: 20px; }
.workbench-main, .workbench-activity { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 19px; box-shadow: 0 14px 42px rgba(7, 34, 48, .07); }
.workbench-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 21px 15px; }
.workbench-heading h2, .workbench-activity-heading h2 { margin: 2px 0 3px; font-size: 20px; }
.workbench-heading p { margin: 0; color: var(--slate-500); font-size: 10.5px; }
.workbench-total { display: flex; min-width: 98px; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 11px; }
.workbench-total strong { color: var(--premium-emerald); font-size: 24px; line-height: 1; }
.workbench-total span { max-width: 46px; color: var(--slate-500); font-size: 8.5px; line-height: 1.2; text-transform: uppercase; }
.workbench-total.has-work strong { color: var(--premium-red); }
.work-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 13px 13px; }
.work-card { --work-rgb: 25,214,162; position: relative; display: grid; min-height: 78px; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 12px; overflow: hidden; color: var(--slate-800); background: linear-gradient(135deg, var(--surface-solid), color-mix(in srgb, var(--surface-muted) 92%, rgb(var(--work-rgb)) 8%)); border: 1px solid rgba(var(--work-rgb), .18); border-radius: 12px; text-decoration: none; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.work-card:hover { transform: translateY(-2px); border-color: rgba(var(--work-rgb), .45); box-shadow: 0 11px 28px rgba(var(--work-rgb), .09); }
.work-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.work-card-icon { display: grid; width: 38px; height: 38px; place-items: center; color: rgb(var(--work-rgb)); background: rgba(var(--work-rgb), .1); border-radius: 10px; }
.work-card-icon .ui-icon { width: 19px; height: 19px; }
.work-card-copy { min-width: 0; }
.work-card-copy strong, .work-card-copy small { display: block; }
.work-card-copy strong { margin-bottom: 3px; font-size: 11px; }
.work-card-copy small { overflow: hidden; color: var(--slate-500); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.work-card-count { display: grid; min-width: 34px; height: 34px; place-items: center; color: rgb(var(--work-rgb)); background: rgba(var(--work-rgb), .1); border: 1px solid rgba(var(--work-rgb), .16); border-radius: 9px; font-size: 15px; font-weight: 900; }
.work-card-arrow { color: rgb(var(--work-rgb)); font-size: 16px; }
.work-card.is-complete { --work-rgb: 85,146,130; opacity: .76; }
.work-card-red { --work-rgb: 255,82,99; }.work-card-gold { --work-rgb: 225,157,35; }.work-card-cyan { --work-rgb: 57,169,255; }.work-card-violet { --work-rgb: 155,109,255; }.work-card-aqua { --work-rgb: 32,197,216; }
.workbench-activity { display: flex; padding: 18px; flex-direction: column; background: radial-gradient(circle at 100% 0, rgba(155,109,255,.14), transparent 42%), linear-gradient(145deg, var(--surface-solid), var(--surface-muted)); }
.workbench-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.workbench-activity-heading > .ui-icon { width: 23px; height: 23px; color: var(--premium-violet); }
.my-activity-list { display: grid; gap: 1px; flex: 1; }
.my-activity-item { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; padding: 8px 3px; border-bottom: 1px solid var(--surface-border); }
.my-activity-item > span { width: 7px; height: 7px; margin-top: 4px; background: var(--premium-emerald); border-radius: 50%; box-shadow: 0 0 0 4px rgba(25,214,162,.09); }
.my-activity-item strong, .my-activity-item small { display: block; }
.my-activity-item strong { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.my-activity-item small { margin-top: 2px; color: var(--slate-500); font-size: 8.5px; }
.workbench-history-link { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: var(--teal-600); font-size: 9.5px; font-weight: 800; text-decoration: none; }
.workbench-empty { display: flex; min-height: 160px; align-items: center; justify-content: center; padding: 20px; flex-direction: column; color: var(--slate-500); text-align: center; }
.workbench-empty .ui-icon { width: 31px; height: 31px; margin-bottom: 10px; color: var(--premium-emerald); }
.workbench-empty strong { color: var(--slate-700); font-size: 11px; }.workbench-empty span { max-width: 190px; margin-top: 4px; font-size: 9px; }

.device-profile-hero { --profile-rgb: 25,214,162; position: relative; display: grid; grid-template-columns: minmax(260px,.75fr) minmax(440px,1.25fr); gap: 22px; margin-bottom: 20px; padding: 25px 27px 0; overflow: hidden; color: white; background: radial-gradient(circle at 90% 0, rgba(var(--profile-rgb),.24), transparent 40%), linear-gradient(120deg,#071923,#0b2c38 58%,#13243d); border: 1px solid rgba(var(--profile-rgb),.24); border-radius: 23px; box-shadow: 0 22px 62px rgba(4,26,39,.2); isolation: isolate; }
.device-profile-hero::before { position: absolute; inset: 0; z-index: -1; opacity: .12; background-image: linear-gradient(rgba(130,222,226,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(130,222,226,.2) 1px,transparent 1px); background-size: 30px 30px; content: ""; }
.device-profile-glow { position: absolute; top: -160px; left: -90px; z-index: -1; width: 360px; height: 360px; background: radial-gradient(circle,rgba(var(--profile-rgb),.15),transparent 68%); }
.device-profile-archive { --profile-rgb: 130,151,162; }.device-profile-service { --profile-rgb: 155,109,255; }.device-profile-reserve { --profile-rgb: 255,189,74; }.device-profile-surface { --profile-rgb: 57,169,255; }
.device-profile-main { display: flex; min-width: 0; align-items: center; gap: 17px; padding-bottom: 23px; }
.device-profile-icon { display: grid; width: 72px; height: 72px; flex: 0 0 auto; place-items: center; color: rgb(var(--profile-rgb)); background: rgba(var(--profile-rgb),.1); border: 1px solid rgba(var(--profile-rgb),.25); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 14px 34px rgba(0,0,0,.18); }
.device-profile-icon .ui-icon { width: 37px; height: 37px; }
.device-profile-identity { min-width: 0; }
.device-profile-state { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #cae2e8; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.device-profile-state i { width: 7px; height: 7px; background: rgb(var(--profile-rgb)); border-radius: 50%; box-shadow: 0 0 12px rgba(var(--profile-rgb),.9); }
.device-profile-identity h2 { margin: 0 0 2px; color: #b9d2da; font-size: 14px; font-weight: 650; }
.device-profile-identity > strong { display: block; overflow-wrap: anywhere; font-size: clamp(22px,2.4vw,34px); line-height: 1.05; letter-spacing: -.03em; }
.device-profile-identity p { margin: 7px 0 0; color: #829eaa; font-size: 10px; }
.device-profile-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding-bottom: 18px; }
.device-profile-facts > div { min-width: 0; padding: 10px 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; backdrop-filter: blur(10px); }
.device-profile-facts > div:first-child { grid-column: 1 / -1; }
.device-profile-facts dt { margin-bottom: 3px; color: #7f9ba7; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.device-profile-facts dd { margin: 0; overflow: hidden; color: #f2fbfd; font-size: 10.5px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.device-profile-actions { display: flex; grid-column: 1 / -1; gap: 8px; margin: -6px 0 18px; }
.device-profile-metrics { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0 -27px; background: rgba(1,12,18,.29); border-top: 1px solid rgba(255,255,255,.08); }
.device-profile-metrics > :is(span,a) { display: flex; min-height: 69px; align-items: center; justify-content: center; padding: 10px; flex-direction: column; color: white; border-right: 1px solid rgba(255,255,255,.08); text-decoration: none; }
.device-profile-metrics > :last-child { border-right: 0; }
.device-profile-metrics strong { color: rgb(var(--profile-rgb)); font-size: 20px; }.device-profile-metrics small { margin-top: 2px; color: #829eaa; font-size: 8.5px; text-transform: uppercase; }
.device-profile-metrics .is-alert strong { color: var(--premium-red); }

.about-hero { position: relative; display: flex; min-height: 280px; align-items: center; justify-content: space-between; gap: 34px; margin-bottom: 16px; padding: clamp(30px,5vw,55px); overflow: hidden; color: white; background: linear-gradient(115deg,#061722,#0b3441 58%,#17243f); border: 1px solid rgba(25,214,162,.2); border-radius: 25px; box-shadow: 0 25px 75px rgba(4,26,39,.23); isolation: isolate; }
.about-hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .13; background-image: linear-gradient(rgba(121,223,220,.23) 1px,transparent 1px),linear-gradient(90deg,rgba(121,223,220,.23) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg,#000,transparent); }
.about-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }.about-orbit-one { top: -180px; right: -80px; width: 430px; height: 430px; box-shadow: inset 0 0 80px rgba(57,169,255,.12); }.about-orbit-two { right: 135px; bottom: -230px; width: 360px; height: 360px; box-shadow: inset 0 0 80px rgba(155,109,255,.12); }
.about-hero-copy { max-width: 790px; }.about-hero h1 { margin: 12px 0 10px; font-size: clamp(34px,5vw,58px); letter-spacing: -.05em; }.about-hero h1 em { color: #74f0cf; font-style: normal; }.about-hero p { max-width: 690px; margin: 0; color: #b3cbd3; font-size: 14px; }
.about-version-row { display: flex; align-items: center; gap: 18px; margin-top: 25px; color: #8da8b2; font-size: 9.5px; }.about-status { display: inline-flex; align-items: center; gap: 7px; }.about-status i { width: 7px; height: 7px; background: var(--premium-emerald); border-radius: 50%; box-shadow: 0 0 10px var(--premium-emerald); }
.about-version-seal { display: grid; width: 170px; height: 170px; flex: 0 0 auto; place-items: center; align-content: center; background: rgba(255,255,255,.055); border: 1px solid rgba(114,239,210,.2); border-radius: 50%; box-shadow: inset 0 0 50px rgba(25,214,162,.06),0 22px 55px rgba(0,0,0,.18); }.about-version-seal span,.about-version-seal small { color: #80a0aa; font-size: 8px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }.about-version-seal strong { margin: 4px 0; color: #70ebca; font-size: 32px; }
.about-highlights { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 16px; }.about-highlight { display: flex; min-height: 130px; gap: 12px; padding: 17px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 15px; box-shadow: 0 11px 32px rgba(7,34,48,.06); }.about-highlight > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: var(--premium-emerald); background: rgba(25,214,162,.1); border-radius: 11px; }.about-highlight .ui-icon { width: 21px; height: 21px; }.about-highlight h2 { margin: 2px 0 6px; font-size: 13px; }.about-highlight p { margin: 0; color: var(--slate-500); font-size: 9.5px; line-height: 1.55; }
.about-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 15px; }.release-history-panel { padding: 22px; }.release-timeline { display: grid; gap: 10px; }.release-item { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; padding: 16px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 13px; }.release-item.is-current { background: linear-gradient(135deg,color-mix(in srgb,var(--teal-100) 66%,var(--surface-solid)),var(--surface-solid)); border-color: color-mix(in srgb,var(--teal-600) 33%,var(--surface-border)); }.release-version strong,.release-version span { display: block; }.release-version strong { color: var(--teal-600); font-size: 20px; }.release-version span { margin-top: 3px; color: var(--slate-500); font-size: 8.5px; }.release-item ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.release-item li { display: grid; grid-template-columns: 15px minmax(0,1fr); gap: 7px; color: var(--slate-600); font-size: 10px; }.release-item li .ui-icon { width: 14px; height: 14px; color: var(--premium-emerald); }
.about-system-column { display: grid; align-content: start; gap: 15px; }.about-system-card,.about-cumulative-card { padding: 20px; }.about-system-list { display: grid; margin: 0; }.about-system-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--surface-border); }.about-system-list > div:last-child { border-bottom: 0; }.about-system-list dt { color: var(--slate-500); font-size: 9px; }.about-system-list dd { margin: 0; color: var(--slate-800); font-size: 9.5px; font-weight: 750; text-align: right; }.system-chip { display: inline-flex; padding: 5px 8px; color: var(--green-700); background: var(--green-100); border-radius: 99px; }.system-chip.is-error { color: var(--red-600); background: var(--red-100); }.about-cumulative-card { background: radial-gradient(circle at 100% 0,rgba(57,169,255,.15),transparent 42%),var(--surface); }.about-cumulative-icon { display: grid; width: 47px; height: 47px; place-items: center; color: var(--premium-cyan); background: rgba(57,169,255,.1); border-radius: 13px; }.about-cumulative-icon .ui-icon { width: 24px; height: 24px; }.about-cumulative-card h2 { margin: 14px 0 7px; font-size: 17px; }.about-cumulative-card p { margin: 0 0 15px; color: var(--slate-600); font-size: 10.5px; line-height: 1.6; }

@media (max-width: 1180px) {
  .workbench { grid-template-columns: 1fr; }.workbench-activity { min-height: 0; }.my-activity-list { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
  .about-highlights { grid-template-columns: repeat(2,minmax(0,1fr)); }.about-layout { grid-template-columns: 1fr; }.about-system-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .device-profile-hero { grid-template-columns: 1fr; }.device-profile-main { padding-bottom: 0; }.device-profile-actions { margin-top: -12px; }.about-version-seal { width: 130px; height: 130px; }.about-version-seal strong { font-size: 25px; }
}
@media (max-width: 700px) {
  .app-credit { align-items: center; flex-direction: column; gap: 5px; }.app-credit span { padding: 0; border: 0; }
  .managed-table-notice { grid-template-columns: auto minmax(0,1fr); }.managed-table-notice .button { grid-column: 1 / -1; width: 100%; }
  .workbench-heading { align-items: flex-start; }.work-queue { grid-template-columns: 1fr; }.work-card:last-child:nth-child(odd) { grid-column: auto; }.my-activity-list { grid-template-columns: 1fr; }
  .device-profile-hero { padding: 21px 18px 0; }.device-profile-main { align-items: flex-start; }.device-profile-icon { width: 58px; height: 58px; border-radius: 16px; }.device-profile-icon .ui-icon { width: 29px; height: 29px; }.device-profile-facts { grid-template-columns: 1fr; }.device-profile-facts > div:first-child { grid-column: auto; }.device-profile-actions { flex-direction: column; }.device-profile-actions .button { width: 100%; }.device-profile-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); margin-right: -18px; margin-left: -18px; }.device-profile-metrics > :is(span,a) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .about-hero { align-items: flex-start; flex-direction: column; }.about-version-seal { align-self: center; }.about-highlights,.about-system-column { grid-template-columns: 1fr; }.release-item { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 430px) {
  .workbench-heading { flex-direction: column; }.workbench-total { width: 100%; justify-content: flex-start; }.workbench-total span { max-width: none; }
  .work-card { grid-template-columns: auto minmax(0,1fr) auto; }.work-card-arrow { display: none; }.device-profile-main { flex-direction: column; }.device-profile-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-hero { padding: 27px 22px; }.about-hero h1 { font-size: 33px; }.about-version-row { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Wersja 2.8 — wspólny język stanów, podgląd kontekstowy i ekrany techniczne */
.focus-toggle { gap: 6px; color: var(--slate-600); background: transparent; border: 1px solid transparent; cursor: pointer; }
.focus-toggle[aria-pressed="true"] { color: #06271e; background: linear-gradient(135deg, #79f1d4, var(--premium-emerald)); border-color: rgba(25,214,162,.35); box-shadow: 0 8px 22px rgba(25,214,162,.17); }
.sidebar, .app-main { transition: transform 220ms ease, margin 220ms ease; }
html[data-focus="true"] .sidebar { transform: translateX(-100%); }
html[data-focus="true"] .app-main { margin-left: 0; }
html[data-focus="true"] .topbar-actions > a,
html[data-focus="true"] .topbar-actions > form { display: none; }
html[data-focus="true"] .topbar-search { width: min(480px, 38vw); flex-basis: 480px; }

.state-chip { display: inline-flex; min-height: 25px; align-items: center; gap: 6px; padding: 4px 9px; color: var(--state-color); background: var(--state-bg); border: 1px solid var(--state-border); border-radius: 99px; font-size: 9px; font-weight: 820; line-height: 1.2; white-space: nowrap; }
.state-chip .ui-icon { width: 13px; height: 13px; flex: 0 0 auto; }
.state-installed { --state-color: #087654; --state-bg: rgba(25,214,162,.12); --state-border: rgba(25,214,162,.27); }
.state-free { --state-color: #1875ad; --state-bg: rgba(57,169,255,.12); --state-border: rgba(57,169,255,.28); }
.state-service { --state-color: #a46707; --state-bg: rgba(255,189,74,.15); --state-border: rgba(255,189,74,.32); }
.state-fault { --state-color: #c82e42; --state-bg: rgba(255,82,99,.12); --state-border: rgba(255,82,99,.29); }
.state-planned { --state-color: #7046ce; --state-bg: rgba(155,109,255,.13); --state-border: rgba(155,109,255,.29); }
.state-archive { --state-color: var(--slate-600); --state-bg: rgba(126,147,159,.12); --state-border: rgba(126,147,159,.25); }
html[data-theme="dark"] .state-installed { --state-color: #6fe8c6; }
html[data-theme="dark"] .state-free { --state-color: #79c7fb; }
html[data-theme="dark"] .state-service { --state-color: #ffd281; }
html[data-theme="dark"] .state-fault { --state-color: #ff929e; }
html[data-theme="dark"] .state-planned { --state-color: #bea3ff; }
html[data-theme="dark"] .state-archive { --state-color: #afc0c8; }

.report-state-row { --row-state: var(--premium-cyan); }
.report-state-row.state-row-installed, .technical-table-row.state-row-installed { --row-state: var(--premium-emerald); }
.report-state-row.state-row-free, .technical-table-row.state-row-free { --row-state: var(--premium-cyan); }
.report-state-row.state-row-service { --row-state: var(--premium-gold); }
.report-state-row.state-row-fault, .technical-table-row.state-row-fault, .report-state-row.state-row-conflict { --row-state: var(--premium-red); }
.report-state-row.state-row-planned { --row-state: var(--premium-violet); }
.report-state-row.state-row-archive { --row-state: #8396a1; }
.report-state-row > td:first-child, .technical-table-row > td:first-child { box-shadow: inset 3px 0 0 var(--row-state); }
.row-device-icon { display: inline-grid; width: 24px; height: 24px; margin-right: 7px; place-items: center; vertical-align: middle; color: var(--row-state); background: color-mix(in srgb, var(--row-state) 11%, transparent); border-radius: 7px; }
.row-device-icon .ui-icon { width: 13px; height: 13px; }
.state-cell { display: inline-flex; align-items: center; gap: 5px; }
.row-expand-toggle { display: inline-grid; width: 27px; height: 27px; place-items: center; padding: 0; color: var(--slate-500); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.row-expand-toggle:hover { color: var(--teal-600); background: var(--surface-muted); border-color: var(--surface-border); }
.row-expand-toggle .ui-icon { width: 13px; height: 13px; transition: transform 160ms ease; }
.row-expand-toggle[aria-expanded="true"] .ui-icon { transform: rotate(90deg); }
.report-state-details[hidden] { display: none; }
.report-state-details td { padding: 0 !important; background: color-mix(in srgb, var(--surface-muted) 91%, var(--premium-cyan) 9%); }
.report-state-detail-grid { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px 15px 26px; border-bottom: 1px solid var(--surface-border); animation: detail-reveal 180ms ease-out; }
.report-state-detail-grid strong, .report-state-detail-grid small { display: block; }
.report-state-detail-grid strong { margin-bottom: 3px; font-size: 11px; }
.report-state-detail-grid small { color: var(--slate-500); font-size: 9.5px; }
.report-state-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.report-state-detail-actions .button { min-height: 31px; padding: 5px 9px; font-size: 9px; }

.preview-inline, .technical-title-button { padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.preview-inline { color: var(--teal-600); }
.preview-inline:hover, .technical-title-button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.quick-preview-backdrop { position: fixed; inset: 0; z-index: 78; background: rgba(2,14,21,.34); border: 0; cursor: default; opacity: 0; backdrop-filter: blur(2px); transition: opacity 180ms ease; }
.quick-preview-drawer { position: fixed; inset: 0 0 0 auto; z-index: 79; display: flex; width: min(460px, calc(100vw - 26px)); flex-direction: column; padding: 0; color: var(--slate-900); background: color-mix(in srgb, var(--surface-solid) 96%, transparent); border-left: 1px solid var(--surface-border); box-shadow: -22px 0 70px rgba(2,20,30,.22); transform: translateX(105%); visibility: hidden; backdrop-filter: blur(24px); transition: transform 220ms cubic-bezier(.2,.8,.2,1), visibility 220ms; }
body.preview-open .quick-preview-backdrop { opacity: 1; }
body.preview-open .quick-preview-drawer { transform: translateX(0); visibility: visible; }
.quick-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 24px 23px 18px; background: radial-gradient(circle at 90% 0,rgba(25,214,162,.16),transparent 47%),linear-gradient(145deg,var(--surface-solid),var(--surface-muted)); border-bottom: 1px solid var(--surface-border); }
.quick-preview-header h2 { margin: 3px 0 3px; font-size: 23px; line-height: 1.15; letter-spacing: -.025em; }
.quick-preview-header p { margin: 0; color: var(--slate-500); font-size: 10px; }
.quick-preview-content { display: grid; min-height: 0; align-content: start; gap: 16px; padding: 20px 23px 28px; overflow-y: auto; }
.quick-preview-state { display: grid; justify-items: start; gap: 5px; }
.quick-preview-state .state-chip { min-height: 30px; padding: 5px 11px; font-size: 10px; }
.quick-preview-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.quick-preview-facts > div { min-width: 0; padding: 11px 12px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 10px; }
.quick-preview-facts > div:nth-child(2) { grid-column: 1 / -1; }
.quick-preview-facts dt { color: var(--slate-500); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.quick-preview-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 10.5px; font-weight: 720; }
.quick-preview-section { display: grid; gap: 7px; }
.quick-preview-events { display: grid; gap: 8px; }
.preview-event { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 11px; }
.preview-event.is-alert { border-color: rgba(255,82,99,.28); }
.preview-event-icon { display: grid; width: 31px; height: 31px; place-items: center; color: var(--premium-cyan); background: rgba(57,169,255,.11); border-radius: 8px; }
.preview-event.is-alert .preview-event-icon { color: var(--premium-red); background: rgba(255,82,99,.11); }
.preview-event-icon .ui-icon { width: 16px; height: 16px; }
.preview-event small, .preview-event strong { display: block; }
.preview-event small { color: var(--slate-500); font-size: 8px; }
.preview-event strong { margin: 2px 0; font-size: 10px; }
.preview-event p { margin: 0; color: var(--slate-600); font-size: 9px; }
.quick-preview-full { width: 100%; gap: 7px; }
.quick-preview-full .ui-icon { width: 14px; height: 14px; }
.quick-preview-empty { margin: 0; padding: 16px; color: var(--slate-500); background: var(--surface-muted); border: 1px dashed var(--surface-border); border-radius: 11px; font-size: 10px; text-align: center; }
.quick-preview-loading { display: grid; min-height: 200px; place-items: center; align-content: center; gap: 10px; color: var(--slate-500); font-size: 10px; }
.quick-preview-loading p { margin: 0; }
.preview-spinner { width: 28px; height: 28px; border: 3px solid var(--surface-border); border-top-color: var(--premium-emerald); border-radius: 50%; animation: preview-spin 700ms linear infinite; }

.relation-panel { margin-bottom: 16px; padding: 17px 19px; overflow: hidden; background: radial-gradient(circle at 0 50%,rgba(57,169,255,.08),transparent 32%),var(--surface); }
.relation-panel .panel-heading { margin-bottom: 12px; padding: 0; border: 0; }
.relation-flow { display: flex; min-width: 0; align-items: stretch; gap: 7px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; }
.relation-node { display: flex; min-width: 112px; max-width: 250px; flex: 1 1 auto; justify-content: center; padding: 9px 10px; flex-direction: column; color: var(--slate-800); background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: 9px; text-align: left; text-decoration: none; }
button.relation-node { cursor: pointer; font: inherit; }
:is(a,button).relation-node:hover { color: var(--teal-600); background: var(--surface-solid); border-color: rgba(25,214,162,.39); box-shadow: 0 7px 19px rgba(7,35,48,.07); }
.relation-node small { color: var(--slate-500); font-size: 7.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.relation-node strong { margin-top: 2px; overflow-wrap: anywhere; font-size: 9.5px; }
.relation-device { border-top-color: var(--premium-violet); }.relation-channel { border-top-color: var(--premium-emerald); }.relation-pair { border-top-color: var(--premium-gold); }.relation-cable { border-top-color: var(--premium-cyan); }.relation-location { border-top-color: #8396a1; }
.relation-arrow { display: grid; flex: 0 0 18px; place-items: center; color: var(--slate-500); font-size: 15px; }
.relation-flow > .ui-icon { width: 12px; min-width: 12px; align-self: center; color: var(--slate-500); }
.relation-flow-compact { margin-top: 10px; }
.relation-flow-compact .relation-node { min-width: 100px; padding: 7px 8px; }
.relation-flow-drawer { align-items: center; }
.relation-flow-drawer .relation-node { min-width: 104px; flex-basis: 104px; }

.technical-screen { position: relative; isolation: isolate; }
.technical-screen::before { position: absolute; inset: -15px; z-index: -1; background-image: linear-gradient(rgba(57,169,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(57,169,255,.055) 1px,transparent 1px),radial-gradient(circle at 100% 0,rgba(25,214,162,.08),transparent 34%); background-size: 28px 28px,28px 28px,auto; border: 1px solid rgba(57,169,255,.08); border-radius: 22px; content: ""; pointer-events: none; }
.technical-heading h1 { color: #0c3444; font-family: "Bahnschrift","Arial Narrow",Inter,sans-serif; letter-spacing: -.025em; }
html[data-theme="dark"] .technical-heading h1 { color: #c9eef4; }
.technical-heading .eyebrow { color: var(--premium-cyan); }
.technical-screen .data-table th { color: #386071; background: color-mix(in srgb,var(--surface-muted) 82%,rgba(57,169,255,.18)); font-family: "Bahnschrift SemiCondensed","Arial Narrow",Inter,sans-serif; letter-spacing: .035em; }
.technical-screen .panel { border-color: color-mix(in srgb,var(--surface-border) 76%,var(--premium-cyan) 24%); }

.flow-filter-panel { margin-bottom: 15px; padding: 15px; }
.flow-filter { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(2,minmax(140px,.55fr)) auto; align-items: end; gap: 10px; }
.device-flow-panel, .flow-transition-panel { margin-bottom: 15px; padding: 20px; overflow: hidden; }
.device-flow-panel { background: radial-gradient(circle at 0 0,rgba(57,169,255,.10),transparent 34%),radial-gradient(circle at 100% 100%,rgba(155,109,255,.08),transparent 34%),var(--surface); }
.device-flow-diagram { display: grid; grid-template-columns: minmax(125px,1fr) 72px minmax(125px,1fr) 72px minmax(125px,1fr) 72px minmax(125px,1fr) 72px minmax(125px,1fr); align-items: center; gap: 5px; overflow-x: auto; padding: 19px 2px 6px; }
.flow-node { display: grid; min-height: 138px; align-content: center; justify-items: center; gap: 4px; padding: 14px 10px; background: var(--surface-solid); border: 1px solid var(--surface-border); border-top: 3px solid var(--node-color); border-radius: 14px; box-shadow: 0 12px 31px rgba(4,29,42,.07); text-align: center; }
.flow-node-free { --node-color: var(--premium-cyan); }.flow-node-installed { --node-color: var(--premium-emerald); }.flow-node-fault { --node-color: var(--premium-red); }.flow-node-service { --node-color: var(--premium-gold); }.flow-node-planned { --node-color: var(--premium-violet); }
.flow-node > strong { color: var(--node-color); font-size: 28px; line-height: 1.1; }
.flow-node > small { color: var(--slate-500); font-size: 8px; }
.flow-arrow { display: grid; justify-items: center; gap: 2px; color: var(--premium-emerald); text-align: center; }
.flow-arrow .ui-icon { width: 24px; height: 24px; }
.flow-arrow span { font-size: 14px; font-weight: 850; }.flow-arrow small { color: var(--slate-500); font-size: 7.5px; }
.flow-arrow-fault { color: var(--premium-red); }.flow-arrow-service { color: var(--premium-gold); }.flow-arrow-planned { color: var(--premium-violet); }
.flow-transition-list { display: grid; gap: 9px; }
.flow-transition-row { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(180px,2fr) 55px; align-items: center; gap: 12px; }
.flow-transition-row > span { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }.flow-transition-row > span .ui-icon { width: 13px; height: 13px; color: var(--slate-500); }
.flow-transition-row > b { color: var(--slate-700); font-size: 11px; text-align: right; }
.flow-transition-track { height: 8px; overflow: hidden; background: var(--surface-muted); border-radius: 99px; }
.flow-transition-track i { display: block; width: var(--flow-strength); height: 100%; background: linear-gradient(90deg,var(--premium-cyan),var(--premium-emerald)); border-radius: inherit; }
.flow-transition-track .state-bg-fault { background: linear-gradient(90deg,var(--premium-gold),var(--premium-red)); }.flow-transition-track .state-bg-service { background: linear-gradient(90deg,var(--premium-gold),var(--premium-violet)); }.flow-transition-track .state-bg-planned { background: linear-gradient(90deg,var(--premium-violet),var(--premium-emerald)); }
.flow-note { margin: 18px 0 0; padding-top: 13px; color: var(--slate-500); border-top: 1px solid var(--surface-border); font-size: 9px; }

.operation-dialog { width: min(790px,calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow: auto; color: var(--slate-900); background: var(--surface-solid); border: 1px solid var(--surface-border); border-radius: 19px; box-shadow: 0 28px 90px rgba(2,18,27,.35); }
.operation-dialog::backdrop { background: rgba(2,14,21,.55); backdrop-filter: blur(5px); }
.operation-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 21px 22px 14px; background: radial-gradient(circle at 100% 0,rgba(25,214,162,.15),transparent 46%),var(--surface-muted); border-bottom: 1px solid var(--surface-border); }
.operation-dialog-heading h2 { margin: 3px 0 0; font-size: 21px; }
.operation-dialog-lead { margin: 0; padding: 17px 22px 0; color: var(--slate-600); font-size: 10.5px; }
.operation-summary { display: grid; gap: 12px; padding: 16px 22px 20px; }
.operation-summary-flow { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.operation-summary-flow > .ui-icon { width: 17px; min-width: 17px; align-self: center; color: var(--slate-500); }
.operation-summary-node { min-width: 120px; flex: 1; padding: 11px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-top: 3px solid var(--premium-cyan); border-radius: 10px; }
.operation-summary-node.is-out { border-top-color: var(--premium-gold); }.operation-summary-node.is-in { border-top-color: var(--premium-emerald); }
.operation-summary-node small, .operation-summary-node strong { display: block; }.operation-summary-node small { color: var(--slate-500); font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.operation-summary-node strong { margin-top: 3px; overflow-wrap: anywhere; font-size: 9.5px; }
.operation-summary-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.operation-summary-meta .operation-summary-node { border-top-width: 1px; }
.operation-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--surface-border); }
.operation-dialog-actions .button { gap: 6px; }.operation-dialog-actions .ui-icon { width: 14px; height: 14px; }

.content > * { animation: page-enter 240ms ease-out both; }
.content > *:nth-child(2) { animation-delay: 25ms; }.content > *:nth-child(3) { animation-delay: 50ms; }
@keyframes page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detail-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes preview-spin { to { transform: rotate(360deg); } }

@media (max-width: 1150px) {
  .device-flow-diagram { grid-template-columns: repeat(9,minmax(95px,1fr)); }
  .flow-node { min-width: 120px; }
}
@media (max-width: 760px) {
  html[data-focus="true"] .topbar-search { width: auto; }
  .quick-preview-facts { grid-template-columns: 1fr; }.quick-preview-facts > div:nth-child(2) { grid-column: auto; }
  .report-state-detail-grid { align-items: stretch; flex-direction: column; }.report-state-detail-actions .button { flex: 1; }
  .flow-filter { grid-template-columns: 1fr; }.flow-filter .button { width: 100%; }
  .flow-transition-row { grid-template-columns: 1fr 54px; }.flow-transition-row > span { grid-column: 1 / -1; }.flow-transition-track { grid-column: 1; }
  .operation-summary-meta { grid-template-columns: 1fr; }.operation-dialog-actions { flex-direction: column-reverse; }.operation-dialog-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .content > *, .preview-spinner { animation: none !important; }
  .sidebar, .app-main, .quick-preview-drawer, .quick-preview-backdrop, .row-expand-toggle .ui-icon { transition: none !important; }
}

@media print {
  body { color: #000; background: #fff; font-size: 9pt; }
  .sidebar, .topbar, .sidebar-backdrop, .quick-preview-backdrop, .quick-preview-drawer, .app-credit, .public-credit, .no-print, .alert, .table-scroll-hint { display: none !important; }
  .app-main { margin: 0; }
  .content { width: 100%; padding: 0; }
  .panel { border: 0; box-shadow: none; }
  .table-panel { overflow: visible; }
  .table-wrap { overflow: visible; }
  .data-table { white-space: normal; }
  .data-table th { position: static; color: #000; background: #eee; }
  .modern-data-table th.actions-column, .modern-data-table td.actions-column { position: static; box-shadow: none; }
  .data-table th, .data-table td { padding: 4px 5px; border: 1px solid #bbb; }
  .report-table-wrap { max-height: none; scrollbar-gutter: auto; }
  .report-table { width: 100%; table-layout: fixed; font-size: 7pt; }
  .report-table th, .report-table td, .report-table .report-column-wide { min-width: 0; overflow-wrap: anywhere; }
  .history-grid { grid-template-columns: 1fr 1fr; }
  .print-heading { margin-bottom: 12px; }
  @page { margin: 12mm; size: landscape; }
}