/*
 * Wygląd renderera widoków (render.js) — klasy makiety v4.3.2 (wspolne/v4.css, wspolne/ekrany.css), zawężone do .view.
 * Wyłącznie tokeny z /design-system/tokens.css; kolory z modelu przychodzą jako zmienne --v-text, --v-icon,
 * --v-background, --v-border, --v-bar (var(--token)) oraz --ctx-color i --sdot-color. Komponenty card, badge, alert,
 * connection, btn i mono daje /design-system/components.css.
 */

/* ------------------------------------------------------------ układ ogólny */

.view .stack { display: flex; flex-direction: column; gap: var(--density-gap); min-width: 0; }
.view .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.view .team-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.view .team-title .mono { font-size: var(--font-size-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.view .colhead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--font-size-sm); }

/* Element: kolor tekstu, ikony, tła i obramowania z modelu (reguły, valueLabels, progi). */
.view .vel { color: var(--v-text, inherit); min-width: 0; }
.view .vel .icon { color: var(--v-icon, currentColor); }
.view .vel[data-token-background] { background: var(--v-background); }
.view .vel[data-token-border] { box-shadow: inset 0 0 0 var(--border-width) var(--v-border); border-radius: var(--radius-sm); }
.view .vel__value { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.view .vel__text--error { color: var(--color-feedback-error-fg); }
.view .vel__summary { font-size: var(--font-size-sm); }
.view .vel__list { display: grid; gap: var(--space-2); min-width: 0; }
.view .vel__groups { display: grid; gap: var(--space-2); }
.view .vel__group { display: grid; gap: var(--space-1); }
.view .vlabel { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.view [data-highlight] { outline: var(--border-width-strong) solid var(--v-border, var(--color-accent)); outline-offset: var(--border-width); }
/* Kursor wskazujący: akcje makiety otworzPodglad, filtr, przejdz (kf-uklad.js AKCJA_0113); otworzPodglad formatu 3 to openWindow (zad. 174, QA 098 N-1). */
.view [data-action~="openDetails"],
.view [data-action~="openWindow"],
.view [data-action~="navigate"],
.view [data-action~="filter"],
.view [data-action~="mute"] { cursor: pointer; }

/* Znacznik „po 1.79” (QM_102 A). */
.view .later {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) dashed var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-sunken);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------ kropka stanu i pasek */

.view .sdot {
    --sdot-color: var(--color-neutral-fg);
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--sdot-color);
}
/* Kształt kropki jak w makiecie v4.3.2 (wspolne/v4.css:33–36): obwódka — pusty środek, kolor w krawędzi; pierścień „w tle” —
   odsunięty od kropki kolorem tła powierzchni. Klasy kształtu stawia renderer (dotClass); legendę strony (kolumny.html,
   kolory w pages.css) dopasowują selektory po klasach stanu. */
.view .sdot--outline,
.legend .sdot.sdot--error-retry,
.legend .sdot.sdot--new,
.legend .sdot.sdot--paused-question { background: transparent; box-shadow: inset 0 0 0 var(--border-width-strong) var(--sdot-color); }
.view .sdot--ring,
.legend .sdot.sdot--active-bg,
.legend .sdot.sdot--idle-bg,
.legend .sdot.sdot--bg { box-shadow: 0 0 0 var(--border-width-strong) var(--color-bg-surface), 0 0 0 calc(var(--border-width-strong) * 2) var(--sdot-color); margin: var(--space-1); }
.view .sstate { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }

.view .ctxbar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--font-size-sm); }
.view .ctxbar__track {
    position: relative;
    flex: 1;
    min-width: 3rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-neutral-bg);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-border-subtle);
    overflow: hidden;
}
.view .ctxbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--ctx-color, var(--color-text-secondary)); }
.view .ctxbar__val { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--ctx-color, var(--color-text-primary)); white-space: nowrap; }
.view .ctx--0 { --ctx-color: var(--color-text-secondary); }

/* ------------------------------------------------------------ kolumna: wiersz sesji */

.view .srows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.view .srow {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--border-width) solid var(--v-border, var(--color-border-subtle));
    border-radius: var(--radius-md);
    background: var(--v-background, var(--color-bg-surface));
    min-width: 0;
    font-size: var(--font-size-sm);
}
.view .srow[aria-current="true"] { border-color: var(--color-accent); box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent); }
.view .srow[data-alert-tone="error"] { box-shadow: inset var(--border-width-strong) 0 0 var(--color-feedback-error-fg); }
.view .srow[data-alert-tone="warning"] { box-shadow: inset var(--border-width-strong) 0 0 var(--color-feedback-warning-fg); }
.view .srow__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); min-width: 0; }
.view .srow__name { font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-text-link); overflow-wrap: anywhere; }
.view .srow__name a { color: inherit; }
.view .srow__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-secondary); min-width: 0; }
.view .srow__now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view .srow .icon { width: 1rem; height: 1rem; flex: none; }
.view .srow__dead,
.view .srow__alerts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }

/* ------------------------------------------------------------ szczegóły sesji */

.view .detail .card__header { flex-wrap: wrap; }
.view .detail__sec { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border-subtle); }
.view .detail__sec:first-child { padding-top: 0; border-top: 0; }
.view .detail__sec h3 { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); }
.view .kv { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--font-size-sm); }
.view .kv dt { color: var(--color-text-secondary); }
.view .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.view .timeline,
.view .msgs { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.view .timeline > li,
.view .msgs > li { display: grid; gap: var(--space-1); min-width: 0; }
.view .msgs__meta { color: var(--color-text-secondary); }
.view .msgs__text { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-sunken); overflow-wrap: anywhere; }

/* Obiekt Rozmowa (zad. 152; makieta kf-rozmowa.css): element listy z conversation: true. Kolory wyłącznie tokenami DS; przewijanie listy — data-kf-scroll. */
.view .rz:where([data-rz-renderer]) {
    box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; overflow: hidden;
    padding: var(--space-2); gap: var(--space-2);
    border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--color-text-primary);
    font-family: var(--font-family-sans); line-height: var(--line-height-tight);
}
/* 154: tło / ramka / tekst z modelu — --v-* na .rz (render.js conversationNode); ramka z koloru grubsza jak makieta kf-rozmowa.css:22 */
.view .rz:where([data-rz-renderer])[data-rz-tlo] { background: var(--v-background); }
.view .rz:where([data-rz-renderer])[data-rz-ramka] { border-color: var(--v-border); border-width: 2px; }
.view .rz:where([data-rz-renderer])[data-rz-tekst], .view .rz:where([data-rz-renderer])[data-rz-tekst] .rz__pusto { color: var(--v-text); }
.view :where(.rz[data-rz-renderer]) .rz__title { display: flex; align-items: center; gap: var(--space-1); flex: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.view :where(.rz[data-rz-renderer]) .rz__pusto { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.view :where(.rz[data-rz-renderer]) .rz__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; flex: 1 1 auto; }
.view :where(.rz[data-rz-renderer]) .rz__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.view :where(.rz[data-rz-renderer]) .rz__item + .rz__item { border-top: 1px solid var(--color-border-default); padding-top: var(--space-2); }
.view :where(.rz[data-rz-renderer]) .rz__head { display: flex; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.view :where(.rz[data-rz-renderer]) .rz__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view :where(.rz[data-rz-renderer]) .rz__time { flex: none; font-variant-numeric: tabular-nums; }
.view :where(.rz[data-rz-renderer]) .rz__body { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.view :where(.rz[data-rz-renderer]) .rz__brak { font-style: italic; color: var(--color-text-secondary); }
.view :where(.rz[data-rz-renderer]) .rz__more > summary { cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.view :where(.rz[data-rz-renderer]) .rz__more[open] > summary { margin-bottom: var(--space-1); }
.view :where(.rz[data-rz-renderer]) .rz__more[open] ~ .rz__text, .view :where(.rz[data-rz-renderer]) .rz__body:has(> .rz__more[open]) > .rz__text { display: none; }
.view .rz:where([data-rz-renderer])[data-rz-format="dymki"] .rz__item + .rz__item { border-top: 0; padding-top: 0; }
.view .rz:where([data-rz-renderer])[data-rz-format="dymki"] .rz__item { max-width: 85%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: var(--color-bg-sunken); }
.view .rz:where([data-rz-renderer])[data-rz-format="dymki"] .rz__item[data-rz-strona="prawo"] { align-self: flex-end; background: var(--color-accent-subtle); }
.view .rz:where([data-rz-renderer])[data-rz-format="dymki"] .rz__item[data-rz-strona="lewo"] { align-self: flex-start; }
.view .limits { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.view .limits > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }

/* ------------------------------------------------------------ karta zespołu */

.view .team9 { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: poz; }
.view .team9 > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--color-border-subtle); counter-increment: poz; min-width: 0; }
.view .team9 > li:first-child { border-top: 0; padding-top: 0; }
.view .team9 > li::before { content: counter(poz); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--color-neutral-bg); color: var(--color-neutral-fg); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.view .team9__body { display: grid; gap: var(--space-2); min-width: 0; }
.view .team9__title { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.view .team9__value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

.view .counts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.view .counts > li { display: inline-flex; align-items: center; gap: var(--space-2); }
.view .vel__later { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.view [data-align="center"] { text-align: center; }
.view [data-align="end"] { text-align: end; }

/* ------------------------------------------------------------ alerty i dźwięk */

.view .pas__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.view .sound { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); border-radius: var(--radius-full); border: var(--border-width) solid currentColor; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.view .sound .icon { width: 0.875rem; height: 0.875rem; }
.view .sound--on { color: var(--color-feedback-error-fg); }
.view .sound--off { color: var(--color-text-secondary); border-style: dashed; }
.view .sound--blocked { color: var(--color-feedback-warning-fg); border-style: dashed; }

/* Wiersz listy alertów (zad. 024, zgłoszenie front-2 z 036): treść i przyciski zawijają się jak pas w makiecie (v4.css:152–153) —
   bez tego na 390 px przycisk „Wycisz…” zabierał szerokość, a treść łamała się po jednej literze. */
.view--alerts > .alert { flex-wrap: wrap; align-items: center; }
.view--alerts > .alert > .alert__body { min-width: min(100%, 14rem); }

/* Tytuł „sesja: reguła” w kolorze poziomu alertu, jak w makiecie v4.3.2 (alerty/index.html stan a4: tekst w .alert__title,
   kolor --alert-fg z DS). Element tytułu bywa odnośnikiem (interakcja szablonu) i bez tej reguły brał kolor linku z DS (`a`). */
.view--alerts .alert__title a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------ układ formatu 2 / 3 (zad. 132, A3a; makieta v5.1 kf-uklad.css:55, 78–94, 120–121, 154–157) */

/* Karta rysunku: ramka karty z DS i odstęp 12 px (rama 26 px = render-layout.js CARD_PAD); pola na swoich miejscach w obszarze. */
.view.ul-ro { margin: 0; padding: var(--space-3); box-sizing: border-box; width: max-content; min-width: 100%; min-height: 100%; }
.view .ul-area--ro { position: relative; }
.view .ul-field--ro { position: absolute; box-sizing: border-box; display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 0; border-radius: var(--radius-sm); }
.view .ul-field > .ul-fv { flex: 1; min-width: 0; overflow: hidden; margin: 0 var(--space-1); }
.view .ul-fv .vel { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view .ul-fv .ctxbar { width: 100%; }
.view .ul-fv.is-top { align-self: flex-start; padding-top: 2px; }
.view .ul-fv.is-kf { align-self: stretch; height: 100%; display: flex; min-width: 0; }
.view .ul-fv.is-kf > * { flex: 1; min-width: 0; height: 100%; box-sizing: border-box; }
/* „Ukryj” z reguły (makieta kf-stany.css data-st-hide): pole zostaje w układzie, bez treści. */
/* Zad. 116 (QA 098 U-2, jak 115 dla .kk): reguły renderera zawężone do jego węzłów — data-fx-renderer (Cel, render.js labelled), data-rz-renderer (Rozmowa),
   data-el-id (pole wypełnione przez render.js) — płótno konfiguratora też jest .card.view; :where — specyficzność bez zmian. */
.view .ul-field:where([data-el-id])[data-st-hide] { visibility: hidden; }

/* Format 3 bez układu: pola jedno pod drugim na całą szerokość. */
.view .ul-area--flow { display: flex; flex-direction: column; gap: var(--space-2); }
.view .ul-field--flow { display: flex; align-items: center; min-width: 0; }
.view .ul-obj--none { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* Zad. 134: podpis pola wg labelPosition (makieta v5.1 kf-formaty.css:63–72, 234–238, 263–265, 297–299) — rysunek bez edycji, bez obrysu celu. */
.view .fx-target:where([data-fx-renderer]) { position: relative; display: block; min-width: 0; max-width: 100%; box-sizing: border-box; }
.view :where(.fx-target[data-fx-renderer]) .fx-target__in { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 100%; box-sizing: border-box; overflow: hidden; }
.view :where(.fx-target[data-fx-renderer]) .fx-target__row { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.view :where(.fx-target[data-fx-renderer]) .fx-target__row > .fx-target__val { flex: 0 1 auto; min-width: 0; }
.view :where(.fx-target[data-fx-renderer]) .fx-target__label { flex: none; color: var(--color-text-secondary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; text-align: left; }
.view .fx-target:where([data-fx-renderer])[data-label="nad"] .fx-target__row { flex-direction: column; align-items: stretch; gap: 0; }
.view .fx-target:where([data-fx-renderer])[data-label="pod"] .fx-target__row { flex-direction: column-reverse; align-items: stretch; gap: 0; }
.view .fx-target:where([data-fx-renderer])[data-label="nad"] .fx-target__label, .view .fx-target:where([data-fx-renderer])[data-label="pod"] .fx-target__label { max-width: 100%; font-size: var(--font-size-xs); }
.view :where([data-fx-renderer]).fx-target--fill { display: block; width: 100%; height: 100%; max-width: none; }
.view :where([data-fx-renderer]).fx-target--fill .fx-target__row { height: auto; max-height: 100%; min-height: 0; }
.view .fx-target:where([data-fx-renderer])[data-label="lewo"] .fx-target__row > .fx-target__val:has(> .vel--bar) { flex: 1 1 auto; }

/* Zad. 133 (A3b): obiekty formatu 3 (render-objects.js) — makieta v5.1 w miejscu „boks” (bez edycji, miniatur i panelu „Ustawienia”).
   Obiekt w polu: .ul-obj[data-obj=<typ>] wypełnia prostokąt pozycji (kf-uklad.css:192). */
.view .ul-obj { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.view [data-kf-scroll] { overscroll-behavior: contain; scrollbar-width: thin; }
.view [data-kf-scroll="pion"] { overflow-y: auto; overflow-x: hidden; }
.view [data-kf-scroll="poziom"] { overflow-x: auto; overflow-y: hidden; }
.view [data-kf-scroll="oba"] { overflow: auto; }
.view [data-kf-scroll="brak"] { overflow: hidden; }
.view .ul-obj [data-kf-scroll]:not([data-kf-scroll="brak"]) { max-width: 100%; max-height: 100%; }

/* Lista sesji (kf-lista.css, kf-uklad.css:172–175): lista zaczyna się na krawędzi pozycji (bez marginesu treści pola); od góry baner, nazwy pól,
   wersy (reszta wysokości, jeden pasek przewijania). Nazwy pól przewijają się w poziomie razem z listą. */
.view .ul-field > .ul-fv:has(> .ul-obj[data-obj="sessionList"]) { margin: 0; }
.view .ul-lista { display: flex; flex-direction: column; height: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.view .ul-lista__baner { margin-bottom: 4px; box-sizing: border-box; flex: none; }
.view .ul-lista__nazwy { flex: none; overflow: hidden; }
.view .ul-rowshead { position: relative; flex: none; margin-bottom: var(--space-1); box-shadow: inset 0 -1px 0 var(--color-border-default); }
.view .ul-rowshead__t { position: absolute; height: 18px; line-height: 18px; padding: 0 var(--space-1); box-sizing: border-box; font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view .ul-rows { flex: none; overflow: auto; scrollbar-gutter: stable; }
.view .ul-row { box-sizing: border-box; padding: 4px 0; box-shadow: inset 0 -1px 0 var(--color-border-subtle); }
.view .ul-lista .ul-area { overflow: clip; }

/* Przełącznik ekranów (kf-ekrany.css:52–86): kolory z tokenów DS przez zmienne renderera --v-background, --v-border, --v-text (makieta --pe-*). */
.view .pe { box-sizing: border-box; display: flex; align-items: stretch; gap: var(--space-1); width: 100%; height: 100%; min-width: 0; padding: var(--space-1);
    border: var(--border-width) solid var(--v-border, var(--color-border-default)); border-radius: var(--radius-md);
    background: var(--v-background, var(--color-bg-surface)); color: var(--v-text, var(--color-text-primary)); font-family: var(--font-family-sans); line-height: var(--line-height-tight); }
.view .pe__btn { flex: 1 1 auto; min-width: 0; padding: 0 var(--space-2); border: var(--border-width) solid var(--color-border-default); border-radius: var(--radius-sm);
    background: var(--color-bg-raised); color: inherit; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.view .pe[data-pe="strzalki"] .pe__btn { flex: 0 0 auto; min-width: 2rem; font-size: var(--font-size-lg); }
.view .pe__btn:disabled { opacity: 0.45; cursor: default; }
.view .pe__btn[aria-pressed="true"] { background: var(--color-bg-selected); border-color: var(--color-accent); }
.view .pe__btn:focus-visible { outline: var(--border-width-strong) solid var(--color-focus-ring); outline-offset: 1px; }
.view .pe__opis { flex: 1 1 auto; min-width: 0; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* Klawisz (kf-klawisz.css): kolory z tokenów DS przez --v-background, --v-border, --v-text, --v-icon (makieta --kk-*); marginesy z cfg — padding węzła.
   Zad. 115 (QA 098 U-2): reguły tylko dla Klawisza renderera (data-kk-renderer, render-objects.js drawKey) — płótno konfiguratora też jest .card.view
   i bez zawężenia dostawało padding 8 px i kolory --v-* zamiast marginesów i --kk-* z ustawień (nagłówki okna 24 px bez tekstu); :where — specyficzność bez zmian. */
.view .kk:where([data-kk-renderer]) { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; overflow: hidden;
    padding: var(--space-2);
    border: 1px solid var(--v-border, var(--color-border-default)); border-radius: var(--radius-md);
    background: var(--v-background, var(--color-bg-surface)); color: var(--v-text, var(--color-text-primary)); font-family: var(--font-family-sans); line-height: var(--line-height-tight); }
.view .kk:where([data-kk-renderer])[data-kk-ramka] { border-width: 2px; }
.view .kk:where([data-kk-renderer])[data-kk-v="top"] { justify-content: flex-start; }
.view .kk:where([data-kk-renderer])[data-kk-v="middle"] { justify-content: center; }
.view .kk:where([data-kk-renderer])[data-kk-v="bottom"] { justify-content: flex-end; }
.view :where(.kk[data-kk-renderer]) .kk__label { position: relative; flex: none; margin-bottom: var(--space-1); font-size: var(--font-size-xs); color: var(--v-text, var(--color-text-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view :where(.kk[data-kk-renderer]) .kk__body { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0; min-height: 0; }
.view :where(.kk[data-kk-renderer]) .kk__text { display: block; min-width: 0; overflow-wrap: anywhere; }
.view .kk:where([data-kk-renderer]):not([data-kk-uklad="kompakt"]) .kk__text { overflow-wrap: normal; word-break: normal; overflow: hidden; text-overflow: ellipsis; }
.view :where(.kk[data-kk-renderer]) .kk__value { display: block; min-width: 0; text-align: center; }
.view :where(.kk[data-kk-renderer]) .kk__value[data-kk-brak] { color: var(--v-text, var(--color-text-secondary)); }
.view :where(.kk[data-kk-renderer]) .kk__icon, .view :where(.kk[data-kk-renderer]) .kk__img { align-self: center; flex: none; color: var(--v-icon, currentColor); }
.view :where(.kk[data-kk-renderer]) .kk__icon { width: 1.25em; height: 1.25em; }
.view :where(.kk[data-kk-renderer]) .kk__img { width: 2em; height: 2em; }
.view :where(.kk[data-kk-renderer]) .kk__bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.2; color: var(--v-icon, currentColor); }
.view :where(.kk[data-kk-renderer]) .kk__bgimg { width: 70%; height: 70%; }
.view .kk:where([data-kk-renderer])[data-kk-dir="wdol"] .kk__body { writing-mode: vertical-rl; align-self: center; }
.view .kk:where([data-kk-renderer])[data-kk-dir="wgore"] .kk__body { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__body { min-height: 0; overflow: hidden; gap: var(--space-1); }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__row { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__row[data-kk-wyr="left"] { justify-content: flex-start; }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__row[data-kk-wyr="right"] { justify-content: flex-end; }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__text,
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__value { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; line-height: var(--line-height-tight); }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__icon,
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"] .kk__img { width: 16px; height: 16px; }
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"]:not([data-kk-dir="poziomo"]) .kk__body,
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"]:not([data-kk-dir="poziomo"]) .kk__row,
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"]:not([data-kk-dir="poziomo"]) .kk__text,
.view .kk:where([data-kk-renderer])[data-kk-uklad="kompakt"]:not([data-kk-dir="poziomo"]) .kk__value { min-height: 0; max-height: 100%; }
.view .kk:where([data-kk-renderer])[data-kk-ramka-reguly] { border-width: 2px; }