/* DevHub: klimat Cyberpunk 2077 / Edgerunners (DEVHUB-FUNDAMENT.md §8.1).
 * Efekt = informacja: bursztyn = wymaga Ciebie, turkus = żywe teraz, czerwień = blokada, glitch = stare dane, puls = pracuje.
 * Tryby: html[data-tryb="night"] (PC, pełne efekty) i html[data-tryb="spokojny"] (telefon, prefers-reduced-motion). */

@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url(/static/fonts/rajdhani-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF; }
@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url(/static/fonts/rajdhani-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url(/static/fonts/rajdhani-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF; }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url(/static/fonts/rajdhani-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2500-25FF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2500-25FF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(/static/fonts/inter-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(/static/fonts/inter-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  /* znaczenia */
  --bg: #07080b;
  --panel: rgba(13, 17, 23, .92);
  --panel-2: #111823;
  --line: #1f2a37;
  --line-hi: #2e4052;
  --text: #d8e1ea;
  --dim: #8796a8;
  --you: #ffb01f;     /* jedyny kolor „wymaga Ciebie” (paleta Korpo, P-20261015-1) */
  --live: #2ff3c8;    /* żywe teraz */
  --alert: #ff1e3c;   /* blokada, błąd, STOP */
  --ok: #39ff88;
  --warn: #ff7a3d;
  /* obszary */
  --a-kod: #2f7bff; --a-grafika: #ff2bd6; --a-balans: #b6f23a; --a-serwer: #8a96a8;
  --a-bot: #39ff88; --a-prawo: #e3c9a0; --a-devhub: #9b5cff;
  /* typografia */
  --f-head: 'Rajdhani', 'Arial Narrow', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-text: 'Inter', system-ui, sans-serif;
  --cut: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
/* T-0035 (powrót 15.10): miejsce na pasek przewijania zawsze zarezerwowane, więc szerokość strony jest ta sama na zakładce z przewijaniem i bez (Pulpit);
   inaczej pasek statusu zawijał się tylko na części zakładek i szyna zakładek skakała o wiersz (test: tests/szyna-klik.js, klasyczne paski jak na Windows) */
html { scrollbar-gutter: stable; }
body { font: 14px/1.5 var(--f-text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--live); }
h1, h2, h3, .head { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
h1 { font-size: 28px; } h2 { font-size: 18px; color: var(--dim); } h3 { font-size: 15px; }
.mono, .num, code, kbd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.you { color: var(--you); } .live { color: var(--live); } .alert { color: var(--alert); } .ok { color: var(--ok); } .warn { color: var(--warn); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

/* tło: siatka i (w Night City) linie skanowania + ziarno; nakładki nie łapią kliknięć */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 70% -10%, rgba(47, 243, 200, .07), transparent 55%),
              radial-gradient(ellipse at 0% 110%, rgba(255, 43, 214, .06), transparent 50%),
              linear-gradient(rgba(31, 42, 55, .25) 1px, transparent 1px) 0 0 / 100% 48px,
              linear-gradient(90deg, rgba(31, 42, 55, .25) 1px, transparent 1px) 0 0 / 48px 100%; }
html[data-tryb="night"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }

/* ── panel ze ściętymi rogami (obrys przez ::before, wypełnienie przez ::after) ── */
.cp { position: relative; isolation: isolate; --edge: var(--line); --fill: var(--panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cp::before { content: ''; position: absolute; inset: 0; background: var(--edge); z-index: -2; }
.cp::after { content: ''; position: absolute; inset: 1px; background: var(--fill); z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--cut) + .4px) 0, 100% calc(var(--cut) - .4px), 100% 100%, calc(var(--cut) - .4px) 100%, 0 calc(100% - var(--cut) + .4px)); }
.panel { padding: 16px 18px 18px; }
.panel > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.panel > header h2 { color: var(--text); font-size: 16px; }
.panel > header .meta { margin-left: auto; font: 11px var(--f-mono); color: var(--dim); }
.panel.you { --edge: var(--you); } .panel.live { --edge: rgba(47, 243, 200, .55); } .panel.alert { --edge: var(--alert); }
/* nacięcie HUD w lewym górnym rogu */
.tick::marker { content: none; }
.panel > header::before { content: ''; width: 8px; height: 8px; background: var(--edge); flex: none; align-self: center;
  clip-path: polygon(0 0, 100% 0, 0 100%); }

/* ── przyciski ── */
.btn { --cut: 9px; --edge: var(--line-hi); --fill: #0f1620; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; background: none; padding: 9px 18px; font: 700 14px var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.btn:hover { --edge: var(--live); color: var(--live); }
.btn.you { --edge: var(--you); --fill: var(--you); color: #0a0a00; }
.btn.you:hover { --fill: #fff57a; color: #000; }
.btn.danger { --edge: var(--alert); --fill: #12050a; color: var(--alert); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  text-shadow: 0 0 6px rgba(255, 30, 60, .7); box-shadow: 0 0 12px rgba(255, 30, 60, .25); }
.btn.danger::before { content: '■'; font-size: .8em; }
.btn.danger:hover { --edge: var(--alert); --fill: var(--alert); color: #0b0006; text-shadow: none; animation: glitch-btn .3s steps(2) 1; }
@keyframes glitch-btn { 50% { transform: translateX(-2px); filter: drop-shadow(2px 0 var(--live)); } }
.btn.ghost { --edge: transparent; --fill: transparent; color: var(--dim); padding: 6px 10px; }
.btn.ghost:hover { color: var(--live); }
.btn[disabled] { opacity: .45; cursor: not-allowed; --edge: var(--line); color: var(--dim); }
.btn.small { padding: 5px 12px; font-size: 12px; --cut: 6px; }

input[type=text], input[type=search], input[type=password], input:not([type]), textarea, select {
  width: 100%; background: #0a0f15; border: 1px solid var(--line-hi); padding: 9px 11px; outline: none; border-radius: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--live); box-shadow: 0 0 0 1px rgba(47, 243, 200, .25), 0 0 14px rgba(47, 243, 200, .12); }
label { display: block; font: 11px var(--f-mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; margin: 10px 0 4px; }
.code-in { font: 700 26px var(--f-mono); letter-spacing: .5em; text-align: center; max-width: 220px; }

/* ── znaczniki ── */
.tag { display: inline-flex; align-items: center; gap: 5px; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid currentColor; color: var(--dim); white-space: nowrap; }
.tag.you { color: var(--you); } .tag.live { color: var(--live); } .tag.alert { color: var(--alert); } .tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
/* puls = pracuje teraz */
.pulse .dot, .dot.pulse { box-shadow: 0 0 0 0 currentColor; }
html[data-tryb="night"] .pulse .dot, html[data-tryb="night"] .dot.pulse { animation: puls 1.6s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(47, 243, 200, .7); } 70% { box-shadow: 0 0 0 8px rgba(47, 243, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 243, 200, 0); } }

/* ── glitch = dane stare albo błąd źródła (siła rośnie z wiekiem: .stale-1 … .stale-3) ── */
.stale { position: relative; }
.stale .stale-label { display: inline-flex; }
.stale-label { display: none; color: var(--warn); font: 700 11px var(--f-mono); letter-spacing: .08em; gap: 5px; align-items: center; }
html[data-tryb="night"] .stale .glitchable { animation: glitch var(--g-speed, 3.2s) steps(1) infinite; }
html[data-tryb="night"] .stale-2 { --g-speed: 1.8s; } html[data-tryb="night"] .stale-3 { --g-speed: .9s; }
@keyframes glitch {
  0%, 86%, 100% { text-shadow: none; transform: none; clip-path: none; }
  88% { text-shadow: -2px 0 var(--alert), 2px 0 var(--live); transform: translateX(1px); }
  90% { text-shadow: 2px 0 var(--alert), -2px 0 var(--live); clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%); transform: translateX(-3px); }
  92% { text-shadow: -1px 0 var(--alert), 1px 0 var(--live); clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%); transform: translateX(2px); }
  94% { text-shadow: none; clip-path: none; transform: none; }
}
.error-box { color: var(--alert); font: 13px var(--f-mono); }

/* ── ładowanie: skan po szkielecie ── */
.skel { height: 14px; background: linear-gradient(90deg, #111a24 0%, #1a2836 40%, #111a24 80%) 0 0 / 200% 100%; margin: 8px 0; }
html[data-tryb="night"] .skel { animation: skan 1.2s linear infinite; }
@keyframes skan { to { background-position: -200% 0; } }
.empty { color: var(--dim); font: 13px var(--f-mono); padding: 18px 0; text-align: center; border: 1px dashed var(--line); }

/* ── kafle miar ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tile { padding: 14px 16px 16px; --cut: 12px; }
.tile .k { font: 700 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tile .v { font: 700 40px/1.1 var(--f-mono); margin: 6px 0 4px; letter-spacing: -.02em; }
.tile .v small { font-size: 16px; color: var(--dim); margin-left: 4px; }
.tile .s { font: 12px var(--f-mono); color: var(--dim); }
.tile .bar { height: 4px; background: #16202b; margin-top: 10px; position: relative; }
.tile .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; }
.tile .bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ok); }
.tile.bad { --edge: rgba(255, 30, 60, .55); } .tile.bad .v { color: var(--alert); }
.tile.mid { --edge: rgba(255, 122, 61, .5); } .tile.mid .v { color: var(--warn); }
.tile.good { --edge: rgba(57, 255, 136, .5); } .tile.good .v { color: var(--ok); }
html[data-tryb="night"] .tile.bad .v { text-shadow: 0 0 12px rgba(255, 30, 60, .45); }
html[data-tryb="night"] .tile.good .v { text-shadow: 0 0 12px rgba(57, 255, 136, .35); }

/* ── tabele ── */
.tbl-wrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { font: 700 11px var(--f-mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line-hi); white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid rgba(31, 42, 55, .7); white-space: nowrap; }
td.n, th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
tr:hover td { background: rgba(47, 243, 200, .04); }
.minibar { display: inline-block; height: 6px; background: var(--live); vertical-align: middle; margin-left: 6px; opacity: .7; }

/* ── układ aplikacji ── */
#app { --rail-w: 120px; display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.statusbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; padding: 8px 16px;
  border-bottom: 1px solid var(--line); background: rgba(7, 8, 11, .92); font: 12px var(--f-mono); position: sticky; top: 0; z-index: 20; }
.statusbar .brand { font: 700 18px var(--f-head); letter-spacing: .18em; color: var(--you); margin-right: 6px; }
.statusbar .brand span { color: var(--text); } .statusbar .brand i { font-style: normal; }
.statusbar .it { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.statusbar .it .k { color: var(--dim); }
.statusbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* T-0016: na PC pasek to rząd płyt (wariant A „Płyty”, odebrany 16.10) na całą szerokość: etykieta nad wartością, ścięty róg,
   kolor stanu w pasku u dołu płyty (z klasy wartości: live/ok/warn/alert/you). Bursztyn i tło płyty tylko na CZEKA (you). Telefon: dawny wiersz napisów. */
@media (min-width: 761px) {
  .statusbar { flex-wrap: nowrap; gap: 4px; padding: 4px; box-shadow: inset 0 -2px 0 var(--brand, var(--live)); }
  .statusbar .brand { flex: none; align-self: center; padding: 0 12px 0 6px; margin: 0; }
  /* T-0054 (uwaga właściciela 17.10): napis DEVHUB tej samej szerokości co szyna zakładek: logo zajmuje kolumnę szyny (--rail-w),
     odstęp liter rozciąga napis od lewej do prawej krawędzi ikon (6,5 px marginesu z obu stron); podkreślenie linku zostaje. Test: tests/symetria.js (T163) */
  .statusbar .brand { width: var(--rail-w); margin-left: -4px; padding: 0 6.5px; box-sizing: border-box; text-align: center; letter-spacing: .54em; white-space: nowrap; }
  .statusbar .brand i { letter-spacing: 0; }
  .statusbar .it { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 0 6px; padding: 3px 10px 5px; position: relative;
    background: var(--panel-2); border: 1px solid var(--line); color: inherit; text-decoration: none; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--cut, 10px)) 0, 100% var(--cut, 10px), 100% 100%, 0 100%); }
  .statusbar .it .k { flex-basis: 100%; order: -1; font: 600 10px/1.3 var(--f-mono); letter-spacing: .2em; }
  .statusbar .it > b, .statusbar .it > span:not(.k):not(.dot):not(.dim) { font: 700 17px/1.15 var(--f-head); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .statusbar .it::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c, var(--line-hi)); box-shadow: 0 0 8px var(--c, transparent); }
  .statusbar .it:has(.live), .statusbar .it.live { --c: var(--live); } .statusbar .it:has(.ok) { --c: var(--ok); } .statusbar .it:has(.warn) { --c: var(--warn); }
  .statusbar .it:has(.alert), .statusbar .it.alert { --c: var(--alert); } .statusbar .it:has(.you) { --c: var(--you); background: rgba(255, 176, 31, .08); border-color: rgba(255, 176, 31, .55); }
  .statusbar a.it:hover { border-color: var(--line-hi); }
  /* równe płyty (uwaga właściciela 16.10): stała wysokość, każda wartość tą samą czcionką w jednej linii (dim tylko kolorem),
     w węższym oknie czcionka i odstępy maleją zamiast ucinać tekst */
  .statusbar .it { height: 44px; box-sizing: border-box; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: flex-start; }
  .statusbar .it > b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 1.35vw, 17px) !important; }
  .statusbar .it > b .dot { margin-right: 6px; vertical-align: middle; }
  /* T-0058: pierścień pulsu kropki (box-shadow 8 px) mieścił się poza polem <b>, które przycina (overflow: hidden dla wielokropka): ucięty z lewej o 8 px.
     Zapas wewnątrz pola (padding) zniesiony ujemnym marginesem: kropka i napis stoją tam, gdzie stały. Test T242 (1600 i 1920 px). */
  .statusbar .it > b:has(.dot) { padding: 4px 0 4px 10px; margin: -4px 0 -4px -10px; }
  .statusbar .it .k { flex-basis: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 1100px) { .statusbar .it { padding: 3px 6px 5px; } .statusbar .it .k { letter-spacing: .06em; } }
  .statusbar .right { flex: none; margin-left: 2px; }
}
/* T-0035: szyna to stały, osobny element (position: fixed pod paskiem statusu; sticky dawał 0,5 px różnicy po przewinięciu),
   ikony nie kurczą się (flex: none), więc pozycja i rozmiar ikon są te same na każdej zakładce (test: tests/szyna-zrzut.js).
   Kolumnę 64 px trzyma siatka #app; main stoi jawnie w kolumnie 2. */
.rail { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; background: rgba(7, 8, 11, .6);
  position: fixed; left: 0; top: var(--sb-h, 42px); width: var(--rail-w); height: calc(100vh - var(--sb-h, 42px)); box-sizing: border-box; overflow-y: auto; scrollbar-width: none; z-index: 15; }
#app > main { grid-column: 2; grid-row: 2; }
/* T-0017: na PC szyna to 2 kolumny, wypełniane z góry na dół; wiersze 1fr rozkładają ikony na całą wysokość ekranu (bez przewijania).
   --rail-n = połowa zakładek w górę (ustawia szyna() w wspolne.js); przy bardzo niskim oknie minmax(48px) i overflow-y przewijają jak dawniej. */
@media (min-width: 761px) {
  .rail { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, 52px); grid-template-rows: repeat(var(--rail-n, 10), minmax(48px, 1fr));
    justify-content: center; place-items: center; gap: 0 6px; padding: 8px 0; }
  .rail a[aria-current="page"]::before { left: -4px; }
}
.rail a { flex: none; width: 48px; height: 48px; display: grid; place-items: center; color: var(--dim); text-decoration: none; position: relative;
  font: 700 10px var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.rail a svg { width: 22px; height: 22px; display: block; margin: 0 auto 2px; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; } /* T-0017: Linia Korpo */
.rail a:hover { color: var(--text); }
.rail a[aria-current="page"] { color: var(--live); }
.rail a[aria-current="page"]::before { content: ''; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; background: var(--live); box-shadow: 0 0 10px var(--live); }
main { padding: 20px 24px 60px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.page-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* T-0054: center (było flex-end): tytuł, liczniki i guziki na jednej osi */
.page-title h1 { line-height: 1; }
.page-title h1 .slash { color: var(--you); }
.page-title .meta { font: 12px var(--f-mono); color: var(--dim); }
/* T-0061 wariant B „Dwie linie” (public/js/opisy.js): obok nazwy zakładki dwie linie CO TU JEST / CO ZROBISZ i ? ze ściągą „Jak czytać”.
   Na PC linie w jednym wierszu (wielokropek, pełny tekst w podpowiedzi i w ściądze), na telefonie zawinięte. Test T243 (tests/opisy.js). */
.opis-zakladki { position: relative; flex: 1 1 380px; min-width: 260px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center;
  padding: 1px 0 1px 14px; border-left: 2px solid var(--line-hi); }
.opis-zakladki .pyt { grid-row: 1 / 3; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-hi);
  background: var(--panel-2); color: var(--dim); font: 700 15px var(--f-head); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.opis-zakladki .pyt:hover, .opis-zakladki.otwarty .pyt { color: var(--text); border-color: var(--brand, var(--live)); }
.opis-zakladki .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px/1.4 var(--f-text); color: var(--text); }
.opis-zakladki .l + .l { color: var(--dim); }
.opis-zakladki .l .k { font: 600 10px var(--f-mono); letter-spacing: .16em; color: var(--dim); margin-right: 8px; }
.opis-zakladki .opis-sciaga { display: none; position: absolute; left: 14px; top: calc(100% + 10px); z-index: 30; width: min(560px, calc(100vw - 40px)); padding: 12px 16px;
  background: var(--panel-2); border: 1px solid var(--line-hi); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), inset 0 2px 0 var(--brand, var(--live)); font: 13px/1.5 var(--f-text); }
.opis-zakladki .opis-sciaga h3 { font-size: 12px; letter-spacing: .18em; margin: 0 0 6px; } .opis-zakladki .opis-sciaga ul { margin: 0; padding-left: 18px; }
.opis-zakladki.otwarty .opis-sciaga { display: block; }
.page-title.opis-wlasny { flex: none; } /* zakładka bez własnego nagłówka (Rozmowy): powłoka wstawia nazwę i opis */
@media (max-width: 760px) {
  .opis-zakladki { flex-basis: 100%; min-width: 0; padding-left: 10px; }
  .opis-zakladki .l { white-space: normal; }
  .opis-zakladki .opis-sciaga { left: 0; }
}
.seg { display: inline-flex; border: 1px solid var(--line-hi); }
.seg button { background: none; border: 0; padding: 6px 12px; font: 700 12px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--live); color: #001417; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.note { font-size: 13px; color: var(--dim); max-width: 75ch; }

/* wykres dzienny (SVG) */
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { fill: var(--dim); font: 10px var(--f-mono); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .b-rest { fill: #2a3a4c; } .chart .b-agent { fill: var(--alert); opacity: .85; }
.legend { display: flex; gap: 14px; font: 11px var(--f-mono); color: var(--dim); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }

/* karta agenta jak ID ekipy */
.idcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.idcard { --cut: 16px; padding: 14px 16px; --area: var(--a-devhub); --edge: color-mix(in srgb, var(--area) 55%, transparent); }
.idcard .top { display: flex; align-items: center; gap: 10px; }
.idcard .av { width: 38px; height: 38px; display: grid; place-items: center; font: 700 16px var(--f-head); color: #000; background: var(--area);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.idcard .handle { font: 700 17px var(--f-head); letter-spacing: .06em; text-transform: uppercase; }
.idcard .sub { font: 11px var(--f-mono); color: var(--dim); }
.idcard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 12px 0 0; font: 12px var(--f-mono); }
.idcard dt { color: var(--dim); } .idcard dd { margin: 0; text-align: right; white-space: nowrap; }

/* czeka na Ciebie */
.waiting { --edge: var(--you); --cut: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.waiting .what { flex: 1 1 220px; }
.waiting .what b { font: 700 15px var(--f-head); letter-spacing: .05em; text-transform: uppercase; color: var(--you); display: block; }

/* CZEKA w miejscu (F3 K5): karta, akcje, sterowanie, nakładki (do <body>), pinezki, weto */
.czeka-karta { align-items: flex-start; }
.czeka-karta .what { display: grid; gap: 6px; min-width: 0; }
.czeka-karta .tytul { font-size: 15px; overflow-wrap: anywhere; }
.czeka-karta .tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.czeka-karta .odp, .czeka-karta .ster { flex: 1 1 100%; }
.czeka-karta .odp input { flex: 1 1 200px; min-width: 0; }
.czeka-karta .ster { border-top: 1px solid var(--line); padding-top: 6px; gap: 4px; }
.czeka-karta .linki { display: flex; gap: 10px; flex-wrap: wrap; font: 12px var(--f-mono); }
/* T-0064 (wariant B „Kroki”): komenda dla właściciela. Lewa: gdzie + kroki (Kopiuj, lokalny ✓, postęp); prawa: po co, wynik, dlaczego nie rola,
   pole wyniku i akcje. Wąsko (pływające okno, telefon) kolumny układają się jedna pod drugą; telefon: tylko odczyt + Kopiuj. */
.kom .what { flex: 1 1 100%; }
.kom-uklad { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 18px; min-width: 0; }
.kom-lewa, .kom-prawa { display: grid; gap: 8px; align-content: start; min-width: 0; }
.kom-gdzie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 13px var(--f-mono); }
.kom-gdzie .etyk, .kom-pole .etyk { font: 700 11px var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.kom-gdzie .miejsce { color: var(--live); border: 1px solid var(--live); padding: 1px 8px; }
.kom-gdzie .kat { font-weight: 400; overflow-wrap: anywhere; }
.kom-gdzie .prawo { margin-left: auto; }
.kom-krok { --cut: 8px; --fill: var(--bg); --edge: var(--line-hi); display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; }
.kom-krok .nr { font: 700 20px/1 var(--f-head); color: var(--dim); text-align: center; }
.kom-krok code { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kom-krok.zrobiony { --edge: var(--ok); } .kom-krok.zrobiony .nr { color: var(--ok); } .kom-krok.zrobiony code { color: var(--dim); }
.krok-ok { width: 30px; height: 30px; border: 1px solid var(--line-hi); background: none; color: var(--dim); cursor: pointer; }
.kom-krok.zrobiony .krok-ok { border-color: var(--ok); color: var(--ok); }
.kopiuj.ok { --edge: var(--ok); color: var(--ok); }
.kom-postep { display: flex; align-items: center; gap: 10px; font: 11px var(--f-mono); color: var(--dim); }
.kom-postep .pas { flex: 1; height: 3px; background: var(--line); } .kom-postep i { display: block; height: 100%; width: 0; background: var(--ok); }
.kom-pole { display: grid; gap: 2px; } .kom-pole .wart { font-size: 13px; overflow-wrap: anywhere; } .kom-pole.mono .wart { font: 12px var(--f-mono); }
.kom-pole.blokada .wart { color: var(--alert); font: 12px var(--f-mono); }
.kom-prawa textarea { width: 100%; min-height: 52px; background: var(--bg); border: 1px solid var(--line-hi); font: 12px var(--f-mono); padding: 8px; resize: vertical; }
.kom-akcje { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .kom-akcje .btn { justify-content: center; } .kom-akcje .pelna { grid-column: 1 / -1; }
.kom-odrzuc { display: flex; gap: 6px; } .kom-odrzuc[hidden] { display: none; }
.kom-odrzuc input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line-hi); padding: 5px 8px; font-size: 13px; }
.kom-watek { justify-self: end; }
@media (max-width: 760px) { .kom-prawa textarea, .kom-akcje, .kom-odrzuc, .kom-watek, .krok-ok, .kom-postep { display: none; } .kom-krok { grid-template-columns: 22px minmax(0, 1fr) auto; } }
.miniatury { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn { position: relative; padding: 0; border: 1px solid var(--line); background: none; cursor: zoom-in; }
.mini-btn:hover { border-color: var(--live); }
.mini-btn .tag { position: absolute; left: 4px; bottom: 4px; background: rgba(7, 8, 11, .85); }
.prawo { margin-left: auto; }
.weto-lista { display: grid; gap: 6px; margin-bottom: 10px; }
.weto { padding: 6px 10px; border: 1px solid rgba(255, 30, 60, .45); }
.weto .cd { font-size: 18px; min-width: 52px; }
.zapytaj { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.zapytaj summary { cursor: pointer; font: 700 13px var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--live); }
.zapytaj .pisz { display: grid; gap: 8px; margin-top: 8px; }
.zapytaj .row input { flex: 1 1 200px; min-width: 0; }
.u-roli { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.nakladka { position: fixed; inset: 0; z-index: 80; background: rgba(7, 8, 11, .92); display: grid; place-items: center; padding: 16px; overflow: auto; }
.nakladka > .panel { width: min(1100px, 100%); max-width: 100%; min-width: 0; max-height: calc(100vh - 32px); overflow: auto; } /* min-width: 0 = szeroki obraz nie rozpycha nakładki poza okno */
.nakladka.mala > .panel { width: min(520px, 100%); } /* T-0046: krótkie okna menu roli (grupa, przepisz, usuń) */
.karta-edytor { width: 100%; min-height: 50vh; resize: vertical; font-size: 12.5px; line-height: 1.5; background: var(--panel-2); color: var(--text); border: 1px solid var(--line-hi); padding: 8px; } /* T-0051: edycja karty roli */
.karta-diff { max-height: 55vh; overflow: auto; font-size: 12px; line-height: 1.45; background: var(--panel-2); border: 1px solid var(--line); padding: 8px; white-space: pre-wrap; }
.karta-diff .ok { color: var(--ok); } .karta-diff .alert { color: var(--alert); } .karta-diff .dim { color: var(--dim); }
.role-grupa.arch > summary { list-style: none; } .role-grupa.arch > summary::before { content: "▸ "; } .role-grupa.arch[open] > summary::before { content: "▾ "; }
.nakladka header { display: flex; align-items: center; gap: 10px; }
.pin-fig { position: relative; display: block; max-width: 100%; }
.pin-fig img { display: block; max-width: 100%; max-height: 70vh; cursor: crosshair; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--you); background: rgba(7, 8, 11, .8);
  color: var(--you); font: 700 12px var(--f-mono); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 0 10px rgba(255, 176, 31, .5); }
.pin:hover { background: var(--alert); border-color: var(--alert); color: #000; }
.pin.nowa { border-style: dashed; }
.pin-in { position: absolute; width: min(320px, 60%); z-index: 2; }
.pin-lista { margin: 10px 0 0; font-size: 14px; }
.watek-poz { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.toast .btn { margin-left: 12px; }

/* Zadania (F3 K6 + T-0036): kafelki statusów (filtr) + lista edytowalna; na PC jeden ekran, przewija się tylko lista w panelu */
.zt { display: flex; flex-direction: column; gap: 12px; }
.zt-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.zt-k { --cut: 10px; --edge: var(--line-hi); display: grid; gap: 2px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--dim); background: var(--panel); border: 0;
  font: 700 11px var(--f-head); letter-spacing: .12em; text-transform: uppercase; transition: transform .15s; }
.zt-k:hover { --edge: var(--live); color: var(--text); transform: translateY(-1px); }
.zt-k .zt-n { font: 700 24px var(--f-mono); color: var(--text); letter-spacing: 0; }
.zt-k.you { --edge: var(--you); } .zt-k.you .zt-n { color: var(--you); }
.zt-k.alert { --edge: var(--alert); } .zt-k.alert .zt-n { color: var(--alert); }
.zt-k[aria-pressed="true"] { --edge: var(--live); color: var(--live); box-shadow: 0 0 14px rgba(47, 243, 200, .3); }
.zt-lista { display: flex; flex-direction: column; min-height: 0; }
.zt-wiersze { display: grid; }
.zt-w { display: grid; grid-template-columns: 62px minmax(0, 1fr) 92px 110px 64px 64px auto; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--line);
  color: var(--text); cursor: pointer; font-size: 13px; border-left: 2px solid transparent; }
.zt-w:hover, .zt-w:focus-visible { background: rgba(47, 243, 200, .05); border-left-color: var(--live); outline: none; }
.zt-w.ty { border-left-color: var(--you); } .zt-w.alarm { border-left-color: var(--alert); }
.zt-w > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.zt-w > .zt-tyt { white-space: normal; overflow-wrap: anywhere; font-size: 13px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.zt-akcje { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.zt-akcje select { width: auto; padding: 3px 6px; font-size: 12px; }
@media (min-width: 761px) {
  #app:has(.zt) { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  main:has(.zt) { min-height: 0; overflow: hidden; padding-bottom: 20px; display: flex; flex-direction: column; }
  .zt { flex: 1; min-height: 0; }
  .zt-lista { flex: 1; }
  .zt-przewijane { flex: 1; min-height: 0; overflow: auto; }
}
@media (max-width: 1100px) { .zt-w { grid-template-columns: 62px minmax(0, 1fr) 92px auto; } .zt-w > span:nth-child(4), .zt-w > span:nth-child(5), .zt-w > span:nth-child(6) { display: none; } }
/* telefon: tylko odczyt (bez akcji), wiersz w dwóch liniach */
@media (max-width: 760px) { .zt-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); } .zt-w { grid-template-columns: 56px minmax(0, 1fr) 80px; } .zt-akcje, #zad-nowe { display: none; } }
.nowe-zad { margin-bottom: 14px; }
.page-title select { width: auto; }
.nakladka .czat .m { display: block; } .nakladka .czat .m > .mono { display: block; }
.nowe-zad.pisz, .nowe-zad .pisz { display: grid; gap: 8px; margin-top: 8px; }
.nowe-zad input:not([type]) { flex: 1 1 220px; min-width: 0; }
.zad-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; margin: 10px 0; }
.zad-dl dt { color: var(--dim); } .zad-dl dd { margin: 0; overflow-wrap: anywhere; }
.nakladka h3 { font: 700 14px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--live); margin: 16px 0 6px; }
.nakladka .row input { flex: 1 1 260px; min-width: 0; }

/* sekwencja „uplink” (≤ 0,8 s, raz na sesję; dodawana do <body>, nie do animowanych paneli) */
.uplink { position: fixed; inset: 0; z-index: 100; background: rgba(7, 8, 11, .96); display: grid; place-items: center; cursor: pointer; }
.uplink pre { font: 13px/1.8 var(--f-mono); margin: 0; min-width: 300px; }
.uplink .ttl { color: var(--you); font: 700 22px var(--f-head); letter-spacing: .3em; }
.uplink.out { opacity: 0; transition: opacity .25s; pointer-events: none; }

/* logowanie */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(380px, 100%); padding: 26px 26px 28px; --edge: rgba(255, 176, 31, .6); --cut: 20px; }
.login .brand { font: 700 34px var(--f-head); letter-spacing: .2em; color: var(--you); }
.login .brand span { color: var(--text); }
.login .err { color: var(--alert); font: 12px var(--f-mono); min-height: 18px; margin-top: 10px; }

/* toast */
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 90; padding: 10px 16px; font: 13px var(--f-mono); max-width: calc(100vw - 32px); --edge: var(--live); }
.toast.err { --edge: var(--alert); color: var(--alert); }

/* telefon: szyna na dole, jedna kolumna */
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  #app > main { grid-column: 1; }
  .rail { grid-row: 3; flex-direction: row; justify-content: flex-start; min-width: 0; border-right: 0; border-top: 1px solid var(--line);
    position: sticky; left: auto; top: auto; bottom: 0; width: auto; height: auto; overflow: auto hidden; /* T-0035: 19 ikon przewija się w szynie, nie rozpycha strony */ padding: 4px 0; background: rgba(7, 8, 11, .97); z-index: 20; }
  .rail a[aria-current="page"]::before { left: 10px; right: 10px; top: -5px; bottom: auto; width: auto; height: 3px; }
  main { padding: 16px 16px 40px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .tile .v { font-size: 32px; }
  .statusbar { gap: 2px 12px; padding: 8px 12px; }
  .statusbar .hide-m { display: none; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.legend .b-agent-l { background: var(--alert); } .legend .b-rest-l { background: #2a3a4c; }

/* strona wzorcowa stylu */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatches .sw { display: block; } /* próbka koloru, nie suwak DH.suwak (ta sama klasa .sw) */
.sw { --cut: 10px; padding: 10px 12px; font: 12px var(--f-mono); }
.sw .chip { height: 34px; margin-bottom: 8px; clip-path: polygon(0 0, 100% 0, 100% 70%, 88% 100%, 0 100%); }
.sw b { display: block; font: 700 13px var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.specimen .h1 { font: 700 40px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.specimen .h1 .slash { color: var(--you); }
.states { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.big-num { font: 700 30px var(--f-mono); }
.odbior textarea { min-height: 70px; }
.c-you { background: var(--you); } .ar-you { --area: var(--you); }
.c-live { background: var(--live); } .ar-live { --area: var(--live); }
.c-alert { background: var(--alert); } .ar-alert { --area: var(--alert); }
.c-ok { background: var(--ok); } .ar-ok { --area: var(--ok); }
.c-warn { background: var(--warn); } .ar-warn { --area: var(--warn); }
.c-a-kod { background: var(--a-kod); } .ar-a-kod { --area: var(--a-kod); }
.c-a-grafika { background: var(--a-grafika); } .ar-a-grafika { --area: var(--a-grafika); }
.c-a-balans { background: var(--a-balans); } .ar-a-balans { --area: var(--a-balans); }
.c-a-serwer { background: var(--a-serwer); } .ar-a-serwer { --area: var(--a-serwer); }
.c-a-bot { background: var(--a-bot); } .ar-a-bot { --area: var(--a-bot); }
.c-a-prawo { background: var(--a-prawo); } .ar-a-prawo { --area: var(--a-prawo); }
.c-a-devhub { background: var(--a-devhub); } .ar-a-devhub { --area: var(--a-devhub); }

/* ── F1: Pulpit v1 (§8.2) i Stan ── */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.desk .col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.clock { font: 700 44px/1 var(--f-mono); color: var(--live); letter-spacing: .02em; margin: 4px 0 12px; }
html[data-tryb="night"] .clock { text-shadow: 0 0 14px rgba(47, 243, 200, .35); }
.countdowns, .agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.countdowns li, .agenda li { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; font-size: 13px; align-items: baseline; }
.countdowns .cd { color: var(--warn); font-weight: 700; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { font: 10px var(--f-mono); color: var(--dim); text-align: center; text-transform: uppercase; }
.cal .day { aspect-ratio: 1; display: grid; place-items: center; font: 11px var(--f-mono); color: var(--dim); text-decoration: none;
  border: 1px solid var(--line); background: rgba(255, 30, 60, calc(var(--h, 0) * .75)); }
.cal .day[style*="--h"] { color: var(--text); }
.cal .day.future { opacity: .3; background: none; }
.cal .day:hover { border-color: var(--live); }
.agents { display: grid; gap: 4px; }
.agents.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.agent { display: grid; grid-template-columns: 10px 6.5em 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; color: var(--text);
  text-decoration: none; border-left: 2px solid var(--line); background: var(--panel-2); font-size: 13px; }
.agent .st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent.busy { border-left-color: var(--live); }
.agent.off { opacity: .55; }
.agent .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.agent.busy .dot { background: var(--live); }
.stack { display: grid; gap: 10px; }
.tile .v.small-v { font-size: 22px; }
.nowrap { white-space: nowrap; }
/* T-0023 (P-20261014-8): Pulpit na PC = jeden ekran; strona nie przewija się, każda kolumna przewija się osobno (Czeka zawsze widoczne od góry).
 * Pytanie: co mnie czeka, bez szukania pod zgięciem strony? Dane: te same panele. Akcja: przewiń kolumnę. Węższe okna (≤ 1280 px): dawny układ ze stroną przewijaną. */
@media (min-width: 1281px) {
  #app:has(.desk) { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  main:has(.desk) { min-height: 0; overflow: hidden; padding-bottom: 12px; }
  main:has(.desk) .desk { flex: 1; min-height: 190px; align-items: stretch; } /* #139: panele nigdy niższe niż 190 px; na bardzo niskim ekranie przewija się strona, nie ucina panel */
  main:has(.desk) { overflow-y: auto; scrollbar-width: thin; }
  main:has(.desk) .desk .col { min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; padding-right: 4px; overscroll-behavior: contain; }
}
/* T-0024: pas nad kolumnami (Dziś | Kalendarz zużycia), kafelki (Brief, Agenci, Czeka) i pływające okno pełnej karty.
 * Pytanie: co mnie czeka i kto pracuje, na jednym ekranie? Dane: te same panele. Akcja: klik kafelka → okno (przeciągane, ✕, Esc). */
.desk-gora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; flex: none; }
.desk-gora > .panel { padding: 12px 16px 14px; }
.desk-gora > .panel > header { margin-bottom: 8px; }
.desk-gora .clock { font-size: 34px; margin: 0 0 8px; }
.desk-gora .countdowns { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.desk-gora .cal { gap: 3px; }
.desk-gora .cal .day { aspect-ratio: auto; height: 20px; }
.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kafel { --cut: 8px; --edge: var(--line-hi); --fill: var(--panel-2); display: grid; gap: 2px; align-content: start; min-width: 0; padding: 8px 10px;
  border: 0; background: none; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; font: 12px/1.35 var(--f-text); }
.kafel:hover, .kafel:focus-visible { --edge: var(--live); outline: none; }
#czeka .kafel { --edge: var(--you); } #czeka .kafel.alert, .kafel.alert { --edge: var(--alert); }
.kafel .k-rodz { font: 700 12px var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--you); overflow: hidden; text-overflow: ellipsis; }
.brief .kafel .k-rodz { color: var(--text); text-transform: none; letter-spacing: .02em; }
.kafel.alert .k-rodz { color: var(--alert); }
.kafel .k-tyt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.kafel .k-rola, .kafel .k-wiek { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-kafle { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.agent-k { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
.agent-k .k-ik { grid-row: 1 / 4; width: 32px; height: 32px; align-self: center; }
.agent-k .k-rola { font-size: 12px; color: var(--text); }
.agent-k.busy { --edge: rgba(47, 243, 200, .55); } .agent-k.off { opacity: .55; }
html[data-tryb="night"] .agent-k.busy .k-ik { animation: puls-t 1.6s ease-in-out infinite; }
.plywak { position: fixed; left: 50%; top: 10vh; transform: translateX(-50%); z-index: 79; /* pod nakładką (80: pinezki, wątek) i tablicą NAV (85) */ width: min(640px, calc(100vw - 32px)); max-height: 78vh;
  display: flex; flex-direction: column; --fill: var(--panel-2); --edge: var(--you); box-shadow: 0 0 30px rgba(0, 0, 0, .7); }
.plywak > .plyw-nag { cursor: grab; user-select: none; touch-action: none; }
.plyw-cialo { overflow: auto; min-height: 0; }
.plyw-cialo > .czeka-karta { --edge: transparent; padding: 0; }
/* obrazy w karcie Czeka nigdy nie rozpychają kolumny ani okna */
.miniatury > *, .czeka-karta .mini-btn { max-width: 100%; min-width: 0; }
.czeka-karta img.mini { max-width: 100%; height: auto; }
/* T-0026: pas pod kolumnami = Rutyny dziś jako kafelki na całą szerokość. Pytanie: czy automaty zadziałały, bez przewijania strony?
 * Dane: routines + runs. Akcja: klik kafelka → okno szczegółów (▶ / STOP / Wyłącz / Odłóż, Log, Historia). Na PC pas ma stałą wysokość i przewija się sam. */
.desk-dol { flex: none; margin-top: 18px; }
.desk-dol > .panel { padding: 10px 16px 12px; }
.desk-dol > .panel > header { margin-bottom: 8px; }
.rut-kafle { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rut-k { padding: 6px 9px; gap: 3px; }
.rut-k .k-rola { font-size: 12px; color: var(--text); }
.rut-k .tag { justify-self: start; }
.rut-k.trwa { --edge: rgba(47, 243, 200, .55); }
.plywak.rut-okno { --edge: var(--line-hi); }
.rut-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 12px; }
.rut-dl dt { color: var(--dim); } .rut-dl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (min-width: 1281px) { main:has(.desk) .desk-dol .rut-kafle { max-height: clamp(52px, calc(100vh - 790px), 112px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; } }
/* T-0026 (poprawka 15.10): Pulpit mieści się bez przewijania strony. Pytanie: wszystko na jednym ekranie? Dane: te same panele. Akcja: brak (układ).
 * Dziś i Kalendarz = cienki pas (zegar w linii, kalendarz jako jeden rząd 35 dni, poniedziałek z kreską), mniejsze kafelki,
 * Czeka i Zapytaj o stan = dwa osobne bloki kolumny; w asystencie przewija się tylko okienko czatu (.czat). */
.desk-gora > .panel { padding: 8px 14px 10px; }
.desk-gora > .panel > header { margin-bottom: 6px; }
.desk-gora > .panel:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
.desk-gora > .panel:first-child > header { grid-column: 1 / -1; }
.desk-gora .clock { font-size: 26px; margin: 0; }
.desk-gora .countdowns { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3px 12px; }
.desk-gora .countdowns li { font-size: 12px; }
.desk-gora .empty { padding: 4px 0; font-size: 12px; text-align: left; }
.desk-gora .cal { grid-template-columns: repeat(35, minmax(0, 1fr)); gap: 2px; }
.desk-gora .cal .dow { display: none; }
.desk-gora .cal .day { height: 26px; font-size: 9px; }
.desk-gora .cal .day.pn { box-shadow: -2px 0 0 var(--line-hi); margin-left: 2px; }
.desk .kafle { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.desk .kafel { padding: 5px 8px; gap: 1px; }
.desk .kafel .k-rodz { font-size: 11px; }
.desk .kafel .k-tyt { font-size: 12px; line-height: 1.3; }
.desk .kafel .k-rola, .desk .kafel .k-wiek { font-size: 10px; }
.desk .agent-kafle { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.desk .agent-k { grid-template-columns: 34px minmax(0, 1fr); column-gap: 7px; }
.desk .agent-k .k-ik { width: 34px; height: 34px; } /* #139: ikona agenta wypełnia kafelek */
.desk .panel { padding: 10px 14px 12px; }
.desk .panel > header { margin-bottom: 8px; }
.desk-dol { margin-top: 12px; }
.desk-dol .rut-kafle { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 5px; }
.desk-dol .rut-k { padding: 4px 8px; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.desk-dol .rut-k .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asystent .czat { margin-top: 8px; border-top: 1px solid var(--line); }
.asystent .czat > .empty { padding: 8px 0; font-size: 12px; }
.asystent .swobodne { margin-top: 8px; padding-top: 6px; }
.desk .asystent .pisz textarea { min-height: 0; height: 36px; resize: none; }
.desk .asystent select, .desk .asystent .btn { padding-top: 4px; padding-bottom: 4px; }
.desk .asystent .pisz { gap: 6px; }
@media (min-width: 1281px) {
  main:has(.desk) .desk { gap: 14px; }
  /* T-0026 (#138): Brief, Agenci teraz i Czeka mają równą wysokość (panel wypełnia kolumnę); ramka panelu nigdy nie jest ucięta, nadmiar przewija się w środku boxu */
  main:has(.desk) .desk .col { display: flex; flex-direction: column; overflow: hidden; gap: 14px; padding-right: 0; }
  main:has(.desk) .desk .col > * { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  /* #139: ramka (.cp::before/::after) i nagłówek stoją; przewija się tylko treść pod nagłówkiem, pasek przewijania w środku boxu */
  main:has(.desk) .desk .col > * > :not(header) { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding-right: 2px; }
  main:has(.desk) .desk .col > * > header { flex: none; }
}
@media (max-width: 1280px) { .desk-gora { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) { .desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .desk .col:nth-child(2) { grid-column: 1 / -1; order: 3; } }
@media (max-width: 760px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk .col:nth-child(3) { order: -1; }   /* telefon: najpierw Czeka */
  .agents.wide { grid-template-columns: minmax(0, 1fr); }
  .agent { grid-template-columns: 10px 5.5em minmax(0, 1fr); } .agent > :last-child { display: none; }
  .clock { font-size: 34px; }
}

/* F2: Rozmowy (lista ról | rozmowa). Długi tekst bez efektów (§8.1). */
.rozmowy { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 290px); gap: 18px; padding: 18px; }
@media (max-width: 1280px) { .rozmowy { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } .rozmowy > .col:nth-child(3) { grid-column: 2; } }
/* T-0046: kolumna Sesja (wariant A): zwijane sekcje, wiersze klucz–wartość, przełącznik lease, pasek kontekstu */
/* T-0046: menu roli pod prawym klikiem (lista z podmenu Sterowanie) */
.menu-roli { position: fixed; z-index: 80; }
.menu-l { min-width: 230px; display: grid; padding: 4px; background: var(--panel-2); border: 1px solid var(--line-hi); box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
.menu-l.pod { position: absolute; }
.menu-p { display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: none; border: 0; color: var(--text); font: 13px var(--f-text); text-align: left; cursor: pointer; }
.menu-p:hover, .menu-p:focus-visible, .menu-p[aria-expanded="true"] { background: var(--brand-tint, rgba(47, 243, 200, .08)); outline: none; box-shadow: inset 2px 0 0 var(--brand, var(--live)); }
.menu-p .ik { width: 14px; text-align: center; color: var(--dim); } .menu-p .w { flex: 1; } .menu-p .kl { font-size: 11px; }
.menu-p.danger { color: var(--alert); } .menu-p.danger .ik { color: var(--alert); }
.sesja-kol { display: grid; gap: 4px; align-content: start; }
.sek { border-top: 1px solid var(--line); }
.sek > summary { display: flex; gap: 8px; align-items: center; padding: 8px 2px; cursor: pointer; list-style: none; }
.sek > summary::-webkit-details-marker { display: none; }
.sek > summary::before { content: '▸'; color: var(--brand, var(--live)); font-size: 11px; } .sek[open] > summary::before { transform: rotate(90deg); }
.sek-t { font: 700 13px var(--f-head); letter-spacing: .08em; text-transform: uppercase; } .sek-m { margin-left: auto; font-size: 11px; }
.sek .tr { display: grid; gap: 6px; padding: 0 2px 10px; font-size: 12.5px; min-width: 0; }
.kv, .plik { display: flex; gap: 8px; align-items: center; min-width: 0; } .kv .ik, .plik .ik { color: var(--dim); width: 14px; text-align: center; flex: none; }
.kv .w, .plik .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .kv .prawo { margin-left: auto; }
.prz { position: relative; flex: none; width: 34px; height: 18px; border: 1px solid var(--line-hi); background: var(--panel-2); cursor: pointer; padding: 0; }
.prz::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--dim); }
.prz[aria-checked="true"] { border-color: var(--brand, var(--live)); } .prz[aria-checked="true"]::after { left: 18px; background: var(--brand, var(--live)); }
.prz:disabled { cursor: default; opacity: .6; }
.suw-et { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--dim); }
.ctx { position: relative; height: 6px; background: var(--panel-2); border: 1px solid var(--line); }
.ctx i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand, var(--live)); } .ctx.warn i { background: var(--warn); }
.sesja-kol .rt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } .sesja-kol .rt .rt-suwak { max-width: none; }
/* T-0046: pasek ikon w nagłówku czatu + szuflada (jedna naraz) + zadania w tle (procesy roli z runnera) */
.ikony { display: flex; gap: 2px; margin-left: auto; border: 1px solid var(--line); background: var(--panel-2); padding: 2px; }
.ikony button { position: relative; width: 32px; height: 28px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--dim); cursor: pointer; padding: 0; }
.ikony button:hover, .ikony button:focus-visible { color: var(--text); outline: none; border-color: var(--line-hi); }
.ikony button[aria-pressed="true"] { border-color: var(--brand, var(--live)); color: var(--brand-hi, var(--live)); }
.ikony svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikony .lic { position: absolute; top: 0; right: 1px; font-size: 9px; font-weight: 600; color: var(--live); }
.szuf { border: 1px solid var(--brand, var(--live)); background: var(--panel-2); padding: 8px 10px; margin-bottom: 10px; max-height: 42vh; overflow-y: auto; }
.szuf[hidden] { display: none; }
.szuf-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.szuf-h b { font: 700 13px var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-hi, var(--live)); }
.szuf-t { display: grid; gap: 6px; font-size: 12.5px; min-width: 0; }
.szuf-t .plan-k { border: 0; padding: 0; background: none; }
.dz-l { display: grid; gap: 2px; font-size: 11.5px; } .dz { display: flex; gap: 8px; min-width: 0; } .dz .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.zad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.zad:first-child { border-top: 0; }
.zad .st { width: 8px; height: 8px; background: var(--dim); } .zad .st.run { background: var(--live); box-shadow: 0 0 6px var(--live); animation: puls-tla 1.6s infinite; }
.zad .st.stop { background: var(--alert); }
.zad .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; } .zad .c { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--dim); font-family: var(--f-mono); }
.zad .x { background: none; border: 1px solid var(--line-hi); color: var(--alert); font: 10px var(--f-mono); padding: 0 6px; cursor: pointer; }
.zad .x:hover, .zad .x:focus-visible { border-color: var(--alert); box-shadow: 0 0 6px var(--alert); outline: none; }
@keyframes puls-tla { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .zad .st.run { animation: none; } }
.rozmowy .col { display: grid; gap: 18px; align-content: start; min-width: 0; }
/* T-0046 poprawka 2 (uwaga właściciela 16.10): rola = legitymacja Arasaki, kwadrat, 2 na rząd (projekt B, docs/projekty/role-kafelki.html).
 * Pytanie: które role pracują, czekają na mnie, są w ciszy, jak ważna jest każda i która jest otwarta? Dane: /api/rozmowy.role (poziom = migracja 030).
 * Akcja: klik otwiera rozmowę, prawy klik = menu roli (tam zmiana poziomu, grupy, ciszy…). Krawędź = stan: bursztyn „wymaga Ciebie”, turkus pracuje,
 * szkarłat STOP, marka = otwarta. Znaczek = canvas z ikoną węzła agenta z Mózgu (MozgIkony.rysujRole), z narzędziami roli. */
.role-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rola { --edge: var(--line-hi); aspect-ratio: 1; min-width: 0; position: relative; display: grid; grid-template-columns: 5px minmax(0, 1fr); color: var(--text); text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--edge); overflow: hidden; }
.rola::before { content: ''; position: absolute; top: 6px; right: 8px; width: 10px; height: 5px; border: 1px solid var(--line-hi); border-radius: 3px; background: var(--bg); } /* dziurka na smycz */
.rola::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, rgba(47,243,200,.10) 50%, rgba(255,255,255,.07) 55%, transparent 70%); } /* hologram */
.rola:hover::after, .rola.akt::after { opacity: 1; }
.lg-pas { background: var(--obszar, var(--a-kod)); } .rola.stop .lg-pas { background: var(--alert); }
.obszar-kod { --obszar: var(--a-kod); } .obszar-grafika { --obszar: var(--a-grafika); } .obszar-balans { --obszar: var(--a-balans); } .obszar-serwer { --obszar: var(--a-serwer); }
.obszar-bot { --obszar: var(--a-bot); } .obszar-prawo { --obszar: var(--a-prawo); } .obszar-devhub { --obszar: var(--a-devhub); }
.lg-tresc { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 3px; padding: 4px 6px; min-width: 0; } /* T-0046 popr. 3: napisy ciaśniej, znaczek większy */
.lg-id { display: flex; justify-content: space-between; gap: 6px; font-size: 8.5px; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-right: 22px; }
.lg-id .live { color: var(--live); }
.lg-srodek { display: flex; gap: 6px; align-items: flex-start; min-width: 0; } /* znaczek + znaczniki stanu w kolumnie obok */
.lg-foto { position: relative; flex: none; width: 60px; height: 60px; background: var(--panel); }
.lg-foto::before, .lg-foto::after { content: ''; position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--edge); }
.lg-foto::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; } .lg-foto::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.zn { display: block; width: 58px; height: 58px; margin: 1px; }
.rola .n { font: 700 11px var(--f-head); letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; align-self: start; -webkit-box-orient: vertical; overflow-wrap: normal; }
.lg-poz { display: flex; gap: 2px; align-items: center; min-width: 0; overflow: hidden; } .lg-poz i { width: 5px; height: 5px; border: 1px solid var(--line-hi); background: var(--bg); }
.lg-poz i.on { background: var(--text); border-color: var(--text); } .lg-poz.max i.on { background: var(--brand, var(--you)); border-color: var(--brand, var(--you)); box-shadow: 0 0 4px var(--brand-glow, transparent); }
.lg-pn { font: 600 8px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-left: 3px; white-space: nowrap; }
.lg-poz.max .lg-pn { color: var(--brand-hi, var(--you)); }
.rola .tags { display: flex; gap: 3px 6px; flex-wrap: wrap; align-content: start; min-width: 0; overflow: hidden; flex-direction: column; align-items: flex-start; max-height: 60px; } .rola .tags .tag { font-size: 8.5px; letter-spacing: 0; padding: 0 3px; line-height: 13px; max-width: 100%; }
.lg-dol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; }
.rola .rz-l { font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-kod { width: 34px; height: 7px; opacity: .55; background: repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 3px, var(--text) 3px 5px, transparent 5px 6px, var(--text) 6px 7px, transparent 7px 10px); }
.rola.arch { opacity: .55; } .rola.live { --edge: var(--live); } .rola.stop { --edge: var(--alert); }
@media (prefers-reduced-motion: reduce) { .rola::after { transition: none; } }
.role-lista { max-height: 60vh; overflow-y: auto; display: grid; gap: 12px; padding-right: 4px; } /* T-0004 */
.role-gt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
/* T-0053: nagłówek listy ról i guzik „+ Nowy agent”. Pytanie: gdzie zlecić nowego agenta i czy zlecenie jest w toku? Dane: /api/rozmowy (role, wProdukcji).
 * Akcja: klik = okno zlecenia (2FA); póki okno otwarte guzik się rozłamuje (wariant C: pasy glitch RGB + portal zasysający iskry, płótno .na-fx z asystent.js),
 * ✕/Esc/Anuluj = zrost, Zleć = błysk portalu i wylot W3 (piksele składają się w kafel). Ruch tylko w Night City; Spokojny i reduced-motion: portal stoi bez ruchu. Czerwień = marka (--brand, w Neon --alert). */
.role-nag { justify-content: center; align-items: center; gap: 14px; }
.role-nag::before { display: none; }
.panel > header.role-nag h2 { font-size: 24px; line-height: 1; letter-spacing: .3em; padding-left: .3em; color: var(--text); }
.role-slup { width: 4px; height: 22px; background: var(--brand, var(--alert)); box-shadow: 0 0 8px var(--brand, var(--alert)); }
.btn.na-guz { display: flex; width: 100%; justify-content: center; margin: 0 0 12px; overflow: hidden; }
.na-tekst { position: relative; z-index: 1; }
.na-portal { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; z-index: 0; opacity: 0; border-radius: 50%; transform: translateX(-50%) scaleY(0); pointer-events: none;
  background: radial-gradient(ellipse, #000 45%, var(--brand, var(--alert)) 75%, transparent 78%); box-shadow: 0 0 22px 6px var(--brand, var(--alert)); }
.na-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.na-plaster { position: absolute; inset: 0; z-index: 1; display: none; place-items: center; pointer-events: none; }
.na-plaster.p1 { color: var(--live); clip-path: inset(18% 0 58% 0); } .na-plaster.p2 { color: var(--brand-hi, var(--alert)); clip-path: inset(62% 0 12% 0); }
.btn.na-guz.wyrwa { --edge: var(--brand, var(--alert)); --fill: #0b0004; color: var(--text); text-shadow: 0 0 6px var(--brand, var(--alert)); }
.na-guz.wyrwa .na-portal { opacity: 1; transform: translateX(-50%) scaleY(1.25); }
html[data-tryb="night"] .na-portal { transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), opacity .1s; }
html[data-tryb="night"] .na-guz.wyrwa .na-plaster { display: grid; }
html[data-tryb="night"] .na-guz.wyrwa .na-plaster.p1 { animation: na-tnij 1.1s steps(1) infinite; }
html[data-tryb="night"] .na-guz.wyrwa .na-plaster.p2 { animation: na-tnij .9s steps(1) infinite reverse; }
html[data-tryb="night"] .na-guz.wyrwa .na-tekst { animation: na-drgaj 2.2s steps(1) infinite; }
html[data-tryb="night"] .na-guz.zrost { animation: na-zrost .45s ease-out 1; }
html[data-tryb="night"] .na-guz.wylot .na-portal { animation: na-blysk .5s ease-out 1; }
@keyframes na-tnij { 0% { transform: translateX(-6px); } 25% { transform: translateX(5px); clip-path: inset(40% 0 40% 0); } 50% { transform: translateX(-2px); } 75% { transform: translateX(8px); clip-path: inset(8% 0 76% 0); } }
@keyframes na-drgaj { 0%, 90%, 100% { translate: 0 0; } 92% { translate: -3px 0; } 94% { translate: 3px 0; } 96% { translate: -1px 0; } }
@keyframes na-zrost { 0% { filter: brightness(2.2); } 40% { translate: 2px 0; } 70% { translate: -1px 0; } 100% { filter: none; translate: 0 0; } }
@keyframes na-blysk { 0% { opacity: 1; filter: brightness(3); width: 90px; transform: translateX(-50%) scaleY(1.25); } 100% { opacity: 0; width: 0; transform: translateX(-50%) scaleY(1.25); } }
.na-piksel { position: fixed; z-index: 60; pointer-events: none; background: var(--brand, var(--alert)); box-shadow: 0 0 4px var(--brand, var(--alert)); } /* W3: rój pikseli wylotu */
/* agent „w produkcji”: kafel legitymacji bez danych, krawędź marki; glitch napisu i znaczka tylko w Night City */
.rola.w-prod { --edge: var(--brand, var(--alert)); background: #0b0004; }
.rola.w-prod .lg-pas { background: repeating-linear-gradient(180deg, var(--brand, var(--alert)) 0 6px, transparent 6px 10px); }
.wp-foto { display: grid; place-items: center; font-size: 30px; font-weight: 700; color: var(--brand, var(--alert)); }
.wp-rola { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-napis { color: var(--brand, var(--alert)); font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
html[data-tryb="night"] .w-prod .wp-napis, html[data-tryb="night"] .w-prod .wp-foto { animation: glitch 1.6s steps(1) infinite; }
html[data-tryb="night"] .w-prod .wp-foto { animation-delay: .7s; }
html[data-tryb="night"] .rola.w-prod.wylatuje { opacity: 0; } /* W3: kafel czeka, aż piksele go złożą (asystent.wylotPikseli zdejmuje klasę) */
/* T-0046: suwak segmentowy DH.segmenty (24 segmenty jak licznik amunicji); w Neon kolor = turkus, w Arasaka = marka */
.sgm { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: center; height: 24px; min-width: 120px;
  cursor: pointer; touch-action: none; user-select: none; }
.sgm:focus-visible { outline: 1px solid var(--brand-hi, var(--live)); outline-offset: 2px; }
.sgm i { height: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.sgm i.on { background: var(--brand, var(--live)); border-color: var(--brand, var(--live)); box-shadow: 0 0 6px var(--brand-glow, rgba(47, 243, 200, .35)); }
.sgm i.kon { height: 20px; background: var(--brand-hi, var(--live)); }
html[data-tryb="night"] .sgm i { transition: background .08s, height .08s; }
.rt { align-items: center; gap: 8px; flex-wrap: wrap; } .rt .rt-suwak { flex: 1 1 140px; max-width: 260px; } .rt-etyk { font-size: 12px; white-space: nowrap; }
/* T-0060: model roli pod suwakiem rotacji, jedna niska linia (kolumna Sesja bez przewijania, T157) */
.rt.md { font-size: 12px; } .rt.md select { width: auto; max-width: 260px; height: 20px; padding: 0 6px; font-size: 12px; line-height: 18px; }
.sesja-kol .rt.md { display: flex; flex-wrap: nowrap; } .sesja-kol .rt:not(.md) { gap: 2px; }
.rola.akt { --edge: var(--brand, var(--live)); background: var(--brand-tint, var(--panel-2)); } .rola.you { --edge: var(--you); } .rola:hover, .rola:focus-visible { --edge: var(--brand-hi, var(--line-hi)); outline: none; }
.tag.puls { animation: none; } html[data-tryb="night"] .tag.puls { animation: puls-t 1.6s ease-in-out infinite; }
@keyframes puls-t { 50% { opacity: .55; } }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.row input { flex: 1 1 160px; width: auto; }
.czat { max-height: 56vh; overflow-y: auto; display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.czat .m { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.czat .m .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
/* T-0008: markdown agentów (md.js): bez pre-wrap, bloki kodu w boxie z Kopiuj, długi tekst bez efektów */
.czat .m .txt.md { white-space: normal; line-height: 1.55; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; } .md ul, .md ol { margin: 0 0 8px; padding-left: 20px; } .md li { margin: 2px 0; } .md li > ul, .md li > ol { margin: 2px 0 0; }
.md strong { color: var(--text); font-weight: 650; } .czat .m.wlasciciel .md strong { color: var(--you); }
.md .md-h { font: 600 15px/1.3 var(--f-head); letter-spacing: .04em; text-transform: uppercase; color: var(--text); margin: 10px 0 6px; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.md blockquote { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 2px solid var(--line-hi); color: var(--dim); }
.md a { color: var(--live); text-decoration: underline; text-underline-offset: 2px; }
.czat .m .md code.md-c { font: 12.5px var(--f-mono); color: var(--text); background: var(--panel-2); border: 1px solid var(--line); padding: 0 4px; }
.md .md-kod { margin: 0 0 8px; border: 1px solid var(--line-hi); background: var(--bg); }
.md .md-kod-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.md .md-kod-head .md-kopiuj { padding: 3px 10px; font-size: 12px; }
.md .md-kod pre { margin: 0; padding: 8px 10px; overflow-x: auto; white-space: pre; font: 12.5px/1.5 var(--f-mono); }
.czat .m .md .md-kod code { color: var(--text); font-size: 12.5px; overflow-wrap: normal; }
.md .md-tab { overflow-x: auto; margin: 0 0 8px; } .md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; vertical-align: top; } .md th { color: var(--dim); font-weight: 600; }
/* T-0046: seria narzędzi zwinięta w jedną linię (wariant A) */
.czat .zw { border: 1px solid var(--line); background: var(--wnetrze, #0a0f15); min-width: 0; }
.czat .zw > button { width: 100%; display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 5px 10px; cursor: pointer;
  font: 12px var(--f-mono); color: var(--dim); text-align: left; }
.czat .zw > button:hover, .czat .zw > button:focus-visible { color: var(--text); }
.czat .zw .ar { color: var(--brand, var(--live)); } .czat .zw.open .ar { transform: rotate(90deg); }
.czat .zw .prawo { margin-left: auto; }
.czat .zw .lista { display: none; padding: 4px 10px 8px 28px; border-top: 1px solid var(--line); } .czat .zw.open .lista { display: grid; gap: 3px; }
.czat .toolline { font: 12px/1.5 var(--f-mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czat .toolline b { color: var(--text); font-weight: 600; }
.czat .m code { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.czat .m.wlasciciel .txt { color: var(--you); }
.czat .m.system { color: var(--dim); font-size: 12px; } .czat .m.blad { color: var(--alert); } .czat .m.zgoda { color: var(--you); }
.pisz textarea { resize: vertical; min-height: 64px; }
label.inl { display: inline-flex; white-space: nowrap; gap: 6px; align-items: center; margin: 0; text-transform: none; letter-spacing: 0; }
label.inl input { width: auto; }
pre.notatka { white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 var(--f-mono); margin: 8px 0 0; color: var(--text); }
img.mini { max-width: 256px; max-height: 160px; display: block; margin-top: 6px; border: 1px solid var(--line-hi); }
@media (max-width: 760px) { .rozmowy { grid-template-columns: minmax(0, 1fr); padding: 12px; } .czat .m { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* T-0041: plan roli obok czatu (wariant B „Lista kroków”): pasek kroku turkus (żywe teraz), pasek planu w kolorze marki; gotowe przekreślone */
.rozm-plan { display: grid; gap: 18px; align-items: start; min-width: 0; }
.rozm-plan.z-planem { grid-template-columns: minmax(0, 1fr) 210px; }
.plan-k { min-width: 0; font-size: 12.5px; }
.plan-k .pl-tytul { color: var(--dim); margin: 4px 0; overflow-wrap: anywhere; }
.plan-k .pl-teraz { color: var(--live); margin: 6px 0 4px; overflow-wrap: anywhere; }
.plan-k .pl-liczby { margin: 10px 0 4px; font-size: 11.5px; }
.pl-bar { height: 4px; background: var(--line); position: relative; }
.pl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--live); transition: width .4s; }
.pl-bar.plan i { background: var(--brand, var(--a-devhub)); }
.pl-lista, .pl-lista ol { list-style: none; margin: 0; padding: 0; }
.pl-lista { margin-top: 10px; display: grid; gap: 8px; }
.pl-fn { display: flex; justify-content: space-between; gap: 6px; font: 700 12px var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.pl-k { padding: 2px 0 2px 8px; border-left: 2px solid var(--line); color: var(--dim); overflow-wrap: anywhere; }
.pl-k.gotowe { text-decoration: line-through; opacity: .6; }
.pl-k.w_toku { color: var(--live); border-left-color: var(--live); }
.pl-akcje { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .pl-bar i { transition: none; } }
/* T-0043: licznik % limitu tygodnia w nagłówku rozmowy (odnośnik do Tokenów) i podświetlenie roli po wejściu z licznika (ok. 3 s; bez ruchu: sama ramka) */
.lim-licznik { margin-left: 10px; padding: 1px 6px; font-size: 12px; color: var(--text); border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.lim-licznik:hover { color: var(--live); border-color: var(--live); }
.podswietl { outline: 1px solid var(--alert); outline-offset: -1px; animation: podswietl 3s ease-out 1; }
@keyframes podswietl { 0%, 60% { background: color-mix(in srgb, var(--alert) 22%, transparent); } 100% { background: transparent; } }
@media (max-width: 760px) { .rozm-plan.z-planem { grid-template-columns: minmax(0, 1fr); } .pl-akcje { display: none; } }

.row .prawo { margin-left: auto; }

/* F3 K7: asystent stanu (Zapytaj o stan) */
.asystent .row select { flex: 1 1 140px; min-width: 0; }
.asystent .wynik { border-left: 2px solid var(--live); padding: 4px 0 4px 10px; margin-top: 10px; }
.asystent .wynik.swob { border-left-color: var(--line-hi); }
.asystent .wynik.blad pre, .asystent pre.blad { color: var(--alert); }
.asystent ul.odp { margin: 4px 0 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; }
.asystent .swobodne { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }

/* F4 K4: Rutyny */
pre.log { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--f-mono); margin: 8px 0 0; color: var(--text); max-height: 60vh; overflow: auto; }
tr.klik { cursor: pointer; } tr.klik:hover td { background: rgba(47, 243, 200, .05); }
tr.sel td { background: rgba(47, 243, 200, .07); }
td .small, div.small { font-size: 12px; }
.akcje { gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin: 0; } .akcje.pelne { min-width: 170px; } .akcje select.small { padding: 4px 6px; font-size: 12px; }

/* F4 K6: bramki przy zadaniu, odbiorze i w Stanie */
.bramki { display: grid; gap: 6px; }
.bramka-blok { flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--line); }

/* F4 K8: Brief na Pulpicie. Długi tekst bez efektów (złota myśl 21); kolor tylko na znaczniku poziomu. */
.brief-sekcje { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brief-tytul { color: var(--text); text-decoration: none; font-family: var(--f-head); font-weight: 600; letter-spacing: .02em; }
.brief-tytul:hover { color: var(--live); }
.brief-linie { list-style: none; margin: 2px 0 0 2.2em; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--dim); }
.brief-alarm .brief-linie li:first-child, .brief-uwaga .brief-linie li:first-child { color: var(--text); }
.brief .row { margin-top: 10px; }

/* F5: Kronika (§8.5) — rozdziały, kroki, przebieg, tory (§8.4 OŚ CZASU). Długi tekst bez efektów. */
.rozdzial .lead { margin: 0 0 8px; color: var(--text); font: 14px/1.5 var(--f-text); }
.kroki { list-style: none; margin: 0; padding: 0; }
.kroki li { border-top: 1px solid var(--line); }
.kroki li.ukryty { opacity: .45; }
.krok { display: flex; gap: 6px; align-items: center; width: 100%; background: none; border: 0; color: var(--text); text-align: left; padding: 6px 2px; font: 13px var(--f-text); cursor: pointer; }
.krok:hover, .krok:focus-visible { background: var(--panel-2); outline: none; }
.krok .tyt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krok .prawo { margin-left: auto; white-space: nowrap; }
.przebieg { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--line-hi); font: 13px/1.45 var(--f-text); }
.przebieg li { padding: 4px 0 4px 8px; }
.przebieg li.blad { border-left: 2px solid var(--alert); margin-left: -12px; padding-left: 18px; }
.tory-wrap { overflow-x: auto; }
.tory-wrap svg { min-width: 760px; }
.tory .tor { stroke: var(--line); stroke-width: 1; }
.tory .rola { fill: var(--text); font-size: 11px; }
.tory .burza { fill: var(--alert); opacity: .16; }
.tory .lancuch { stroke: var(--warn); stroke-width: 1; opacity: .35; }
.tory circle { stroke: var(--bg); stroke-width: .8; }
.tory .w-wlasciciel, .legend .w-wlasciciel { fill: var(--text); background: var(--text); }
.tory .w-agent, .legend .w-agent { fill: var(--warn); background: var(--warn); }
.tory .w-zdarzenie, .legend .w-zdarzenie { fill: var(--a-balans); background: var(--a-balans); }
.tory .w-rutyna, .legend .w-rutyna { fill: var(--dim); background: var(--dim); }
.tory circle.puste { fill-opacity: .25; stroke: var(--warn); }
.legend .burza { background: var(--alert); opacity: .35; } .legend .lancuch { background: var(--warn); opacity: .5; height: 2px !important; }
.tory .cm { fill: var(--a-kod); opacity: .8; }
.tory .zn line { stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.tory .zn-deploy line, .tory .zn-deploy path, .legend .zn-deploy { stroke: var(--ok); fill: var(--ok); background: var(--ok); }
.tory .zn-decyzja line, .tory .zn-decyzja path, .legend .zn-decyzja, .tory .zn-odbior line, .tory .zn-odbior path, .legend .zn-odbior { stroke: var(--a-grafika); fill: var(--a-grafika); background: var(--a-grafika); }
.tory .zn-zadanie line, .tory .zn-zadanie path, .legend .zn-zadanie { stroke: var(--a-kod); fill: var(--a-kod); background: var(--a-kod); }
.tory .zn-polecenie line, .tory .zn-polecenie path, .legend .zn-polecenie { stroke: var(--text); fill: var(--text); background: var(--text); }
.tory .zn-seria line, .tory .zn-seria path, .legend .zn-seria { stroke: var(--a-balans); fill: var(--a-balans); background: var(--a-balans); }
.tory .zn-bramka line, .tory .zn-bramka path, .legend .zn-bramka { stroke: var(--alert); fill: var(--alert); background: var(--alert); }
@media (max-width: 700px) { .krok .prawo { display: none; } }
#kr-box, .rozdzial, .kroki, .kroki li { min-width: 0; max-width: 100%; }
.rozdzial { overflow: hidden; }

/* ── Mózg (F6, §8.4) ─────────────────────────────────────────────────────── */
.mozg { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mz-gora { align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.mz-narz { gap: 6px; flex-wrap: wrap; }
.mz-narz .btn.on { --edge: var(--live); color: var(--live); }
.mz-szukaj-box { position: relative; flex: 1 1 260px; min-width: 0; max-width: 460px; }
.mz-szukaj { width: 100%; }
.mz-wyniki { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: var(--panel-2); border: 1px solid var(--line-hi); }
.mz-wyniki:empty { display: none; }
.mz-wyniki li { padding: 6px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-wyniki li:hover { background: #16202c; color: var(--live); }
.mz-chipy { display: grid; gap: 6px; }
/* T-0028: wszystko nad sceną Mózgu w bloczkach na całą szerokość, równe rzędy (PC; telefon jak dotąd) */
.mz-st { display: inline-flex; align-items: baseline; gap: 6px; }
.mz-st b { font: 600 15px var(--f-head); color: var(--text); }
.mz-st b.dim { color: var(--dim); }
@media (min-width: 761px) {
  .mozg > .page-title { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 12px; }
  .mozg > .page-title h1 { align-self: center; }
  .mz-metka { display: flex; gap: 6px; }
  .mz-st { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mozg .pz-pasek { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
  .mozg .pz-g { text-align: center; }
  .mz-gora { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .mz-gora > .seg { flex: 1.5 1 0; display: flex; }
  .mz-gora > .seg > button { flex: 1 1 0; }
  .mz-szukaj-box { flex: 2 1 0; max-width: none; }
  .mz-gora .mz-szukaj-box .mz-szukaj { width: 100%; height: 100%; }
  .mz-narz { flex: 5 1 0; flex-wrap: nowrap; }
  .mz-narz > .btn { flex: 1 1 0; justify-content: center; text-align: center; }
  .mz-chipy .row { flex-wrap: nowrap; }
  .mz-chipy .mz-chip { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* legenda: panel na lewej krawędzi sceny (karta węzła jest po prawej); długi tekst bez efektów */
.mz-legenda { position: absolute; z-index: 4; top: 10px; left: 10px; max-height: calc(100% - 20px); width: 560px; overflow: auto; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line-hi); }
.mz-legenda header { justify-content: space-between; align-items: center; }
.mz-legenda header b { font: 700 13px var(--f-head); letter-spacing: .12em; text-transform: uppercase; }
.mz-legenda h3 { font: 700 11px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 4px 0 2px; }
.mz-legenda ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; }
.mz-legenda li { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.mz-legenda li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-legenda canvas { width: 36px; height: 36px; flex: none; }

.mz-chipy .row { gap: 6px; flex-wrap: wrap; }
.mz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line-hi); background: none; color: var(--text);
  font: 700 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mz-chip i { width: 8px; height: 8px; background: var(--area, var(--dim)); }
.mz-chip.rd i { display: none; }
.mz-chip b { color: var(--dim); font-weight: 400; }
.mz-chip[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.mz-chip:hover { border-color: var(--live); }
/* T-0031: jawne „tylko ten” w bloczku (dawniej dwuklik) */
.mz-tylko { margin-left: auto; padding: 0 2px; color: var(--dim); opacity: .45; cursor: pointer; }
.mz-chip:hover .mz-tylko, .mz-tylko:focus-visible { opacity: 1; }
.mz-tylko:hover { color: var(--live); }
.mz-scena { position: relative; height: max(420px, calc(100vh - 290px)); border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.mz-scena:fullscreen { height: 100vh !important; }
/* tryby PRACA (T-0002): trzy duże guziki u góry ekranu, wybrany świeci; scena 3D wjeżdża krótkim pojawieniem (tylko Night City) */
.mz-tryby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mz-tryb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px; min-height: 64px; cursor: pointer; text-align: left;
  background: var(--panel); border: 1px solid var(--line-hi); color: var(--dim); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: background .18s, color .18s, border-color .18s, transform .18s; }
.mz-tryb b { font: 600 20px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.mz-tryb small { font: 11px var(--f-mono); letter-spacing: .06em; }
.mz-tryb:hover { border-color: var(--live); transform: translateY(-2px); }
.mz-tryb[aria-selected="true"] { background: var(--live); border-color: var(--live); color: #001417; box-shadow: 0 0 18px rgba(47, 243, 200, .4); }
.mz-tryb[aria-selected="true"] b { color: #001417; }
html[data-tryb="night"] .mz-scena { animation: mz-wjazd .35s ease-out; }
@keyframes mz-wjazd { from { opacity: 0; transform: perspective(900px) rotateX(8deg) translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .mz-tryby { display: none; } }
.mz-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.mz-fps { position: absolute; left: 10px; bottom: 8px; font-size: 11px; pointer-events: none; }
.mz-dymek { position: absolute; z-index: 5; pointer-events: none; padding: 6px 10px; display: grid; gap: 2px; max-width: 320px; font-size: 11px; --cut: 6px; --edge: var(--line-hi); }
.mz-dymek b { font: 700 12px var(--f-head); letter-spacing: .04em; overflow-wrap: anywhere; }
/* strona wzorcowa: sekcja Mózg (M3), 6 stanów węzła w dwóch stylach */
.styl-mozg { display: grid; gap: 10px; }
.styl-mozg .mz-scena { height: 150px; }
/* karta: nagłówek stały, przewija się tylko treść (.mz-tresc); tło panelu (.cp::after) zostaje na całej wysokości, bo aside sam się nie przewija */
.mz-karta { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(380px, calc(100% - 20px)); display: flex; flex-direction: column; overflow: hidden; --edge: color-mix(in srgb, var(--area) 60%, transparent); }
.mz-karta > header { display: flex; align-items: flex-start; gap: 8px; flex: none; }
.mz-karta .mz-zn { width: 44px; height: 44px; flex: none; margin: -6px 0 -4px -4px; } /* T-0048: znaczek roli w karcie agenta */
.mz-tresc { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.mz-karta h2 { font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.mz-karta h3 { font: 700 12px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 12px 0 4px; }
.mz-karta .mz-ob i { display: inline-block; width: 8px; height: 8px; background: var(--area); }
.mz-akcje { gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.mz-sc { overflow-wrap: anywhere; }
.mz-pow ul, .mz-hist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mz-pow li, .mz-hist li { padding: 3px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.mz-pow a { color: var(--text); } .mz-pow a.you { color: var(--you); } .mz-pow a:hover { color: var(--live); }
.mz-pre { max-height: 70vh; overflow: auto; white-space: pre; font-size: 12px; }
@media (max-width: 760px) {
  .mz-scena { height: 62vh; }
  .mz-karta { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 60%; }
  .mz-szukaj-box { max-width: none; flex-basis: 100%; }
}
.panel header h2 a { color: inherit; } .panel header h2 a:hover { color: var(--live); }
.mz-filtry summary { cursor: pointer; font: 700 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 4px 0; }
.mz-filtry[open] summary { margin-bottom: 6px; }
/* K4: suwak czasu, pomiar, pusty widok */
.mz-czas { align-items: center; gap: 8px; }
.mz-suwak { flex: 1 1 240px; min-width: 120px; accent-color: var(--live); }
.mz-chwila { min-width: 150px; font-size: 12px; }
.mz-bench { padding: 6px 10px; border: 1px solid var(--line-hi); font-size: 13px; }
.mz-bench.live { border-color: var(--live); } .mz-bench.alert { border-color: var(--alert); }
.mz-pusto { position: absolute; inset: 40% 0 auto; text-align: center; pointer-events: none; }

/* ── F7 K1b: Finanse ── */
.fin-nav { gap: 8px; align-items: center; margin-bottom: 4px; }
.fin-nav .prawo, .fin-form .prawo { margin-left: auto; }
input[type=date], input[type=month] { background: #0a0f15; border: 1px solid var(--line-hi); padding: 8px 10px; outline: none; border-radius: 0; color-scheme: dark; }
.fin-pola { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 10px; }
.fin-pole { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.fin-pole input:not([type]) { width: auto; }
.fin-pole input, .fin-pole select { min-width: 120px; font: 14px var(--f-text); text-transform: none; letter-spacing: 0; color: var(--text); }
.fin-pole[hidden] { display: none; }
.fin-podglad { font-size: 13px; min-height: 1.4em; }
.grid2 > .panel { min-width: 0; }
.fin-kolo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.fin-kolo h3 { grid-column: 1 / -1; margin: 0 0 6px; font: 700 13px var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.fin-kolo svg { width: 180px; height: 180px; }
.fin-kolo .fin-dziura { fill: var(--panel-2); }
.fin-kolo .empty { grid-column: 1 / -1; }
.fin-legenda { flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fin-legenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 3.5em; gap: 6px; align-items: center; }
.fin-legenda b { font-weight: 400; color: var(--text); text-align: right; } .fin-legenda li > span:last-child { text-align: right; }
.chart .fin-w, .fin-w-l { fill: #b46cff; background: #b46cff; } .chart .fin-d, .fin-d-l { fill: var(--ok); background: var(--ok); }
.chart .fin-nar { fill: none; stroke: #9aa7b8; stroke-width: 1.5; stroke-dasharray: 4 3; } .fin-nar-l { background: #9aa7b8; height: 2px !important; vertical-align: 3px !important; }
.chart .fin-pend { fill: var(--warn); } .chart .klik { cursor: pointer; } .chart .klik:hover rect { opacity: .8; }
.fin-tab td, .fin-tab th { white-space: nowrap; } .fin-tab td:nth-child(2) { white-space: normal; }
.fin-uniew td:not(:last-child) { text-decoration: line-through; }
.fin-rok .fin-sekcja td { font: 700 11px var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: 12px; }
.fin-rok .fin-suma td { border-top: 1px solid var(--line-hi); font-weight: 700; }
.fin-kat { list-style: none; margin: 0 0 10px; padding: 0; } .fin-kat li { gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); } .fin-kat .prawo { margin-left: auto; }
.fin-czeka { list-style: none; margin: 6px 0 0; padding: 0; } .fin-czeka li { gap: 10px; padding: 3px 0; flex-wrap: wrap; } .fin-czeka .prawo { margin-left: auto; gap: 6px; }
@media (max-width: 760px) {
  .fin-kolo { grid-template-columns: minmax(0, 1fr); justify-items: center; } .fin-legenda { width: 100%; }
}
.fin-nav input[type=month] { width: auto; flex: 0 0 auto; } .fin-tab select { width: auto; padding: 4px 8px; }

/* F7 K2b: Serwer. Czerwień = alarm trwający (blokada), pomarańcz = wyciszony / publiczny port, szarość = ustąpiony. */
.srv-alarmy, .srv-czeka { list-style: none; margin: 6px 0 0; padding: 0; }
.srv-alarmy li, .srv-czeka li { gap: 10px; padding: 4px 0; flex-wrap: wrap; } .srv-alarmy .prawo, .srv-czeka .prawo { margin-left: auto; gap: 6px; }
.srv-alarmy li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.srv-cicho { opacity: .7; }
.srv-tab td, .srv-tab th { white-space: nowrap; } .srv-tab td.warn { color: var(--warn); }
.srv-pub td:first-child { color: var(--warn); font-weight: 700; }
.srv-logi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.srv-log h3 { margin: 0 0 6px; font: 700 13px var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.srv-l { fill: var(--live); opacity: .75; } .srv-l-hi { fill: var(--alert); opacity: 1; }
@media (max-width: 760px) { .srv-logi { grid-template-columns: minmax(0, 1fr); } }

/* F7 K3b: Grafika (grafika.js). Tablica stanów, przeglądarka arkuszy (canvas), rejestr plików, słownik IP. Telefon: kolumny jedna pod drugą, bez akcji. */
.gr-sekcje { gap: 6px; flex-wrap: wrap; margin: 0 0 12px; } .gr-sekcje .prawo { margin-left: auto; gap: 6px; }
.gr-tablica { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.gr-kol { padding: 8px; background: var(--panel-2); min-width: 0; } .gr-kol > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gr-kol ul, .gr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-kol.you { box-shadow: inset 0 0 0 1px var(--you); }
.gr-zasob { display: grid; gap: 4px; padding: 8px; background: var(--panel); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.gr-zasob:hover, .gr-zasob:focus { outline: 1px solid var(--line-hi); } .gr-zasob.you { border-left: 2px solid var(--you); }
.gr-zasob .row { gap: 6px; flex-wrap: wrap; font-size: 12px; } .gr-sekcja { font-size: 11px; }
.gr-akcje { gap: 4px; flex-wrap: wrap; }
.gr-boczne summary, .gr-nowy summary, .gr-edycja summary { cursor: pointer; }
.gr-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; } .gr-form textarea, .gr-form button { grid-column: 1 / -1; } .gr-form button { justify-self: start; }
.gr-hist, .gr-czeka { list-style: none; margin: 6px 0 0; padding: 0; }
.gr-hist li, .gr-czeka li { gap: 10px; padding: 4px 0; flex-wrap: wrap; } .gr-hist li + li, .gr-czeka li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.gr-hist .prawo, .gr-czeka .prawo { margin-left: auto; gap: 6px; } .gr-cofniete > span:not(.tag) { text-decoration: line-through; }
.gr-opis { white-space: pre-wrap; margin: 8px 0; }
.gr-filtr { gap: 8px; flex-wrap: nowrap; margin-bottom: 8px; } .gr-filtr > * { flex: 1 1 0; min-width: 0; }
.gr-ip-dodaj > label, .gr-ip-dodaj > button { flex: 0 0 auto; width: auto; }
.gr-tab td, .gr-tab th { white-space: nowrap; } .gr-tab td:first-child { white-space: normal; overflow-wrap: anywhere; }
.gr-przel { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; } .gr-przel input { width: auto; }
.gr-pp { gap: 10px; } .gr-suwak { flex: 1; }
.gr-plotno { background: repeating-conic-gradient(#15181f 0 25%, #1c2029 0 50%) 0 0 / 16px 16px; display: grid; place-items: center; padding: 8px; margin: 8px 0; overflow: auto; }
.gr-canvas { width: min(100%, 960px); height: auto; image-rendering: pixelated; }
@media (max-width: 1280px) { .gr-tablica { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gr-tablica, .gr-form { grid-template-columns: minmax(0, 1fr); } .gr-filtr { flex-wrap: wrap; } .gr-sekcje .prawo { margin-left: 0; } }

/* F7 K4b: Marketing (marketing.js). Tydzień 7 kolumn (karty pozycji jak tablica grafiki), metryki w kaflach, odczyty w wierszu. Telefon: dni jeden pod drugim, bez akcji. */
.mk-nav { gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .mk-nav .prawo { margin-left: auto; }
.mk-tydzien { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mk-poz .mk-format { font-size: 11px; } .mk-poz.dim { opacity: .55; }
.mk-num { width: 6.5em; } .mk-odczyt { gap: 4px; flex-wrap: nowrap; } .mk-odczyt input { padding: 2px 4px; }
.mk-wpis { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .mk-wpis > * { flex: 1 1 8em; min-width: 0; } .mk-wpis > button { flex: 0 0 auto; }
.mk-tab td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.mk-ip { margin: 8px 0; } .mk-csv p { margin: 8px 0; }
.mk-tekst-karta + .mk-tekst-karta { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 10px; } .mk-tekst-karta .row { gap: 8px; flex-wrap: wrap; }
.mk-kontakt { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-kontakt button { grid-column: 1 / -1; }
.mk-alarm-txt { margin: 6px 0; color: var(--alert); }
@media (max-width: 1280px) { .mk-tydzien { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mk-tydzien, .mk-kontakt { grid-template-columns: minmax(0, 1fr); } .mk-nav .prawo { margin-left: 0; } }

/* ── F7 K5b: Balans ── */
.bal-h3 { margin: 14px 0 6px; font: 700 12px var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.bal-tab td { vertical-align: top; } .bal-rap { white-space: normal !important; } .bal-rap .btn { margin: 0 4px 4px 0; }
.bal-poza td:first-child { color: var(--alert); font-weight: 700; }
.bal-chipy { display: flex; flex-wrap: wrap; gap: 6px; } .bal-chip { border: 1px solid var(--line-hi); padding: 2px 8px; font-size: 12px; } .bal-chip.live { color: var(--live); border-color: var(--live); }
.bal-v code { font-size: 28px; } .bal-bazy div { margin: 4px 0; font-size: 13px; }
.bal-os { list-style: none; margin: 0; padding: 0; }
.bal-krok { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.bal-krok .bal-k { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.bal-krok .bal-k + .bal-k { border-left: 1px solid var(--line); padding-left: 12px; position: relative; }
.bal-krok .bal-k + .bal-k::before { content: '→'; position: absolute; left: -7px; top: 0; color: var(--dim); background: var(--panel-2); font-size: 11px; }
.bal-l { font: 700 11px var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.bal-hip { font-size: 12px; } .bal-niezgodne { box-shadow: inset 3px 0 0 var(--alert); padding-left: 8px; }
.chart .bal-pasmo { fill: rgba(57, 255, 136, .07); }
.chart .bal-lin { fill: none; stroke-width: 1.5; } .chart .bal-pt { stroke: none; }
.bal-c0 { stroke: var(--live); fill: var(--live); background: var(--live); } .bal-c1 { stroke: #b46cff; fill: #b46cff; background: #b46cff; }
.bal-c2 { stroke: #9aa7b8; fill: #9aa7b8; background: #9aa7b8; } .bal-c3 { stroke: var(--ok); fill: var(--ok); background: var(--ok); }
.chart .bal-lin.bal-c0, .chart .bal-lin.bal-c1, .chart .bal-lin.bal-c2, .chart .bal-lin.bal-c3 { fill: none; }
.chart .bal-pt-poza { fill: var(--alert); stroke: var(--alert); }
.bal-legenda { gap: 14px; margin-top: 6px; font-size: 12px; } .bal-kl { display: inline-block; width: 12px; height: 3px; margin-right: 6px; }
@media (max-width: 760px) { .bal-krok { grid-template-columns: minmax(0, 1fr); } .bal-krok .bal-k + .bal-k { border-left: 0; padding-left: 0; } .bal-krok .bal-k + .bal-k::before { content: none; } }

/* ── F7 K6b: Prawo i podatki (prawo.js). Filtry w wierszu, karta faktów z lukami (żółta krawędź = wymaga Ciebie), umowy z wersjami, paski progów ze znacznikiem 80%. ── */
.pr-uwaga { margin: -6px 0 10px; font-size: 12px; }
.pr-filtry { gap: 8px; flex-wrap: wrap; margin: 0 0 10px; align-items: center; } .pr-filtry select { width: auto; flex: 0 1 15em; min-width: 9em; } .pr-filtry input[type="checkbox"] { width: auto; margin: 0 4px 0 0; }
.pr-tab td:first-child { white-space: normal; overflow-wrap: anywhere; } .pr-tab tr.dim { opacity: .55; }
.pr-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pr-form textarea, .pr-form > input:first-child, .pr-form button { grid-column: 1 / -1; }
.pr-fakt { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .06); } .pr-fakt .row { gap: 8px; flex-wrap: wrap; }
.pr-fakt.luka { box-shadow: inset 3px 0 0 var(--you); padding-left: 10px; }
.pr-fakt-pola { margin-top: 6px; } .pr-fakt-pola input { flex: 1 1 14em; min-width: 0; }
.pr-umowa + .pr-umowa { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 10px; } .pr-umowa > .row { gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pr-umowa .prawo { margin-left: auto; } .pr-wersja-form { gap: 8px; flex-wrap: wrap; margin-top: 6px; } .pr-wersja-form input[type="text"], .pr-wersja-form input:not([type]) { flex: 1 1 12em; }
.pr-progi .tile .s + .s { margin-top: 4px; } .pr-podstawa { font-size: 11px; white-space: normal; }
.tile .bar .pr-80 { background: var(--warn); }
.pr-nowy-termin { margin-top: 10px; }
@media (max-width: 760px) { .pr-form { grid-template-columns: minmax(0, 1fr); } .pr-umowa .prawo { margin-left: 0; } }
/* F7 K7b: Wydania */
.panel.wyd-wydanie.alert, .panel.wyd-wydanie.you, .wyd-czeka-karta.alert { color: inherit; } /* krawędź mówi „blokada / gotowe”, długi tekst zostaje czytelny */
.wyd-nagl { gap: 8px; flex-wrap: wrap; align-items: center; }
.wyd-check { list-style: none; margin: 8px 0 0; padding: 0; }
.wyd-check li { gap: 10px; padding: 5px 0; flex-wrap: wrap; align-items: center; } .wyd-check li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.wyd-check .prawo { margin-left: auto; gap: 6px; } .wyd-co { flex: 1 1 18em; min-width: 0; }
.wyd-auto { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.wyd-stan { gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; } .wyd-stan .prawo { margin-left: auto; gap: 6px; }
.wyd-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wyd-form textarea, .wyd-form button { grid-column: 1 / -1; }
.wyd-wpd { gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.wyd-actions-form { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .wyd-actions-form input { flex: 1 1 12em; min-width: 0; } .wyd-actions-form select { width: auto; }
.wyd-tab tr.wyd-zle td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .wyd-tab tr.dim { opacity: .55; } .wyd-tab td { white-space: normal; overflow-wrap: anywhere; }
.wyd-czeka-karta .gr-czeka li { display: block; } .wyd-czeka-karta .gr-czeka li > .row { gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.wyd-szcz h3 { margin: 12px 0 4px; font-size: 13px; }
@media (max-width: 760px) { .wyd-form { grid-template-columns: minmax(0, 1fr); } .wyd-stan .prawo, .wyd-check .prawo { margin-left: 0; } }
/* F7 K8b Wiedza: długi tekst bez efektów; cyjan = przypięty (żywe dla agentów), żółć tylko w przyciskach sterowania */
.wie-szukaj input { width: 100%; font-size: 15px; } .wie-podp { font-size: 12px; margin-top: 6px; }
.wie-filtry { display: grid; gap: 8px; }
.wie-chipy { gap: 6px; flex-wrap: wrap; align-items: center; } .wie-etyk { font-size: 12px; min-width: 5em; }
.wie-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line-hi); background: none; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.wie-chip b { color: var(--dim); font-weight: 400; } .wie-chip:hover { border-color: var(--live); }
.wie-chip[aria-pressed="true"] { border-color: var(--live); color: var(--live); } .wie-chip.wyl { opacity: .5; text-decoration: line-through; }
.wie-ukryte { gap: 6px; font-size: 12px; align-items: center; justify-content: flex-start; width: fit-content; } .wie-ukryte input { width: auto; }
.wie-lista { list-style: none; margin: 0; padding: 0; }
.wie-wpis { padding: 8px 0; } .wie-wpis + .wie-wpis { border-top: 1px solid rgba(255, 255, 255, .06); }
.wie-wpis > .row { gap: 8px; flex-wrap: wrap; align-items: center; } .wie-wpis.przyp { box-shadow: inset 3px 0 0 var(--live); padding-left: 8px; } .wie-wpis.dim { opacity: .55; }
.wie-tytul { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; flex: 1 1 16em; min-width: 0; overflow-wrap: anywhere; }
.wie-tytul:hover { color: var(--live); }
.wie-skrot { font-size: 12px; margin: 3px 0; overflow-wrap: anywhere; } .wie-meta { gap: 8px; flex-wrap: wrap; font-size: 12px; align-items: center; }
.wie-rola { border: 1px solid var(--line-hi); padding: 0 6px; font-size: 11px; } .wie-akcje { margin-left: auto; gap: 6px; }
.wie-szcz .wie-tekst { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; margin: 10px 0; } .wie-szcz h3 { margin: 12px 0 4px; font-size: 13px; }
.wie-tagi { gap: 6px; flex-wrap: wrap; } .wie-zrodla { list-style: none; margin: 0; padding: 0; } .wie-zrodla li { gap: 8px; flex-wrap: wrap; align-items: center; padding: 3px 0; }
.wie-zrodla code { overflow-wrap: anywhere; } .wie-tab td { white-space: normal; overflow-wrap: anywhere; } .wie-tab tr.dim { opacity: .55; }
.wie-bledy { margin: 4px 0; padding-left: 18px; font-size: 12px; overflow-wrap: anywhere; }
.wie-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.wie-przepis { padding: 10px 12px; } .wie-przepis.alert { --edge: var(--alert); color: inherit; } .wie-przepis > .row { gap: 8px; flex-wrap: wrap; align-items: center; } .wie-przepis .prawo { margin-left: auto; font-size: 11px; }
.wie-przepis p { font-size: 12px; margin: 6px 0; } .wie-przepis ul { font-size: 12px; }
.wie-pol { gap: 6px; align-items: center; margin-top: 4px; } .wie-pol code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 12px; background: rgba(255, 255, 255, .04); padding: 4px 6px; }
@media (max-width: 760px) { .wie-kit { grid-template-columns: minmax(0, 1fr); } .wie-akcje { margin-left: 0; } }

/* ── T-0009 (P-20261014-8): jeden ekran PC + pod-zakładki (DH.podzakladki w wspolne.js) ──
 * Zakładka z .pz: na PC strona = wysokość okna, przewija się tylko tabela w aktywnym panelu (nagłówek tabeli przyklejony).
 * Guziki pływają nad sceną (cień, poświata aktywnego); przejście slide+fade 180 ms tylko w Night City (Spokojny i reduced-motion bez). */
@media (min-width: 761px) {
  #app:has(.pz) { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  main:has(.pz) { min-height: 0; overflow: hidden; padding-bottom: 20px; }
  .pz { flex: 1; min-height: 0; }
  .pz-scena > * { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .pz-scena .tbl-wrap { flex: 1; min-height: 0; overflow: auto; }
  .pz-scena thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
}
.pz { display: flex; flex-direction: column; gap: 12px; }
.pz-scena { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pz-pasek { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; }
.pz-g { background: var(--panel); border: 1px solid var(--line-hi); color: var(--dim); padding: 7px 14px; cursor: pointer;
  font: 700 12px var(--f-head); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55); border-left: 3px solid var(--line-hi);
  transition: color .15s, border-color .15s, transform .15s; }
.pz-g:hover { color: var(--text); border-color: var(--live); transform: translateY(-1px); }
.pz-g[aria-selected="true"] { background: var(--live); border-color: var(--live); color: #001417; box-shadow: 0 0 16px rgba(47, 243, 200, .45); }
.pz-g.alert:not([aria-selected="true"]) { border-color: var(--alert); color: var(--alert); }
.pz-n { font: 11px var(--f-mono); opacity: .8; }
html[data-tryb="night"] .pz-wej { animation: pz-wej .18s ease-out; }
@keyframes pz-wej { from { opacity: 0; transform: translateX(var(--pz-dx, 28px)); } to { opacity: 1; transform: none; } }
html[data-tryb="spokojny"] .pz-g { transition: none; }
.rt-tab td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 360px; } /* opis rutyny zawija się, reszta kolumn na ekranie */

/* ── T-0009: klocki DH.rozwijane i DH.suwak (wspolne.js) + układ Kroniki (Dni · Oś czasu · Rutyny · Archiwum) ──
 * Uwaga właściciela 14.10: więcej powietrza (wiersze 12 px, nagłówek 14×18, krok 9 px), krok jako siatka kolumn, filtry za guzikiem,
 * suwak dnia pływa na dole sceny (cień + poświata jak .pz-g), animacje przejść tylko w Night City (Spokojny i reduced-motion bez). */
@media (min-width: 761px) {
  .pz-scroll { flex: 1; min-height: 0; overflow: auto; }
  .pz-scena .tory-wrap { flex: 1; min-height: 0; overflow: auto; }
  .pz-scena .tory-wrap svg { display: block; width: 100%; height: auto; }
  .rw-in { max-height: 46vh; overflow: auto; } /* kroki projektu przewijają się w środku wiersza */
}
.rw-lista { display: flex; flex-direction: column; gap: 12px; }
.rw-akcje { display: flex; justify-content: flex-end; }
.rw { border: 1px solid var(--line); border-left: 3px solid var(--line-hi); background: var(--panel); }
.rw.alert { border-left-color: var(--alert); }
.rw.ty { border-left-color: var(--you); }
.rw > summary { list-style: none; cursor: pointer; padding: 14px 18px; }
.rw > summary::-webkit-details-marker { display: none; }
.rw > summary::before { content: '▸'; color: var(--dim); margin-right: 12px; display: inline-block; transition: transform .15s; }
.rw[open]:not(.zamyka) > summary::before { transform: rotate(90deg); }
html[data-tryb="spokojny"] .rw > summary::before { transition: none; }
.rw > summary:hover, .rw > summary:focus-visible { background: var(--panel-2); outline: none; }
.rw-glowa { display: inline-flex; gap: 14px; align-items: baseline; width: calc(100% - 26px); min-width: 0; }
.rw-glowa > b { font: 700 15px var(--f-head); letter-spacing: .04em; }
.rw-glowa .prawo { margin-left: auto; white-space: nowrap; }
.rw-tresc { display: grid; grid-template-rows: 1fr; }
.rw-in { min-height: 0; padding: 2px 18px 14px 44px; }
.rw-in > .lead { margin: 0 0 12px; max-width: 110ch; }
html[data-tryb="night"] .rw[open] > .rw-tresc { animation: rw-otw .2s ease-out; }
html[data-tryb="night"] .rw.zamyka > .rw-tresc { animation: rw-zam .17s ease-in forwards; }
html[data-tryb="night"] .rw > .rw-tresc > .rw-in { overflow: hidden; }
html[data-tryb="night"] .rw[open]:not(.zamyka) > .rw-tresc > .rw-in { overflow: auto; }
@keyframes rw-otw { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes rw-zam { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
/* krok w rozwiniętym projekcie: status | rodzaj | tytuł | aktor | godzina | koszt */
.rw .kroki li { border-top: 1px solid var(--line); }
.rw .krok { display: grid; grid-template-columns: 26px 92px minmax(0, 1fr) minmax(90px, 150px) 46px 72px; gap: 14px; align-items: center; padding: 9px 8px; }
.rw .krok > .tag { justify-self: center; }
.rw .krok .k-rodz { font: 11px var(--f-mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.rw .krok .k-akt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw .krok .k-koszt { text-align: right; }
@media (max-width: 700px) { .rw .krok { grid-template-columns: 22px minmax(0, 1fr) 46px; gap: 8px; } .rw .krok .k-rodz, .rw .krok .k-akt, .rw .krok .k-koszt { display: none; } }
/* Kronika · Dni: nagłówek (podsumowanie dnia, Zwiń wszystko, Filtry), schowane filtry, lista, dok suwaka */
.kr-dni { position: relative; }
.kr-dni > header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.kr-dni > header .row { margin: 0; flex-wrap: nowrap; }
.kr-dni > header .meta { font-size: 13px; margin-left: 0; color: var(--text); }
.kr-fbtn.btn.akt { --edge: var(--live); color: var(--live); }
.kr-filtry { gap: 12px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel-2); }
.kr-filtry[hidden] { display: none; }
.kr-filtry select { width: auto; }
.kr-lista { padding-bottom: 96px; } /* ostatni wiersz nie chowa się pod pływającym suwakiem */
html[data-tryb="night"] .kr-wej .rw { animation: kr-wej .18s ease-out both; animation-delay: calc(var(--rw-n, 0) * 30ms); }
@keyframes kr-wej { from { opacity: 0; transform: translateX(var(--pz-dx, 28px)); } to { opacity: 1; transform: none; } }
.kr-dok { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 32px);
  background: var(--panel); border: 1px solid var(--line-hi); border-left: 3px solid var(--live); padding: 10px 16px 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .7), 0 0 18px rgba(47, 243, 200, .18); }
@media (max-width: 760px) { .kr-dok { position: static; transform: none; max-width: none; margin-top: 12px; } .kr-lista { padding-bottom: 0; } }
.kr-rut td:first-child { white-space: normal; overflow-wrap: anywhere; }
/* suwak: ← etykieta → | pas z komórkami (kropka + data dd.mm) i kciukiem jadącym transformem */
.sw { display: inline-flex; align-items: center; gap: 10px; outline: none; flex-wrap: wrap; justify-content: center; }
.sw:focus-visible .sw-etk { color: var(--live); }
.sw-etk { font: 700 14px var(--f-head); letter-spacing: .08em; text-transform: uppercase; min-width: 11ch; text-align: center; }
.sw .sw-s { color: var(--text); font-size: 15px; padding: 3px 10px; }
.sw-s:disabled { opacity: .3; cursor: default; }
.sw-pas { --sw-w: 44px; --sw-i: 0; position: relative; display: flex; margin-left: 6px; touch-action: none; cursor: pointer; user-select: none; }
.sw-c { width: var(--sw-w); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sw-k { width: 14px; height: 14px; padding: 0; border: 1px solid var(--line-hi); background: var(--live); opacity: calc(.15 + var(--sila) * .85); cursor: pointer; }
.sw-k.alert { background: var(--alert); }
.sw-k[aria-current="true"] { opacity: 1; }
.sw-d { font: 10px var(--f-mono); color: var(--dim); white-space: nowrap; height: 12px; }
.sw-d.ukr { visibility: hidden; }
.sw-c.akt .sw-d { visibility: visible; color: var(--text); }
.sw-kciuk { position: absolute; left: 0; top: -4px; width: var(--sw-w); height: 22px; pointer-events: none;
  display: flex; justify-content: center; transform: translateX(calc(var(--sw-i) * var(--sw-w))); }
.sw-kciuk::before { content: ''; width: 20px; height: 20px; border: 2px solid var(--live); box-shadow: 0 0 12px rgba(47, 243, 200, .6); }
.sw-kciuk.alert::before { border-color: var(--alert); box-shadow: 0 0 12px rgba(255, 30, 60, .5); }
html[data-tryb="night"] .sw-kciuk { transition: transform .2s ease-out; }
html[data-tryb="night"] .sw-pas.ciagnie .sw-kciuk { transition-duration: .08s; }

/* T-0013: pływająca tablica guzików nawigacji (tablica.js). Arasaka: czerń, czerwień marki, ścięte rogi; Neon: cyjan. Tylko PC.
 * Nad kartą (.nakladka 80), żeby Cofnij zamykał kartę; pod toastem (90). Żółty tylko na Czeka, gdy coś czeka. */
.tg { --tg-a: var(--brand, var(--live)); --tg-glow: var(--brand-glow, rgba(47, 243, 200, .35));
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; z-index: 85; /* max-content: przeciąganie nie zmienia szerokości (T-0018) */ display: flex; flex-direction: column; gap: 4px;
  padding: 6px 8px 8px; background: var(--wnetrze, var(--panel-2)); border: 1px solid var(--tg-a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px var(--tg-glow), inset 0 1px 0 rgba(255, 255, 255, .04);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); user-select: none; }
.tg::after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--tg-a); box-shadow: 0 0 10px var(--tg-glow); }
.tg-top { display: flex; align-items: center; gap: 8px; }
.tg-ttl { font: 700 11px var(--f-mono); letter-spacing: .22em; color: var(--text); flex: 1; }
.tg-ttl span { color: var(--tg-a, var(--brand, var(--live))); }
.tg-srodek { text-align: center; }
.tg-chwyt { cursor: grab; color: var(--dim); font-size: 14px; line-height: 1; padding: 2px 4px; touch-action: none; }
.tg-ciagnij .tg-chwyt { cursor: grabbing; color: var(--tg-a); }
.tg-mini { background: none; border: 0; color: var(--dim); cursor: pointer; font: 12px var(--f-mono); padding: 0 4px; }
.tg-mini:hover { color: var(--tg-a); }
.tg-rzad { display: flex; gap: 4px; }
.tg-g { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 8px 4px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line-hi); color: var(--text); font: 700 11px var(--f-head); letter-spacing: .12em; text-transform: uppercase; }
.tg-g svg { width: 18px; height: 18px; color: var(--tg-a); }
.tg-g kbd { font: 9px var(--f-mono); letter-spacing: 0; color: var(--dim); text-transform: none; }
.tg-g:hover:not(:disabled) { border-color: var(--tg-a); box-shadow: 0 0 12px var(--tg-glow); color: #fff; }
.tg-g:disabled { opacity: .35; cursor: default; }
.tg-zw { flex-direction: row; align-items: center; padding: 4px 6px; }
.tg-zw .tg-g { min-width: 0; flex-direction: row; padding: 4px 10px; }
html[data-tryb="night"] .tg-g { transition: border-color .12s, box-shadow .12s; }
.tg-szukaj { position: fixed; inset: 0; z-index: 95; background: rgba(5, 5, 6, .78); display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; }
.tg-okno { width: min(640px, calc(100vw - 32px)); background: var(--wnetrze, var(--panel-2)); border: 1px solid var(--brand, var(--live)); box-shadow: 0 0 30px var(--brand-glow, rgba(47, 243, 200, .3)); padding: 12px; }
.tg-okno .tg-ttl { display: flex; gap: 8px; margin-bottom: 8px; }
.tg-okno .tg-ttl { align-items: center; }
.tg-okno .tg-ttl kbd { margin-left: auto; font: 10px var(--f-mono); color: var(--dim); }
.tg-in { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-hi); color: var(--text); font: 15px var(--f-text); outline: none; }
.tg-in:focus { border-color: var(--brand-hi, var(--live)); }
.tg-lista { max-height: 50vh; overflow: auto; margin-top: 8px; display: flex; flex-direction: column; }
.tg-poz { display: flex; gap: 12px; align-items: baseline; text-align: left; background: none; border: 0; border-left: 2px solid transparent; color: var(--text); padding: 6px 10px; cursor: pointer; font: 13px var(--f-text); }
.tg-poz[aria-selected="true"], .tg-poz:hover { background: var(--brand-tint, rgba(47, 243, 200, .06)); border-left-color: var(--brand, var(--live)); }
.tg-rodz { font: 10px var(--f-mono); color: var(--dim); min-width: 64px; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 760px) { .tg { display: none; } }
/* T-0026 (#136/#137): Brief | Agenci | Czeka w jednym rzędzie, pod nimi Zapytaj o stan na całą szerokość (lewo pytanie z listy i pod nim swobodne do Haiku, prawo samo okienko czatu), na dole Rutyny.
 * Pytanie: o co zapytać, bez zasłaniania Czeka? Dane: /api/asystent/lista. Akcja: Pokaż, Zapytaj model, Wyłącz. Na PC pas ma stałą wysokość, przewija się tylko czat. Nowy agent: Rozmowy. */
.desk-asyst { flex: none; margin-top: 12px; }
.desk-asyst > .panel { padding: 8px 14px 10px; }
.desk-asyst > .panel > header { margin-bottom: 6px; }
.asyst-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 18px; align-items: stretch; }
.asyst-wybor { display: grid; gap: 8px; align-content: start; min-width: 0; }
.asyst-czat { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; border-left: 1px solid var(--line); padding-left: 18px; }
.desk-asyst .asystent .czat { margin-top: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.desk-asyst .pisz textarea { min-height: 0; height: 40px; resize: none; }
.nowy-agent { display: grid; gap: 8px; padding: 4px 0; }
.nowy-agent .row > * { flex: 1; min-width: 0; }
@media (min-width: 1281px) { main:has(.desk) .desk-asyst .asyst-2 { height: clamp(166px, calc(100vh - 704px), 210px); } main:has(.desk) .desk-asyst .asyst-wybor { overflow-y: auto; scrollbar-width: thin; } }
@media (max-width: 900px) { .asyst-2 { grid-template-columns: minmax(0, 1fr); } .asyst-czat { border-left: 0; padding-left: 0; } }
.desk-asyst .swobodne .pisz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.desk-asyst .swobodne .pisz .row { margin: 0; }
.desk-asyst .swobodne > .row { margin-bottom: 4px; }
.mz-okna[hidden] { display: none; }

/* T-0046 poprawka (P-20261014-8): Rozmowy na PC = jeden ekran. Strona się nie przewija; przewijają się tylko lista ról, czat, szuflada i kolumna Sesja.
 * Pytanie: czy widzę rozmowę, role i sesję naraz, bez szukania pod zgięciem? Dane: te same panele. Akcja: przewiń element; Tury i notatka = kafelki w kolumnie Sesja. */
.kf { display: grid; gap: 3px; align-content: start; width: 100%; text-align: left; padding: 4px 6px; min-width: 0; cursor: pointer; color: var(--text);
  background: none; border: 1px solid var(--line); font: inherit; }
.kf:hover, .kf:focus-visible { border-color: var(--line-hi); outline: none; }
.kf[aria-pressed="true"], .wiecej[aria-pressed="true"] { border-color: var(--brand, var(--live)); }
.kf-l { font-size: 11px; } .kf-x { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-wykres { width: 100%; height: 20px; display: block; }
.kf-wykres rect { fill: var(--brand, var(--live)); opacity: .75; } .kf-wykres rect.wa { fill: var(--warn); opacity: 1; } .kf-wykres rect.pu { fill: var(--alert); opacity: 1; }
/* T-0052: kolumna Sesja bez przewijania: narzędzia jako chipy w wierszu, listy po 3 + „wszystkie” (szuflada) */
.chipy { display: flex; flex-wrap: wrap; gap: 4px; } .chip { font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--line); background: var(--panel-2); }
.sesja-kol .wiecej { justify-self: start; } .sesja-kol .sek > summary { padding: 6px 2px; } .sesja-kol .sek .tr { padding-bottom: 8px; }
html[data-tryb="night"] .kf:hover .kf-wykres rect { opacity: 1; }
@media (min-width: 1281px) {
  #app:has(.rozmowy) { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  main:has(.rozmowy) { min-height: 0; overflow: hidden; padding-bottom: 12px; }
  .rozmowy { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); padding: 0; }
  .rozmowy > .col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
  .rozmowy > .col > * { flex: none; }
  /* lewa: lista ról wypełnia resztę kolumny i przewija się w środku */
  .rozmowy > .col:first-child > section:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .rozmowy > .col:first-child > section:last-child > :not(header) { min-height: 0; }
  .rozmowy .role-lista { flex: 1; max-height: none; }
  /* środek: czat rośnie, szuflada nad nim ma swoją granicę */
  .rozmowy > .col:nth-child(2) > section.panel:not(.you) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .rozmowy .czat { flex: 1; min-height: 120px; max-height: none; }
  .rozmowy .szuf { flex: none; max-height: 40%; }
  /* prawa: plan i Sesja przewijają się razem w kolumnie */
  .rozmowy > .col:nth-child(3) { overflow-y: auto; scrollbar-width: thin; padding-right: 4px; overscroll-behavior: contain; }
}

/* T-0047: okno podglądu strony agenta (wariant A „Okno pływające”): szersze niż karta, ramka w piaskownicy wypełnia okno */
.plywak.strona-okno { width: min(1100px, calc(100vw - 32px)); height: 82vh; max-height: 82vh; --edge: var(--line-hi); }
.strona-okno .plyw-cialo { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.strona-cialo { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.strona-pas { gap: 8px; align-items: center; flex-wrap: wrap; }
.strona-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strona-wersje .chip { cursor: pointer; font-family: var(--f-mono); color: var(--dim); }
.strona-wersje .chip.biez { border-color: var(--live); color: var(--live); }
.strona-wersje .chip.glowna { font-weight: 700; }
.strona-wersje .chip.przyp { box-shadow: inset 0 -2px 0 var(--you); }
.strona-ramka { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--line); background: var(--panel-2); }
.strona-ster { gap: 6px; flex-wrap: wrap; align-items: center; }
.strona-ster:empty { display: none; }
.strona-ster .odst { flex: 1; }
.strona-uw { flex: 0 1 260px; min-width: 120px; }
.strona-plik .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .plywak.strona-okno { left: 8px; right: 8px; top: 8px; width: auto; height: calc(100vh - 16px); max-height: none; transform: none; } }

/* T-0049 zakładka Runner (wariant A „Tablica grup”): karta grupy z członkami i trzema ustawieniami; ramka przerywana = wartość globalna.
   Na telefonie tylko odczyt (.rn-ster znika). Kolory wyłącznie z tokenów. */
.rn-glob header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rn-glob > .row { margin-top: 10px; gap: 14px; flex-wrap: wrap; }
.rn-tablica { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.rn-karta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rn-karta header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rn-karta.rn-cicha { opacity: .85; }
.rn-nad { outline: 1px dashed var(--live); outline-offset: 3px; }
/* T-0057 wariant C: żeton roli 92×104 (znaczek 52 px z DH.znaczek, nazwa ≥ 12 px, liczniki w rogach, górna krawędź = kolor obszaru) */
.rn-czlonkowie { display: grid; grid-template-columns: repeat(auto-fill, 92px); gap: 8px; }
.rn-zeton { position: relative; width: 92px; height: 104px; display: flex; flex-direction: column; align-items: center; padding: 0; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--obszar, var(--dim)); cursor: grab; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); }
.rn-zeton .zn { width: 52px; height: 52px; margin-top: 8px; display: block; }
.rn-zeton .rn-nz { font: 600 12px/1.1 var(--f-text); text-align: center; padding: 2px 4px 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rn-lic { position: absolute; top: 2px; right: 4px; font: 11px var(--f-mono); color: var(--dim); } .rn-lic.l2 { right: auto; left: 4px; }
.rn-lic.live { color: var(--live); } .rn-lic.you { color: var(--you); } .rn-lic.alert { color: var(--alert); }
.rn-zeton.pracuje { border-color: var(--live); border-top-color: var(--obszar, var(--live)); } .rn-zeton.stop { border-color: var(--alert); border-top-color: var(--obszar, var(--alert)); } .rn-zeton.stop .rn-nz { color: var(--dim); }
.rn-zeton.rn-przen { opacity: .4; }
.rn-zeton:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.rn-ster { display: flex; flex-direction: column; gap: 8px; }
.rn-set { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 8px; align-items: center; } /* etykieta · wartość · „globalne”, suwak pod spodem na całą szerokość */
.rn-karta .rn-set > .sgm { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.rn-set > .btn.ghost { padding-inline: 6px; }
.rn-glob .rn-set { grid-template-columns: auto minmax(140px, 220px) 72px; }
.rn-set > .btn:not(.ghost) { grid-column: 2 / -1; justify-self: end; }
.rn-wart { font-variant-numeric: tabular-nums; text-align: right; padding: 1px 4px; border: 1px solid transparent; white-space: nowrap; }
.rn-wart.rn-inh { border: 1px dashed var(--line-hi); color: var(--dim); }
.rn-akcje { gap: 6px; flex-wrap: wrap; } .rn-akcje .spacer, .rn-bez .spacer { flex: 1; }
.rn-bez .rn-czlonkowie { flex: 1 1 400px; min-width: 0; }
.rn-bez { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; border-style: dashed; }
@media (max-width: 760px) { .rn-ster, .rn-bez .rn-ster { display: none; } .rn-zeton { cursor: default; } }
.rn-glob .rn-ster { flex-direction: row; flex-wrap: wrap; align-items: center; }
.rn-karta header h2 { margin-right: auto; }

/* == T-0009 (uklad, P-20261017-1): siatka „jeden ekran” w pod-zakładkach (Stan, Tokeny, Dziennik, Grafika, Prawo, Wydania, Wiedza…) ==
 * .jk-ekran = kolumna sceny (nagłówek + siatka), .jk-siatka = panele w wierszach na resztę wysokości, każdy panel przewija się sam (nagłówek tabeli przyklejony).
 * .jk-pelny = jeden panel na całą scenę. Telefon: zwykły stos, strona się przewija. */
.jk-ekran { display: flex; flex-direction: column; gap: 14px; }
.jk-siatka { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.jk-filtr { width: min(320px, 40vw); padding: 4px 8px; font-size: 12px; }
@media (min-width: 761px) {
  .jk-ekran > :not(.jk-siatka) { flex: none; }
  .jk-siatka { flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .jk-siatka.jk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jk-siatka.jk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jk-siatka > .jk-2 { grid-column: span 2; }
  .jk-siatka > *, .jk-pelny { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .jk-siatka > .panel > :not(header), .jk-pelny > :not(header) { flex: 0 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
  .jk-siatka > .panel > header, .jk-pelny > header { flex: none; }
  .jk-siatka thead th, .jk-pelny thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
}
/* Tokeny: Miary = 7 kafli w rzędzie + wykres | wyzwalacze; Agenci = tabela | limit tygodnia */
@media (min-width: 761px) {
  .jk-siatka.tk-miary { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .tk-miary .chart svg { max-height: 44vh; }
  .jk-siatka.tk-agenci { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
/* Dziennik (i inne zakładki z jednym panelem bez pod-zakładek): main = wysokość okna, panel .jk-strona wypełnia resztę */
@media (min-width: 761px) {
  #app:has(.jk-strona) { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  main:has(.jk-strona) { min-height: 0; overflow: hidden; padding-bottom: 20px; }
  .jk-strona { flex: 1; }
}
.dz-filtry { gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.jk-strona > .dz-filtry { flex: none; overflow: visible; }
.dz-filtry input[type=search] { flex: 0 1 320px; }
.dz-filtry select { width: auto; }
.dz-filtry .meta { margin-left: auto; }
/* Finanse: Miesiąc = koła (kolumna) | Wpisy; Rok = 3 panele + Kategorie × miesiące na całą szerokość */
.jk-siatka > .jk-pelna { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .jk-siatka.fin-mies { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .jk-siatka.fin-rok-s { grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr); grid-auto-rows: auto; }
  .jk-kol > .panel:first-child + .panel { flex: 1 1 auto; }
}
.nakladka .fin-form { --edge: transparent; padding: 0; }
.nakladka .fin-form > header { display: none; }
@media (min-width: 761px) { .jk-ekran > .jk-pelny { flex: 1 1 auto; } }
/* ostatni panel sceny wypełnia resztę wysokości i przewija się w środku (Grafika: Arkusze, Pliki, Słownik IP, Zmiany; Prawo, Wydania, Wiedza…) */
@media (min-width: 761px) {
  .jk-ekran > section.panel:last-child { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .jk-ekran > section.panel:last-child > :not(header) { min-height: 0; overflow: auto; scrollbar-width: thin; }
  .jk-ekran > section.panel:last-child > .tbl-wrap, .jk-ekran > section.panel:last-child > div:last-child { flex: 0 1 auto; }
  .jk-ekran thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
  /* Grafika · Tablica: kolumny na resztę wysokości, każda przewija się sama */
  .gr-k-tablica .gr-tablica { flex: 1 1 auto; min-height: 0; margin: 0; grid-auto-rows: minmax(0, 1fr); }
  .gr-k-tablica .gr-kol { display: flex; flex-direction: column; min-height: 0; }
  .gr-k-tablica .gr-kol > ul { min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; padding-right: 2px; }
  .gr-k-tablica .gr-boczne { max-height: 30vh; overflow: auto; }
  .gr-k-arkusze .gr-plotno { flex: 1 1 auto; }
}
.gr-pasek { gap: 6px; flex-wrap: wrap; align-items: center; } .gr-pasek .prawo { margin-left: auto; }
.nakladka .gr-nowy .gr-form { margin-top: 0; }
/* Prawo: uwaga Radcy w wierszu tytułu, „Nowa …” na prawym końcu wiersza filtrów */
.page-title .pr-uwaga { margin: 0; }
.pr-filtry > .prawo { margin-left: auto; }
.jk-ekran > .pr-filtry { margin: 0; }
/* Serwer: grupy szczegółów jako rozwijana lista (tabela bez ramki panelu w środku wiersza) */
.srv-grupa > .tbl-wrap, .srv-grupa > .srv-logi { margin-top: 4px; }
.jk-strona.pz-scroll { min-height: 0; }
.srv-grupa .srv-log svg { max-height: 120px; }

/* == T-0005 (uklad, P-20261014-6): guziki edycji w Stanie (flagi, zasoby, subskrypcje, polecenia) == */
.st-akcje { gap: 6px; flex-wrap: wrap; margin-top: 6px; }
td > .st-akcje { margin-top: 0; }
/* == T-0009 (uklad): kolumna paneli w komórce siatki (.jk-kol: Stan Semafory + Czekają, Finanse koła) == */
.jk-kol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 761px) {
  .jk-kol > .panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .jk-kol > .panel > :not(header) { min-height: 0; overflow: auto; scrollbar-width: thin; }
  .jk-kol > .panel:first-child { flex: 0 1 auto; }
}
/* == T-0044: tryb edycji szyny zakładek (wariant C „Prąd”, wybór właściciela 17.10) ==
   Na górze szyny pasek .rail-ed (Edytuj, na całą szerokość; w edycji „Zakończ | Przywróć” w jednym rzędzie). W edycji: <span> ikony się kołysze,
   za ikoną czerwona błyskawica z płynącym prądem (.bl w <span>, więc jedzie razem z ikoną), pod ikoną wyrwa (a::after, poza siatką: nic się nie rozjeżdża).
   Przeciągana ikona zostawia ślad (.slot), pod kursorem jedzie kopia (.duch, position: fixed, poza siatką). Telefon: bez paska (tylko odczyt).
   Spokojny / prefers-reduced-motion: bez kołysania, prądu i animacji wyrw. */
.rail-ed { display: none; }
@media (min-width: 761px) {
  .rail { grid-template-rows: auto repeat(var(--rail-n, 10), minmax(48px, 1fr)); }
  .rail-ed { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; display: flex; margin-bottom: 4px; }
  .rail-g { flex: 1 1 0; min-width: 0; height: 34px; box-sizing: border-box; cursor: pointer; /* stała wysokość w obu stanach: siatka ikon nie drgnie */ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 4px;
    font: 700 12px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); background: var(--panel-2); border: 1px solid var(--line-hi); }
  .rail-g:hover { color: var(--text); border-color: var(--dim); }
  .rail-g svg { width: 13px; height: 13px; flex: none; stroke-width: 2; }
  .rail-g.przyw { display: none; }
  .rail.edycja .rail-g { flex-direction: column; gap: 2px; padding: 2px; font-size: 10px; letter-spacing: .04em; }
  .rail.edycja .rail-g.edyt { color: var(--alert); border-color: var(--alert); }
  .rail.edycja .rail-g.przyw { display: flex; border-left: 0; }
  .rail a > span { position: relative; isolation: isolate; }
  .rail a .bl { position: absolute; left: 50%; top: 50%; width: 34px; height: 40px; margin: -20px 0 0 -17px; z-index: -1; pointer-events: none; opacity: 0;
    clip-path: polygon(54% 4%, 17% 54%, 42% 54%, 33% 96%, 75% 42%, 50% 42%);
    background: repeating-linear-gradient(160deg, var(--alert) 0 5px, rgba(255, 30, 60, .35) 5px 9px) 0 0 / 100% 200%; transition: opacity .2s; }
  .rail a::after { content: ''; position: absolute; left: 6px; right: 6px; top: calc(100% + 2px); height: 0; overflow: hidden; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 30, 60, .7), transparent) center / 100% 1px no-repeat; transition: height .22s ease-out; }
  .rail.edycja a { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
  .rail.edycja a .bl { opacity: .55; animation: sz-prad .6s linear infinite; }
  .rail.edycja a::after { content: '⇅'; height: 9px; font: 9px/9px var(--f-mono); color: var(--alert); text-align: center; }
  .rail.edycja a > span { animation: sz-kolys 1.1s ease-in-out infinite alternate; }
  .rail.edycja a:nth-of-type(3n+1) > span { animation-delay: -.37s; } .rail.edycja a:nth-of-type(3n+2) > span { animation-delay: -.74s; }
  .rail.edycja a[aria-current="page"]::before { opacity: .35; }
  .rail a.slot { opacity: .2; }
  .rail a.duch { position: fixed; z-index: 40; margin: 0; pointer-events: none; color: var(--text); transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(255, 30, 60, .55)); cursor: grabbing; }
  .rail a.duch::after { content: none; }
  .rail a.duch > span { animation: none; }
}
@keyframes sz-kolys { from { transform: rotate(-1.2deg) translateY(.5px); } to { transform: rotate(1.2deg) translateY(-.5px); } }
@keyframes sz-prad { to { background-position: 0 -18px; } }
html[data-tryb="spokojny"] .rail a > span, html[data-tryb="spokojny"] .rail a .bl, html[data-tryb="spokojny"] .rail a::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .rail a > span, .rail a .bl, .rail a::after { animation: none !important; transition: none !important; } }
/* == T-0004 (uwaga 15.10): znacznik rotacji w czacie, rotacje dziś na kafelku roli i w nagłówku Rozmów == */
.czat .m.rotacja { align-items: center; border-top: 1px dashed var(--line-hi); border-bottom: 1px dashed var(--line-hi); padding: 4px 0; margin: 6px 0; font-size: 12px; color: var(--dim); }
.czat .m.rotacja .rot-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.czat .m.rotacja .rot-ik { color: var(--live); font-size: 14px; } .czat .m.rotacja b { color: var(--text); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.czat .m.rotacja.r-blad .rot-ik, .czat .m.rotacja.r-blad b { color: var(--alert); }
.czat .m.rotacja .btn { margin-left: auto; }
.rot-suma { text-align: center; font-size: 11px; margin: -4px 0 6px; }
.rola .rot-dzis { color: var(--text); }
/* == T-0004b (wariant C „kafelki rozmów”): mozaika ról z filtrem grup; klik = kafel rośnie do rozmowy z kolumną Sesja, ← / Esc wraca ==
 * Pytanie: co teraz robi każda rola i gdzie jestem potrzebny? Dane: /api/rozmowy (2 ostatnie linie, kontekst, ↻, kopie). Akcja: filtr, klik, prawy klik = menu roli. */
.rozmowy.mozaika-v { grid-template-columns: minmax(0, 1fr); }
.rozmowy.duzy-v { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-rows: auto minmax(0, 1fr); }
.rozmowy.duzy-v > .kr-gora { grid-column: 1; }
.rozmowy.duzy-v > .col:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } /* plan i Sesja na całą wysokość, nagłówek tylko nad czatem */
.rozmowy.duzy-v .pl-lista { max-height: 34vh; overflow-y: auto; scrollbar-width: thin; } /* długi plan przewija się w sobie, kolumna Sesja bez przewijania (T157) */
.rozmowy.duzy-v.maleje { pointer-events: none; }
@media (max-width: 1280px) { .rozmowy.duzy-v { grid-template-columns: minmax(0, 1fr); } .rozmowy.duzy-v > .col:nth-child(3) { grid-column: auto; grid-row: auto; } }
.mozaika-v .role-panel { gap: 10px; }
.mozaika-v .role-siatka { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 168px; gap: 10px; }
.kr-filtry { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kr-filtry button { font: 700 12px var(--f-head); letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid var(--line-hi); color: var(--dim); padding: 4px 11px; cursor: pointer; }
.kr-filtry button:hover { color: var(--text); }
.kr-filtry button[aria-pressed="true"] { color: var(--text); border-color: var(--brand, var(--live)); background: color-mix(in srgb, var(--brand, var(--live)) 12%, transparent); }
.kr-filtry button.you { color: var(--you); } .kr-filtry button.live { color: var(--live); }
.kr-filtry .rot-suma { margin: 0 0 0 auto; }
.rola.kr { aspect-ratio: auto; height: 100%; grid-template-columns: 4px minmax(0, 1fr); cursor: pointer; transition: transform .15s, border-color .15s; }
.rola.kr::before { display: none; }
.rola.kr:hover, .rola.kr:focus-visible { transform: translateY(-2px); --edge: var(--line-hi); border-color: var(--text); }
.rola.kr.live { border-color: var(--live); } .rola.kr.you { border-color: var(--you); } .rola.kr.stop { border-color: var(--alert); }
.kr-tresc { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px; min-width: 0; min-height: 0; }
.kr-gl { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.kr-nz { display: grid; gap: 3px; min-width: 0; flex: 1; }
.rola.kr .n, .kr-id .n { font: 700 15px var(--f-head); letter-spacing: .05em; -webkit-line-clamp: 1; }
.rola.kr .lg-id, .kr-id .lg-id { padding-right: 0; font-size: 10px; justify-content: flex-start; }
.rola.kr .tags { max-height: 62px; align-items: flex-end; }
.rola.kr .tags .tag { font-size: 10px; line-height: 15px; }
.kr-ost { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; font-size: 12.5px; color: var(--dim); min-height: 0; }
.kr-ost p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-ost p.nz { font: 11.5px var(--f-mono); } .kr-ost p.nz b { color: var(--text); font-weight: 600; }
.kr-ost p.wl { color: var(--you); }
.kr-st { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 10.5px; color: var(--dim); }
.kr-ctx { height: 4px; background: var(--line); position: relative; } .kr-ctx i { position: absolute; inset: 0 auto 0 0; background: var(--live); opacity: .8; }
.kr-ctx.warn i { background: var(--warn); }
.rola.kr.w-prod .kr-ost p { white-space: normal; }
/* powiększona rozmowa: nagłówek z legitymacją roli i powrotem do kafli; okno przycięcia rośnie z kafla (rozmowy.js, Web Animations) */
.kr-glowka { display: flex; align-items: center; gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
.kr-glowka.live { border-color: var(--live); }
.kr-glowka .meta { margin-left: auto; font-size: 11px; }
.rola.kr-id { aspect-ratio: auto; display: inline-flex; align-items: center; gap: 10px; padding-right: 12px; min-width: 220px; cursor: context-menu; grid-template-columns: none; }
.rola.kr-id::before { display: none; }
.rola.kr-id .lg-pas { align-self: stretch; width: 4px; }
.rola.kr-id .lg-foto { width: 44px; height: 44px; overflow: hidden; } .rola.kr-id .zn { width: 42px; height: 42px; }
.kr-glowka .tags { display: flex; gap: 6px; }
.rozmowy.duzy-v.rosnie > .col { animation: kr-wejdz .32s ease-out both; }
@keyframes kr-wejdz { from { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rola.kr { transition: none; } .rozmowy.duzy-v.rosnie > .col { animation: none; } }
html[data-tryb="spokojny"] .rola.kr { transition: none; }
@media (max-width: 760px) { .mozaika-v .role-siatka { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 150px; } .kr-glowka .meta { margin-left: 0; } }
/* == T-0042 (wariant A „zakładki kopii”): zakładki kopii nad czatem z % kroku, karta wyniku z „cofnij”, zamki kopii w planie, okno uruchamiania ==
 * Pytanie: co robi każda kopia i co oddała? Dane: /api/rozmowy/:rola.kopie, plan_kroki.kopia. Akcja: zakładka = rozmowa kopii, zatrzymaj / wznów / odwołaj / cofnij (2FA). */
.kopie-zakl { display: flex; gap: 4px; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid var(--line-hi); padding-bottom: 6px; }
.kz { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-bottom-width: 2px; color: var(--dim); padding: 4px 10px;
  font: 700 12px var(--f-head); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.kz:hover { color: var(--text); }
.kz[aria-selected="true"] { color: var(--text); border-color: var(--line-hi); border-bottom-color: var(--live); background: var(--panel-2); }
.kz.glowny[aria-selected="true"] { border-bottom-color: var(--brand, var(--live)); }
.kz-zn { color: var(--live); } .kz-pr { font-size: 11px; color: var(--live); }
.kz.wstrzymana .kz-pr { color: var(--dim); } .kz.blad .kz-pr, .kz.blad .kz-zn { color: var(--alert); }
.kz.gasnie { animation: kz-gasnie 1.5s ease-in forwards; cursor: default; }
@keyframes kz-gasnie { 30% { opacity: 1; border-color: var(--ok); } to { opacity: 0; transform: scaleX(.6); } }
.kz-dod { margin-left: auto; }
.kz-ster { display: inline-flex; gap: 6px; margin-left: 8px; }
.kopia-p > header .meta { margin-left: 12px; }
.czat .m.kopia { color: var(--dim); font-size: 12.5px; }
.czat .m.kopia.wynik .txt { border-left: 2px solid var(--live); padding-left: 8px; color: var(--text); }
.czat .m.kopia.wynik b { color: var(--live); letter-spacing: .04em; }
.czat .m.kopia.wynik.cof .txt { border-left-color: var(--line-hi); color: var(--dim); text-decoration: line-through; }
.czat .m.kopia.wynik.cof .tag { text-decoration: none; }
.kz-git { font-size: 11px; margin-top: 2px; }
.kz-wynik summary { cursor: pointer; font-size: 11px; }
.pl-k.kopia { color: var(--text); border-left-color: var(--live); border-left-style: dashed; }
.pl-zam { float: right; font-size: 10.5px; color: var(--live); margin-left: 6px; }
.pl-k .pl-bar.kopia { margin: 2px 0 1px; height: 3px; }
.kopie-okno { min-width: min(560px, calc(100vw - 48px)); }
.kz-rz { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
.kz-przyd { display: flex; flex-direction: column; gap: 3px; font-size: 12px; } .kz-przyd b { color: var(--live); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .kz.gasnie { animation: none; opacity: .4; } }
html[data-tryb="spokojny"] .kz.gasnie { animation: none; opacity: .4; }
/* == T-0007 (Mózg: edycja pliku z karty węzła, wariant A; podsesja mozg) == */
.mz-edycja .mz-pre { max-height: 50vh; }
.mz-edytor { width: 100%; min-height: 50vh; resize: vertical; font-size: 12.5px; line-height: 1.5; background: var(--panel-2); color: var(--text); border: 1px solid var(--line-hi); padding: 8px; }
.mz-diff { max-height: 55vh; overflow: auto; font-size: 12px; line-height: 1.45; background: var(--panel-2); border: 1px solid var(--line); padding: 8px; white-space: pre-wrap; }
.mz-diff .ok { color: var(--ok); } .mz-diff .alert { color: var(--alert); } .mz-diff .dim { color: var(--dim); }
.mz-edycja .mz-hist .warn { color: var(--warn); } .mz-edycja .mz-hist .live { color: var(--live); } .mz-edycja .mz-hist .alert { color: var(--alert); }

/* == T-0001 (wariant A „Szuflada”, wybór właściciela 17.10): karta węzła jako kolumna obok sceny Mózgu == */
/* Pytanie: co to za węzeł, bez zasłaniania sceny? Dane: karta węzła. Akcje: ✕ zamyka (kolumna się zwija), Spokojny / reduced-motion bez przejścia. */
.mz-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 0px; grid-template-rows: auto; gap: 0; min-width: 0; transition: grid-template-columns .28s ease-out, gap .28s ease-out; }
.mz-wiersz.z-karta { grid-template-columns: minmax(0, 1fr) 380px; gap: 10px; }
html:not([data-tryb="night"]) .mz-wiersz { transition: none; }
@media (prefers-reduced-motion: reduce) { .mz-wiersz { transition: none; } }
.mz-wiersz > .mz-karta { contain: size; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; min-width: 0; padding: 0; --cut: 16px; --fill: var(--panel-2);
  --edge: color-mix(in srgb, var(--area) 55%, var(--line)); border-left: 3px solid var(--area); }
.mz-wiersz > .mz-karta > header { align-items: center; padding: 12px 14px 10px; margin: 0 0 8px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--area) 18%, transparent), transparent 70%); }
.mz-wiersz > .mz-karta > .mz-tresc { padding: 0 14px 12px; }
.mz-naglowek { flex: 1; min-width: 0; }
.mz-kod { font-size: 10px; letter-spacing: .14em; color: var(--dim); }
.mz-karta .tags { flex-wrap: wrap; } .mz-karta .tags .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.mz-wiersz:fullscreen { height: 100vh; grid-template-rows: minmax(0, 1fr); background: var(--bg); }
.mz-wiersz:fullscreen > .mz-scena { height: 100% !important; }
/* dymek: ścięty chip z turkusowym grzbietem i linią do węzła */
.mz-dymek { --cut: 8px; border-left: 2px solid var(--live); }
.mz-dymek-linia { position: absolute; z-index: 4; height: 1px; background: var(--live); opacity: .6; transform-origin: 0 0; pointer-events: none; }
/* 1280×800 (i niższe okna PC): tryby 44 px, filtry w jednym przewijanym wierszu z maską na końcu */
@media (min-width: 761px) and (max-height: 900px) {
  .mz-tryb { min-height: 44px; padding: 4px 20px; gap: 0; }
  .mz-tryb b { font-size: 17px; } .mz-tryb small { font-size: 10px; }
}
.mz-chipy.jeden .row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, var(--bg) 92%, transparent); padding-right: 40px; }
.mz-chipy.jeden .row::-webkit-scrollbar { display: none; }
.mz-chipy.jeden .mz-chip { flex: none; }
@media (max-width: 760px) { .mz-wiersz { display: block; } }
/* == T-0055 zakładka Właściciel (układ A „Dwie kolumny”, wybór właściciela 16.10): pas fluency, dziennik ↔ refleksja, okna dyskusji == */
/* podpis „Właściciel” to najdłuższy w szynie: ciaśniej, żeby zmieścił się w komórce 48 px (bez zmiany innych ikon) */
.rail a[href$="#wlasciciel"] { letter-spacing: .01em; font-size: 9px; }
.wl-tytul .wl-glif { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 176, 31, .35)); }
.wl-agent { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.wl-agent .kropka { width: 8px; height: 8px; background: var(--live); box-shadow: 0 0 8px var(--live); flex: none; }
.wl-agent .kropka.off { background: var(--dim); box-shadow: none; }
html[data-tryb="night"] .wl-agent .kropka:not(.off) { animation: wl-puls 2s ease-in-out infinite; }
@keyframes wl-puls { 50% { opacity: .35; } }
.wl { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.wl-pas { display: grid; grid-template-columns: auto minmax(0, 1fr) 240px; gap: 18px; align-items: center; padding: 10px 16px; }
.wl-wynik { display: flex; align-items: center; gap: 10px; }
.wl-wynik .v { font: 700 44px/1 var(--f-head); color: var(--live); text-shadow: 0 0 12px rgba(47, 243, 200, .35); font-variant-numeric: tabular-nums; }
.wl-wynik .z { font: 11px/1.35 var(--f-mono); color: var(--dim); }
.wl-osie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wl-os { border: 1px solid var(--line); padding: 6px 8px; display: grid; gap: 3px; min-width: 0; }
.wl-os .n { font: 600 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.wl-os .v { font: 700 22px/1 var(--f-head); font-variant-numeric: tabular-nums; }
.wl-os .d { font: 11px var(--f-mono); }
.wl-pasek { height: 4px; background: var(--line); display: block; }
.wl-pasek i { display: block; height: 100%; background: var(--live); }
.wl-tr { display: grid; gap: 2px; }
.wl-st { font: 700 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.wl-trend { width: 100%; height: 44px; display: block; }
.wl-kol { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; }
.wl-panel { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
.wl-panel > header { margin-bottom: 6px; }
.wl-panel > header .meta { margin-left: 0; }
.wl-filtry { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.wl-f[aria-pressed="true"] { --edge: var(--live); color: var(--live); }
.wl-przew { overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; overscroll-behavior: contain; }
.wl-dzien { position: sticky; top: 0; z-index: 1; background: var(--panel-2); padding: 3px 10px; font: 700 11px var(--f-head); letter-spacing: .14em; color: var(--dim); border-bottom: 1px solid var(--line); text-transform: uppercase; }
.wl-wpis { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 2px solid transparent; }
.wl-wpis:hover, .wl-wpis:focus-visible { background: rgba(47, 243, 200, .05); outline: none; }
.wl-wpis.wyb { background: rgba(47, 243, 200, .05); border-left-color: var(--live); }
.wl-wpis .godz { font-size: 11px; color: var(--dim); }
.wl-wpis .co { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.wl-wpis .co b { font-weight: 600; }
.wl-wpis .akcje { display: flex; gap: 4px; align-items: start; }
.wl-wpis .meta { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; }
.wl-chip { font: 11px var(--f-mono); color: var(--dim); border: 1px solid var(--line); padding: 0 6px; white-space: nowrap; }
.wl-laduje, .wl-pusto { padding: 12px; text-align: center; font-size: 12px; color: var(--dim); }
.wl-oc { font: 700 11px var(--f-mono); padding: 0 6px; letter-spacing: .04em; white-space: nowrap; }
.wl-oc.swietna { color: var(--bg); background: var(--ok); }
.wl-oc.dobra { color: var(--ok); border: 1px solid var(--ok); }
.wl-oc.poprawa { color: var(--warn); border: 1px solid var(--warn); }
.wl-oc.zla { color: var(--text); background: var(--alert); }
.wl-oc.brak { color: var(--dim); border: 1px dashed var(--line-hi); }
.wl-ocena { padding: 10px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; border-left: 2px solid transparent; }
.wl-ocena.wyb { background: rgba(47, 243, 200, .05); border-left-color: var(--live); }
.wl-ocena .gora { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-ocena .gora .dec { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wl-ocena p { margin: 0; max-width: 75ch; }
.wl-ocena .dol { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wl-alt, .wl-sprz { border-left: 2px solid var(--warn); padding-left: 8px; }
.wl-sprz { border-left-color: var(--line-hi); color: var(--dim); }
.wl-alt b, .wl-sprz b { font: 700 11px var(--f-head); letter-spacing: .12em; color: var(--warn); text-transform: uppercase; margin-right: 6px; }
.wl-sprz b { color: var(--dim); }
.wl-zm { font-size: 11px; color: var(--live); }
.wl-hist { display: grid; gap: 4px; } .wl-hist:empty { display: none; }
.wl-wer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; border-left: 2px solid var(--line-hi); padding-left: 8px; }
.wl-pole { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-hi); color: var(--text); padding: 4px 8px; font: 13px var(--f-text); resize: vertical; }
.wl-pole:focus { border-color: var(--live); }
/* okno dyskusji: kilka naraz (z-index rośnie przy kliknięciu), przeciągane za nagłówek, zwijane do paska */
.plywak.wl-okno { left: auto; top: 90px; transform: none; width: min(520px, calc(100vw - 32px)); height: min(560px, 70vh); --edge: var(--line-hi); }
.wl-okno .plyw-nag { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.wl-okno .plyw-nag h2 { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.wl-okno .plyw-cialo { flex: 1; display: flex; flex-direction: column; }
.wl-okno.zwiniete { height: auto; }
.wl-okno.zwiniete > .plyw-cialo, .wl-okno.zwiniete > .wl-czat-dol { display: none; }
.wl-czat { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; scrollbar-width: thin; }
.wl-msg { border-left: 2px solid var(--line-hi); padding: 4px 8px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wl-msg.wlasciciel { border-left-color: var(--text); background: rgba(216, 225, 234, .04); }
.wl-msg.agent { border-left-color: var(--live); }
.wl-msg.system { border-left-color: var(--line); color: var(--dim); font-size: 12px; }
.wl-czat-dol { display: grid; gap: 6px; margin-top: 8px; }
@media (min-width: 761px) {
  #app:has(.wl) { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  main:has(.wl) { min-height: 0; overflow: hidden; padding-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
  .wl { flex: 1; min-height: 0; }
}
@media (max-width: 1100px) { .wl-pas { grid-template-columns: auto minmax(0, 1fr); } .wl-tr { display: none; } }
/* telefon: tylko odczyt; strona się przewija, listy mają własną wysokość */
@media (max-width: 760px) {
  .wl-pas, .wl-kol { grid-template-columns: 1fr; }
  .wl-osie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-przew { max-height: 60vh; }
  .wl-ster { display: none !important; }
  .plywak.wl-okno { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .wl-agent .kropka { animation: none !important; } }
/* == T-0055 propozycje 2–8 (wybór właściciela 17.10): pas wskaźników, koszt przy wpisie, widoki analiz, list tygodnia, odznaki, „Dlaczego?” == */
.wl-wsk { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 2fr); gap: 8px; }
.wl-kafel { all: unset; box-sizing: border-box; border: 1px solid var(--line); padding: 5px 8px; display: grid; gap: 1px; min-width: 0; cursor: pointer; border-left: 2px solid var(--line-hi); }
.wl-kafel:hover, .wl-kafel:focus-visible, .wl-kafel[aria-pressed="true"] { border-left-color: var(--live); background: rgba(47, 243, 200, .05); }
.wl-kafel .n { font: 600 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); display: flex; gap: 6px; align-items: center; }
.wl-kafel .v { font: 700 18px/1.1 var(--f-head); font-variant-numeric: tabular-nums; }
.wl-kafel .p { font: 11px var(--f-mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-kafel.warn .v { color: var(--warn); }
.wl-kafel.nowy .v { color: var(--live); }
.wl-kafel.wl-odz { cursor: default; }
.wl-kafel.wl-odz:hover { background: none; border-left-color: var(--line-hi); }
.wl-odz.off { display: flex; gap: 8px; align-items: center; }
.wl-odz-l { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-odznaka { font: 11px var(--f-mono); color: var(--dim); border: 1px dashed var(--line-hi); padding: 1px 6px; white-space: nowrap; }
.wl-odznaka b { color: var(--text); }
.wl-odznaka i { font-style: normal; color: var(--dim); }
.wl-odznaka.zdob { color: var(--live); border: 1px solid var(--live); box-shadow: 0 0 6px rgba(47, 243, 200, .25); }
.wl-x { all: unset; cursor: pointer; margin-left: auto; color: var(--dim); font-size: 11px; padding: 0 4px; }
.wl-x:hover, .wl-x:focus-visible { color: var(--alert); }
.wl-chip.wl-koszt { color: var(--warn); border-color: var(--warn); }
.wl-f-od { margin-left: 10px; }
.wl-an-nag { padding: 6px 12px; font-size: 11px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-an { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); align-items: start; }
.wl-an .v { color: var(--warn); font-weight: 700; text-align: right; }
.wl-an .co { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.wl-an .akcje { display: flex; gap: 4px; align-items: center; }
.wl-an.otw { border-left: 2px solid var(--you); }
.wl-an-pod { display: block; font-size: 11px; margin-top: 2px; }
.wl-an-sek { padding: 8px 12px 2px; }
.wl-rola { display: grid; grid-template-columns: 140px minmax(0, 1fr) 260px; gap: 10px; align-items: center; padding: 3px 12px; font-size: 12px; }
.wl-rola .wl-pasek i { background: var(--warn); }
.wl-wz.ukryty { opacity: .55; }
.wl-dlaczego { border-left: 2px solid var(--live); padding-left: 8px; display: grid; gap: 4px; font-size: 13px; }
.wl-dlaczego b { font: 700 11px var(--f-head); letter-spacing: .12em; color: var(--live); text-transform: uppercase; margin-right: 6px; }
.wl-dlaczego .odp { white-space: pre-wrap; }
.wl-list { padding: 10px 12px; display: grid; gap: 10px; }
.wl-list .gora { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-list .gora .dec { font-weight: 600; }
.wl-list .gora .prawo { margin-left: auto; display: flex; gap: 4px; }
.wl-liczby { font-size: 11px; color: var(--live); border: 1px solid var(--line); padding: 4px 8px; }
.wl-pods { margin: 0; max-width: 90ch; white-space: pre-wrap; }
.wl-list-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wl-list-kol ol { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.wl-st.ok { color: var(--ok); } .wl-st.warn { color: var(--warn); }
.wl-rlink { all: unset; cursor: pointer; font: 11px var(--f-mono); color: var(--live); border: 1px solid var(--line); padding: 0 6px; }
.wl-list .dol { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
button.wl-oc { all: unset; cursor: pointer; font: 700 11px var(--f-mono); padding: 0 6px; }
@media (max-width: 1100px) { .wl-wsk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wl-wsk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wl-list-kol { grid-template-columns: 1fr; } .wl-rola { grid-template-columns: 90px minmax(0, 1fr); } .wl-rola > :last-child { grid-column: 1 / -1; } }

/* T-0059 + T-0063 (wariant B „Hyprland”, docs/projekty/T-0059/B.html i T-0063/B.html; wybór właściciela 18.10): #rozmowy/<rola> = kafle rozmów.
 * Pasek (waybar) na całą szerokość, pod nim kafle z przerwami 12 px i wspólna kolumna planu i sesji panelu z fokusem (330 px). Zaokrąglenia zamiast ściętych rogów.
 * Ramka gradientowa tylko na panelu z fokusem; animacja wejścia kafla, okna planu i podmiany kolumny tylko w Night City (Spokojny / reduced-motion: bez ruchu). */
.rozmowy.hypr { --gap: 12px; --r: 12px; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 330px); grid-template-rows: auto minmax(0, 1fr); }
.rozmowy.duzy-v.hypr > .kr-gora { grid-column: 1 / -1; grid-row: 1; }
.rozmowy.duzy-v.hypr > .wm { grid-column: 1; grid-row: 2; display: flex; min-width: 0; min-height: 0; gap: 0; }
.rozmowy.duzy-v.hypr > .hy-kol { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; padding-right: 0; }
.rozmowy.duzy-v.hypr > .wm > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
.rozmowy.hypr .cp { clip-path: none; border-radius: var(--r); border: 1px solid var(--edge); background: var(--fill); }
.rozmowy.hypr .cp::before, .rozmowy.hypr .cp::after { display: none; }
.rozmowy.hypr .btn.cp { border-radius: 8px; }
/* pasek: ← kafelki, legitymacja roli z fokusem, kropki paneli, liczniki, akcje układu, skróty */
.rozmowy.hypr .waybar { flex-wrap: nowrap; gap: 12px; padding: 5px 12px; min-width: 0; }
.waybar .rola.kr-id { min-width: 0; flex: 0 1 auto; gap: 8px; padding: 0 10px 0 0; } .waybar .rola.kr-id .lg-foto { width: 32px; height: 32px; } .waybar .rola.kr-id .zn { width: 30px; height: 30px; }
.waybar .rola.kr-id .kr-nz { min-width: 0; } .waybar .rola.kr-id .lg-id { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsd { display: flex; gap: 7px; align-items: center; }
.wsd button { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; background: var(--line-hi); cursor: pointer; transition: width .2s; }
.wsd button.live { background: var(--live); } .wsd button.you { background: var(--you); }
.wsd button.on { width: 28px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-hi, var(--live)), var(--a-devhub)); }
.wsd button.on.you { box-shadow: 0 0 0 2px var(--you); }
.wb-cnt { font-size: 11px; white-space: nowrap; margin-left: auto; } .wb-cnt b { font-weight: 400; color: var(--text); } .wb-cnt b.live { color: var(--live); } .wb-cnt b.you { color: var(--you); }
.wb-ak { display: flex; gap: 6px; align-items: center; flex: none; }
.hy-hint { font-size: 11px; white-space: nowrap; }
@media (max-width: 1700px) { .hy-hint { display: none; } }
/* kafle (drzewo podziałów): przerwa = uchwyt proporcji */
.wm-s { display: flex; min-width: 0; min-height: 0; } .wm-s.h { flex-direction: row; } .wm-s.v { flex-direction: column; }
.wm-gap { flex: 0 0 var(--gap); position: relative; cursor: col-resize; touch-action: none; } .wm-s.v > .wm-gap { cursor: row-resize; }
.wm-gap:focus-visible { outline: none; }
.wm-gap:hover::after, .wm-gap:focus-visible::after, .wm-s.ciagnie > .wm-gap::after { content: ''; position: absolute; inset: 35% 4px; border-radius: 3px; background: var(--brand, var(--line-hi)); }
.wm-s.v > .wm-gap:hover::after, .wm-s.v > .wm-gap:focus-visible::after, .wm-s.v.ciagnie > .wm-gap::after { inset: 4px 35%; }
.wm-s.ciagnie { user-select: none; }
.win { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--r); border: 2px solid var(--line); background: var(--panel); opacity: .88; }
.win.focus { opacity: 1; border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, var(--brand-hi, var(--live)), var(--a-devhub)) border-box;
  box-shadow: 0 18px 50px -14px var(--brand-glow, transparent); }
.rozmowy.hypr .win > .panel { border: 0; border-radius: 0; background: none; padding: 8px 12px 10px; }
.rozmowy.hypr .win > .panel:not(.you) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rozmowy.hypr .win > .panel.you { flex: none; max-height: 38%; overflow-y: auto; border-bottom: 1px solid var(--you); }
.rozmowy.hypr .win > .panel > header { margin-bottom: 6px; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.rozmowy.hypr .win > .panel > header::before { display: none; }
.rozmowy.hypr .win > .panel > header h2 { font-size: 15px; white-space: nowrap; }
.rozmowy.hypr .win > .panel > header .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.win .ikony { flex: none; }
.win .czat { flex: 1 1 auto; min-height: 40px; max-height: none; }
.win .szuf { flex: none; max-height: 40%; }
.win .pisz { flex: none; margin-top: 6px; display: grid; gap: 4px; } .win .pisz textarea { min-height: 0; height: 48px; resize: none; } .win .pisz .row { margin: 0; justify-content: space-between; }
.win-ster { display: flex; gap: 4px; flex: none; } .win-nag .win-ster { margin-left: 4px; }
.win-nag .chipy-p ~ .ikony { margin-left: 8px; } /* T-0072: panel z fokusem = ten sam nagłówek + pasek ikon za znaczkiem ctx */
.hy-av { flex: none; width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; font: 700 12px/1 var(--f-head); letter-spacing: .04em; color: var(--bg); background: var(--obszar, var(--a-kod)); }
.chipy-p { display: flex; gap: 6px; align-items: center; margin-left: auto; min-width: 0; overflow: hidden; }
.pill { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-hi); font-size: 11px; white-space: nowrap; color: var(--dim); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.chipy-p .tag { border-radius: 999px; }
@media (max-width: 1280px) { .win .czat .m { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.wm-s .wm-s .win .czat .m, .wm-s.h .win .czat .m { grid-template-columns: 52px minmax(0, 1fr); gap: 6px; } /* wąskie kafle: krótsza kolumna godziny */
/* okno wyboru roli w nowym kaflu (jak wofi) */
.wyb { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 0; }
.wyb-h { font-size: 11px; }
.wyb-q { border-radius: 10px; background: var(--bg); border: 1px solid var(--brand, var(--live)); padding: 8px 12px; color: var(--text); outline: none; }
.wyb-l { display: grid; gap: 2px; align-content: start; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.wyb-o { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; background: none; border: 0; color: var(--dim); text-align: left; cursor: pointer; font: 13px var(--f-text); }
.wyb-o:hover, .wyb-o.sel { background: var(--brand-tint, var(--panel-2)); color: var(--text); }
.wyb-o .e { margin-left: auto; font-size: 11px; }
/* kolumna po prawej: kto ma fokus, karta planu, karta sesji (tabela klucz / wartość) */
.hy-kol > * { flex: none; }
.hy-kol .who { text-align: center; font-size: 11px; } .hy-kol .who b { color: var(--text); font-weight: 400; }
.hy-kol > .panel { padding: 8px 12px 10px; }
.hy-kol > .panel > header { margin-bottom: 4px; } .hy-kol > .panel > header h2 { font-size: 14px; }
.pl-karta { font-size: 12.5px; min-width: 0; }
.pl-karta .pl-bar { margin: 2px 0 6px; }
.pk-kroki { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 6px; align-items: baseline; }
.pk-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-zamki { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .pk-zamki .pill { color: var(--live); border-color: var(--live); }
.pk-row { margin-top: 6px; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.pk-fazy { margin-left: auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-caly[aria-pressed="true"] { --edge: var(--brand, var(--live)); color: var(--brand-hi, var(--live)); }
.hy-kol > .sesja-kol { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.sesja-kol .kvt { display: flex; flex-direction: column; min-height: 0; margin-bottom: 8px; } .sesja-kol .kvt > * { flex: none; }
.kvw { border-top: 0; }
.kvw > summary { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font: 12px/1.25 var(--f-mono); }
.kvw > summary::before { display: none; }
.kvw .sek-t { font: 12px/1.25 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
.kvw .sek-t::after { content: ' ▾'; color: var(--line-hi); } .kvw[open] .sek-t { color: var(--brand-hi, var(--live)); }
.kvw .sek-m { margin: 0; font-size: 12px; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--text); }
.kvw .sek-m > span.dim { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kvw > .tr { margin: 4px 0 6px; padding: 8px 10px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--brand-tint, var(--panel-2)); overflow-y: auto; scrollbar-width: thin; }
.kvw .mini { flex: 1 1 40px; max-width: 90px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .kvw .mini i { display: block; height: 100%; background: var(--brand-hi, var(--live)); } .kvw .mini.warn i { background: var(--warn); }
.kvw .kf-wykres.spark { width: 80px; height: 14px; flex: none; margin-left: auto; }
.ster-k { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-hi); display: grid; gap: 6px; flex: none; }
.ster-t { display: flex; gap: 8px; align-items: center; } .ster-t .sek-t { font-size: 12px; }
.ster-k .rt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .ster-k .rt .rt-suwak { max-width: none; }
/* T-0073 (wariant C): model i effort roli w jednym żetonie; klik w część = karta wyboru nad żetonem */
.zt { position: relative; }
.zt-p { display: flex; align-items: stretch; border: 1px solid var(--line-hi); background: var(--panel-2); font: 12px var(--f-mono); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.zt-p button { background: none; border: 0; color: var(--text); font: inherit; padding: 5px 9px; cursor: pointer; display: flex; gap: 6px; align-items: center; min-width: 0; }
.zt-p button:hover, .zt-p button[aria-expanded="true"] { background: color-mix(in srgb, var(--live) 8%, transparent); color: var(--live); }
.zt-p .zt-m { flex: 1 1 auto; } .zt-p .zt-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.zt-p .zt-e { flex: none; border-left: 1px solid var(--line-hi); }
.zt-kr { display: inline-flex; gap: 2px; align-items: flex-end; height: 13px; } .zt-kr i { width: 3px; background: var(--line-hi); } .zt-kr i:nth-child(1) { height: 5px; } .zt-kr i:nth-child(2) { height: 7px; } .zt-kr i:nth-child(3) { height: 9px; } .zt-kr i:nth-child(4) { height: 11px; } .zt-kr i:nth-child(5) { height: 13px; } .zt-kr i.on { background: var(--live); }
.zt-karta { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 5; display: grid; gap: 4px; padding: 8px; background: var(--bg); border: 1px solid var(--live);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 70%, transparent); }
.zt-karta .sek-t { font-size: 11px; color: var(--dim); }
.zt-opc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .zt-opc.e { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zt-opc button { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font: 12px var(--f-mono); padding: 6px; cursor: pointer; text-align: left; display: grid; gap: 1px; min-width: 0; }
.zt-opc button small { color: var(--dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-opc button:hover { border-color: var(--line-hi); } .zt-opc button[aria-pressed="true"] { border-color: var(--live); color: var(--live); }
/* pływające okno „cały plan” */
.pl-okno { position: fixed; z-index: 60; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 100px); display: flex; flex-direction: column; border-radius: 14px; border: 2px solid transparent;
  background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(135deg, var(--brand-hi, var(--live)), var(--a-devhub)) border-box;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--bg) 85%, transparent); }
.pl-okno-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; cursor: move; touch-action: none; user-select: none; }
.pl-okno-h h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-okno-h .mono { font-size: 12px; }
.pl-okno-t { padding: 0 14px 14px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.pl-okno-t > .plan-k { border: 0; padding: 0; background: none; }
.pl-okno-t > .plan-k > header { display: none; } /* nagłówek ma okno */
.rozmowy.hypr .pl-okno .pl-lista { max-height: none; overflow: visible; }
@keyframes hy-pop { from { transform: scale(.82); opacity: 0; } }
@keyframes hy-kol { from { opacity: 0; transform: translateX(10px); } }
html[data-tryb="night"] .win.wchodzi, html[data-tryb="night"] .pl-okno.wchodzi { animation: hy-pop .35s cubic-bezier(.2, 1.2, .3, 1) both; }
html[data-tryb="night"] .hy-kol.zmiana > * { animation: hy-kol .22s ease-out both; }
html[data-tryb="night"] .win.focus { transition: box-shadow .25s; }
@media (prefers-reduced-motion: reduce) { .win.wchodzi, .pl-okno.wchodzi, .hy-kol.zmiana > * { animation: none !important; } .wsd button { transition: none; } }
html[data-tryb="spokojny"] .wsd button { transition: none; }
/* < 1280 px: kolumna pod kaflami (strona się przewija); telefon: jeden panel, tylko odczyt */
@media (max-width: 1280px) {
  .rozmowy.hypr { grid-template-columns: minmax(0, 1fr); }
  .rozmowy.duzy-v.hypr > .wm { grid-column: 1; grid-row: 2; height: 72vh; }
  .rozmowy.duzy-v.hypr > .hy-kol { grid-column: 1; grid-row: 3; overflow: visible; }
  .rozmowy.hypr .waybar { flex-wrap: wrap; }
}
@media (max-width: 760px) { .rozmowy.duzy-v.hypr > .wm { height: 70vh; } .waybar .rola.kr-id .lg-id { display: none; } }

/* == rozmowy == (sprint P-20261018-13: T-0079–T-0084, wariant A „Kafle”) */
/* stan roli z T-0085 (Kontrakt): pracuje = turkus, dalej = neutralny z godziną, czeka = bursztyn */
.stan-roli { flex: none; font: 600 10px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--r); white-space: nowrap; }
.stan-roli.live { color: var(--live); } .stan-roli.neutr { color: var(--dim); border-color: var(--line-hi); } .stan-roli.you { color: var(--you); background: var(--you-tint, transparent); }
/* T-0080: nagłówek okna w jednej linii: znaczek, nazwa, stan, kopie, ikony szuflad, ✕ */
.win-nag { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.win-nag h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win-nag .kopie-zakl { flex-wrap: nowrap; border: 0; padding: 0; gap: 4px; align-items: center; min-width: 0; overflow: hidden; }
.win-nag .kopie-zakl .kz { padding: 1px 6px; font-size: 11px; white-space: nowrap; }
.win-nag .kopie-zakl .kz-dod { margin: 0; padding: 1px 8px; font-size: 11px; white-space: nowrap; }
.win-nag .ikony { margin-left: auto; }
/* okna jak Hyprland: odstęp 10, ramka 2 */
.rozmowy.hypr { --gap: 10px; }
/* T-0081: okno bez fokusu wyraźnie świeci pod myszą, okno z fokusem się nie zmienia; Spokojny bez animacji */
.win:not(.focus):hover { opacity: 1; border-color: var(--brand-hi, var(--live)); background: var(--panel-2, var(--panel)); box-shadow: 0 0 0 1px var(--brand-hi, var(--live)), 0 0 18px var(--brand-glow, transparent); cursor: pointer; }
.win:not(.focus) { position: relative; }
.win:not(.focus):hover::after { content: 'kliknij, aby pisać'; position: absolute; right: 10px; bottom: 10px; font: 600 10px var(--f-mono); letter-spacing: .08em; color: var(--brand-hi, var(--live)); background: var(--panel-3, var(--panel)); border: 1px solid currentColor; padding: 2px 6px; pointer-events: none; }
html[data-tryb="night"] .win:not(.focus) { transition: border-color .15s, box-shadow .15s, background .15s, opacity .15s; }
html[data-tryb="spokojny"] .win, html[data-tryb="spokojny"] .win:hover { transition: none; animation: none; }
/* T-0079: log zwarty: separator dnia, godzina w jednej linii w wąskiej kolumnie (też w wąskich kaflach i na telefonie) */
.czat .m { grid-template-columns: 48px minmax(0, 1fr); }
.rozmowy.wa .wm .win .czat .m { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.czat .m > .godz { white-space: nowrap; }
.czat .dzien { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--dim); letter-spacing: .08em; margin: 2px 0; }
.czat .dzien::before, .czat .dzien::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kvw.stala > .sek-w { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font: 12px/1.25 var(--f-mono); }
.kvw.stala .sek-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvw.stala .sek-t::after { content: none; }
/* Wariant A: zawsze 3 kolumny: lista ról 250 px | okna (kafle) | Sesja okna z fokusem; bez waybara i pełnoekranowej mozaiki (kafle ról są w launcherze) */
.rozmowy.hypr.wa { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 300px); grid-template-rows: minmax(0, 1fr); }
.rozmowy.duzy-v.hypr.wa > .wa-kol { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
.rozmowy.duzy-v.hypr.wa > .wm { grid-column: 2; grid-row: 1; }
.rozmowy.duzy-v.hypr.wa > .hy-kol { grid-column: 3; grid-row: 1; }
.rozmowy.wa > .wa-tel { display: none; }
.rozmowy.wa > .wa-pusto { align-items: center; justify-content: center; border: 2px dashed var(--line); border-radius: var(--r); }
.rozmowy.wa > .wa-pusto .empty { max-width: 46ch; text-align: center; }
/* lista ról: wiersze w grupach (Czeka na Ciebie, Pracuje, własne, Reszta), „+ Okno” na górze */
.rozmowy.hypr .wa-lista { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding: 8px; }
.wa-nowe { flex: none; justify-content: space-between; margin-bottom: 2px; border-color: var(--brand, var(--live)); background: var(--brand-tint, var(--panel-2)); }
.wa-nowe kbd { font-size: 10px; letter-spacing: 0; text-transform: none; }
.wa-gt { flex: none; display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 6px 4px 1px; }
.wa-gt.you { color: var(--you); } .wa-gt.live { color: var(--live); }
.wa-w { flex: none; display: flex; gap: 9px; align-items: center; padding: 3px 6px; min-height: 40px; min-width: 0; border: 1px solid transparent; border-radius: 8px; color: var(--text); text-decoration: none; }
.wa-w:hover { border-color: var(--line-hi); background: var(--panel-2); }
.wa-w.otw { border-color: var(--line-hi); background: var(--brand-tint, var(--panel-2)); }
.wa-w.akt { border-color: var(--brand, var(--live)); }
.wa-av { position: relative; flex: none; display: inline-grid; }
.wa-av .hy-av { width: 28px; height: 28px; }
.wa-av i { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--panel); background: var(--line-hi); }
.wa-av i.live { background: var(--live); } .wa-av i.you { background: var(--you); }
html[data-tryb="night"] .wa-av i.live { animation: wa-oddech 1.8s infinite; }
@keyframes wa-oddech { 50% { opacity: .35; } }
.wa-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.wa-t b { font: 600 13px var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-t small { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stan-roli.alert { color: var(--alert); }
.wa-w .stan-roli.you, .wa-w.you .wa-t b { color: var(--you); }
/* launcher „Nowe okno” (T-0082): nakładka z wyszukiwarką i siatką kafli ról */
.wa-nakl { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 3vh 3vw; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); }
.wa-launcher { width: min(1500px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); border: 2px solid var(--brand, var(--live)); border-radius: 12px; min-height: 0; }
.wa-szuk { display: flex; gap: 10px; align-items: center; flex: none; }
.wa-szuk h3 { margin: 0; font: 700 15px var(--f-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.wa-szuk input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px; background: var(--panel-2); border: 1px solid var(--line-hi); border-radius: 8px; color: var(--text); }
.wa-launcher .role-panel { min-height: 0; overflow-y: auto; scrollbar-width: thin; border: 0; padding: 0; background: none; display: flex; flex-direction: column; gap: 8px; }
.wa-launcher .role-siatka { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 132px; gap: 8px; }
.wa-launcher .rola.kr.otw { outline: 1px solid var(--brand, var(--live)); outline-offset: -1px; }
.wa-launcher .rola.kr[hidden], .wa-launcher .role-grupa[hidden] { display: none; }
@media (max-width: 1280px) {
  .rozmowy.hypr.wa { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); grid-template-rows: 72vh auto; }
  .rozmowy.duzy-v.hypr.wa > .wa-kol { grid-row: 1 / span 2; }
  .rozmowy.duzy-v.hypr.wa > .hy-kol { grid-column: 2; grid-row: 2; }
}
/* telefon (P-20261018-7): pasek awatarów ról nad jednym oknem; bez okna sama lista; tylko odczyt */
@media (max-width: 760px) {
  .rozmowy.hypr.wa { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rozmowy.duzy-v.hypr.wa > .wa-kol, .rozmowy.duzy-v.hypr.wa > .wa-tel, .rozmowy.duzy-v.hypr.wa > .wm, .rozmowy.duzy-v.hypr.wa > .hy-kol { grid-column: 1; grid-row: auto; }
  .rozmowy.duzy-v.hypr.wa > .wm { height: 70vh; }
  .rozmowy.hypr.wa:not(.bez-okien) > .wa-kol { display: none; }
  .rozmowy.hypr.wa.bez-okien > .wm, .rozmowy.hypr.wa.bez-okien > .hy-kol, .wa-nowe { display: none; }
  /* bez okna (decyzja właściciela 18.10, T-0083): strona na jeden ekran, przewija się tylko box listy ról */
  #app:has(.rozmowy.bez-okien) { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  main:has(.rozmowy.bez-okien) { min-height: 0; overflow: hidden; padding-bottom: 12px; }
  .rozmowy.hypr.wa.bez-okien { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .rozmowy.hypr.wa.bez-okien > .wa-kol { flex: 1; min-height: 0; }
  .czat .m.agent { grid-template-columns: 44px minmax(0, 1fr); } .czat .m.agent > .txt { display: block; } /* reguła Pulpitu .agent > :last-child chowała tekst agenta */
  .rozmowy.wa > .wa-tel { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .wa-tel a { flex: none; display: flex; gap: 6px; align-items: center; padding: 4px 8px 4px 4px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--panel-2); color: var(--text); text-decoration: none; font: 600 12px var(--f-head); letter-spacing: .06em; text-transform: uppercase; }
  .wa-tel a.akt { border-color: var(--brand, var(--live)); background: var(--brand-tint, var(--panel-2)); }
  .wa-tel a.you { border-color: var(--you); }
  .wa-tel .hy-av { width: 22px; height: 22px; font-size: 10px; }
}
/* T-0079: szuflada (Tury, Narzędzia, Zmiany, Więcej) to okienko pod ikoną nad czatem; czat zostaje na miejscu i się nie przesuwa */
.wm .win { position: relative; }
.rozmowy.hypr .wm .win .szuf { position: absolute; z-index: 8; top: 44px; right: 8px; width: min(520px, 92%); max-height: 62%; margin: 0; overflow: auto; scrollbar-width: thin;
  border: 1px solid var(--brand, var(--live)); border-radius: 8px; background: var(--panel-2); box-shadow: 0 14px 40px rgba(0, 0, 0, .65); }
@media (max-width: 760px) { .rozmowy.hypr .wm .win .szuf { left: 0; right: 0; width: auto; max-height: 70%; border-width: 1px 0; border-radius: 0; } }
/* T-0082: kropka nad ikoną Rozmowy w szynie, gdy rola czeka na właściciela (app.js kropkaRozmow); puls tylko w Night City */
.rail a > .kropka { position: absolute; top: 4px; right: 4px; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--alert); box-shadow: 0 0 0 0 var(--alert); pointer-events: none; }
html[data-tryb="night"] .rail a > .kropka { animation: wa-puls 1.6s infinite; }
@keyframes wa-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--alert) 70%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rail a > .kropka, .wa-av i.live { animation: none !important; } }
/* T-0084: tekst agentów w czacie jak terminal: ## przed nagłówkiem, listy z ›, żetony ID i ścieżek, liczby i statusy w kolorach palety Korpo */
.czat .md .md-h { font: 700 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: none; color: var(--brand-hi, var(--live)); margin: 8px 0 4px; }
.czat .md .md-h::before { content: '## '; color: var(--dim); }
.czat .md .md-h strong { color: inherit; }
.czat .md ul { list-style: none; padding-left: 14px; }
.czat .md ul > li::before { content: '›'; color: var(--brand, var(--live)); margin-left: -12px; margin-right: 6px; }
.czat .md ol > li::marker { color: var(--brand, var(--live)); font-family: var(--f-mono); }
.md .chip { font: 600 11.5px var(--f-mono); padding: 0 5px; border: 1px solid var(--line-hi); background: var(--panel-2); border-radius: 3px; color: var(--text); cursor: pointer; white-space: nowrap; text-decoration: none; }
.md .chip:hover, .md .chip:focus-visible { border-color: var(--live); color: var(--live); }
.md .chip.id { color: var(--brand-hi, var(--live)); }
.md .chip.sc { color: color-mix(in srgb, var(--a-devhub) 60%, var(--text)); border-color: color-mix(in srgb, var(--a-devhub) 50%, transparent); white-space: normal; overflow-wrap: anywhere; }
.czat .m .md code.md-c { border-radius: 3px; }
.md .liczba { font: 700 12.5px var(--f-mono); color: var(--warn); font-variant-numeric: tabular-nums; }
.md .ok-s { color: var(--ok); font-weight: 600; }
.md .zle-s { color: var(--alert); font-weight: 600; }
.czat .md .md-kod { border-radius: 4px; }
.czat .md .md-kod-head { letter-spacing: .1em; text-transform: uppercase; }
/* == /rozmowy == */
/* == agenci == (sprint P-20261018-13: T-0085 stan roli w Rozmowach) */
/* == /agenci == */

/* == karta == (sprint P-20261018-15) */
/* == /karta == */

/* == haki == (sprint P-20261018-15) */
/* == /haki == */

/* == planista == (sprint P-20261018-15) */
/* T-0094 wariant B: ID zadania w żetonie „dalej T-xxxx HH:MM” jaśniejsze od reszty; „limit HH:MM” = .stan-roli.alert (czerwony kontur) */
.stan-roli .id { color: var(--text); }
/* == /planista == */

/* == narzedzia == (sprint P-20261018-15) */
/* == /narzedzia == */