:root {
  --bg: #f6f7f9; --panel: #fff; --line: #e3e6eb; --text: #1f2430; --muted: #6b7280;
  --accent: #4f46e5; --accent-soft: #eef2ff; --sel: #3b82f6; --danger: #dc2626;
  /* LL-T136: globalne kolory kategorii statusów (todo / doing / done) — public/plugins/status-core.js; admin może je zmienić (routes/status.js) */
  --st-todo: #64748b; --st-doing: #2563eb; --st-done: #16a34a;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 13px; color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
html:has(> body.m-on), body.m-on { background: #fff; }   /* iPhone 26, aplikacja z ekranu głównego: obszar pod oknem strony (pusty pas pod dolnym menu, błąd iOS) iOS maluje kolorem tła strony — biel zlewa się z dolnym menu */
#app { height: 100%; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff; width: 100%; }
input[type="checkbox"], input[type="radio"], input[type="color"], input[type="range"], input[type="file"], input[type="image"] { width: auto; padding: 0; border-radius: 0; flex: none; }
.perms select { width: auto; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 10px; }
button:hover { background: #f3f4f6; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #4338ca; }
button.ghost { border-color: transparent; background: transparent; }
button.ghost:hover { background: #eef0f3; }
button.sm, .sm { font-size: 12px; padding: 3px 7px; }
button.danger, .danger { color: var(--danger); }
.btn { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--text); display: inline-block; }
.muted { color: var(--muted); } .small { font-size: 12px; } .pad { padding: 12px; } .grow { flex: 1; } .hidden { display: none !important; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.pill.sm { font-size: 10px; padding: 0 5px; } .pill.old { background: #f1f5f9; color: #64748b; text-decoration: line-through; }
.row { display: flex; gap: 8px; align-items: center; } .row input, .row select { width: auto; flex: 1; }
.col { display: flex; flex-direction: column; gap: 10px; }

/* auth */
.auth-wrap { flex: 1; display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, #e0e7ff, transparent 50%), var(--bg); }
.auth-card { background: #fff; padding: 32px; border-radius: 14px; box-shadow: 0 10px 40px rgba(31, 36, 48, .1); width: 360px; display: flex; flex-direction: column; gap: 12px; }
.auth-card h2 { margin: 8px 0 0; font-weight: 600; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.form-err { color: var(--danger); min-height: 16px; font-size: 12px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.logo.big { font-size: 22px; } .logo b { color: var(--accent); }

/* topbar */
.topbar { height: 48px; white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line); flex-shrink: 0; }
/* LLT-101: przełącznik modułów — główne jako logo + nazwa, reszta w menu „Narzędzia” (siatka z wyszukiwarką), dzwonek powiadomień */
.apps { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.apps a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.apps a:hover { background: #f3f4f6; color: var(--text); }
.apps a.on { background: var(--accent-soft); color: var(--accent); }
.apps a.off { opacity: .45; cursor: default; }
.apps a.off:hover { background: transparent; color: var(--muted); }
.app-ic, .tile-ic, .head-ic { display: inline-flex; flex-shrink: 0; line-height: 0; }
.app-ic svg { border-radius: 5px; }
.apps a:not(.on) .app-ic { filter: saturate(.75); opacity: .9; }
.apps a.cur-tool { border-left: 1px solid var(--line); border-radius: 0 8px 8px 0; margin-left: 4px; }
.head-ic { margin-right: 10px; vertical-align: -4px; }
.tm { position: relative; margin-left: 4px; }
.apm-btn { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; background: transparent; color: var(--muted); font-weight: 500; padding: 6px 9px; border-radius: 8px; }
.apm-btn:hover, .apm-btn[aria-expanded="true"] { background: #f3f4f6; color: var(--text); }
.apm-btn.on { color: var(--accent); }
.apm-panel { position: fixed; z-index: 1000; width: 360px; max-height: calc(100vh - 70px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 12px; white-space: normal; }
.apm-panel[hidden], .apm-group[hidden], .apm-panel .tile[hidden] { display: none; }
.apm-search { margin-bottom: 10px; }
.apm-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 6px 4px; }
.apm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px; }
.apm-panel .tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; color: var(--text); font-size: 12px; text-align: center; }
.apm-panel .tile:hover, .apm-panel .tile:focus { background: #f3f4f6; outline: none; }
.apm-panel .tile.on { background: var(--accent-soft); color: var(--accent); }
.tile-ic svg { border-radius: 9px; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); }
.bell-nav { margin-left: 0; }
.tb-bell { position: relative; padding: 6px !important; }
.tb-bell .cl-unread { position: absolute; top: 0; right: -2px; margin: 0; min-width: 16px; text-align: center; }
.logo svg { flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(79, 70, 229, .3)); }
@media (max-width: 1280px) { .apps a .lbl, .apm-btn .lbl { display: none; } .apps a { padding: 6px; } .apps a.cur-tool .lbl { display: inline; } }
@media (max-width: 900px) { .apps a.cur-tool .lbl, .logo-link .logo span { display: none; } .crumbs { display: none; } }
.crumbs a { color: var(--muted); }
.key-search { width: 190px; flex-shrink: 1; min-width: 110px; }
@media (max-width: 1100px) { .user .muted { display: none; } }
.org-sel { width: auto; }
.user { display: flex; align-items: center; gap: 6px; }

/* pages */
.page { padding: 24px 32px; overflow: auto; flex: 1; }
.page-head { display: flex; align-items: center; gap: 16px; } .page-head h1 { font-weight: 600; margin: 0 0 8px; flex: 1; }
.page section { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 16px 0; }
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card { width: 220px; min-height: 100px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(79, 70, 229, .12); }
.card .pill { margin: 0; align-self: flex-start; } .card-title { font-weight: 600; font-size: 15px; }
.card.add { align-items: center; justify-content: center; color: var(--muted); border-style: dashed; }
.tbl { border-collapse: collapse; width: 100%; margin: 8px 0; } .tbl td, .tbl th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl select { width: auto; }

/* workbench */
.workbench { flex: 1; display: grid; grid-template-columns: var(--ll-left-w, clamp(200px, 20vw, 280px)) minmax(0, 1fr) var(--ll-right-w, clamp(240px, 24vw, 330px)); min-height: 0; }   /* LL-T137: LL.resizable */
.left, .right { background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.left { border-right: 1px solid var(--line); } .right { border-left: 1px solid var(--line); min-width: 0; overflow: hidden; }   /* LL-T248: zawartość nie wychodzi poza kolumnę */
.panel-head { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tree-filter { margin: 8px; width: calc(100% - 16px); }
.tree { flex: 1; overflow: auto; padding-bottom: 8px; user-select: none; }
.trow { display: flex; align-items: center; gap: 5px; padding: 3px 8px; cursor: pointer; white-space: nowrap; border-left: 2px solid transparent; }
.trow:hover { background: #f3f4f6; }
.trow.cur { border-left-color: var(--accent); }
.trow.sel { background: #bfdbfe; border-left-color: var(--sel); box-shadow: inset 2px 0 0 var(--sel); font-weight: 600; }
.trow.sel .tkey { color: #1e40af; }
.trow.open { background: var(--accent-soft); font-weight: 600; }
.trow.root { padding-left: 6px; }
.trow .twist { width: 10px; color: var(--muted); font-size: 10px; flex-shrink: 0; }
.trow .ticon { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.trow .tname { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.trow .tkey { color: var(--muted); font-size: 11px; font-family: Consolas, monospace; }
.trow.el:not(.ondiag) .tname { color: #4b5563; }
.trow.ondiag .tname { font-weight: 500; }
.ticon.nota { font-size: 9px; font-weight: 700; border-radius: 4px; color: #fff; height: 16px; align-items: center; }
.nota.bpmn { background: #0f766e; } .nota.uml { background: #a16207; } .nota.c4 { background: #1d4ed8; }
span.nota { color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.left-foot { border-top: 1px solid var(--line); padding: 6px; display: flex; gap: 2px; flex-wrap: wrap; }

.center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { height: 42px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #fff; border-bottom: 1px solid var(--line); }
.toolbar .dname { width: 220px; min-width: 120px; flex-shrink: 1; border-color: transparent; font-weight: 600; font-size: 14px; }
.toolbar .dname:hover { border-color: var(--line); }
.editor-wrap { flex: 1; position: relative; min-height: 0; display: flex; }
.palette { position: absolute; left: 10px; top: 10px; max-height: calc(100% - 20px); z-index: 5; width: var(--ll-pal-w, 122px); container: pal / inline-size; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); padding: 4px; }
.palette:empty { display: none; }
.pgroup { padding: 4px 0; border-bottom: 1px solid #f0f1f3; }
.pgroup.tools { display: grid; grid-template-columns: repeat(3, 36px); gap: 2px; }
.ptitle { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px 4px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 36px); gap: 2px; }
.pitem, .tool { border: 1px solid transparent; background: transparent; padding: 3px; display: grid; place-items: center; height: 32px; border-radius: 5px; color: #374151; }
.pitem:hover, .tool:hover { background: var(--accent-soft); border-color: #c7d2fe; }
.tool.on { background: var(--accent); color: #fff; }
/* LL-T137: przybornik o regulowanej szerokości (LL.resizable 'model.palette') — węższy: 2 kolumny, szerszy: więcej kolumn, jeszcze szerszy: ikony z etykietami */
@container pal (max-width: 111px) { .pgrid, .pgroup.tools { grid-template-columns: repeat(2, 36px); } }
@container pal (min-width: 150px) { .pgrid, .pgroup.tools { grid-template-columns: repeat(auto-fill, 36px); } }
@container pal (min-width: 200px) {
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pgrid .pitem { display: flex; justify-content: flex-start; gap: 6px; padding: 3px 6px; min-width: 0; }
  .pgrid .pitem::after { content: attr(title); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pgrid .pitem > svg { flex: none; }
}
.editor-host { flex: 1; position: relative; overflow: hidden; background: #fff; }
.canvas { width: 100%; height: 100%; display: block; outline: none; cursor: default; touch-action: none; font-family: "Segoe UI", Arial, sans-serif; }
.canvas, .canvas * { -webkit-user-select: none; user-select: none; }   /* przeciąganie/przesuwanie płótna nie zaznacza etykiet jak tekstu */
.canvas input, .canvas textarea, .canvas [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
.editor-host[data-tool="hand"] .canvas, .editor-host.panning .canvas { cursor: grab; }
.editor-host.panning-active .canvas { cursor: grabbing; }
.editor-host[data-tool="lasso"] .canvas { cursor: crosshair; }
.editor-host[data-tool="space"] .canvas { cursor: col-resize; }
.editor-host[data-tool="connect"] .canvas, .editor-host.armed .canvas { cursor: crosshair; }
body.placing { cursor: copy; user-select: none; }

.node { cursor: move; }
.readonly .node { cursor: pointer; }
.node.hover > :first-child { filter: drop-shadow(0 0 3px var(--sel)); }
.node text { user-select: none; pointer-events: none; }
.lbl, .elbl { fill: #22242a; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.edge .line { fill: none; stroke: #22242a; stroke-width: 1.5; stroke-linejoin: round; }
.edge .hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge:hover .line { stroke: #1d4ed8; }
.edge.selected .line { stroke: var(--sel); stroke-width: 2; }
.sel-box { fill: var(--sel); fill-opacity: .06; stroke: var(--sel); stroke-width: 2px; pointer-events: none; }   /* LL-T203: wyraźne zaznaczenie (pełna ramka + tło) */
.edge.selected .line { filter: drop-shadow(0 0 2px var(--sel)); }
.handle { fill: var(--sel); stroke: #fff; cursor: nwse-resize; }
.handle[data-handle="ne"], .handle[data-handle="sw"] { cursor: nesw-resize; }
.handle.bend { cursor: move; fill: var(--sel); fill-opacity: .25; }
.guide { stroke: #ec4899; stroke-dasharray: 4 3; pointer-events: none; }
.lasso { fill: rgba(59, 130, 246, .08); stroke: var(--sel); stroke-dasharray: 4 3; pointer-events: none; }
svg .ghost { fill: rgba(79, 70, 229, .08); stroke: var(--accent); stroke-dasharray: 5 3; pointer-events: none; }
.connect-preview { stroke: var(--sel); stroke-dasharray: 5 4; pointer-events: none; }
/* LL-T269: przeciąganie komunikatu sekwencji — linia wstawienia i podgląd */
.msg-slot { stroke: #2563eb; pointer-events: none; }
.msg-ghost { stroke: #64748b; stroke-dasharray: 6 4; pointer-events: none; }
.msg-slot.bad { stroke: #dc2626; }
/* LLT-250: krótka podpowiedź w miejscu na płótnie (ed.hintAt) — znika sama, nie blokuje */
.ed-hint { position: absolute; z-index: 9; transform: translateX(-50%); max-width: 320px; padding: 4px 10px; border-radius: 6px; background: #1f2937; color: #fff; font-size: 12px; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.ed-hint.on { opacity: 1; }
.editor-host.msg-dragging .canvas { cursor: ns-resize; }
/* LL-T250: przypięty pasek nazw linii życia (część płótna, nie okno) */
.seq-heads { position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 3; overflow: hidden; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)); border-bottom: 1px solid var(--line, #e3e6eb); box-shadow: 0 2px 6px rgba(15, 23, 42, .06); }
.seq-heads.hidden { display: none; }
/* LLT-250: miejsce zarezerwowane na pasek — płótno zaczyna się pod nim, pasek nigdy nie zasłania nagłówków linii życia */
.editor-host.has-heads .canvas { margin-top: 30px; height: calc(100% - 30px); }
/* LLT-278: pasek nazw nie wchodzi pod przybornik i jego uchwyt — widoczny dopiero za nim (--ll-canvas-l z editor.js) */
.editor-host > .seq-heads { clip-path: inset(0 0 0 var(--ll-canvas-l, 0px)); }
.seq-heads .sh-item { position: absolute; top: 3px; height: 24px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; pointer-events: auto;
  border: 1px solid #d6b26a; border-radius: 6px; background: #fef3c7; color: #1f2937; font: 600 12px/1 inherit; white-space: nowrap; cursor: pointer; overflow: hidden; }
.seq-heads .sh-item span { overflow: hidden; text-overflow: ellipsis; }
.seq-heads .sh-item.actor { background: #ffedd5; border-color: #f0a46b; }
.seq-heads .sh-item.on { outline: 2px solid var(--sel, #2563eb); outline-offset: 1px; }
.seq-heads .sh-item.ended { opacity: .45; }
.seq-heads .sh-item:hover { filter: brightness(.97); }
.space-line { stroke: #ec4899; pointer-events: none; } .space-area { fill: rgba(236, 72, 153, .05); pointer-events: none; }

.ctxpad { position: absolute; display: none; grid-template-columns: repeat(3, 26px); gap: 2px; z-index: 6; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 6px; padding: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.ctxpad button { width: 26px; height: 26px; padding: 2px; display: grid; place-items: center; border: none; background: transparent; color: #374151; border-radius: 4px; }
.ctxpad button:hover { background: var(--accent-soft); color: var(--accent); }
.popup { position: absolute; z-index: 8; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); padding: 4px; width: 250px; max-height: 420px; overflow: auto; }
.popup button { display: flex; align-items: center; gap: 8px; width: 100%; border: none; text-align: left; padding: 4px 8px; background: transparent; }
.popup button:hover { background: var(--accent-soft); } .popup button.cur { font-weight: 600; color: var(--accent); }
.zoombar { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 2px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.zoombar button { border: none; width: 28px; height: 28px; padding: 0; font-size: 16px; }
.zoombar .zl { font-size: 11px; color: var(--muted); width: 42px; text-align: center; }
.inline-edit { position: absolute; z-index: 9; resize: none; text-align: center; border: 2px solid var(--sel); border-radius: 4px; padding: 4px; background: rgba(255, 255, 255, .97); line-height: 1.25; }
.inline-edit.left { text-align: left; }
/* LL-T289: uchwyty fragmentu złożonego (operandy) i końców paska aktywacji */
.seq-ovl .sq-btn rect { fill: #fff; stroke: var(--sel); } .seq-ovl .sq-btn text { fill: var(--sel); font-weight: 700; pointer-events: none; user-select: none; }
.seq-ovl .sq-btn { cursor: pointer; } .seq-ovl .sq-btn:hover rect { fill: var(--sel); } .seq-ovl .sq-btn:hover text { fill: #fff; }
.seq-ovl .sq-btn.del rect { stroke: #dc2626; } .seq-ovl .sq-btn.del text { fill: #dc2626; } .seq-ovl .sq-btn.del:hover rect { fill: #dc2626; }
.seq-ovl .sq-sep { cursor: ns-resize; stroke: transparent; } .seq-ovl .sq-sep:hover { stroke: var(--sel); stroke-opacity: .25; }
.seq-ovl .sq-grip { fill: var(--sel); stroke: #fff; cursor: ns-resize; }
.sq-preview { stroke: var(--sel); stroke-dasharray: 6 4; pointer-events: none; } .sq-preview-bar { fill: var(--sel); fill-opacity: .15; stroke: var(--sel); stroke-dasharray: 4 3; pointer-events: none; }

/* right panel */
/* LL-T248: jeden wiersz bez zawijania; gdy zakładki się nie mieszczą — przewijanie w poziomie (kółko myszy / gest), nigdy nachodzenie na sąsiedni panel */
.tabs { display: flex; flex: none; min-width: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; }
.tabs button { flex: 1 0 auto; white-space: nowrap; border: none; border-radius: 0; background: transparent; padding: 10px 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.props, .hist { flex: 1; overflow: auto; }
.ptype { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.keyline { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; }
.bigkey { font-family: Consolas, monospace; font-size: 20px; font-weight: 700; color: var(--accent); }
.uuid code { font-size: 10.5px; user-select: all; }
.aliases { margin: 4px 0; }
.field { display: flex; flex-direction: column; gap: 3px; margin: 10px 0; }
.field > span { font-size: 11px; color: var(--muted); font-weight: 600; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12px; } .check input { width: auto; }
.section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.section.soon { opacity: .6; }
.hint { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; margin-top: 12px; } .hint ul { margin: 6px 0 0; padding-left: 18px; } .hint li { margin: 3px 0; }
.hrow { padding: 8px 12px; border-bottom: 1px solid #f0f1f3; }

.modal { background: #fff; border-radius: 12px; width: min(720px, 92vw); max-height: 85vh; overflow: auto; padding: 16px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin: -16px -20px 10px; padding: 12px 20px 10px; font-size: 15px; position: sticky; top: -16px; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.modal-head button { flex: none; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 100; }
.toast { background: #1f2937; color: #fff; padding: 8px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 560px; }
.toast.err { background: var(--danger); }

/* poprawki układu */
.panel-head { white-space: nowrap; }
.panel-head button { padding: 3px 5px; }
.toolbar { scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.left-foot button { padding: 3px 5px; }
.split-hint { fill: none; stroke: #22c55e; stroke-opacity: .55; pointer-events: none; }
svg .ghost.bad { fill: rgba(220, 38, 38, .08); stroke: var(--danger); }
.new-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 8px 0; }
.new-bar .nb { padding: 5px 2px; font-size: 12px; font-weight: 600; border-radius: 6px; white-space: nowrap; }
.nb.bpmn { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }
.nb.uml { color: #a16207; border-color: #fde68a; background: #fefce8; }
.nb.c4 { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.nb.pkg { color: #374151; }
.left .where { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmenu { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 4px; min-width: 200px; display: flex; flex-direction: column; }
.tmenu button { border: none; text-align: left; padding: 6px 10px; background: transparent; }
.tmenu button:hover { background: var(--accent-soft); }
.pal-head { display: flex; align-items: center; gap: 4px; padding: 2px 2px 4px; border-bottom: 1px solid #f0f1f3; }
.pal-head .kind { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-head button { border: none; padding: 2px 6px; font-size: 14px; background: transparent; }
.nota-btn { border: none; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.nota-btn:hover { filter: brightness(1.1); background-color: inherit; }
.nota-btn.bpmn { background: #0f766e; } .nota-btn.uml { background: #a16207; } .nota-btn.c4 { background: #1d4ed8; }
.trow.drop { outline: 2px dashed var(--accent); background: var(--accent-soft); }
.trow.diag .tkey { font-family: inherit; font-size: 10.5px; }
.trow .star { color: #f59e0b; font-size: 12px; }
/* LL-T288: elementy diagramu pod diagramem w drzewie — odnośniki do tych samych elementów (subtelny styl „na diagramie”) */
.trow.diag .twist { cursor: pointer; }
.trow.dkid .tname { font-style: italic; color: #4b5563; }
.trow.dkid .ticon { opacity: .8; }
.trow.dkid.locked .tname { color: var(--muted); }
.trow.dkid.sel .tname { color: inherit; }
.usage-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.usage-item { padding: 6px 0; border-bottom: 1px solid #f0f1f3; } .usage-item:last-child { border-bottom: none; }
.usage-item ul { margin: 4px 0 0; padding-left: 20px; font-size: 12px; color: #374151; }
.usage-count { margin-left: 8px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #e5e7eb; }
.usage-count.many { background: #fef3c7; color: #92400e; }
button.danger-btn { background: var(--danger); border-color: var(--danger); }
button.danger-btn:hover { background: #b91c1c; }
.linked-badge { cursor: pointer; }
.nota-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.nota-dot.bpmn { background: #0f766e; } .nota-dot.uml { background: #b45309; } .nota-dot.c4 { background: #1d4ed8; }
.ea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ea-grid .field { margin: 6px 0; }
.tags-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.tags-tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; }
.tags-tbl td { padding: 2px 2px; } .tags-tbl input { padding: 3px 5px; font-size: 12px; }
.color-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-right: 10px; }
.color-field input { width: 34px; height: 26px; padding: 1px; }
.trace { list-style: none; margin: 4px 0 0; padding-left: 16px; border-left: 1px dashed #d1d5db; }
.trace li { margin: 3px 0; font-size: 12.5px; }
.trace-rel { color: var(--muted); font-size: 11px; }
.trace-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trace-impact { background: #fef3c7; border-radius: 8px; padding: 8px 12px; }
.modal.wide { width: min(1100px, 96vw); }
.search-filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.search-res { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.search-res .tbl { margin: 0; } .search-res th { position: sticky; top: 0; background: #f9fafb; }
.search-row { cursor: pointer; } .search-row:hover { background: var(--accent-soft); }
.search-row.cur, .search-row.cur:hover { background: #e0e7ff; box-shadow: inset 3px 0 0 var(--accent, #4f46e5); } .search-row:focus { outline: none; }   /* LL-T316: zaznaczony wiersz */
.st-chip { color: #fff; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }

.handle.endh { fill: #fff; stroke: var(--accent); cursor: crosshair; }
.ctxpad.multi { grid-template-columns: repeat(9, 26px); }
.minimap { position: absolute; right: 12px; bottom: 54px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: 4px; cursor: pointer; z-index: 5; }
.minimap .mm-view { fill: rgba(79,70,229,.08); stroke: var(--accent); stroke-width: 1.5; }

.node text.lbl.movable { pointer-events: auto; cursor: move; }
.node text.lbl.movable:hover { fill: var(--accent); }

.matrix-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.matrix { border-collapse: collapse; font-size: 12px; }
.matrix th, .matrix td { border: 1px solid #e5e7eb; }
.matrix th.row { text-align: left; padding: 4px 8px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: #fff; z-index: 1; }
.matrix th.col { height: 150px; vertical-align: bottom; padding: 4px 2px; position: sticky; top: 0; background: #fff; }
.matrix th.col div { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 140px; overflow: hidden; text-overflow: ellipsis; }
.matrix th.corner { position: sticky; left: 0; top: 0; z-index: 2; background: #f9fafb; font-weight: 600; color: var(--muted); }
.matrix td { width: 26px; height: 24px; text-align: center; cursor: pointer; color: #fff; font-weight: bold; }
.matrix td:hover { background: var(--accent-soft); }
.matrix td.on { background: #0369a1; } .matrix td.back { background: #7dd3fc; }

.new-bar { grid-template-columns: repeat(3, 1fr); }
.nb.more { color: var(--accent); border-color: #c7d2fe; background: var(--accent-soft); grid-column: span 2; }

.twofa-setup { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-top: 8px; }
.twofa-setup .secret { font-size: 16px; letter-spacing: 1px; font-weight: 700; display: inline-block; padding: 6px 10px; background: #fff; border: 1px dashed var(--accent); border-radius: 6px; user-select: all; }
.twofa-setup .uri { font-size: 11px; word-break: break-all; user-select: all; }
.audit-wrap { max-height: 420px; overflow: auto; margin-top: 8px; }
.audit-bad td { background: #fef2f2; }
.tok-win { background: #fffbeb; border-left: 3px solid #f59e0b; padding: 6px 10px; border-radius: 4px; margin: 4px 0 10px; }

/* LLT-100: Project Browser — uchwyt przeciągania, kolejność ręczna, pasek nawigacji (breadcrumb) */
.trow .tgrip { color: #cbd5e1; cursor: grab; font-size: 10px; letter-spacing: -2px; width: 8px; flex: none; opacity: 0; }
.trow:hover .tgrip { opacity: 1; color: #6366f1; }
.trow.drop-before { box-shadow: inset 0 2px 0 #6366f1; }
.trow.drop-after { box-shadow: inset 0 -2px 0 #6366f1; }
.crumbs { display: flex; align-items: center; gap: 2px; padding: 3px 10px; font-size: 12px; background: linear-gradient(90deg, #eef2ff, #fdf2f8); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; min-height: 26px; }
.crumbs:empty { display: none; }
.crumbs .crumb { border: 1px solid transparent; background: none; border-radius: 6px; padding: 1px 7px; color: #3730a3; font-weight: 600; cursor: pointer; }
.crumbs .crumb:hover { background: #fff; border-color: #c7d2fe; }
.crumbs .crumb.cur { cursor: default; background: #fff; border-color: #a5b4fc; color: #1f2937; }
.crumbs .csep { border: none; background: none; color: #94a3b8; padding: 0 3px; cursor: pointer; font-size: 14px; border-radius: 4px; }
.crumbs .csep:hover { background: #e0e7ff; color: #4338ca; }

/* LLT-105: przełącznik języka */
.lang-select{font-size:12px;padding:2px 4px;margin:0 6px;border-radius:6px}
.auth-lang{text-align:center;margin-top:10px}

/* LLT-105: przełącznik języka */
.lang-select{font-size:12px;padding:2px 4px;margin:0 6px;border-radius:6px}
.auth-lang{text-align:center;margin-top:10px}

/* LL-T137: panele o regulowanej szerokości (public/resize.js, LL.resizable) — uchwyt na wewnętrznej krawędzi panelu */
.ll-rz { position: absolute; z-index: 30; width: 8px; cursor: col-resize; touch-action: none; user-select: none; outline: none; }
.ll-rz[hidden] { display: none; }
.ll-rz::before { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: #e2e8f0; transition: background .12s; }
/* uchwyt zawsze widoczny: kropki pośrodku krawędzi */
.ll-rz::after { content: ''; position: absolute; left: 2px; top: calc(50% + 22px); width: 4px; height: 22px; background: radial-gradient(circle, #94a3b8 1.2px, transparent 1.6px) 0 0 / 4px 5.5px repeat-y; pointer-events: none; }
.ll-rz.collapsed::after { display: none; }
.ll-rz:hover::before, .ll-rz.on::before, .ll-rz:focus-visible::before { background: var(--accent); }
.ll-rz-btn { position: absolute; top: 50%; left: -4px; width: 16px; height: 28px; margin-top: -14px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted);
  font-size: 13px; line-height: 24px; text-align: center; cursor: pointer; opacity: .55; transition: opacity .12s; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ll-rz:hover .ll-rz-btn, .ll-rz:focus-visible .ll-rz-btn, .ll-rz.collapsed .ll-rz-btn { opacity: 1; }
.ll-rz-btn:hover { color: var(--accent); border-color: var(--accent); }
.ll-rz.collapsed { min-height: 48px; width: 12px; background: #f3f4f6; border-left: 1px solid var(--line); border-right: 1px solid var(--line); cursor: e-resize; }
.ll-rz-right.collapsed { cursor: w-resize; }
.ll-rz.collapsed::before { display: none; }
.ll-rz.collapsed .ll-rz-btn { left: -3px; }
@media (hover: none) { .ll-rz-btn { opacity: 1; } .ll-rz { width: 14px; } .ll-rz::before { left: 6px; } .ll-rz-btn { left: -1px; } }
.ll-rz-panel { min-width: 0; }
.ll-rz-collapsed { width: 0 !important; min-width: 0 !important; flex: 0 0 0 !important; padding: 0 !important; border-width: 0 !important; overflow: hidden !important; }
.ll-rz-collapsed > * { display: none !important; }
body.ll-rz-dragging, body.ll-rz-dragging * { cursor: col-resize !important; user-select: none !important; }
body.ll-rz-dragging iframe { pointer-events: none; }

/* LL-T136: kategorie statusów — jeden kolor na kategorię w całym Lab (szary / niebieski / zielony), odcień light | dark opcjonalny */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --st-todo: #94a3b8; --st-doing: #60a5fa; --st-done: #4ade80; } }
:root[data-theme=dark] { --st-todo: #94a3b8; --st-doing: #60a5fa; --st-done: #4ade80; }
:root { --st-verify: color-mix(in srgb, var(--st-doing) 45%, #fff); }
.st-todo { --st-cat: var(--st-todo); --st-c: var(--st-cat); } .st-doing { --st-cat: var(--st-doing); --st-c: var(--st-cat); } .st-done { --st-cat: var(--st-done); --st-c: var(--st-cat); }
.st-badge, .st-dot, .st-fill, .st-picker { --st-c: var(--st-cat, var(--st-todo)); }
.st-light { --st-c: color-mix(in srgb, var(--st-cat) 55%, #fff); } .st-dark { --st-c: color-mix(in srgb, var(--st-cat) 75%, #000); }
.st-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 16px; padding: 1px 8px; border-radius: 10px; white-space: nowrap;
  background: color-mix(in srgb, var(--st-c) 16%, transparent); color: color-mix(in srgb, var(--st-c) 82%, var(--text)); border: 1px solid color-mix(in srgb, var(--st-c) 30%, transparent); }
button.st-badge { cursor: pointer; font-family: inherit; } button.st-badge:hover { background: color-mix(in srgb, var(--st-c) 26%, transparent); }
.st-badge.solid, .st-fill { background: var(--st-c); color: #fff; border-color: transparent; }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st-c); flex: none; }
.st-picker { border-left: 4px solid var(--st-c); font-weight: 600; color: color-mix(in srgb, var(--st-c) 82%, var(--text)); }
.st-picker option { color: var(--text); font-weight: 400; } .st-picker .st-opt-todo { color: var(--st-todo); } .st-picker .st-opt-doing { color: var(--st-doing); } .st-picker .st-opt-done { color: var(--st-done); }
.st-colours { display: grid; grid-template-columns: auto 60px 1fr; gap: 8px 10px; align-items: center; }

/* pasek górny 2026-11-10: przełącznik aplikacji, projekt, menu konta */
.tb-pop { position: relative; display: inline-flex; }
.as-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; padding: 4px 10px 4px 6px; border-radius: 10px; font-weight: 600; color: var(--text); }
.as-btn:hover, .as-btn[aria-expanded="true"] { background: #f3f4f6; }
.as-cur { font-size: 15px; }
.as-caret { color: var(--muted); font-size: 11px; }
.as-panel { width: 430px; }
.as-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.as-prod { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.as-prod:hover, .as-prod:focus { background: #f3f4f6; outline: none; }
.as-prod.on { background: var(--accent-soft); }
.as-prod.off { opacity: .45; cursor: default; }
.as-prod[hidden] { display: none; }
.as-txt { display: flex; flex-direction: column; min-width: 0; white-space: normal; line-height: 1.25; }
.as-txt b { font-size: 14px; }
.pj-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 5px 8px; border-radius: 8px; color: var(--text); max-width: 260px; }
.pj-btn:hover, .pj-btn[aria-expanded="true"] { background: #f3f4f6; }
.pj-name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pj-panel { width: 300px; }
.pj-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.pj-item:hover { background: #f3f4f6; } .pj-item.on { background: var(--accent-soft); }
.um-btn { border: 0; background: transparent; padding: 2px; border-radius: 50%; }
/* LL-T287: awatar osoby (LL.avatar) — kółko z inicjałami w kolorze osoby, zdjęcie na wierzchu; pole osoby (LL.personField) */
.ll-av { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 10px; line-height: 1; flex: none; overflow: hidden; vertical-align: middle; user-select: none; }
.ll-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ll-av.has-img { background: #e5e7eb !important; }
.ll-av.has-img .ll-av-i { visibility: hidden; }
.ll-av-xs { width: 18px; height: 18px; font-size: 8px; }
.ll-av-sm { width: 22px; height: 22px; font-size: 10px; }
.ll-av-md { width: 28px; height: 28px; font-size: 11px; }
.ll-av-lg { width: 72px; height: 72px; font-size: 26px; }
.ll-av-none { background: #e5e7eb; color: #9ca3af; }
.ll-pf { display: inline-flex; align-items: center; min-width: 0; }
.ll-pf-cur { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px 2px 2px; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.ll-pf-cur:hover, .ll-pf-cur:focus-visible { border-color: var(--line, #d1d5db); background: var(--hover, #f3f4f6); }
.ll-pf.ro .ll-pf-cur { cursor: default; }
.ll-pf-cur[hidden] { display: none; }
.ll-pf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; }
.um-av.big { width: 40px; height: 40px; font-size: 15px; flex: none; }
.um-panel { width: 290px; display: flex; flex-direction: column; gap: 4px; }
.um-head { display: flex; gap: 10px; align-items: center; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; white-space: normal; }
.um-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px; font-size: 13px; }
.um-item { display: block; text-align: left; width: 100%; border: 0; background: transparent; padding: 7px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; cursor: pointer; }
.um-item:hover { background: #f3f4f6; }
.topbar .key-search { width: 240px; }
@media (max-width: 1100px) { .pj-name { display: none; } .topbar .key-search { width: 160px; } }

/* LL-T193: bez okien systemowych i nakładek — potwierdzenia w miejscu, widoki i panel boczny w układzie (public/ui-inline.js) */
.ll-inline-hidden, .ll-view-hidden { display: none !important; }
.ll-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 10px; color: var(--text); }
.ll-inline.danger { background: #fef2f2; border-color: #fca5a5; }
.ll-inline-strip { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; margin: 2px 0; }
/* LL-T470: w wąskim wierszu (flex) pasek zajmuje własny wiersz i zawija tekst oraz przyciski */
.ll-inline-strip { flex: 1 1 16em; white-space: normal; text-align: start; font-weight: normal; }
:has(> .ll-inline-strip) { flex-wrap: wrap; max-width: 100%; }   /* LL-T470: rodzic (wiersz, chip) zawija, pasek nie wychodzi poza kontener */
:not(.ll-inline-text) > .ll-inline-strip { box-sizing: border-box; }   /* w rzędzie flex: rośnie do dostępnego miejsca, w wierszu z zawijaniem przechodzi niżej */
.ll-inline-bar { flex: none; margin: 8px 12px; }
.ll-inline-text { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.ll-inline-details { margin-top: 4px; }
.ll-inline-btns { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; max-width: 100%; }
.ll-inline button { min-height: 32px; }
@media (hover: none) { .ll-inline button { min-height: 40px; } }
.ll-inline button { padding: 4px 10px; }
.ll-inline.ask { background: #fff; border-color: var(--line); }
.ll-inline-ask { display: flex; align-items: center; gap: 6px; flex: 1 1 320px; flex-wrap: wrap; }
.ll-inline-label { font-size: 12px; color: var(--muted); }
.ll-inline-input { flex: 1 1 200px; min-width: 120px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.ll-inline-err { flex-basis: 100%; color: var(--danger); font-size: 12px; }
.ll-inline-err:empty { display: none; }
.ll-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.ll-view-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.ll-view-title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-view-actions { display: flex; gap: 6px; }
.ll-view-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 24px; }
.ll-view-body > .modal, .ll-side-body > .modal { width: auto; max-width: 860px; max-height: none; overflow: visible; box-shadow: none; border-radius: 10px; border: 1px solid var(--line); margin: 0 auto; }
.ll-view-body > .modal.wide, .ll-view-body.wide > .modal { max-width: none; }
.ll-side-body > .modal { border: 0; padding: 0; max-width: none; }
.ll-dlg > .modal-head { position: static; margin: 0 0 10px; border-radius: 0; }
#app.ll-side-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); }
#app.ll-side-open > .topbar { grid-column: 1 / -1; grid-row: 1; }
#app.ll-side-open > .ll-inline-bar { grid-column: 1 / -1; grid-row: 2; }
#app.ll-side-open > :not(.topbar):not(.ll-inline-bar):not(.ll-side):not(.ll-rz) { grid-column: 1; grid-row: 3; min-height: 0; }
.ll-side { grid-column: 2; grid-row: 3; width: var(--ll-side-w, 420px); min-height: 0; min-width: 0; position: relative; z-index: 3; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--line); }
.ll-side-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ll-side-title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-side-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
/* LL-T248: panel boczny obok obszaru roboczego z panelami (np. Lab Model: repozytorium | płótno | Właściwości) — kolumny boczne obszaru
   oddają miejsce proporcjonalnie (lewa ≤ 24 %, prawa ≤ 36 % szerokości), płótno dostaje resztę; nic nie wychodzi poza kolumnę */
#app.ll-side-open .workbench { grid-template-columns: min(var(--ll-left-w, clamp(200px, 20vw, 280px)), 24%) minmax(0, 1fr) min(var(--ll-right-w, clamp(240px, 24vw, 330px)), 36%); min-width: 0; }
#app.ll-side-open .workbench > * { min-width: 0; }
/* LL-T149: lewy pasek nawigacji projektu (public/project-nav.js) — skrajnie po lewej, obok paneli modułu; zwinięty = same ikony (48 px) */
.ll-pshell { position: relative; flex: 1; display: flex; min-height: 0; min-width: 0; }
.ll-pshell > .workbench, .ll-pshell > .plugin-app { flex: 1; min-width: 0; min-height: 0; }
.ll-pshell > .plugin-app { overflow: auto; display: flex; flex-direction: column; }
.ll-pnav { width: var(--ll-pnav-w, 232px); flex: 0 0 auto; display: flex; flex-direction: column; background: #fafbfc; border-right: 1px solid var(--line); min-height: 0; overflow: hidden; font-size: 13px; }
.ll-pnav.ll-rz-collapsed { width: 48px !important; min-width: 48px !important; flex: 0 0 48px !important; border-width: 0 1px 0 0 !important; }
.ll-pnav.ll-rz-collapsed > * { display: flex !important; }
.ll-pnav.ll-rz-collapsed > .pn-groups { display: block !important; }
.ll-rz[data-panel="project.nav"] .ll-rz-btn, .ll-rz[data-panel="project.nav"].collapsed { display: none; }
.pn-head { display: flex; gap: 8px; align-items: center; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); }
.pn-pic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; background: var(--accent-soft); display: grid; place-items: center; font-size: 16px; }
.pn-pt { min-width: 0; } .pn-pname { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-pmeta { display: flex; gap: 4px; align-items: center; margin-top: 2px; } .pn-pmeta .pill { margin: 0; }
.pn-sw { position: relative; padding: 6px 8px 0; }
.pn-switch { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 8px; cursor: pointer; text-align: left; }
.pn-switch .pn-lb { flex: 1; } .pn-caret { color: var(--muted); }
.pn-menu { position: absolute; left: 8px; right: 8px; top: calc(100% + 2px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 4px; max-height: 320px; overflow: auto; }
.pn-menu[hidden] { display: none; }
.pn-mi { display: block; padding: 6px 8px; border-radius: 6px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-mi:hover, .pn-mi.on { background: var(--accent-soft); color: var(--accent); }
.pn-groups { flex: 1; overflow: auto; padding: 4px 6px 8px; }
.pn-group { margin-top: 8px; }
.pn-gh { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 6px; }
.pn-toggle { border: 0; background: none; width: 100%; cursor: pointer; text-align: left; } .pn-gbody[hidden] { display: none; }
.pn-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; border: 0; background: none; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.pn-item:hover { background: #eef1f5; } .pn-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.pn-ic { width: 20px; flex: 0 0 20px; text-align: center; } .pn-lb { overflow: hidden; text-overflow: ellipsis; }
.pn-srow { display: flex; align-items: center; } .pn-srow .pn-item { flex: 1; min-width: 0; }
.pn-sact { display: none; } .pn-srow:hover .pn-sact { display: flex; } .pn-sact button { padding: 0 4px; }
.pn-lock { color: var(--muted); cursor: default; }
.pn-hint { color: var(--muted); font-size: 12px; margin: 2px 8px 4px; }
.pn-add { color: var(--accent); }
.pn-form { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; } .pn-in { padding: 4px 6px; } .pn-err { color: var(--danger); font-size: 12px; } .pn-frow { display: flex; gap: 4px; }
.pn-foot { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); padding: 6px; }
.pn-foot .pn-settings { flex: 1; min-width: 0; }
.pn-collapse { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 28px; height: 28px; flex: 0 0 28px; cursor: pointer; color: var(--muted); }
.pn-collapse:hover { color: var(--accent); border-color: var(--accent); }
.ll-pnav.pn-mini .pn-lb, .ll-pnav.pn-mini .pn-pt, .ll-pnav.pn-mini .pn-caret, .ll-pnav.pn-mini .pn-hint, .ll-pnav.pn-mini .pn-sact, .ll-pnav.pn-mini .pn-gh .pn-tw { display: none !important; }
.ll-pnav.pn-mini .pn-head { justify-content: center; padding: 8px 0; } .ll-pnav.pn-mini .pn-item, .ll-pnav.pn-mini .pn-switch { justify-content: center; padding: 6px 0; }
.ll-pnav.pn-mini .pn-gh { height: 1px; padding: 0; margin: 6px 4px; background: var(--line); overflow: hidden; }
.ll-pnav.pn-mini .pn-foot { flex-direction: column; } .ll-pnav.pn-mini .pn-groups { padding: 4px; }
.ll-pnav.pn-mini .pn-sw { padding: 6px 4px 0; } .ll-pnav.pn-mini .pn-menu { left: 4px; right: auto; min-width: 200px; }
@media (max-width: 760px) { .ll-pnav:not(.pn-mini) { width: 48px; } .ll-pnav .pn-lb, .ll-pnav .pn-pt { display: none; } }
/* LL-T215: wybierak osób (LL.peoplePicker, public/core.js) — pole z chipami i lista-popover pod polem (bez tła, nie modal) */
.llpp { display: inline-block; vertical-align: middle; }
.llpp-box { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; min-width: 200px; max-width: 460px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: text; box-sizing: border-box; }
.llpp-box:focus-within { border-color: #93c5fd; }
.llpp .llpp-box input { border: 0; outline: 0; min-width: 110px; max-width: none; width: auto; flex: 1; padding: 3px 2px; background: transparent; box-shadow: none; }
.llpp-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 2px 1px 1px; border-radius: 12px; background: #e0f2fe; font-size: 12px; white-space: nowrap; }
.llpp-chip button { border: 0; background: transparent; cursor: pointer; padding: 0 3px; color: var(--muted); font-size: 12px; }
.llpp-av { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; flex: none; }
.llpp-list { position: fixed; z-index: 60; max-width: min(420px, 96vw); max-height: 280px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(15,23,42,.12); text-align: left; }
.llpp-opt { display: flex; gap: 6px; align-items: center; padding: 4px 8px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.llpp-opt.act, .llpp-opt:hover { background: #eff6ff; }
.llpp-opt .muted { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.llpp-note { padding: 4px 8px; font-size: 12px; color: var(--muted); }

/* LL-T162 (WCAG 2.1 AA): widoczny fokus z klawiatury, link „Przejdź do treści”, tekst tylko dla czytników ekranu, ograniczenie ruchu */
:where(a, button, [role="button"], [tabindex], summary, select, input, textarea):focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.skip-link { position: absolute; left: 8px; top: -40px; z-index: 10000; background: #fff; color: #1e3a8a; padding: 6px 12px; border-radius: 6px; border: 2px solid var(--accent, #2563eb); font-weight: 600; }
.skip-link:focus { top: 8px; }
#main-content:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
/* LL-T226: wzmianka osoby @[Imię Nazwisko] w komentarzach (Lab Flow, Lab Docs) */
.ll-mention { background: var(--accent-soft, #eef2ff); color: var(--accent, #2563eb); border-radius: 4px; padding: 0 3px; font-weight: 600; white-space: nowrap; }

/* Przyciski akcji wierszy pokazywane dawniej tylko po najechaniu myszą (odepnij ✕ w Horizon i Lab Flow, ⋯ w Dialerze, akcje drzewa Docs):
   na ekranach dotykowych (iPad, telefon) zawsze widoczne, z klawiatury — przy fokusie, a ✕ odpinania także na komputerze (wyszarzony) */
body .hz-rows .x, body .ft-rows .x { visibility: visible; opacity: .4; }
body .hz-rows > div:hover .x, body .ft-rows > div:hover .x, body .hz-rows .x:focus-visible, body .ft-rows .x:focus-visible { opacity: 1; }
body .dl-row:focus-within .more, body .ld-row:focus-within .ta { visibility: visible; }
@media (hover: none) {
  body .hz-rows .x, body .ft-rows .x { opacity: 1; min-width: 32px; min-height: 32px; }
  body .dl-row .more, body .ld-row .ta { visibility: visible; min-width: 32px; min-height: 32px; }
}

/* LL-T473: diagram UML z kodu Mermaid / PlantUML (public/plugins/uml-code.js) */
.umlc-panel .ll-side-body { display: flex; flex-direction: column; gap: 8px; }
.umlc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.umlc-row .spacer { flex: 1; }
.umlc-row input.umlc-name { flex: 1; min-width: 160px; }
.umlc-editor { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; min-height: 260px; height: 42vh; resize: vertical; }
.umlc-gutter { white-space: pre; text-align: right; padding: 8px 6px; background: #f8fafc; color: #94a3b8; font: 12.5px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; user-select: none; min-width: 34px; border-right: 1px solid var(--line); }
.umlc-text { flex: 1; border: 0; outline: none; resize: none; padding: 8px; font: 12.5px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 2; background: transparent; }
.umlc-issues { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow: auto; }
.umlc-issue { text-align: left; border: 0; background: none; padding: 2px 4px; font-size: 12.5px; cursor: pointer; border-radius: 4px; }
.umlc-issue.err { color: #b91c1c; }
.umlc-issue.warn { color: #92400e; }
.umlc-issue:hover { background: #f1f5f9; }
.umlc-ok { color: #15803d; font-size: 12.5px; }
.umlc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.umlc-status { font-size: 12.5px; color: #475569; }
.umlc-status.ok { color: #15803d; }
.umlc-status.warn { color: #92400e; }
.umlc-status.err { color: #b91c1c; }
.umlc-conflict { border: 1px solid #f59e0b; background: #fffbeb; border-radius: 6px; padding: 8px; font-size: 13px; }
.umlc-sum { font-size: 13px; }
.umlc-list { font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.umlc-type { margin-top: 4px; }
.umlc-el code { background: #f1f5f9; padding: 0 4px; border-radius: 3px; }
.umlc-el select { font-size: 12px; padding: 1px 4px; }
.umlc-schema { width: 100%; max-height: 280px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-top: 6px; }
.umlc-diff h4 { margin: 6px 0 2px; }
.umlc-dsec { font-size: 12.5px; }
.umlc-dsec ul { margin: 2px 0 6px 18px; padding: 0; }
.umlc-dsec.add b { color: #15803d; }
.umlc-dsec.chg b { color: #1d4ed8; }
.umlc-dsec.del b { color: #b91c1c; }

/* LL-T512: wyróżniony wpis „Karta projektu” projektu zmiany — pierwszy pod nazwą projektu */
.pn-top { padding: 4px 6px 2px; } .pn-item.pn-primary { background: #f0fdfa; border: 1px solid #99f6e4; color: #0f766e; font-weight: 600; } .pn-item.pn-primary.on { background: var(--accent-soft); color: var(--accent); }
/* LL-T522: analiza wpływu przy usuwaniu (public/impact.js) — w potwierdzeniu inline; pakiet: przesuwana lista kart */
.impact-details { margin-top: 6px; display: grid; gap: 4px; max-width: 100%; min-width: 0; }
.impact-summary { font-weight: 600; }
.impact-more-list summary { cursor: pointer; color: var(--accent, #4f46e5); }
.impact-list { display: grid; gap: 6px; margin: 6px 0; max-height: 260px; overflow: auto; }
.impact-group ul { margin: 2px 0 0 16px; padding: 0; }
.impact-group-t { font-weight: 600; }
.impact-pkg { display: grid; gap: 6px; min-width: 0; }
.impact-totals { display: flex; gap: 6px; flex-wrap: wrap; }
.impact-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; max-width: 100%; }
.impact-card { flex: 0 0 220px; scroll-snap-align: start; border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 6px 8px; background: var(--panel, #fff); font-size: 12px; }
.impact-card ul { margin: 4px 0 0 14px; padding: 0; }
.impact-card-h { display: flex; gap: 4px; align-items: baseline; }
.impact-card-h b { white-space: nowrap; }
.impact-count { margin-left: auto; background: #fde68a; color: #92400e; border-radius: 10px; padding: 0 7px; font-weight: 700; }
.dge-deleted { color: #92400e; }