/* =========================================================
   LDS Admin v HMI — Projekty, Zařízení, Monitoring.
   Vlastní stavové barvy --lx-* (ne sémantické barvy schématu
   --live/--dead/--earth/--fault, ty patří jen přístrojům).
   ========================================================= */
:root {
  --lx-ok: #1D6E4F;   --lx-ok-bg: #E2EFE8;
  --lx-warn: #8A5A00; --lx-warn-bg: #F6EBD3;
  --lx-bad: #A8231B;  --lx-bad-bg: #F7E1DE;
  --lx-info: #1F58B0; --lx-info-bg: #E2EAF6;
  --lx-mute: #5B646D; --lx-mute-bg: #E9ECEF;
  --lx-amber: #A86200;
  --lx-mervis: #1F58B0; --lx-plc: #95470F; --lx-api: #5B646D;
  --lx-line: #D5DAE0;
}

.lx-i { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.btn .lx-i { margin-right: 6px; }
.btn.sm .lx-i:only-child, .btn .lx-i:last-child:not(:first-child) { margin: 0; }
.btn.sm .lx-i:last-child:not(:first-child) { margin-left: 4px; }
.lx-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; font: 700 12px var(--font-cond); line-height: 1; color: #fff; background: var(--lx-amber); border-radius: 999px; }
.btn.amber:hover .lx-badge { background: #fff; color: var(--lx-amber); }
/* tlačítko volá k akci, když čekají změny: plná výplň + jemný pulz */
.btn.amber.needs { background: var(--lx-amber); color: #fff; animation: lxPulse 2s ease-in-out infinite; }
.btn.amber.needs:hover:not(:disabled) { background: #92400E; color: #fff; }
.btn.amber.needs .lx-badge { background: #fff; color: var(--lx-amber); }
@keyframes lxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, .5); } 50% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); } }
@media (prefers-reduced-motion: reduce) { .btn.amber.needs { animation: none; } }
.lx-syncban .btn { margin-top: 8px; }
.btn.amber { border-color: var(--lx-amber); color: var(--lx-amber); background: var(--panel); }
.btn.amber:hover:not(:disabled) { background: var(--lx-amber); color: #fff; }
.btn.danger { border-color: var(--lx-bad); color: var(--lx-bad); background: var(--panel); }
.btn.danger:hover:not(:disabled) { background: var(--lx-bad); color: #fff; }
.btn.primary.danger { background: var(--lx-bad); color: #fff; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.lx-sp { flex: 1; }
.lx-small { font-size: 15px; }
.lx-mono { font-family: "IBM Plex Mono", Consolas, monospace; font-size: .9em; }
.lx-pad { padding: 16px 18px; }
.r { text-align: right !important; }
kbd { font: 600 13px var(--font-cond); border: 1px solid var(--rule); border-bottom-width: 2px; padding: 0 5px; background: var(--panel); }

/* ---------- hlavička, drobečky, záložky ---------- */
.lx-head { gap: 10px 14px; }
.lx-head h1 { margin-right: 4px; }
.lx-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-crumb { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text-2); margin: 10px 0 4px; }
.lx-crumb a { color: var(--text-2); }
.lx-crumb a:hover { color: var(--text); }
.lx-crumb .lx-i { width: .8em; }
.lx-crumb span:last-child { color: var(--text); font-weight: 600; }
.lx-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--rule); margin-bottom: 16px; flex-wrap: wrap; }
.lx-tabs button { background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; padding: 10px 18px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.lx-tabs button:hover { color: var(--text); background: var(--panel); }
.lx-tabs button.on { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.lx-lbl { display: flex; flex-direction: column; gap: 3px; font: 600 13px var(--font-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.lx-lbl.in { flex-direction: row; align-items: center; gap: 8px; }
.lx-lbl select, .lx-lbl input, .lx-fld input, .lx-fld select, .lx-fld textarea, .lx-in, .lx-rf select, .lx-wdtbl select {
  font: 400 17px var(--font); text-transform: none; letter-spacing: 0; color: var(--text); min-height: 38px;
  background: var(--panel); border: 1px solid var(--rule); padding: 4px 8px; }
.lx-lbl select:focus, .lx-lbl input:focus, .lx-fld :is(input, select, textarea):focus, .lx-in:focus { outline: 2px solid var(--text); outline-offset: 0; }
.lx-seg { display: inline-flex; border: 1px solid var(--rule); background: var(--panel); }
.lx-seg button { border: 0; background: transparent; padding: 6px 14px; min-height: 38px; cursor: pointer; color: var(--text-2); font-weight: 500; }
.lx-seg button + button { border-left: 1px solid var(--rule); }
.lx-seg button.on { background: var(--text); color: var(--ground); }
.lx-seg button:disabled { cursor: not-allowed; opacity: .5; }
.lx-search { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: var(--panel); padding: 0 10px; min-height: 40px; min-width: 260px; }
.lx-search .lx-i { color: var(--text-2); }
.lx-search input { border: 0; background: none; font-size: 17px; flex: 1; min-width: 0; padding: 6px 0; outline: none; }
.lx-search:focus-within { outline: 2px solid var(--text); }
.lx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0; }
.panel > .lx-bar { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.lx-bar h2 { font-size: 21px; }
.lx-load { padding: 28px 14px; color: var(--text-2); }
.lx-load::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; border: 2px solid var(--rule); border-top-color: var(--text); border-radius: 50%; animation: lx-spin .8s linear infinite; vertical-align: -2px; }
@keyframes lx-spin { to { transform: rotate(360deg); } }

/* ---------- stavové štítky ---------- */
.lx-st { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font-cond); letter-spacing: .04em; padding: 1px 9px 1px 7px; white-space: nowrap; border: 1px solid currentColor; }
.lx-st::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.lx-st.ok { color: var(--lx-ok); background: var(--lx-ok-bg); }
.lx-st.warn { color: var(--lx-warn); background: var(--lx-warn-bg); }
.lx-st.bad { color: var(--lx-bad); background: var(--lx-bad-bg); }
.lx-st.info { color: var(--lx-info); background: var(--lx-info-bg); }
.lx-st.mute { color: var(--lx-mute); background: var(--lx-mute-bg); }
.lx-src { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font-cond); letter-spacing: .04em; white-space: nowrap; }
.lx-src.mervis { color: var(--lx-mervis); }
.lx-src.plc { color: var(--lx-plc); }
.lx-src.api { color: var(--lx-api); }
.lx-tag { font: 600 13px var(--font-cond); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--rule); padding: 0 6px; white-space: nowrap; }
.lx-tag.off { border-style: dashed; }
.lx-kind { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font-cond); letter-spacing: .05em; text-transform: uppercase; padding: 1px 8px; border: 1px solid var(--text); }
.lx-kind.amm { border-style: dashed; }
.lx-kind.tlt { border-color: #0b4fa8; padding: 4px 9px; }
.lx-kind.tlt img { height: 12px; width: auto; display: block; }
.lx-tile-brand .lx-tile-logo { height: 22px; width: auto; display: block; margin: 2px 0 8px; }
.lx-kb.k-tlt { background: var(--k-tlt); }
.lx-kb.lx-kb-logo { background: #FFFFFF; border: 1px solid var(--rule); }
.lx-kb.lx-kb-logo img { width: 62%; height: 62%; object-fit: contain; display: block; }
.lx-kb.lx-kb-wide { width: auto; padding: 0 12px; }
.lx-kb.lx-kb-wide img { width: auto; height: 17px; }
.screen-head h1 .lx-kb.lx-kb-wide, .lx-prow .lx-kb.lx-kb-wide { width: auto; padding: 0 14px; }
.screen-head h1 .lx-kb.lx-kb-wide img { height: 20px; }
/* Teltonika: formulář ve dvou sloupcích, výpis konfigurace, informační proužek */
.lx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .lx-2col { grid-template-columns: 1fr; } }
.lx-pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; line-height: 1.45; padding: 10px 12px; border-radius: 8px; background: var(--bg-2, rgba(127,127,127,.08)); max-height: 50vh; overflow: auto; }
.lx-banner.info { border-color: #6ea8e0; }
.lx-meas { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; }
.lx-meas::before { content: ""; width: 10px; height: 10px; background: var(--mc); }
.lx-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; background: currentColor; }

/* ---------- karty a mřížky ---------- */
.lx-grid { display: grid; gap: 14px; }
.lx-pgrid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.lx-egrid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.lx-dgrid { grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr)); }
.lx-ogrid, .lx-agrid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); margin-bottom: 18px; }
.lx-card { background: var(--panel); border: 1px solid var(--rule); position: relative; display: flex; flex-direction: column; min-width: 0; }
.lx-card h3 { font-size: 20px; line-height: 1.25; }
.lx-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-2); flex: none; }
.lx-ic:hover { border-color: var(--rule); color: var(--text); background: var(--panel-2); }
.lx-ic .lx-i { width: 18px; height: 18px; }

/* projekt */
.lx-pc { cursor: pointer; }
.lx-pc:hover, .lx-dc:hover { border-color: var(--text-2); }
.lx-pc:focus-visible, .lx-dc:focus-visible { outline: 3px solid var(--text); }
.lx-pc.off .lx-pc-b h3 { color: var(--text-2); }
.lx-pc.del { cursor: default; }
.lx-pc.del > :not(.lx-delov):not(.lx-prog) { opacity: .35; filter: grayscale(1); }
.lx-media { position: relative; height: 150px; overflow: hidden; background: var(--panel-2); border-bottom: 1px solid var(--rule); }
.lx-media-tl, .lx-media-tr { position: absolute; top: 10px; display: flex; gap: 6px; }
.lx-media-tl { left: 10px; } .lx-media-tr { right: 10px; }
.lx-dom { font: 600 13px var(--font-cond); letter-spacing: .05em; background: var(--panel); border: 1px solid var(--rule); padding: 1px 7px; }
.lx-media .lx-st { background: var(--panel); }
.lx-ph { height: 100%; display: grid; place-items: center; color: var(--rule);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(20,24,28,.04) 14px 15px); }
.lx-ph .lx-i { width: 64px; height: 64px; stroke-width: 1.2; color: var(--text-2); opacity: .35; }
.lx-pc-b { padding: 12px 14px 4px; flex: 1; }
.lx-pc-b h3 { display: flex; align-items: flex-start; gap: 6px; justify-content: space-between; }
.lx-pc-b p { margin: 6px 0 0; font-size: 16px; }
.lx-pc-n { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-2); font-size: 15px !important; }
.lx-pc-f { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--lx-line); margin-top: 10px; flex-wrap: nowrap; min-height: 52px; }
/* zdroj vždy vlevo na jednom řádku s ikonami; štítky se při nedostatku místa zkrátí */
.lx-pc-tags { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.lx-pc-tags > * { flex: none; }
.lx-pc-tags > .lx-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lx-delov { position: absolute; inset: 0 0 4px; display: grid; place-content: center; grid-auto-flow: column; gap: 10px; align-items: center; font-weight: 600; }
.lx-spin { width: 18px; height: 18px; border: 2px solid var(--rule); border-top-color: var(--text); border-radius: 50%; animation: lx-spin .8s linear infinite; }
.lx-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--lx-line); }
.lx-prog i { display: block; height: 100%; background: var(--text); transition: width .8s linear; }

/* mini mapa */
.lx-mini { position: relative; overflow: hidden; max-width: 100%; background: #E8E6E1; }
.lx-media .lx-mini { width: 100% !important; height: 100% !important; }
.lx-mini img { position: absolute; width: 256px; height: 256px; filter: saturate(.55) contrast(.95); }
.lx-media .lx-mini img { transform: translateX(calc(50% - 50%)); }
.lx-mini-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--text); }
.lx-mini-pin .lx-i { width: 30px; height: 30px; fill: var(--panel); stroke-width: 2; }
.lx-mini-at { position: absolute; right: 0; bottom: 0; font-size: 11px; background: rgba(255,255,255,.8); padding: 0 4px; color: var(--text-2); }
.lx-info .lx-mini { width: 100% !important; margin-top: 12px; border: 1px solid var(--rule); }

/* karta prvku */
.lx-el header { display: flex; align-items: flex-start; gap: 8px; padding: 12px 10px 0 14px; }
.lx-el header h3 { flex: 1; font-size: 19px; }
.lx-el-meta { display: flex; justify-content: space-between; gap: 10px; padding: 2px 14px 10px; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--lx-line); }
.lx-slots { padding: 10px 12px; display: grid; gap: 8px; }
.lx-slots .r3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lx-slots .r2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lx-slot { border-left: 4px solid var(--mc); background: var(--panel-2); padding: 5px 8px 6px; min-width: 0; }
.lx-slot.empty { border-left-color: transparent; background: transparent; }
.lx-slot-l { display: block; font: 600 13px var(--font-cond); letter-spacing: .03em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-slot .lx-v { font-size: 19px; }
.lx-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-v.bad { color: var(--text-2); font-weight: 400; text-decoration: line-through dotted; }
.lx-fb { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin: 0; padding: 10px 14px; font-size: 17px; }
.lx-fb dt { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-fb dd { margin: 0; text-align: right; }
.lx-el footer { margin-top: auto; padding: 8px 12px 12px; display: flex; gap: 8px; }
.lx-emptybox { border: 1px dashed var(--rule); padding: 40px 20px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.lx-emptybox .lx-i { width: 48px; height: 48px; stroke-width: 1.2; color: var(--text-2); }
.lx-emptybox h2 { font-size: 22px; }
.lx-emptybox p { max-width: 60ch; margin: 0; }
.lx-other { margin-top: 20px; }
.lx-other summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; padding: 10px 0; list-style: none; }
.lx-other summary::before { content: "▸"; color: var(--text-2); }
.lx-other[open] summary::before { content: "▾"; }
.lx-other summary h2 { font-size: 21px; }
.lx-tbl td { font-size: 17px; }
.lx-tbl tr[data-go] { cursor: pointer; }
.lx-tbl td.lx-ar { text-align: right; width: 40px; color: var(--text-2); }
.lx-tbl td.lx-ar .lx-i { width: 18px; height: 18px; vertical-align: middle; }
.lx-tbl tr[data-go]:hover td { background: var(--panel-2); }

/* záložka historie */
.lx-hist { max-width: 1100px; }
.lx-opts { display: grid; gap: 12px; }
.lx-opt { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; background: var(--panel); border: 1px solid var(--rule); padding: 14px 16px; cursor: pointer; }
.lx-opt > input { grid-row: span 2; margin-top: 6px; width: 20px; height: 20px; accent-color: var(--text); }
.lx-opt > b { font-size: 19px; }
.lx-opt > span { color: var(--text-2); }
.lx-opt.on { border: 2px solid var(--text); padding: 13px 15px; }
.lx-opt.dis { opacity: .55; cursor: not-allowed; }
.lx-opt-f { grid-column: 2; display: none; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.lx-opt.on .lx-opt-f { display: flex; }

/* správa skupin */
.lx-grp { background: var(--panel); border: 1px solid var(--rule); margin-bottom: 8px; }
.lx-grp > header { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; flex-wrap: wrap; }
.lx-grp.open > header { border-bottom: 1px solid var(--lx-line); }
.lx-grp.loose { border-style: dashed; }
.lx-grp.drop { outline: 3px solid var(--text); outline-offset: -1px; background: var(--panel-2); }
.lx-gt { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 6px 8px; font-weight: 600; font-size: 18px; }
.lx-gt .lx-i { transition: transform .15s; color: var(--text-2); }
.lx-grp.open .lx-gt .lx-i { transform: rotate(90deg); }
.lx-dps td { padding: 4px 8px; }
.lx-dps td:first-child, .lx-dps th:first-child { width: 36px; }
.lx-dps tr { cursor: default; }
.lx-dps tr.sel td { background: #E4E8EE; }
.lx-dps tr.saved td { background: var(--lx-ok-bg); transition: background .2s; }
.lx-dps .lx-in { width: 100%; min-height: 34px; font-size: 16px; }
.lx-dps .lx-in.u { width: 90px; }
.lx-dps select.lx-in { width: auto; }
.lx-dps tr[draggable="true"] td:nth-child(2) { cursor: grab; }
body.lx-dragging .lx-grp:not(.open) { min-height: 54px; }
.lx-drop-hint { padding: 16px; color: var(--text-2); border-top: 1px dashed var(--rule); }
.lx-selbar { position: sticky; bottom: 10px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  background: var(--text); color: var(--ground); padding: 10px 16px; margin-top: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.lx-selbar .lx-lbl { color: #C9CED4; }
.lx-selbar select { background: var(--panel); color: var(--text); }
.lx-selbar .btn { border-color: var(--ground); color: var(--ground); background: transparent; }
.lx-synclist { max-height: 46vh; overflow: auto; margin: 10px 0 0; padding-left: 20px; font-size: 16px; }
.lx-synclist li { margin: 3px 0; }
.lx-synclist code { font-size: 14px; }

/* dialogy */
.lx-dlg { width: min(620px, 100%); max-height: calc(100vh / var(--z) - 40px); display: flex; flex-direction: column; background: var(--panel-2); }
.lx-dlg.wide { width: min(880px, 100%); }
.lx-dlg-h { display: flex; align-items: flex-start; gap: 10px; }
.lx-dlg-h h2 { flex: 1; }
.lx-dlg-b { overflow: auto; margin: 0 -4px; padding: 0 4px 4px; }
.lx-dlg-b > p { margin: 0 0 12px; }
/* systémové potvrzení (lxAsk) */
.lx-dlg.lx-askdlg { width: min(460px, 100%); }
.lx-ask { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0 6px; }
.lx-ask .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lx-ask .ic .lx-i { width: 22px; height: 22px; }
.lx-ask.t-danger .ic { background: #FEE4E2; color: #D92D20; }
.lx-ask.t-warn .ic { background: #FEF0C7; color: #B54708; }
.lx-ask.t-info .ic { background: #EBE9FE; color: #5B3FD6; }
.lx-ask .tx { min-width: 0; }
.lx-ask .m { margin: 2px 0 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.lx-ask .m b { font-weight: 700; }
.lx-ask .d { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.lx-dlg .actions { margin-top: 16px; align-items: center; }
.lx-fld { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--text-2); font-weight: 500; margin-bottom: 12px; }
.lx-fld :is(input, select, textarea) { width: 100%; }
.lx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.lx-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.lx-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; }
.lx-chk input { width: 18px; height: 18px; accent-color: var(--text); }
.lx-chk.dis { color: var(--text-2); cursor: default; }
.lx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lx-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px; background: var(--panel); border: 1px solid var(--rule); cursor: pointer; }
.lx-tile .lx-i { width: 30px; height: 30px; stroke-width: 1.5; margin-bottom: 4px; }
.lx-tile b { font-size: 18px; }
.lx-tile span { color: var(--text-2); font-size: 15px; }
.lx-tile:hover:not(:disabled) { border: 2px solid var(--text); padding: 15px; }
.lx-tile:disabled { cursor: not-allowed; opacity: .5; border-style: dashed; }
.lx-pick { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.lx-key { display: grid; gap: 6px; }
.lx-kl { font: 600 13px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-top: 8px; }
.lx-krow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-krow code { flex: 1; min-width: 200px; font-size: 15px; background: var(--panel); border: 1px solid var(--rule); padding: 7px 10px; word-break: break-all; }
.lx-curl { margin: 0; background: #1B2026; color: #E4E8EC; padding: 12px 14px; font-size: 14px; overflow-x: auto; white-space: pre; }
.lx-slotgrid { display: grid; gap: 6px; }
.lx-slotrow { display: grid; grid-template-columns: 30px 1.3fr 1fr; gap: 8px; align-items: center; }
.lx-slotn { font: 700 16px var(--font-cond); text-align: center; border: 1px solid var(--rule); background: var(--panel); padding: 5px 0; }
.lx-slotrow select, .lx-slotrow input { min-height: 36px; font-size: 16px; border: 1px solid var(--rule); background: var(--panel); padding: 3px 6px; min-width: 0; }
.lx-toast { position: fixed; right: 20px; top: 20px; z-index: 95; max-width: min(620px, 90vw); background: var(--text); color: var(--ground); padding: 12px 18px;
  font-weight: 500; box-shadow: 0 8px 26px rgba(0,0,0,.28); transform: translateY(-20px); opacity: 0; pointer-events: none; transition: .2s; }
.lx-toast.show { transform: none; opacity: 1; }
.lx-toast.bad { background: var(--lx-bad); color: #fff; }
.lx-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 14px; border: 1px solid currentColor; }
.lx-banner.warn { color: var(--lx-warn); background: var(--lx-warn-bg); }
.lx-banner > div { color: var(--text); }
.lx-banner .lx-i { width: 24px; height: 24px; margin-top: 2px; }
.lx-banner .btn { margin-top: 8px; }

/* ---------- zařízení ---------- */
.lx-stats, .lx-mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lx-stat { background: var(--panel); border: 1px solid var(--rule); border-top: 4px solid var(--text); padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; }
.lx-stat span { font: 600 14px var(--font-cond); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.lx-stat b { font-size: 32px; }
.lx-stat.ok { border-top-color: var(--lx-ok); } .lx-stat.bad { border-top-color: var(--lx-bad); } .lx-stat.mute { border-top-color: var(--lx-mute); }
.lx-filters { padding-top: 0; }
.lx-dc { cursor: pointer; padding: 12px 14px; gap: 4px; }
.lx-dc > header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lx-dc h3 { font-size: 21px; }
.lx-dc p { margin: 0; font-size: 16px; }
.lx-dc.inactive { background: var(--panel-2); }
.lx-dc.inactive h3 { color: var(--text-2); }
.lx-dc.offline { border-left: 4px solid var(--lx-bad); padding-left: 11px; }
.lx-addr { display: flex; gap: 6px; align-items: center; }
.lx-dc > footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--lx-line); font-size: 15px; display: flex; gap: 6px; }
.lx-sens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--lx-line); border: 1px solid var(--lx-line); margin: 10px 0 4px; }
.lx-sens span { background: var(--panel-2); padding: 5px 8px; display: flex; flex-direction: column; min-width: 0; }
.lx-sens small { font: 600 12px var(--font-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.lx-sens b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-in-st { font-weight: 500 !important; color: var(--text-2); }
.lx-in-st.on { font-weight: 700 !important; color: var(--text); }
.lx-relays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.lx-relays.big { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.lx-rl { min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--rule); cursor: pointer; text-align: left; font-size: 16px; }
.lx-rl:hover:not(:disabled) { border-color: var(--text); }
.lx-rl:disabled { cursor: default; }
.lx-rl-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-sw { width: 38px; height: 22px; flex: none; border: 2px solid var(--text-2); border-radius: 11px; position: relative; background: var(--panel); }
.lx-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: left .15s; }
.lx-rl.on .lx-sw { background: var(--text); border-color: var(--text); }
.lx-rl.on .lx-sw::after { left: 18px; background: var(--panel); }
.lx-rl.on .lx-rl-n { font-weight: 600; }
.lx-rl:disabled:not(.on) .lx-sw { border-style: dashed; }
.lx-auto { font: 700 12px var(--font-cond); letter-spacing: .08em; border: 1px solid var(--text-2); color: var(--text-2); padding: 0 5px; }
.lx-kv2 { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 8px 0 0; font-size: 17px; }
.lx-kv2 dt { color: var(--text-2); }
.lx-kv2 dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lx-info { padding: 14px 16px; }
.lx-info h2 { font-size: 19px; }
.lx-info h2.lx-h2act { display: flex; align-items: center; gap: 8px; }
.lx-info h2.lx-h2act .btn { font-size: 13px; font-weight: 500; }
.lx-info.wide { grid-column: 1 / -1; }
.lx-diag h2 { display: flex; align-items: center; gap: 8px; }
.lx-diag h2 .lx-i { width: 20px; height: 20px; color: var(--lx-info); }
.lx-diag .lx-kv2 dd .muted { font-size: .92em; }
.lx-diag-meter { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lx-dm-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 16px; }
.lx-dm-bar { margin: 7px 0 5px; height: 9px; background: var(--lx-mute-bg); border-radius: 999px; overflow: hidden; }
.lx-dm-bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; background: var(--lx-mute); }
.lx-dm-bar i.k-ok { background: var(--lx-ok); }
.lx-dm-bar i.k-warn { background: var(--lx-warn); }
.lx-dm-bar i.k-bad { background: var(--lx-bad); }
.lx-dm-bar i.k-mute { background: var(--lx-mute); }
.lx-dm-sub { font-size: 14px; }
.lx-mapwrap { overflow: hidden; }
.lx-map { zoom: calc(1 / var(--z)); height: 70vh; min-height: 360px; }
.lx-map .empty, .lx-map .lx-load { zoom: var(--z); }
.lx-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 2px; font-size: 16px; align-items: center; }
.lx-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lx-legend i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--text); }
.lx-legend i.ok { background: var(--lx-ok); } .lx-legend i.bad { background: var(--lx-bad); } .lx-legend i.mute { background: #6B737B; }
.lx-legend i.plan { border-radius: 0; background: repeating-linear-gradient(135deg, var(--text-2) 0 3px, transparent 3px 6px); }
.lx-legend i.real { border-radius: 0; background: var(--text); }
.lx-sqm { border: 1.5px solid #14181C; }
.lx-sqm.online { background: var(--lx-ok); } .lx-sqm.offline { background: var(--lx-bad); } .lx-sqm.inactive { background: #6B737B; }
.leaflet-container a.lx-popbtn { color: var(--ground); background: var(--text); display: inline-block; margin-top: 6px; padding: 3px 10px; min-height: 0; border: 0; }
.lx-rgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 18px; }
.lx-relay { padding: 12px 14px; gap: 10px; }
.lx-relay header { display: flex; justify-content: space-between; gap: 8px; }
.lx-relay.on { border: 2px solid var(--text); padding: 11px 13px; }
.lx-rstate { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.lx-lamp { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-2); }
.lx-lamp.on { background: var(--text); border-color: var(--text); box-shadow: 0 0 0 4px var(--lx-line); }
.lx-mode { width: 100%; } .lx-mode button { flex: 1; }
.lx-onoff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lx-relay p { margin: 0; }
.lx-hist-panel .lx-bar h2 { margin-right: auto; }
.lx-sform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 16px; margin-bottom: 14px; }
.lx-sform h2 { width: 100%; font-size: 20px; }
.lx-sform p { width: 100%; margin: 0; }
.lx-days { display: flex; gap: 0; border: 0; padding: 0; margin: 0; }
.lx-days legend { font: 600 13px var(--font-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 3px; }
.lx-days label { cursor: pointer; }
.lx-days input { position: absolute; opacity: 0; pointer-events: none; }
.lx-days span { display: grid; place-items: center; width: 44px; height: 38px; border: 1px solid var(--rule); margin-right: -1px; background: var(--panel); font-weight: 500; }
.lx-days input:checked + span { background: var(--text); color: var(--ground); border-color: var(--text); }
.lx-days input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 1px; position: relative; }
.lx-tl-panel, .lx-sform + .panel { margin-bottom: 14px; }
.lx-tl { padding: 8px 14px 4px; }
.lx-tlrow { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--lx-line); }
.lx-tlrow.head { border: 0; min-height: 26px; }
.lx-tlname { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-tlaxis { position: relative; height: 22px; font-size: 13px; color: var(--text-2); }
.lx-tlaxis span { position: absolute; transform: translateX(-50%); }
.lx-tlaxis span:first-child { transform: none; } .lx-tlaxis span:last-child { transform: translateX(-100%); }
.lx-tlbars { position: relative; display: grid; gap: 3px; padding: 6px 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--lx-line) calc(12.5% - 1px) 12.5%); }
.lx-tlb { position: relative; height: 12px; background: var(--panel-2); }
.lx-tlb i { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.lx-tlb i.plan { background: repeating-linear-gradient(135deg, var(--text-2) 0 3px, transparent 3px 6px); border: 1px solid var(--text-2); }
.lx-tlb i.real { background: var(--text); }
.lx-tlnow { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--lx-bad); }
.lx-set { padding: 16px 18px; max-width: 760px; }
.lx-setrow { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--lx-line); margin-bottom: 12px; }
.lx-setrow p { margin: 4px 0 0; }
.lx-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--rule); padding: 6px 12px 6px 8px; cursor: pointer; font-weight: 600; min-height: 44px; }
.lx-toggle span { width: 44px; height: 24px; border-radius: 12px; border: 2px solid var(--text-2); position: relative; }
.lx-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: left .15s; }
.lx-toggle.on span { background: var(--text); border-color: var(--text); }
.lx-toggle.on span::after { left: 22px; background: var(--panel); }
.lx-steps { display: flex; gap: 0; padding: 0; margin: 0 0 14px; list-style: none; counter-reset: st; max-width: 760px; }
.lx-steps li { flex: 1; counter-increment: st; padding: 8px 12px; border-bottom: 4px solid var(--rule); color: var(--text-2); font-weight: 500; }
.lx-steps li::before { content: counter(st) ". "; font-weight: 700; }
.lx-steps li.on { border-bottom-color: var(--text); color: var(--text); font-weight: 600; }
.lx-steps li.done { border-bottom-color: var(--text-2); }
#lx-nw .panel { max-width: 760px; }
.lx-found { display: grid; grid-template-columns: 1fr auto auto 20px; gap: 14px; align-items: center; padding: 10px 14px; background: var(--panel); border: 1px solid var(--rule); cursor: pointer; text-align: left; font-size: 17px; }
.lx-found:hover { border-color: var(--text); }

/* ---------- monitoring ---------- */
.lx-mstat { background: var(--panel); border: 1px solid var(--rule); padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 2px 10px; position: relative; }
.lx-mstat > .lx-i { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--text-2); }
.lx-mstat > span { font: 600 14px var(--font-cond); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); grid-column: 1; grid-row: 1; }
.lx-mstat > b { font-size: 34px; line-height: 1.1; grid-column: 1; grid-row: 2; display: flex; align-items: center; }
.lx-mstat > small { grid-column: 1 / -1; grid-row: 3; color: var(--text-2); font-size: 15px; }
.lx-mstat.sys > b { font-size: 26px; }
.lx-mstat.bad { border-left: 5px solid var(--lx-bad); } .lx-mstat.bad > b, .lx-mstat.bad > .lx-i { color: var(--lx-bad); }
.lx-mstat.warn { border-left: 5px solid var(--lx-warn); } .lx-mstat.warn > b, .lx-mstat.warn > .lx-i { color: var(--lx-warn); }
.lx-mstat.sys.ok b { color: var(--lx-ok); } .lx-mstat.sys.bad { background: var(--lx-bad-bg); }
.lx-mstat.sys.ok .lx-dot { animation: lx-pulse 1.8s ease-in-out infinite; }
@keyframes lx-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lx-mstat.sys.ok .lx-dot, .lx-load::before, .lx-spin { animation: none; } }
.lx-alarms { margin-bottom: 16px; }
.lx-atbl tr.open td:first-child { box-shadow: inset 4px 0 var(--lx-bad); }
.lx-atbl tr.ack td { color: var(--text-2); }
.lx-atbl tr.hl td { animation: lx-hl 1s ease-in-out 6; }
@keyframes lx-hl { 50% { background: var(--lx-warn-bg); } }
.lx-okempty { color: var(--lx-ok); }
.lx-pollf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 14px; }
.lx-pollf > div:first-child { flex: 1 1 360px; }
.lx-pollf p { margin: 4px 0 0; }
.lx-pollinfo { padding-bottom: 8px; }
.lx-wdtbl tr { cursor: pointer; }
.lx-wdtbl tr.on td:first-child { box-shadow: inset 4px 0 var(--text); }
.lx-wdtbl select { max-width: 320px; }
.lx-inl { display: inline-flex; align-items: center; gap: 6px; }
.lx-inl input { width: 90px; min-height: 36px; border: 1px solid var(--rule); background: var(--panel); padding: 3px 6px; font-size: 16px; }
.lx-rlinks { white-space: nowrap; }
.lx-rlink { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 3px 9px; border: 1px solid var(--rule); text-decoration: none; font-size: 15px; background: var(--panel); }
.lx-rlink:hover { border-color: var(--text); }
.lx-rlink.on { border-color: var(--text); font-weight: 600; }
.lx-rf { display: grid; gap: 14px; }
.lx-phgrid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lx-phase { padding: 14px 16px; gap: 10px; }
.lx-phase h2 { font-size: 20px; }
.lx-phase .lx-lbl select { width: 100%; }
.lx-one { max-width: 560px; }
.lx-inu { display: flex; align-items: stretch; }
.lx-inu input { flex: 1; min-width: 0; }
.lx-inu i { font-style: normal; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--rule); border-left: 0; background: var(--panel-2); color: var(--text-2); font: 500 15px var(--font); text-transform: none; }
.lx-w { max-width: 240px; }
.lx-sttbl td { padding: 6px 8px; }
.lx-sttbl select, .lx-sttbl input:not([type=checkbox]) { min-height: 36px; font-size: 16px; border: 1px solid var(--rule); background: var(--panel); padding: 3px 6px; width: 100%; }
.lx-sttbl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--text); }
.lx-sttbl + .lx-bar { padding: 10px 12px; }

@media (max-width: 900px) {
  .lx-row3 { grid-template-columns: 1fr; }
  .lx-sens { grid-template-columns: 1fr 1fr; }
  .lx-tlrow { grid-template-columns: 130px 1fr; }
  .lx-search { min-width: 0; flex: 1 1 220px; }
}
.tabs-sep { width: 1px; background: var(--rule); margin: 12px 8px; }

/* ---------- větší měřítko obrazovek LDS (o 75 % proti zbytku HMI) ---------- */
:root { --lx-zoom: calc(1 / var(--z)); }   /* obsah LDS v měřítku 1:1 jako boční menu */
.lx-big #view, .lx-big #modal > .lx-dlg, .lx-big #lx-toast, .lx-big #lx-toasts { zoom: var(--lx-zoom); }
body.lx-big .lx-dlg { max-height: calc(100vh / (var(--z) * var(--lx-zoom)) - 40px); }
body.lx-big .lx-map { zoom: calc(1 / (var(--z) * var(--lx-zoom))); }
body.lx-big .lx-map .empty, body.lx-big .lx-map .lx-load { zoom: calc(var(--z) * var(--lx-zoom)); }

/* správa API klíčů */
.lx-keys { display: grid; gap: 6px; }
.lx-ktbl td { vertical-align: middle; }
.lx-kcell { display: inline-flex; align-items: center; gap: 2px; }
.lx-kcell code { font-size: 15px; background: var(--panel-2); border: 1px solid var(--lx-line); padding: 3px 8px; margin-right: 4px; white-space: nowrap; }
.lx-ktbl td { white-space: nowrap; }
.lx-ktbl tr.fresh td { background: var(--lx-ok-bg); }
.lx-knew { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lx-knew input { flex: 1 1 260px; min-height: 36px; font-size: 16px; border: 1px solid var(--rule); background: var(--panel); padding: 4px 8px; }
.lx-agrid .lx-keycard { grid-column: 1 / -1; }
/* dialog správy klíčů: celý klíč se vejde na jeden řádek */
.lx-dlg.xwide { width: min(1320px, 100%); }
body.lx-big .lx-dlg { max-width: calc(100vw / (var(--z) * var(--lx-zoom)) - 40px); }
/* buňka klíče má pevnou šířku celého klíče (lds_ + 40 znaků), maskovaný i zobrazený vypadá stejně */
.lx-kcell code { display: inline-block; box-sizing: content-box; width: 44ch; }

/* =========================================================
   VZHLED A · KLID — obrazovky LDS (Projekty, Zařízení, Monitoring)
   Stejný jazyk jako boční menu: bílé zaoblené karty, jemné linky,
   písmo Geist, štítky jako pilulky, modrá hlavní akce.
   ========================================================= */
:root {
  --a-bg: #F3F4F6; --a-surface: #FFFFFF; --a-soft: #F9FAFB; --a-line: #E5E7EB; --a-line-2: #D1D5DB;
  --a-text: #111827; --a-text-2: #4B5563; --a-muted: #6B7280;
  --a-accent: #1D4ED8; --a-accent-hover: #1E40AF; --a-accent-soft: #EEF2FF;
  --a-radius: 10px; --a-rsm: 7px; --a-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  --a-font: "Geist", "IBM Plex Sans", "Segoe UI", sans-serif; --a-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --lx-ok: #15803D; --lx-ok-bg: #DCFCE7; --lx-warn: #B45309; --lx-warn-bg: #FEF3C7; --lx-bad: #B91C1C; --lx-bad-bg: #FEE2E2;
  --lx-info: #1D4ED8; --lx-info-bg: #DBEAFE; --lx-mute: #4B5563; --lx-mute-bg: #F3F4F6; --lx-line: #EEF0F3;
  --lx-mervis: #1D4ED8; --lx-plc: #9A3412; --lx-amber: #B45309;
}
html:has(body.lx-big), body.lx-big { background: var(--a-bg); }
body.lx-big #view { font-family: var(--a-font); color: var(--a-text); }
body.lx-big #view :is(h1, h2, h3) { letter-spacing: -.01em; }
body.lx-big .screen-head h1 { font-size: 30px; font-weight: 700; }
body.lx-big .muted { color: var(--a-muted); }

/* tlačítka a vstupy */
body.lx-big :is(#view, .lx-dlg) .btn { border: 1px solid var(--a-line-2); background: var(--a-surface); color: var(--a-text); border-radius: var(--a-rsm);
  min-height: 40px; padding: 6px 16px; font: 600 15px var(--a-font); box-shadow: var(--a-shadow); display: inline-flex; align-items: center; justify-content: center; }
body.lx-big :is(#view, .lx-dlg) .btn.sm { min-height: 34px; padding: 4px 12px; font-size: 14px; }
body.lx-big :is(#view, .lx-dlg) .btn:hover:not(:disabled) { background: var(--a-soft); color: var(--a-text); border-color: var(--a-line-2); }
body.lx-big :is(#view, .lx-dlg) .btn.primary { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
body.lx-big :is(#view, .lx-dlg) .btn.primary:hover:not(:disabled) { background: var(--a-accent-hover); border-color: var(--a-accent-hover); color: #fff; }
body.lx-big :is(#view, .lx-dlg) .btn.danger { color: var(--lx-bad); }
body.lx-big :is(#view, .lx-dlg) .btn.danger:hover:not(:disabled) { background: var(--lx-bad-bg); color: var(--lx-bad); }
body.lx-big :is(#view, .lx-dlg) .btn.primary.danger { background: var(--lx-bad); border-color: var(--lx-bad); color: #fff; }
body.lx-big :is(#view, .lx-dlg) .btn.amber { color: var(--lx-amber); border-color: #FCD34D; background: #FFFBEB; }
body.lx-big :is(#view, .lx-dlg) .btn.amber:hover:not(:disabled) { background: #FEF3C7; color: var(--lx-amber); }
body.lx-big :is(#view, .lx-dlg) .btn:disabled { border-style: solid; opacity: .5; box-shadow: none; }
body.lx-big :is(#view, .lx-dlg) :is(.lx-lbl, .lx-kl, .lx-days legend) { font: 500 12px var(--a-font); letter-spacing: .04em; color: var(--a-muted); }
body.lx-big :is(#view, .lx-dlg) :is(.lx-lbl select, .lx-lbl input, .lx-fld input, .lx-fld select, .lx-fld textarea, .lx-in, .lx-rf select, .lx-wdtbl select, .lx-knew input, .lx-inl input, .lx-sttbl select, .lx-sttbl input:not([type=checkbox]), .lx-slotrow select, .lx-slotrow input) {
  border: 1px solid var(--a-line-2); border-radius: var(--a-rsm); background: var(--a-surface); font-family: var(--a-font); color: var(--a-text); }
body.lx-big :is(#view, .lx-dlg) :is(input, select, textarea):focus-visible { outline: 2px solid var(--a-accent); outline-offset: 0; }
body.lx-big .lx-search { border: 1px solid var(--a-line-2); border-radius: var(--a-rsm); background: var(--a-surface); }
body.lx-big .lx-search:focus-within { outline: 2px solid var(--a-accent); }
body.lx-big .lx-seg { border: 0; background: #E9EBEF; border-radius: 9px; padding: 3px; gap: 2px; }
body.lx-big .lx-seg button { border: 0 !important; border-radius: var(--a-rsm); min-height: 34px; padding: 4px 14px; font: 500 15px var(--a-font); color: var(--a-text-2); }
body.lx-big .lx-seg button.on { background: var(--a-surface); color: var(--a-text); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 24, 39, .1); }
body.lx-big .lx-ic { border-radius: var(--a-rsm); color: var(--a-muted); }
body.lx-big .lx-ic:hover { background: var(--a-bg); border-color: transparent; color: var(--a-text); }

/* štítky */
body.lx-big :is(#view, .lx-dlg) .lx-st { border: 0; border-radius: 999px; padding: 2px 10px; font: 600 13px var(--a-font); letter-spacing: 0; }
body.lx-big :is(#view, .lx-dlg) .lx-st::before { width: 6px; height: 6px; }
body.lx-big :is(#view, .lx-dlg) .lx-tag { border: 0; border-radius: 999px; background: var(--a-bg); color: var(--a-text-2); font: 500 13px var(--a-font); letter-spacing: 0; text-transform: none; padding: 2px 10px; }
body.lx-big :is(#view, .lx-dlg) .lx-tag.off { background: transparent; box-shadow: inset 0 0 0 1px var(--a-line-2); }
body.lx-big :is(#view, .lx-dlg) .lx-src { font: 600 14px var(--a-font); letter-spacing: 0; }
body.lx-big :is(#view, .lx-dlg) .lx-kind { border: 0; border-radius: 999px; background: var(--a-bg); color: var(--a-text-2); font: 600 13px var(--a-font); letter-spacing: 0; text-transform: none; padding: 2px 10px; }
body.lx-big .lx-dom, body.lx-big .lx-media .lx-st { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 3px rgba(17, 24, 39, .15); font: 600 13px var(--a-font); padding: 2px 10px; }
body.lx-big .lx-media .lx-st.ok { color: var(--lx-ok); }
body.lx-big .lx-media .lx-st.warn { color: var(--lx-warn); }
body.lx-big .lx-media .lx-st.mute { color: var(--a-text-2); }

/* karty a panely */
body.lx-big #view :is(.lx-card, .panel, .lx-grp, .lx-opt, .lx-stat, .lx-mstat, .lx-tile, .lx-found) { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); box-shadow: var(--a-shadow); }
body.lx-big #view .lx-card { overflow: hidden; }
body.lx-big #view .lx-pc:hover, body.lx-big #view .lx-dc:hover { border-color: var(--a-line-2); box-shadow: 0 4px 14px rgba(17, 24, 39, .08); }
body.lx-big #view .lx-pc:focus-visible, body.lx-big #view .lx-dc:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
body.lx-big .lx-media { border-bottom: 1px solid var(--a-line); background: var(--a-soft); }
body.lx-big .lx-ph { background-image: none; }
body.lx-big .lx-ph .lx-i { color: var(--a-line-2); opacity: 1; }
body.lx-big .lx-pc-b { padding: 16px 18px 6px; }
body.lx-big .lx-pc-b h3 { font-size: 21px; font-weight: 600; }
body.lx-big .lx-pc-f { border-top: 1px solid var(--a-line); padding: 10px 10px 10px 18px; }
body.lx-big .lx-pgrid { gap: 20px; }
body.lx-big #view .panel > .lx-bar { border-bottom: 1px solid var(--a-line); }
body.lx-big #view .lx-dc.offline { border-left: 1px solid var(--a-line); padding-left: 14px; box-shadow: inset 3px 0 0 var(--lx-bad), var(--a-shadow); }
body.lx-big #view .lx-dc.inactive { background: var(--a-soft); }

/* záložky a drobečky */
body.lx-big .lx-tabs { border-bottom: 1px solid var(--a-line); gap: 28px; }
body.lx-big .lx-tabs button { padding: 10px 2px; border-bottom-width: 2px; font: 500 16px var(--a-font); color: var(--a-muted); }
body.lx-big .lx-tabs button:hover { background: none; color: var(--a-text); }
body.lx-big .lx-tabs button.on { color: var(--a-text); border-bottom-color: var(--a-accent); font-weight: 600; }
body.lx-big .lx-crumb { font-size: 15px; color: var(--a-muted); }
body.lx-big .lx-crumb a { color: var(--a-muted); text-decoration: none; }
body.lx-big .lx-crumb a:hover { color: var(--a-accent); }

/* karta prvku: popisek nad hodnotou, bez barevných proužků */
body.lx-big .lx-el header { padding: 16px 12px 0 18px; }
body.lx-big .lx-el header h3 { font-size: 18px; font-weight: 600; }
body.lx-big .lx-el-meta { border-bottom: 1px solid var(--a-line); padding: 2px 18px 12px; color: var(--a-muted); }
body.lx-big .lx-slots { padding: 14px 18px; gap: 14px; }
body.lx-big .lx-slots .r3, body.lx-big .lx-slots .r2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.lx-big .lx-slot { border: 0; background: none; padding: 0; }
body.lx-big .lx-slot-l { font: 400 13px var(--a-font); letter-spacing: 0; color: var(--a-muted); }
body.lx-big .lx-slot .lx-v, body.lx-big .lx-fb .lx-v { font: 500 19px var(--a-mono); }
body.lx-big .lx-v.bad { color: var(--a-muted); text-decoration: none; }
body.lx-big .lx-fb { padding: 14px 18px; gap: 8px 14px; font-size: 16px; }
body.lx-big .lx-fb dt { color: var(--a-muted); }
body.lx-big .lx-el footer { border-top: 1px solid var(--a-line); padding: 10px 14px 12px 18px; margin-top: auto; }
body.lx-big .lx-emptybox { border: 1px dashed var(--a-line-2); border-radius: var(--a-radius); background: var(--a-surface); }

/* tabulky */
body.lx-big #view table.list th { font: 500 12px var(--a-font); letter-spacing: .05em; color: var(--a-muted); border-bottom: 1px solid var(--a-line); background: var(--a-soft); }
body.lx-big #view table.list td { border-bottom: 1px solid var(--a-line); }
body.lx-big #view .lx-mono, body.lx-big .lx-dlg .lx-mono { font-family: var(--a-mono); }
body.lx-big .lx-dps tr.sel td { background: var(--a-accent-soft); }
body.lx-big .lx-grp > header { padding: 8px 12px 8px 6px; }
body.lx-big .lx-grp.drop { outline: 2px solid var(--a-accent); }
body.lx-big .lx-selbar { border-radius: var(--a-radius); background: var(--a-text); }
body.lx-big .lx-opt.on { border: 2px solid var(--a-accent) !important; }
body.lx-big .lx-opt > input { accent-color: var(--a-accent); }

/* dialogy a oznámení */
body.lx-big .lx-dlg { border: 0; border-radius: 14px; background: var(--a-surface); box-shadow: 0 20px 50px rgba(17, 24, 39, .25); font-family: var(--a-font); color: var(--a-text); padding: 24px 28px; }
body.lx-big .lx-dlg h2 { font-size: 22px; font-weight: 700; }
body.lx-big .lx-tile:hover:not(:disabled) { border: 1px solid var(--a-accent); padding: 16px; box-shadow: 0 0 0 3px var(--a-accent-soft); }
body.lx-big .lx-krow code, body.lx-big .lx-kcell code { border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-soft); font-family: var(--a-mono); }
body.lx-big .lx-toast { border-radius: 10px; font-family: var(--a-font); }
body.lx-big .lx-banner { border: 0; border-radius: var(--a-radius); }
body.lx-big .lx-stat b { font-family: var(--a-font); }
body.lx-big .lx-stat.ok b { color: var(--lx-ok); }
body.lx-big .lx-stat.bad b { color: var(--lx-bad); }
body.lx-big .lx-stat.mute b { color: var(--a-muted); }

/* =========================================================
   VZHLED PASTEL — Projekty, Zařízení, Monitoring
   Levandulový podklad, bílé hodně zaoblené karty bez rámečků,
   fialový akcent, barevné značky druhu, jen denní barvy.
   Staví na proměnných --a-* bloku VZHLED A a přepisuje je.
   ========================================================= */
body.lx-big {
  --a-bg: #F3F0FA; --a-surface: #FFFFFF; --a-soft: #F7F5FC; --a-line: #ECE8F6; --a-line-2: #DDD7EE;
  --a-text: #1C1B2E; --a-text-2: #4A4760; --a-muted: #6B6880;
  --a-accent: #5B3FE0; --a-accent-hover: #4A2FCB; --a-accent-soft: #ECE7FF;
  --a-radius: 26px; --a-rsm: 14px; --a-shadow: 0 10px 30px rgba(60, 40, 140, .07);
  --a-font: "Plus Jakarta Sans", "Geist", "Segoe UI", sans-serif; --a-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --lx-ok: #1F7A45; --lx-ok-bg: #E4F5EA; --lx-warn: #9A5B00; --lx-warn-bg: #FFF0D9; --lx-bad: #B42328; --lx-bad-bg: #FDE7E8;
  --lx-info: #5B3FE0; --lx-info-bg: #ECE7FF; --lx-mute: #5E5B6E; --lx-mute-bg: #ECEBF1; --lx-line: #F0EDF7;
  --lx-amber: #9A5B00;
  /* barvy značek druhu */
  --k-bolt: #FFE9A8; --k-drop: #CDE8FF; --k-wind: #DDE1FF; --k-flame: #FFD9CC; --k-meter: #D8F2E4; --k-sun: #FFF1B8; --k-rb: #E3DCFF; --k-amm: #CDE8FF; --k-tlt: #FFE2C2;
}
html:has(body.lx-big), body.lx-big { background: #F3F0FA; }
body.lx-big #view { padding-top: 24px; }
body.lx-big .screen-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
body.lx-big h2, body.lx-big h3 { font-weight: 800; }
.lx-title { display: flex; flex-direction: column; gap: 2px; margin-right: 8px; }
.lx-eyebrow { font-size: 14px; font-weight: 600; color: var(--a-muted, #6B6880); }

/* karty a panely: bez rámečku, měkký stín */
body.lx-big #view :is(.lx-card, .panel, .lx-grp, .lx-opt, .lx-stat, .lx-mstat, .lx-tile, .lx-found, .lx-emptybox) { border: 0; }
body.lx-big #view .lx-pc:hover, body.lx-big #view .lx-dc:hover { box-shadow: 0 16px 40px rgba(60, 40, 140, .13); transform: translateY(-1px); }
body.lx-big #view .lx-pc, body.lx-big #view .lx-dc { transition: box-shadow .15s, transform .15s; }
body.lx-big #view .panel > .lx-bar { border-bottom: 1px solid var(--a-line); }
body.lx-big #view table.list th { background: var(--a-soft); }

/* tlačítka, přepínače, vstupy: pilulky */
body.lx-big :is(#view, .lx-dlg) .btn { border: 0; border-radius: 23px; min-height: 44px; padding: 6px 20px; box-shadow: 0 2px 8px rgba(60, 40, 140, .08); font-weight: 700; }
body.lx-big :is(#view, .lx-dlg) .btn.sm { border-radius: 18px; min-height: 36px; padding: 4px 14px; }
body.lx-big :is(#view, .lx-dlg) .btn.primary { box-shadow: 0 6px 16px rgba(91, 63, 224, .28); }
body.lx-big :is(#view, .lx-dlg) .btn.amber { background: #FFF0D9; border: 0; }
body.lx-big :is(#view, .lx-dlg) .btn.danger { background: #FDE7E8; }
body.lx-big .lx-seg { background: #E6E1F4; border-radius: 23px; padding: 3px; }
body.lx-big .lx-seg button { border-radius: 20px; min-height: 38px; padding: 4px 16px; font-weight: 700; }
body.lx-big .lx-seg button.on { box-shadow: 0 2px 8px rgba(60, 40, 140, .08); }
body.lx-big .lx-search { border: 0; border-radius: 23px; min-height: 44px; padding: 0 16px; box-shadow: 0 2px 8px rgba(60, 40, 140, .05); }
body.lx-big :is(#view, .lx-dlg) :is(.lx-lbl select, .lx-lbl input, .lx-fld input, .lx-fld select, .lx-fld textarea, .lx-knew input) { border: 0; background: var(--a-bg); border-radius: 14px; }
body.lx-big .lx-head .lx-lbl select { background: var(--a-surface); border-radius: 23px; min-height: 44px; padding: 0 14px; box-shadow: 0 2px 8px rgba(60, 40, 140, .05); }
body.lx-big .lx-ic { border-radius: 12px; background: var(--a-bg); width: 38px; height: 38px; }
body.lx-big .lx-ic:hover { background: var(--a-accent-soft); color: var(--a-accent); }

/* štítky */
body.lx-big :is(#view, .lx-dlg) .lx-st { padding: 3px 12px; font-weight: 700; }
body.lx-big :is(#view, .lx-dlg) .lx-st::before { display: none; }
body.lx-big :is(#view, .lx-dlg) .lx-tag { background: var(--a-bg); color: var(--a-text); font-weight: 600; padding: 3px 12px; text-decoration: none; }
body.lx-big .lx-media .lx-st { box-shadow: none; }
body.lx-big .lx-media .lx-st.ok { background: #E4F5EA; } body.lx-big .lx-media .lx-st.warn { background: #FFF0D9; } body.lx-big .lx-media .lx-st.mute { background: #ECEBF1; }

/* záložky jako segmentový přepínač */
body.lx-big .lx-tabs { border: 0; gap: 2px; padding: 3px; background: #E6E1F4; border-radius: 23px; width: max-content; margin-bottom: 20px; }
body.lx-big .lx-tabs button { border: 0; border-radius: 20px; padding: 8px 20px; font: 700 15px var(--a-font); color: var(--a-muted); }
body.lx-big .lx-tabs button.on { background: var(--a-surface); color: var(--a-text); border: 0; box-shadow: 0 2px 8px rgba(60, 40, 140, .08); }

/* značka druhu (provoz, typ zařízení) */
.lx-kb { width: 44px; height: 44px; flex: none; border-radius: 14px; display: inline-grid; place-items: center; color: #1C1B2E; background: #ECEBF1; }
.lx-kb .lx-i { width: 22px; height: 22px; }
.lx-kb.k-bolt { background: var(--k-bolt); } .lx-kb.k-drop { background: var(--k-drop); } .lx-kb.k-wind { background: var(--k-wind); }
.lx-kb.k-flame { background: var(--k-flame); } .lx-kb.k-meter { background: var(--k-meter); } .lx-kb.k-sun { background: var(--k-sun); }
.lx-kb.k-rb { background: var(--k-rb); } .lx-kb.k-amm { background: var(--k-amm); }
.screen-head h1 .lx-kb { width: 50px; height: 50px; border-radius: 16px; }

/* karta projektu */
body.lx-big #view .lx-pc { padding: 14px; gap: 14px; }
body.lx-big .lx-pc .lx-media { height: 140px; border: 0; border-radius: 18px; overflow: hidden; }
body.lx-big .lx-pc .lx-media-tl { left: 10px; top: 10px; }
body.lx-big .lx-ph { background: #ECEBF1; }
body.lx-big .lx-ph.k-bolt { background: var(--k-bolt); } body.lx-big .lx-ph.k-drop { background: var(--k-drop); } body.lx-big .lx-ph.k-wind { background: var(--k-wind); }
body.lx-big .lx-ph.k-flame { background: var(--k-flame); } body.lx-big .lx-ph.k-meter { background: var(--k-meter); } body.lx-big .lx-ph.k-sun { background: var(--k-sun); }
body.lx-big .lx-ph .lx-i { color: #1C1B2E; width: 52px; height: 52px; stroke-width: 1.3; opacity: 1; }
body.lx-big .lx-pc-b { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.lx-pc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx-pc-t h3 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.lx-pc-t span { font-size: 14px; color: var(--a-muted, #6B6880); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lx-big .lx-pc-f { border: 0; margin: 0; padding: 0 4px; gap: 6px; }
body.lx-big .lx-pc-tags { gap: 6px; }
body.lx-big .lx-pgrid { gap: 22px; }

/* karty zařízení */
body.lx-big #view .lx-dc { padding: 16px; gap: 12px; }
body.lx-big #view .lx-dc.offline { box-shadow: var(--a-shadow); padding-left: 16px; }
body.lx-big #view .lx-dc.inactive { background: var(--a-surface); opacity: .8; }
body.lx-big .lx-dc > header { gap: 12px; margin: 0; }
.lx-dc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lx-dc-t h3 { margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-dc-t .lx-mono { font-size: 13px; color: var(--a-muted, #6B6880); }
body.lx-big .lx-dc > footer { border: 0; padding: 0; align-items: center; gap: 6px; color: var(--a-muted); font-size: 14px; }
body.lx-big .lx-dc > footer .lx-i { width: 15px; height: 15px; }
body.lx-big .lx-addr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.lx-big .lx-sens { background: none; border: 0; gap: 6px; margin: 0; }
body.lx-big .lx-sens span { border-radius: 14px; padding: 8px 10px; background: var(--a-bg); gap: 1px; }
body.lx-big .lx-sens span.s-t { background: #FFE4D6; } body.lx-big .lx-sens span.s-h { background: #D9ECFF; } body.lx-big .lx-sens span.s-i.on { background: #E4F5EA; }
body.lx-big .lx-sens small { font: 600 11px var(--a-font); letter-spacing: 0; text-transform: none; color: var(--a-muted); }
body.lx-big .lx-sens b { font-size: 15px; font-weight: 800; }
body.lx-big .lx-relays { gap: 6px; margin: 0; }
body.lx-big .lx-rl { border: 0; border-radius: 14px; background: var(--a-bg); min-height: 44px; font-family: var(--a-font); font-weight: 600; }
body.lx-big .lx-rl.on { background: var(--a-accent-soft); font-weight: 700; }
body.lx-big .lx-rl:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--a-accent); border: 0; }
body.lx-big .lx-sw { border: 0; width: 42px; height: 24px; border-radius: 12px; background: #D9D5E6; }
body.lx-big .lx-sw::after { top: 3px; left: 3px; width: 18px; height: 18px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
body.lx-big .lx-rl.on .lx-sw { background: var(--a-accent); }
body.lx-big .lx-rl.on .lx-sw::after { left: 21px; background: #FFFFFF; }
body.lx-big .lx-rl:disabled:not(.on) .lx-sw { border: 0; opacity: .55; }
body.lx-big .lx-auto { border: 0; border-radius: 10px; background: #FFFFFF; color: var(--a-accent); font: 800 11px var(--a-font); padding: 2px 8px; }
.lx-amm-st { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lx-amm-st > div { background: var(--a-bg, #F3F0FA); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; }
.lx-amm-st small { font-size: 12px; font-weight: 600; color: var(--a-muted, #6B6880); }
.lx-amm-st b { font-size: 22px; font-weight: 800; }

/* dlaždice s počty */
body.lx-big .lx-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 20px; }
.lx-stat-i { display: none; }
body.lx-big .lx-stat-i { display: grid; place-items: center; grid-row: span 2; width: 46px; height: 46px; border-radius: 16px; background: var(--a-accent-soft); color: var(--a-accent); }
body.lx-big .lx-stat-i .lx-i { width: 22px; height: 22px; }
body.lx-big .lx-stat.ok .lx-stat-i { background: #E4F5EA; color: #1F7A45; } body.lx-big .lx-stat.bad .lx-stat-i { background: #FDE7E8; color: #B42328; } body.lx-big .lx-stat.mute .lx-stat-i { background: #ECEBF1; color: #5E5B6E; }
body.lx-big .lx-stat span { font: 600 14px var(--a-font); letter-spacing: 0; text-transform: none; color: var(--a-muted); }
body.lx-big .lx-stat b { font-size: 30px; font-weight: 800; line-height: 1.1; }
body.lx-big .lx-stats { gap: 18px; }

/* detail RelayBoxu a prvků */
body.lx-big .lx-relay { padding: 16px; }
body.lx-big .lx-relay.on { border: 0; background: var(--a-accent-soft); padding: 16px; }
body.lx-big .lx-lamp.on { background: var(--a-accent); border-color: var(--a-accent); box-shadow: 0 0 0 4px #D9D0FF; }
body.lx-big .lx-mode button.on { background: var(--a-accent); color: #FFFFFF; }
body.lx-big .lx-tlb { border-radius: 8px; }
body.lx-big .lx-tlb i { border-radius: 8px; }
body.lx-big .lx-tlb i.plan { background: repeating-linear-gradient(135deg, #C9BDFB 0 6px, #E4DDFE 6px 12px); border: 0; }
body.lx-big .lx-tlb i.real { background: var(--a-accent); }
body.lx-big .lx-days span { border: 0; border-radius: 21px; margin-right: 6px; background: var(--a-bg); font-weight: 800; }
body.lx-big .lx-days input:checked + span { background: var(--a-accent); }
body.lx-big .lx-slot-l { font-weight: 600; }
body.lx-big .lx-dlg { border-radius: 30px; }
body.lx-big .lx-tile { border-radius: 22px; }
body.lx-big .lx-tile:hover:not(:disabled) { border: 0; box-shadow: 0 0 0 2px var(--a-accent); padding: 16px; }
body.lx-big .lx-krow code, body.lx-big .lx-kcell code { border: 0; border-radius: 12px; background: var(--a-bg); }
body.lx-big .lx-pgrid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
body.lx-big .lx-dgrid { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }

/* zjednodušená karta zařízení v seznamu */
.lx-dc-t > span { font-size: 14px; color: var(--a-muted, #6B6880); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-dc-sum { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--a-muted, #6B6880); padding: 12px 4px 0; border-top: 1px solid var(--a-line, #ECE8F6); }
.lx-dc-sum b { color: var(--a-text, #1C1B2E); font-weight: 800; }
.lx-dc-ago { display: inline-flex; align-items: center; gap: 6px; }
.lx-dc-ago .lx-i { width: 15px; height: 15px; }

/* karta prvku v2: štítek pole, pásy veličin, odkaz Detail */
.lx-el2 { padding: 18px; gap: 14px; }
.lx-el2 > header { display: flex; align-items: flex-start; gap: 10px; padding: 0 !important; }
.lx-el-h { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.lx-el-id { align-self: flex-start; font: 700 12px var(--a-mono, monospace); letter-spacing: .02em; color: var(--a-accent, #5B3FE0); background: var(--a-accent-soft, #ECE7FF); border-radius: 8px; padding: 2px 8px; }
.lx-el2 h3 { margin: 0; font-size: 17px !important; font-weight: 800; line-height: 1.25; }
.lx-el2 > header .lx-ic { width: 34px; height: 34px; background: transparent; }
.lx-el2 > header .lx-ic:hover { background: var(--a-bg, #F3F0FA); }
.lx-bands { display: flex; flex-direction: column; gap: 8px; }
.lx-band { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; border-radius: 14px; padding: 10px 12px; background: #F3F0FA; }
.lx-band.t-cur { background: #F0ECFF; } .lx-band.t-volt { background: #E8F3FF; } .lx-band.t-pow { background: #FFF4E3; } .lx-band.t-en { background: #EAF7EF; } .lx-band.t-tmp { background: #FFEDE4; }
.lx-band-n { font-size: 13px; font-weight: 700; color: var(--a-text-2, #4A4760); }
.lx-band-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-band-v > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.lx-band-v small { font-size: 11px; font-weight: 700; color: var(--a-muted, #6B6880); }
.lx-el2 .lx-v { font: 800 18px var(--a-font, sans-serif) !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.lx-el2 .lx-v small { font-size: 12px; font-weight: 600; color: var(--a-muted, #6B6880); margin-left: 6px; }
.lx-el2 .lx-v.bad { color: var(--a-muted, #6B6880); }
.lx-el2 > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0 !important; padding: 0 2px !important; margin-top: auto; font-size: 13px; color: var(--a-muted, #6B6880); }
.lx-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 2px; cursor: pointer; font: 700 14px var(--a-font, sans-serif); color: var(--a-accent, #5B3FE0); }
.lx-link .lx-i { width: 16px; height: 16px; transition: transform .15s; }
.lx-link:hover .lx-i { transform: translateX(3px); }

/* stavy DI na kartě prvku */
.lx-dis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lx-dis:not(.mix) { grid-template-columns: 1fr; }
.lx-di { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 12px; background: #F3F0FA; font-size: 14px; }
.lx-dis.mix .lx-di { padding: 7px 10px; font-size: 13px; }
.lx-di i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #B9B5C9; }
.lx-di span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--a-text-2, #4A4760); font-weight: 600; }
.lx-di b { flex: none; font-weight: 800; font-size: 13px; color: var(--a-muted, #6B6880); }
.lx-di.on { background: #F0ECFF; } .lx-di.on i { background: var(--a-accent, #5B3FE0); box-shadow: 0 0 0 3px #DCD3FF; } .lx-di.on b { color: var(--a-accent, #5B3FE0); }
.lx-di.good i { background: #1F7A45; } .lx-di.good b { color: #1F7A45; }
.lx-di.bad { background: #FDE7E8; } .lx-di.bad i { background: #B42328; box-shadow: 0 0 0 3px #F8C9CB; } .lx-di.bad b { color: #B42328; }
.lx-di.q b { font-weight: 600; }
body.lx-big .lx-pbar { padding: 0 0 18px; } body.lx-big .lx-pbar .lx-search { width: 360px; }
/* pole hledání bez fialového rámečku při psaní */
body.lx-big .lx-search:focus-within, .lx-search:focus-within { outline: none; }
body.lx-big :is(#view, .lx-dlg) .lx-search input:focus-visible, .lx-search input:focus, .lx-search input:focus-visible { outline: none; box-shadow: none; }
/* zvýraznění řádku tabulky po najetí myší */
body.lx-big #view table.list.lx-tbl tbody tr { transition: background-color .12s; }
body.lx-big #view table.list.lx-tbl tbody tr:hover td { background: #FAF8FF; }
body.lx-big #view table.list.lx-tbl tbody tr:hover :is(select, input:not([type=checkbox]), .lx-rlink:not(.on)) { background: #EFEBF9 !important; }
/* stav signálu jako tečka */
.lx-qd { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.lx-qd.ok { background: #1F9D55; box-shadow: 0 0 0 3px #D5F0DF; } .lx-qd.warn { background: #E08A00; box-shadow: 0 0 0 3px #FCE7C2; } .lx-qd.bad { background: #D12F37; box-shadow: 0 0 0 3px #F9D2D4; }
body.lx-big #view .lx-tbl td[data-lq], body.lx-big #view .lx-tbl th:last-child { text-align: center; width: 70px; }

/* ---------- Monitoring v Pastelu ---------- */
.lx-mst3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.lx-big .lx-stat small { grid-column: 2; font-size: 13px; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lx-big .lx-stat.warn .lx-stat-i { background: #FFF0D9; color: #9A5B00; } body.lx-big .lx-stat.warn b { color: #9A5B00; }
body.lx-big .lx-stat.sys b { font-size: 24px; display: flex; align-items: center; }
body.lx-big .lx-stat.sys.ok b { color: #1F7A45; } body.lx-big .lx-stat.sys.bad b { color: #B42328; }
body.lx-big .lx-stat.sys .lx-dot { width: 10px; height: 10px; margin-right: 8px; }
body.lx-big .lx-stat.sys.ok .lx-dot { animation: lx-pulse 1.8s ease-in-out infinite; }
body.lx-big #view .lx-alcard { padding: 8px 18px 18px; margin-bottom: 20px; gap: 6px; }
body.lx-big #view .lx-alcard > .lx-bar { border: 0; padding: 10px 0; }
.lx-alrows { display: flex; flex-direction: column; gap: 8px; }
.lx-al { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--a-bg, #F3F0FA); text-decoration: none; color: inherit; transition: background-color .12s; }
.lx-al:hover { background: #ECE7FF; }
.lx-al.open { background: #FFF5F5; } .lx-al.open:hover { background: #FDE7E8; }
.lx-al.hl { animation: lx-hl 1s ease-in-out 6; }
.lx-al-ic { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #ECEBF1; color: #5E5B6E; }
.lx-al-ic .lx-i { width: 21px; height: 21px; }
.lx-al-ic.bad { background: #FDE7E8; color: #B42328; } .lx-al-ic.warn { background: #FFF0D9; color: #9A5B00; }
.lx-al-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lx-al-b > b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-al-b > span { font-size: 13px; color: var(--a-muted, #6B6880); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-al-b a { color: inherit; text-decoration: none; font-weight: 700; }
.lx-al-b a:hover { color: var(--a-accent, #5B3FE0); }
.lx-al-t { flex: none; display: flex; flex-direction: column; align-items: flex-end; width: 132px; }
.lx-al-t b { font-size: 16px; font-weight: 800; } .lx-al-t small { font-size: 12px; color: var(--a-muted, #6B6880); }
.lx-al-a { flex: none; width: 104px; display: flex; justify-content: flex-end; }
.lx-allok { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #E4F5EA; color: #1F7A45; }
.lx-allok > .lx-i { width: 28px; height: 28px; stroke-width: 2.2; }
.lx-allok div { display: flex; flex-direction: column; gap: 2px; } .lx-allok b { font-size: 16px; } .lx-allok span { font-size: 14px; color: #2F6B4A; }
.lx-prow .lx-kb { width: 42px; height: 42px; }
.lx-prow .lx-link { padding: 0; }
body.lx-big #view .lx-pollf { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 22px; margin-bottom: 20px; }
body.lx-big #view .lx-pollf > div:nth-child(2) { flex: 1 1 320px; }
body.lx-big #view .lx-pollf h2 { font-size: 18px; }
body.lx-big .lx-hist-al .lx-tbl td { font-size: 14px; }
/* odkazy na pravidla ve watchdogu jako pilulky */
body.lx-big .lx-rlink { border: 0; border-radius: 14px; background: var(--a-bg); padding: 6px 12px; font-weight: 700; font-size: 13px; color: var(--a-text-2); }
body.lx-big .lx-rlink:hover { background: #E6E1F4; }
body.lx-big .lx-rlink.on { background: #ECE7FF; color: var(--a-accent); }
body.lx-big .lx-rlink .lx-i { width: 14px; height: 14px; }
body.lx-big .lx-wdtbl tr.on td:first-child { box-shadow: inset 4px 0 var(--a-accent); }
body.lx-big .lx-wdtbl select, body.lx-big .lx-inl input { border: 0 !important; background: var(--a-bg) !important; border-radius: 12px !important; }

/* zaškrtávací políčka ve stylu Pastel (tabulky, dialogy) */
body.lx-big :is(#view, .lx-dlg) input[type=checkbox] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; vertical-align: middle; cursor: pointer;
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid #CFC8E6; background: #FFFFFF;
  display: inline-grid; place-content: center; transition: background-color .12s, border-color .12s;
}
body.lx-big :is(#view, .lx-dlg) input[type=checkbox]::after {
  content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid #FFFFFF; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .12s;
}
body.lx-big :is(#view, .lx-dlg) input[type=checkbox]:hover:not(:disabled) { border-color: var(--a-accent); }
body.lx-big :is(#view, .lx-dlg) input[type=checkbox]:checked { background: var(--a-accent); border-color: var(--a-accent); }
body.lx-big :is(#view, .lx-dlg) input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
body.lx-big :is(#view, .lx-dlg) input[type=checkbox]:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
body.lx-big :is(#view, .lx-dlg) input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
/* sloupec, ve kterém je jen zaškrtávací políčko, na střed */
body.lx-big #view .lx-tbl td:has(> input[type=checkbox]:only-child) { text-align: center; }
body.lx-big #view .lx-wdtbl th:nth-child(1) { text-align: center; }
/* políčka mezí se vejdou do karty fáze */
.lx-row2 > *, .lx-row3 > * { min-width: 0; }
.lx-inu input { width: 100%; min-width: 0; }
body.lx-big .lx-inu input { border-radius: 14px 0 0 14px !important; }
body.lx-big .lx-inu i { border: 0; border-radius: 0 14px 14px 0; background: #E6E1F4; color: var(--a-text-2); font-weight: 700; }
.lx-stcur { white-space: nowrap; } .lx-stcur .lx-qd { margin-right: 10px; } .lx-stcur .lx-v { font-size: 16px; font-weight: 800; }
.lx-al-by { flex: none; width: 130px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lx-al-by small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--a-muted, #6B6880); }
.lx-al-by b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

/* ---------- Měření v Pastelu ---------- */
body.lx-big .mr { grid-template-columns: 330px minmax(0, 1fr); gap: 20px; }
body.lx-big #view :is(.mr-side, .mr-chartp, .mr .panel) { border: 0; border-radius: 26px; background: var(--a-surface); box-shadow: var(--a-shadow); }
body.lx-big .mr-side { overflow: hidden; }
body.lx-big .mr-side .panel-h { border: 0; padding: 16px 18px 6px; font: 800 17px var(--a-font); letter-spacing: -.01em; color: var(--a-text); background: none; }
body.lx-big .mr-side .panel-h .muted { font-weight: 600; font-size: 14px; }
body.lx-big .mr-flt { border: 0; padding: 6px 14px 12px; gap: 8px; }
body.lx-big .mr-flt :is(input[type=search], select) { border: 0; border-radius: 14px; background: var(--a-bg); min-height: 40px; padding: 4px 12px; font: 500 14px var(--a-font); color: var(--a-text); }
body.lx-big .mr-flt input[type=search]:focus-visible, body.lx-big .mr-flt select:focus-visible { outline: 2px solid var(--a-accent); }
body.lx-big .mr-row { gap: 10px; }
body.lx-big .mr-row .chk { font-size: 13px; font-weight: 600; color: var(--a-muted); gap: 8px; white-space: nowrap; }
body.lx-big .mr-tree { padding: 4px 10px 12px; }
body.lx-big .mr-grp > summary { border-radius: 14px; background: var(--a-bg); padding: 9px 12px; font: 800 14px var(--a-font); margin-top: 6px; }
body.lx-big .mr-grp > summary::marker { color: var(--a-muted); }
body.lx-big .mr-fld > summary { padding: 7px 10px 7px 20px; border-radius: 12px; font: 700 14px var(--a-font); color: var(--a-text-2); }
body.lx-big .mr-fld > summary:hover { background: var(--a-bg); }
body.lx-big .mr-fld > summary .chip { border: 0; border-radius: 999px; background: var(--a-bg); color: var(--a-text-2); font: 600 12px var(--a-font); letter-spacing: 0; text-transform: none; padding: 1px 9px; }
body.lx-big .mr-pt { padding: 6px 10px 6px 26px; border-radius: 12px; font-size: 14px; gap: 10px; align-items: center; }
body.lx-big .mr-pt:hover { background: var(--a-bg); }
body.lx-big .mr-pt small { font-family: var(--a-font); font-size: 12px; color: var(--a-muted); }
body.lx-big .mr-pt i.dp-kind { flex: none; border-radius: 999px; padding: 1px 8px; font: 700 10px var(--a-font); letter-spacing: .06em; background: var(--a-bg); color: var(--a-muted); }
body.lx-big .mr-pt i.dp-real { background: #ECE7FF; color: #5B3FE0; }
body.lx-big .mr-pt i.dp-di { background: #E4F5EA; color: #1F7A45; }
body.lx-big .mr-pt > span { min-width: 0; }
body.lx-big .mr-pt > span small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

body.lx-big .mr-main { gap: 20px; }
body.lx-big .mr-chartp { padding: 18px 20px 10px; }
body.lx-big .mr-status { font-size: 14px; color: var(--a-muted); margin: 8px 2px 4px; }
body.lx-big .mr-sw { width: 22px; height: 8px; border-radius: 4px; }
body.lx-big .mr-cur { font-size: 16px; font-weight: 800; }

/* hlavička obrazovky: rozsah jako segmentový přepínač, vlastní rozsah a akce */
body.lx-big .mereni-head { gap: 12px 14px; align-items: center; }
body.lx-big .mereni-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-right: 6px; }
body.lx-big #view .seg { border: 0; border-radius: 23px; background: #E6E1F4; padding: 3px; gap: 2px; }
body.lx-big #view .seg button { border: 0; border-radius: 20px; min-height: 38px; padding: 4px 16px; font: 700 14px var(--a-font); color: var(--a-text-2); background: transparent; }
body.lx-big #view .seg button:hover { color: var(--a-text); }
body.lx-big #view .seg button.on { background: var(--a-surface); color: var(--a-text); box-shadow: 0 2px 8px rgba(60, 40, 140, .08); }
body.lx-big .mr-custom { gap: 10px; align-items: center; }
body.lx-big .mr-custom label { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--a-font); color: var(--a-muted); }
body.lx-big .mr-custom input { border: 0; border-radius: 14px; background: var(--a-surface); box-shadow: 0 2px 8px rgba(60, 40, 140, .05); min-height: 40px; padding: 4px 12px; font: 500 14px var(--a-font); color: var(--a-text); }
body.lx-big #view .chk { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--a-font); color: var(--a-text-2); }
body.lx-big #view #mr-sets { border: 0; border-radius: 23px; background: var(--a-surface); box-shadow: 0 2px 8px rgba(60, 40, 140, .05); min-height: 44px; padding: 0 14px; font: 600 14px var(--a-font); color: var(--a-text); }
body.lx-big #view .sb-warn { border: 0; border-radius: 18px; background: #FFF0D9; color: #9A5B00; padding: 12px 16px; font-weight: 600; }
/* Měření vyplní výšku okna: dolní okraj panelů je zarovnaný s menu */
body.lx-big :is(.mr-main, .mr-side) { height: var(--mr-h); min-height: 460px; }
body.lx-big .mr-chartp { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
body.lx-big .mr-chartp #mr-chart { flex: 1; min-height: 0; }
body.lx-big .mr-chartp svg { width: 100% !important; height: 100% !important; max-height: none; }

/* vysvětlivky barev nad grafem */
.mr-keys { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 2px 4px 12px; }
.mr-keys:empty { display: none; }
.mr-key { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--a-bg, #F3F0FA); font-size: 13px; font-weight: 700; color: var(--a-text-2, #4A4760); white-space: nowrap; }
.mr-key i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
/* hodnota bodu ve vysvětlivce (ukáže se při najetí do grafu) a křížek pro odebrání */
.mr-key b { font-weight: 800; color: var(--a-text, #1C1B2E); }
.mr-key button { border: 0; background: none; padding: 0 0 0 2px; margin: 0; color: var(--a-muted, #8A86A0); font-size: 12px; line-height: 1; cursor: pointer; }
.mr-key button:hover { color: var(--a-text, #1C1B2E); }
/* graf: výběr úseku tažením myší */
body.lx-big .mr-chartp #mr-chart { cursor: crosshair; touch-action: none; user-select: none; }

/* ---------- Alarmy: jeden seznam pro rozvodnu i monitoring ---------- */
body.lx-big .lx-alflt { flex-wrap: wrap; gap: 10px; }
body.lx-big .lx-alflt .lx-search { flex: 1 1 260px; }
body.lx-big #view .lx-alflt select { border: 0; border-radius: 14px; background: var(--a-bg); min-height: 40px; padding: 4px 12px; font: 600 14px var(--a-font); color: var(--a-text); }
/* pevné šířky sloupců, aby štítky i časy lícovaly pod sebou */
.lx-al-src { flex: none; width: 124px; display: flex; justify-content: flex-start; }
.lx-al .lx-al-b > span a { color: var(--a-muted, #6B6880); }
body.lx-big a.lx-stat { text-decoration: none; color: inherit; }
body.lx-big a.lx-stat:hover { box-shadow: 0 12px 28px rgba(60, 40, 140, .12); }
/* odkaz z Monitoringu do Alarmů */
body.lx-big .lx-tomon { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
body.lx-big .lx-tomon > div { flex: 1; min-width: 0; }
body.lx-big .lx-tomon h2 { margin: 0 0 2px; font-size: 18px; }
body.lx-big .lx-tomon p { margin: 0; font-size: 14px; }
@media (max-width: 1320px) { .lx-al-by { display: none; } }

/* ---------- Dohled: záložky Alarmy / Události / Hlídání ---------- */
body.lx-big .lx-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: 22px; background: #E6E1F4; width: fit-content; max-width: 100%; overflow: auto; }
body.lx-big .lx-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 20px; border-radius: 18px; text-decoration: none;
  font: 700 15px var(--a-font); color: var(--a-text-2); white-space: nowrap; }
body.lx-big .lx-tabs a:hover { color: var(--a-text); }
body.lx-big .lx-tabs a.on { background: var(--a-surface); color: var(--a-text); box-shadow: 0 2px 8px rgba(60, 40, 140, .08); }
.lx-tabn { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; background: #E5484D; color: #fff;
  font: 700 12px var(--a-font); display: inline-flex; align-items: center; justify-content: center; }
.lx-tabn[hidden] { display: none; }
body.lx-big .lx-act { display: inline-flex; gap: 10px; align-items: center; }
/* žurnál událostí */
body.lx-big #view .lx-evt td { vertical-align: middle; }
body.lx-big #view .lx-evt td.nw, body.lx-big #view .lx-evt th { white-space: nowrap; }

/* název projektu, na který je obrazovka zúžená */
body.lx-big .lx-scope { display: inline-flex; align-items: center; margin-left: 12px; padding: 4px 14px; border-radius: 999px;
  background: var(--a-accent-soft, #ECE7FF); color: var(--a-accent, #5B3FE0); font: 700 14px var(--a-font); }


/* ===== Toast C2 — pastelový tón závažnosti (návrh Notifikace LDS Admin) ===== */
.lx-toasts { position: fixed; top: 20px; right: 20px; z-index: 1400; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.lx-tc { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px; border-radius: 18px;
  width: max-content; max-width: min(440px, calc(100vw - 32px)); box-sizing: border-box; font: 700 14px/1.35 "Plus Jakarta Sans", var(--a-font, var(--font, sans-serif));
  box-shadow: 0 10px 26px rgba(60,40,140,.12); opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-out, transform .18s ease-out; }
.lx-tc.show { opacity: 1; transform: none; }
.lx-tc.out { opacity: 0; transform: translateX(16px); transition: opacity .14s ease-in, transform .14s ease-in; }
.lx-tc-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; background: currentColor; display: grid; place-items: center; }
.lx-tc-ic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lx-tc-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lx-tc-sub { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; margin-top: 2px; }
.lx-tc-n { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.75); margin-left: 4px; }
.lx-tc-act { flex: none; border: 0; border-radius: 999px; padding: 7px 13px; background: #fff; color: inherit; font: 700 13px "Plus Jakarta Sans", var(--a-font, sans-serif); cursor: pointer; white-space: nowrap; }
.lx-tc-act:hover { box-shadow: 0 2px 8px rgba(60,40,140,.12); }
.lx-tc-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 10px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .55; }
.lx-tc-x:hover, .lx-tc-x:focus-visible { opacity: 1; background: rgba(255,255,255,.6); }
.lx-tc-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lx-tc:focus-within { outline: 2px solid #5B3FE0; outline-offset: 2px; }
.lx-tc-tm { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: currentColor; opacity: .55; }
.lx-tc.ok   { background: #E4F5EA; color: #1F7A45; }
.lx-tc.info { background: #ECE7FF; color: #4A2FCB; }
.lx-tc.warn { background: #FFF0D9; color: #9A5B00; }
.lx-tc.bad  { background: #FDE7E8; color: #B42328; }
.lx-tc.mute { background: #ECEBF1; color: #3F3C52; }
@media (max-width: 640px) {
  .lx-toasts { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; align-items: stretch; flex-direction: column-reverse; }
  .lx-tc { width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .lx-tc, .lx-tc.out { transition: none; transform: none; } .lx-tc-tm { display: none; } }

/* počet u tlačítka (např. Nepřiřazené RelayBoxy) */
.lx-cnt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: #5B3FE0; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.lx-cnt[hidden] { display: none; }

/* kostra načítání (skeleton) — jemný přebíhající lesk, bez pohybu při reduced-motion */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, #EEEAF8 0%, #F8F6FD 45%, #EEEAF8 90%); background-size: 300% 100%; animation: sk-shine 1.5s ease-in-out infinite; }
@keyframes sk-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.dsh-sk { gap: 14px; }
.dsh-sk .sk-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dsh-sk .sk-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dsh-sk .sk-ic { width: 46px; height: 46px; border-radius: 16px; flex: none; }
.dsh-sk .sk-dot { width: 34px; height: 34px; border-radius: 12px; flex: none; }
.dsh-sk .sk-bars { flex: 1; min-height: 220px; display: flex; align-items: flex-end; gap: 6px; }
.dsh-sk .sk-bars .sk { flex: 1; border-radius: 6px 6px 3px 3px; }
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; background: #EEEAF8; } }

/* panel nastavení dlaždice: pole vždy na šířku panelu (nic se neořezává), kompaktnější */
body #dsh-panel input[type=text], body #dsh-panel input[type=number], body #dsh-panel input[type=search], body #dsh-panel select, body #dsh-panel textarea {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 38px; padding: 7px 12px; font-size: 14px; border-radius: 12px; }
body #dsh-panel .dp-list { display: flex; flex-direction: column; gap: 8px; }
body #dsh-panel .dp-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
body #dsh-panel .dp-row .dp-name { font-size: 12.5px; font-weight: 600; color: var(--a-text-2, #4A4760); }
body #dsh-panel .dsh-chk input[type=checkbox] { width: 18px; height: 18px; flex: none; }
/* posuvný obsah panelu ořezával rámeček zaměřeného pole → malý vnitřní okraj (zarovnání zůstává díky zápornému okraji) */
body #dsh-pbody { padding: 4px 6px; margin: -4px -6px; }
/* kostra detailu projektu */
.lx-skg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lx-skc { background: var(--a-surface, #fff); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--a-shadow, 0 10px 30px rgba(60,40,140,.07)); }
.lx-skr { display: flex; align-items: center; gap: 12px; }

/* knihovna Modbus komunikace elektroměru */
.lx-libbar h3 { margin: 0; font-size: 15px; }
.lx-lib td input:not([type=checkbox]), .lx-lib td select { width: 100%; min-width: 4.5em; font-size: 13px; padding: 4px 6px; }
.lx-lib td input[type=number] { width: 6.5em; }

.lx-tbl td.lx-rowacts { width: auto; white-space: nowrap; }
.lx-tbl td.lx-rowacts .lx-ic { display: inline-grid; width: 30px; height: 30px; margin-left: 2px; }
.lx-lib tr.muted td { opacity: .55; }
.lx-lib td:first-child, .lx-lib th:first-child { width: 28px; text-align: center; }

.lx-bustbl { margin: 6px 0 8px; }
.lx-bustbl td, .lx-bustbl th { padding: 6px 8px; }

/* dialogy Teltonika: přepínač v řádku, skupina parametrů, pole s jednotkou */
.lx-chkrow { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 28px 0 12px; font-size: 15px; color: var(--text-2); font-weight: 500; cursor: pointer; }
.lx-chkrow input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); flex: none; }
.lx-fs { border: 1px solid var(--rule); border-radius: 12px; padding: 6px 14px 0; margin: 0 0 14px; }
.lx-fs legend { font-size: 13px; color: var(--text-2); padding: 0 6px; }
.lx-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 640px) { .lx-4col { grid-template-columns: 1fr 1fr; } }
.lx-unit { display: flex; align-items: center; gap: 8px; }
.lx-unit input { width: 9em !important; }
.lx-unit span { color: var(--text-2); }

/* ovládání výstupů v knihovně: aktuální stav podbarvený, vybraný povel čeká na potvrzení */
.lx-outgrp { display: inline-flex; gap: 6px; }
.lx-outbtn.cur.on, body.lx-big :is(#view, .lx-dlg) .btn.lx-outbtn.cur.on, body.lx-big :is(#view, .lx-dlg) .btn.lx-outbtn.cur.on:hover:not(:disabled) { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.lx-outbtn.cur.off, body.lx-big :is(#view, .lx-dlg) .btn.lx-outbtn.cur.off, body.lx-big :is(#view, .lx-dlg) .btn.lx-outbtn.cur.off:hover:not(:disabled) { background: #5B5873; border-color: #5B5873; color: #fff; }
.lx-outbtn.arm, body.lx-big :is(#view, .lx-dlg) .btn.lx-outbtn.arm, body.lx-big :is(#view, .lx-dlg) .btn.lx-outbtn.arm:hover:not(:disabled) { background: #F5A524; border-color: #F5A524; color: #1C1B2E; font-weight: 700; }
.lx-outbtn:disabled { opacity: .7; cursor: progress; }
.lx-outbtn .lx-spin { margin-right: 0; vertical-align: middle; }