/* ══ Narzędzia rysowania — wygląd (E0 26.09.2026; nowy wygląd E1 27.09.2026) ══
   Pasek narzędzi z grupami i wysuwanymi listami, pasek ulubionych, pasek
   zaznaczonego rysunku, okno właściwości, drzewo obiektów, podpowiedzi,
   lupa pod palcem. Kolory wyłącznie ze zmiennych motywu (ciemny i jasny).

   Zasady: cel kliknięcia ≥ 32 px (pasek), ikony 18 px z obrysem 1.4,
   akcent = --blue z przezroczystością (color-mix), zaokrąglenia 6-10 px,
   cienie tylko pod elementami „w powietrzu" (listy, panele, okna). */

:root {
    --rys-akcent: var(--blue, #4d94ff);
    --rys-akcent-tlo: color-mix(in srgb, var(--rys-akcent) 16%, transparent);
    --rys-akcent-ramka: color-mix(in srgb, var(--rys-akcent) 55%, transparent);
    --rys-tlo-panelu: var(--bg-2, #0d1017);
    --rys-tlo-pola: var(--bg-3, #14171f);
    --rys-najechanie: color-mix(in srgb, var(--text-1, #f4f5f7) 8%, transparent);
    --rys-ramka: var(--border, #1e2230);
    --rys-cien: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --rys-czerwony: #ef5350;
}
[data-theme="light"] {
    --rys-cien: 0 12px 28px rgba(40, 36, 20, .16), 0 2px 6px rgba(40, 36, 20, .10);
    --rys-najechanie: color-mix(in srgb, var(--text-1, #1f2024) 7%, transparent);
}

/* ── Pasek narzędzi (pionowy, przy lewej krawędzi wykresu) ────────────── */

.rys-pasek-kontener {
    flex-direction: column; align-items: center; flex-shrink: 0;
    width: 42px; padding: 6px 4px; gap: 2px;
    background: var(--bg-2, #0d1017); border-right: 1px solid var(--rys-ramka);
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.rys-pasek-kontener::-webkit-scrollbar { display: none; }
.rys-pasek { gap: 2px; }

.rys-btn {
    position: relative; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: none; border-radius: 7px;
    background: transparent; color: var(--text-2, #9ca3b0); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.rys-btn svg { width: 18px; height: 18px; stroke-width: 1.4; flex-shrink: 0; }
.rys-btn:hover:not(:disabled) { background: var(--rys-najechanie); color: var(--text-1, #f4f5f7); }
.rys-btn:focus-visible { outline: 2px solid var(--rys-akcent-ramka); outline-offset: 1px; }
.rys-btn.akt { background: var(--rys-akcent-tlo); color: var(--rys-akcent); }
.rys-pasek > .rys-btn[data-tryb].akt::before {
    content: ''; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rys-akcent);
}
.rys-btn:disabled { opacity: .32; cursor: default; }
.rys-btn.niebezpieczny:hover:not(:disabled) { background: color-mix(in srgb, var(--rys-czerwony) 14%, transparent); color: var(--rys-czerwony); }
.rys-btn.maly { width: 24px; height: 24px; border-radius: 5px; }
.rys-btn.maly svg { width: 14px; height: 14px; }
.rys-btn.szeroki { width: auto; min-width: 44px; padding: 0 8px; }
.rys-btn.szeroki svg { width: 28px; height: 10px; }
.rys-btn-tekst { font: 600 10px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-3, #5c6370); }

/* Strzałka w rogu = grupa z listą (kliknięcie, prawy przycisk albo przytrzymanie). */
.rys-btn.z-lista .rys-rozwin {
    position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; cursor: pointer; border-radius: 0 0 6px 0;
}
.rys-btn.z-lista .rys-rozwin::after {
    content: ''; position: absolute; right: 2px; bottom: 2px; width: 0; height: 0;
    border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .5;
}
.rys-btn.z-lista .rys-rozwin:hover::after { opacity: 1; }

.rys-sep { width: 22px; height: 1px; flex-shrink: 0; background: var(--rys-ramka); margin: 5px 0; }
.rys-sep-pion { width: 1px; height: 20px; flex-shrink: 0; background: var(--rys-ramka); margin: 0 3px; }
.rys-licznik {
    min-height: 14px; margin: 2px 0; padding: 0 5px; border-radius: 7px; user-select: none;
    font: 600 9px 'JetBrains Mono', ui-monospace, monospace; line-height: 14px; color: var(--text-3, #5c6370);
    background: var(--rys-tlo-pola);
}
.rys-licznik:empty { display: none; }

/* ── Podpowiedź (nazwa + skrót) ───────────────────────────────────────── */

.rys-dymek {
    position: fixed; z-index: 100002; pointer-events: none; max-width: 320px;
    display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px;
    background: var(--text-1, #f4f5f7); color: var(--bg-1, #080a0f);
    font: 500 12px Inter, system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.rys-dymek[hidden] { display: none; }
.rys-dymek kbd {
    font: 600 10px 'JetBrains Mono', ui-monospace, monospace; padding: 1px 5px; border-radius: 4px;
    background: color-mix(in srgb, var(--bg-1, #080a0f) 12%, transparent); color: inherit; white-space: nowrap;
}

/* ── Wyskakujące listy (grupy, kursor, magnes, kolory, szablony) ──────── */

.rys-wyskakujace {
    position: fixed; z-index: 100001; padding: 6px; border-radius: 10px; min-width: 160px;
    background: var(--rys-tlo-panelu); border: 1px solid var(--rys-ramka);
    box-shadow: var(--rys-cien); display: flex; flex-direction: column; gap: 1px;
    font: 12px Inter, system-ui, sans-serif; color: var(--text-1, #f4f5f7);
    animation: rys-wejscie .12s ease-out;
}
@keyframes rys-wejscie { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.rys-lista { min-width: 250px; max-height: min(70vh, 560px); overflow-y: auto; }
.rys-lista-sekcja {
    padding: 8px 10px 4px; font: 600 10px Inter, system-ui, sans-serif; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3, #5c6370);
}
.rys-lista-sekcja:first-child { padding-top: 4px; }
.rys-lista-wiersz {
    display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px 0 10px; border-radius: 6px;
    cursor: pointer; color: var(--text-1, #f4f5f7); outline: none;
}
.rys-lista-wiersz svg { width: 18px; height: 18px; stroke-width: 1.4; flex-shrink: 0; color: var(--text-2, #9ca3b0); }
.rys-lista-wiersz:hover, .rys-lista-wiersz:focus-visible { background: var(--rys-najechanie); }
.rys-lista-wiersz.akt { background: var(--rys-akcent-tlo); }
.rys-lista-wiersz.akt svg, .rys-lista-wiersz.akt .rys-lista-nazwa { color: var(--rys-akcent); }
.rys-lista-nazwa { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-lista-odstep { width: 18px; flex-shrink: 0; }
.rys-lista-wiersz kbd, .rys-sciaga-wiersz kbd {
    font: 500 10px 'JetBrains Mono', ui-monospace, monospace; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
    background: var(--rys-tlo-pola); border: 1px solid var(--rys-ramka); color: var(--text-2, #9ca3b0);
}
.rys-lista-opis { padding: 4px 10px 8px; color: var(--text-3, #5c6370); font-size: 11px; }
.rys-lista-sep { height: 1px; margin: 5px 4px; background: var(--rys-ramka); }
.rys-gwiazdka {
    width: 24px; height: 24px; border: none; border-radius: 5px; background: transparent; padding: 0; cursor: pointer;
    color: var(--text-3, #5c6370); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .1s;
}
.rys-gwiazdka svg { width: 14px; height: 14px; color: inherit; }
.rys-lista-wiersz:hover .rys-gwiazdka, .rys-lista-wiersz:focus-visible .rys-gwiazdka, .rys-gwiazdka.akt { opacity: 1; }
.rys-gwiazdka.akt { color: #ffc233; }
.rys-gwiazdka:hover { background: var(--rys-najechanie); color: #ffc233; }

.rys-kolory { display: grid; grid-template-columns: repeat(4, 28px); gap: 6px; padding: 4px; }
.rys-kolor {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--text-1, #fff) 18%, transparent);
    cursor: pointer; padding: 0; transition: transform .08s;
}
.rys-kolor:hover { transform: scale(1.08); }
.rys-kolor.akt { outline: 2px solid var(--rys-akcent); outline-offset: 2px; }
.rys-suwak { display: flex; flex-direction: column; gap: 4px; margin: 6px 4px 2px; font-size: 11px; color: var(--text-2, #9ca3b0); }
.rys-suwak input { accent-color: var(--rys-akcent); }
.rys-sciaga { min-width: 330px; padding: 10px; }
.rys-sciaga-tytul { font-weight: 700; margin: 0 2px 6px; }
.rys-sciaga-wiersz { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 2px; border-bottom: 1px solid color-mix(in srgb, var(--rys-ramka) 60%, transparent); }
.rys-sciaga-wiersz:last-child { border-bottom: none; }
.rys-sciaga-wiersz span { color: var(--text-2, #9ca3b0); }
.rys-szablony { min-width: 270px; }
.rys-szablon-zapis { display: flex; gap: 6px; padding: 6px 6px 2px; }
.rys-szablon-zapis .rys-pole { flex: 1; min-width: 0; }

/* ── Pasek zaznaczonego rysunku (nad wykresem) ────────────────────────── */

/* Warstwy nakładek NAD wykresem: LightweightCharts 5.2.1 kładzie uchwyt
   separatora paneli wskaźników (przezroczysty, 9 px, `z-index: 50`) w tym samym
   kontekście - przy 40-42 wiersz drzewa obiektów / przycisk paska na granicy
   RSI/MACD był nieklikalny. 51-53: nad separatorem, pod nakładkami telefonu
   (60-62, telefon.css) i lupą (70) - kolejność między nimi bez zmian. */
.rys-zaznaczenie {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 51;
    display: flex; align-items: center; gap: 1px; padding: 4px; border-radius: 10px;
    background: color-mix(in srgb, var(--rys-tlo-panelu) 94%, transparent); border: 1px solid var(--rys-ramka);
    box-shadow: var(--rys-cien); backdrop-filter: blur(6px);
}
.rys-zaznaczenie[hidden] { display: none; }
.rys-zaznaczenie .rys-btn { width: 32px; height: 32px; }
.rys-zaznaczenie .rys-btn.szeroki { width: auto; }
.rys-kolor-paska { flex-direction: column; gap: 2px; }
.rys-kolor-paska svg { width: 16px !important; height: 16px !important; }
.rys-kolor-kreska { width: 18px; height: 3px; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1, #fff) 15%, transparent); }
.rys-kolor-paska[hidden] { display: none; }

/* ── Pasek ulubionych (przeciągany) ───────────────────────────────────── */

.rys-ulubione {
    position: absolute; z-index: 52; display: flex; align-items: center; gap: 1px; padding: 3px 4px 3px 2px;
    border-radius: 9px; background: color-mix(in srgb, var(--rys-tlo-panelu) 94%, transparent);
    border: 1px solid var(--rys-ramka); box-shadow: var(--rys-cien); backdrop-filter: blur(6px);
}
.rys-ulubione[hidden] { display: none; }
.rys-ulubione-uchwyt { width: 16px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--text-3, #5c6370); touch-action: none; }
.rys-ulubione-uchwyt:active { cursor: grabbing; }
.rys-ulubione-lista { display: flex; gap: 1px; }
.rys-ulubione .rys-btn { width: 30px; height: 30px; }

/* ── Pola i kontrolki ─────────────────────────────────────────────────── */

.rys-pole {
    background: var(--rys-tlo-pola); color: var(--text-1, #f4f5f7); border: 1px solid var(--rys-ramka); border-radius: 6px;
    padding: 6px 8px; font: 12px Inter, system-ui, sans-serif; min-height: 30px; box-sizing: border-box;
}
.rys-pole:focus { outline: none; border-color: var(--rys-akcent-ramka); box-shadow: 0 0 0 3px var(--rys-akcent-tlo); }
.rys-pole.mala { padding: 2px 6px; font-size: 11px; min-height: 24px; }
.rys-probka {
    --probka: #3d8bff;
    width: 30px; height: 30px; border-radius: 7px; cursor: pointer; padding: 0; flex-shrink: 0;
    border: 1px solid var(--rys-ramka); background:
        linear-gradient(var(--probka), var(--probka)),
        repeating-conic-gradient(#8883 0 25%, transparent 0 50%) 50% / 8px 8px;
    box-shadow: inset 0 0 0 2px var(--rys-tlo-panelu);
}
.rys-probka.pusta { background: repeating-conic-gradient(#8883 0 25%, transparent 0 50%) 50% / 8px 8px; }
.rys-segmenty { display: inline-flex; padding: 2px; gap: 2px; border-radius: 7px; background: var(--rys-tlo-pola); border: 1px solid var(--rys-ramka); flex-wrap: wrap; }
.rys-segment {
    min-width: 34px; height: 26px; padding: 0 8px; border: none; border-radius: 5px; background: transparent; cursor: pointer;
    color: var(--text-2, #9ca3b0); font: 500 11px Inter, system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.rys-segment:hover { color: var(--text-1, #f4f5f7); background: var(--rys-najechanie); }
.rys-segment.akt { background: var(--rys-akcent-tlo); color: var(--rys-akcent); box-shadow: inset 0 0 0 1px var(--rys-akcent-ramka); }
.rys-wyskakujace > .rys-segmenty { border: none; background: transparent; flex-direction: column; }
.rys-wyskakujace > .rys-segmenty .rys-segment { height: 30px; min-width: 120px; justify-content: flex-start; padding: 0 10px; }

/* Przełącznik tak/nie. */
.rys-przel { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--text-1, #f4f5f7); }
.rys-przel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rys-przel-suwak {
    position: relative; width: 30px; height: 17px; border-radius: 9px; flex-shrink: 0;
    background: var(--bg-4, #1c2028); border: 1px solid var(--rys-ramka); transition: background .15s, border-color .15s;
}
.rys-przel-suwak::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--text-2, #9ca3b0); transition: transform .15s, background .15s;
}
.rys-przel input:checked + .rys-przel-suwak { background: var(--rys-akcent); border-color: var(--rys-akcent); }
.rys-przel input:checked + .rys-przel-suwak::after { transform: translateX(13px); background: #fff; }
.rys-przel input:focus-visible + .rys-przel-suwak { box-shadow: 0 0 0 3px var(--rys-akcent-tlo); }
.rys-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.rys-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rys-chip span {
    min-width: 44px; padding: 5px 8px; border-radius: 6px; text-align: center; font-size: 11px;
    background: var(--rys-tlo-pola); border: 1px solid var(--rys-ramka); color: var(--text-3, #5c6370);
}
.rys-chip input:checked + span { background: var(--rys-akcent-tlo); border-color: var(--rys-akcent-ramka); color: var(--rys-akcent); }
.rys-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--rys-akcent-tlo); }

/* ── Okno właściwości ─────────────────────────────────────────────────── */

.rys-okno-tlo { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .42); display: flex; align-items: center; justify-content: center; animation: rys-tlo .12s ease-out; }
@keyframes rys-tlo { from { opacity: 0; } to { opacity: 1; } }
.rys-okno {
    width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column;
    background: var(--rys-tlo-panelu); border: 1px solid var(--rys-ramka); border-radius: 12px; box-shadow: var(--rys-cien);
    font: 12px Inter, system-ui, sans-serif; color: var(--text-1, #f4f5f7); animation: rys-wejscie .14s ease-out;
}
.rys-okno-naglowek { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 8px 16px; }
.rys-okno-tytul { display: flex; align-items: center; gap: 10px; font: 600 14px Inter, system-ui, sans-serif; }
.rys-okno-tytul svg { color: var(--rys-akcent); }
.rys-okno-x { width: 30px; height: 30px; border: none; border-radius: 7px; background: transparent; color: var(--text-3, #5c6370); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rys-okno-x:hover { background: var(--rys-najechanie); color: var(--text-1, #f4f5f7); }
.rys-zakladki { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--rys-ramka); }
.rys-zakladka {
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-3, #5c6370);
    padding: 8px 8px 9px; cursor: pointer; font: 500 12px Inter, system-ui, sans-serif;
}
.rys-zakladka:hover { color: var(--text-1, #f4f5f7); }
.rys-zakladka.akt { color: var(--text-1, #f4f5f7); border-bottom-color: var(--rys-akcent); }
.rys-okno-tresc { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.rys-wiersz { display: flex; align-items: flex-start; gap: 12px; }
.rys-etykieta { width: 86px; padding-top: 7px; color: var(--text-2, #9ca3b0); flex-shrink: 0; }
.rys-wiersz-pola { flex: 1; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.rys-wiersz-pola > .rys-pole[type="text"] { flex: 1 1 100%; }
.rys-tekst { width: 100%; resize: vertical; min-height: 72px; }
.rys-opis { color: var(--text-3, #5c6370); font-size: 11px; }
.rys-blad { color: var(--rys-czerwony); font-size: 11px; flex-basis: 100%; }
.rys-blad:empty { display: none; }
.rys-gotowe { display: flex; gap: 6px; flex-wrap: wrap; }
/* Wybór ikony (emoji) i stopnia fal Elliotta (E3). */
.rys-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.rys-emoji-b {
    height: 34px; border-radius: 7px; border: 1px solid transparent; background: var(--rys-tlo-pola);
    font: 18px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; cursor: pointer; padding: 0;
}
.rys-emoji-b:hover { background: var(--rys-najechanie); }
.rys-emoji-b.akt { border-color: var(--rys-akcent); background: var(--rys-akcent-tlo); }
.rys-pole.rys-stopien { width: auto; min-width: 150px; }
.rys-pole.rys-parametr { width: 140px; }
select.rys-pole.rys-parametr { width: auto; min-width: 160px; }
.rys-stopien-probka { font: 600 12px "JetBrains Mono", ui-monospace, monospace; color: var(--text-1, #f4f5f7); }
/* Edytor poziomów (E2): żetony z kolorem poziomu, pole „+ poziom". */
.rys-poziomy {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 5px; border-radius: 8px;
    background: var(--rys-tlo-pola); border: 1px solid var(--rys-ramka); min-height: 38px;
}
.rys-zeton {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 3px 0 8px; border-radius: 13px;
    background: var(--rys-najechanie); font: 600 11.5px "JetBrains Mono", ui-monospace, monospace; color: var(--text-1, #f4f5f7);
    font-variant-numeric: tabular-nums;
}
.rys-zeton-kolor { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.rys-zeton-x {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-3, #7d8590); cursor: pointer; padding: 0;
}
.rys-zeton-x:hover:not(:disabled) { background: color-mix(in srgb, var(--rys-czerwony) 16%, transparent); color: var(--rys-czerwony); }
.rys-zeton-x:disabled { opacity: .3; cursor: default; }
.rys-poziomy .rys-pole.rys-poziom-nowy {
    flex: 1 0 80px; min-width: 80px; height: 26px; min-height: 26px; padding: 0 8px; border: none; background: transparent;
    font: 12px "JetBrains Mono", ui-monospace, monospace;
}
.rys-poziomy:focus-within { border-color: var(--rys-akcent-ramka); }
.rys-interwaly { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rys-okno-stopka { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rys-ramka); }
.rys-odstep { flex: 1; }
.rys-guzik {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--rys-ramka);
    background: var(--rys-tlo-pola); color: var(--text-1, #f4f5f7); cursor: pointer; font: 500 12px Inter, system-ui, sans-serif;
}
.rys-guzik:hover:not(:disabled) { background: var(--bg-4, #1c2028); }
.rys-guzik:disabled { opacity: .4; cursor: default; }
.rys-guzik.maly { padding: 4px 9px; font-size: 11px; border-radius: 6px; }
.rys-guzik.glowny { background: var(--rys-akcent); border-color: var(--rys-akcent); color: #fff; font-weight: 600; }
.rys-guzik.glowny:hover:not(:disabled) { filter: brightness(1.08); background: var(--rys-akcent); }
.rys-guzik-szablon svg { width: 14px; height: 14px; }

/* ── Drzewo obiektów ──────────────────────────────────────────────────── */

.rys-obiekty {
    position: absolute; top: 8px; right: 72px; z-index: 53; width: 300px; max-height: calc(100% - 50px);
    display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
    background: var(--rys-tlo-panelu); border: 1px solid var(--rys-ramka); box-shadow: var(--rys-cien);
    font: 12px Inter, system-ui, sans-serif; color: var(--text-1, #f4f5f7); animation: rys-wejscie .14s ease-out;
}
.z-przyciskiem-powrotu .rys-obiekty { top: 64px; max-height: calc(100% - 106px); }
.rys-obiekty-naglowek { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 0 8px; border-bottom: 1px solid var(--rys-ramka); }
.rys-obiekty-zakladki { display: flex; gap: 2px; }
.rys-obiekty-tresc { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.rys-obiekty-pasek { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px; }
.rys-obiekty-pusto { padding: 16px 8px; text-align: center; color: var(--text-3, #5c6370); }
.rys-drzewo { display: flex; flex-direction: column; gap: 1px; }
.rys-warstwa, .rys-obiekt { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px 0 6px; border-radius: 6px; cursor: pointer; }
.rys-warstwa { margin-top: 4px; font-weight: 600; color: var(--text-2, #9ca3b0); }
.rys-warstwa.aktywna { color: var(--text-1, #f4f5f7); background: var(--rys-akcent-tlo); }
.rys-warstwa svg { flex-shrink: 0; }
.rys-warstwa-zwin { width: 18px; height: 18px; border: none; background: none; color: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.rys-warstwa[aria-expanded="false"] .rys-warstwa-zwin svg { transform: rotate(-90deg); }
.rys-warstwa-nazwa { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-warstwa-licznik { font: 600 10px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-3, #5c6370); }
.rys-obiekt { padding-left: 26px; }
.rys-obiekt:hover, .rys-warstwa:hover { background: var(--rys-najechanie); }
.rys-obiekt.akt { background: var(--rys-akcent-tlo); box-shadow: inset 2px 0 0 var(--rys-akcent); }
.rys-obiekt.ukryty .rys-obiekt-nazwa { color: var(--text-3, #5c6370); text-decoration: line-through; }
.rys-obiekt-nazwa { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-obiekt-akcje { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .1s; }
.rys-obiekt:hover .rys-obiekt-akcje, .rys-warstwa:hover .rys-obiekt-akcje, .rys-obiekt:focus-within .rys-obiekt-akcje, .rys-obiekt-akcje .rys-btn.akt { opacity: 1; }
.rys-obiekt-akcje:has(.rys-btn.akt) { opacity: 1; }
.rys-historia { display: flex; flex-direction: column; gap: 1px; }
.rys-historia-wiersz { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer; }
.rys-historia-wiersz:hover, .rys-historia-wiersz:focus-visible { background: var(--rys-najechanie); outline: none; }
.rys-historia-wiersz.akt { background: var(--rys-akcent-tlo); }
.rys-historia-kiedy { flex: 1; }
.rys-historia-podglad {
    display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px;
    background: var(--rys-akcent-tlo); border: 1px solid var(--rys-akcent-ramka);
}
.rys-historia-tytul { display: flex; align-items: baseline; gap: 8px; }
.rys-historia-czas { color: var(--text-2, #9aa3b2); font-variant-numeric: tabular-nums; }
.rys-historia-roznica { display: flex; flex-wrap: wrap; gap: 6px; }
.rys-znaczek, .rys-znaczek-plus, .rys-znaczek-minus {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px;
    font-size: 11.5px; font-weight: 600; background: var(--rys-najechanie); color: var(--rys-tekst);
}
.rys-znaczek-plus { background: rgba(38, 166, 154, .16); color: #26a69a; }
.rys-znaczek-minus { background: rgba(239, 83, 80, .16); color: #ef5350; }

/* ── Lupa pod palcem ─────────────────────────────────────────────────── */

.rys-lupa {
    position: absolute; z-index: 70; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.rys-lupa[hidden] { display: none; }

/* ── Telefon: okno jako arkusz od dołu, większe cele dotyku ──────────── */

@media (max-width: 600px), (pointer: coarse) {
    .rys-okno-tlo { align-items: flex-end; }
    .rys-okno { width: 100vw; max-height: 82vh; border-radius: 16px 16px 0 0; border-bottom: none; animation: rys-arkusz .18s ease-out; }
    @keyframes rys-arkusz { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
    .rys-okno-naglowek { padding: 14px 12px 8px 18px; }
    .rys-zakladki { overflow-x: auto; scrollbar-width: none; }
    .rys-zakladka { padding: 12px 10px; font-size: 14px; white-space: nowrap; }
    .rys-okno-tresc { gap: 14px; }
    .rys-wiersz { flex-direction: column; gap: 6px; }
    .rys-etykieta { width: auto; padding-top: 0; font-size: 12px; }
    .rys-pole { padding: 9px 10px; font-size: 15px; min-height: 42px; }
    .rys-guzik { padding: 12px 18px; font-size: 14px; }
    .rys-guzik.maly { padding: 8px 12px; font-size: 13px; }
    .rys-probka { width: 44px; height: 44px; border-radius: 9px; }
    .rys-segment { min-width: 44px; height: 40px; font-size: 13px; }
    .rys-kolor { width: 40px; height: 40px; border-radius: 8px; }
    .rys-kolory { grid-template-columns: repeat(4, 40px); gap: 10px; }
    .rys-przel { font-size: 14px; min-height: 36px; }
    .rys-przel-suwak { width: 40px; height: 22px; border-radius: 11px; }
    .rys-przel-suwak::after { width: 16px; height: 16px; }
    .rys-przel input:checked + .rys-przel-suwak::after { transform: translateX(18px); }
    .rys-chip span { min-width: 52px; padding: 10px; font-size: 13px; }
    .rys-interwaly { grid-template-columns: repeat(4, 1fr); }
    .rys-okno-stopka { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .rys-lista-wiersz { min-height: 44px; }
    .rys-obiekty { left: 8px; right: 8px; width: auto; top: 8px; max-height: calc(100% - 16px); }
    .rys-obiekt, .rys-warstwa, .rys-historia-wiersz { min-height: 44px; }
    .rys-emoji-b { height: 44px; font-size: 22px; }
    .rys-zeton { height: 34px; padding-left: 10px; border-radius: 17px; font-size: 13px; }
    .rys-zeton-x { width: 30px; height: 30px; }
    .rys-poziomy .rys-pole.rys-poziom-nowy { height: 34px; min-height: 34px; font-size: 15px; }
    .rys-obiekt-akcje { opacity: 1; }
    .rys-btn.maly { width: 36px; height: 36px; }
}

/* ── E5a: alert na rysunku, obraz, eksport, warstwa admina (27.09.2026) ── */

.rys-zaznaczenie [data-akcja="alert"].akt { color: #ffc233; background: color-mix(in srgb, #ffc233 16%, transparent); }
.rys-kanaly { display: flex; flex-direction: column; gap: 6px; }
.rys-kanal { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-1, #f4f5f7); cursor: pointer; }
.rys-kanal input { accent-color: var(--rys-akcent); width: 15px; height: 15px; }
.rys-wylaczone { opacity: .45; }
.rys-wylaczone :is(input, select, button) { pointer-events: auto; }
.rys-ostrzezenie { color: #ffb74d; background: color-mix(in srgb, #ffb74d 10%, transparent); border: 1px solid color-mix(in srgb, #ffb74d 35%, transparent); border-radius: 8px; padding: 8px 10px; }
.rys-stan-alertu { color: #ffc233; }
.rys-wiadomosc { width: 100%; }
.rys-plik-obrazu { display: none; }
.rys-obiekty-pliki { gap: 4px; border-top: 1px solid var(--rys-ramka); padding-top: 6px; }
.rys-obiekty-pliki .rys-opis { margin-left: auto; }
.rys-warstwa-admina { margin-top: 6px; border-top: 1px dashed var(--rys-ramka); padding-top: 6px; }
.rys-warstwa-admina .rys-warstwa-nazwa { color: #ffc233; }
.rys-obiekt-obcy { opacity: .8; cursor: pointer; }
.rys-obiekt-obcy .rys-obiekt-nazwa { font-style: italic; }

/* ── E5b: zlecenia z wykresu ──────────────────────────────────────────── */

.rys-zl-okno { --zl-zielony: #26a69a; --zl-czerwony: #ef5350; --zl-zolty: #ffb74d; width: min(940px, calc(100vw - 24px)); }
/* Dwie kolumny: formularz | podgląd (przyklejony - widać go przy każdej zmianie pola). */
.rys-zl-okno .rys-okno-tresc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; }
.rys-zl-okno .rys-zl-podglad { position: sticky; top: 0; }
.rys-zl-okno .rys-wiersz-pola > .rys-pole.rys-zl-liczba { flex: 0 0 auto; width: 132px; }
.rys-zl-okno .rys-wiersz-pola > .rys-pole.rys-zl-liczba.waskie { width: 70px; }
.rys-zl-okno .rys-wiersz-pola > .rys-opis { flex-basis: 100%; }
.rys-zl-para { display: flex; align-items: center; gap: 8px; }
.rys-zl-para .rys-pole.rys-zl-liczba { width: 118px; }
.rys-zl-okno .rys-kanal { white-space: nowrap; }
.rys-zl-symbol { margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: var(--rys-akcent-tlo); color: var(--rys-akcent); font: 600 11px 'JetBrains Mono', ui-monospace, monospace; }
.rys-zl-formularz { display: flex; flex-direction: column; gap: 12px; transition: opacity .12s; }
.rys-zl-formularz.rys-wylaczone { opacity: .55; }
.rys-zl-formularz.rys-wylaczone :is(input, select, button) { pointer-events: none; }
.rys-zl-kierunek { padding: 5px 10px; border-radius: 7px; font-weight: 600; }
.rys-zl-kierunek.kupno { color: var(--zl-zielony); background: color-mix(in srgb, var(--zl-zielony) 14%, transparent); }
.rys-zl-kierunek.sprzedaz { color: var(--zl-czerwony); background: color-mix(in srgb, var(--zl-czerwony) 14%, transparent); }
.rys-zl-liczba { width: 118px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.rys-zl-liczba.waskie { width: 64px; text-align: right; }
.rys-zl-liczba:disabled { opacity: .45; }
.rys-zl-jednostka { color: var(--text-2, #9aa0aa); font-size: 11px; align-self: center; }
.rys-zl-suwak { flex: 1 1 140px; min-width: 120px; accent-color: var(--rys-akcent); align-self: center; }
.rys-zl-szybkie { display: flex; gap: 4px; flex-wrap: wrap; flex-basis: 100%; }
.rys-zl-zakres { font: 600 12px 'JetBrains Mono', ui-monospace, monospace; align-self: center; }
.rys-zl-saldo { flex-basis: 100%; font-variant-numeric: tabular-nums; }
.rys-zl-bez-terminu { border-left: 2px solid var(--rys-akcent-ramka); padding-left: 10px; }
.rys-zl-blad-pola { margin-top: -4px; }

.rys-zl-podglad { border: 1px solid var(--rys-ramka); border-radius: 10px; background: var(--rys-tlo-pola); padding: 12px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.rys-zl-podglad.liczy::after { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--rys-akcent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: rys-zl-liczy 1s linear infinite; }
@keyframes rys-zl-liczy { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.rys-zl-podglad.liczy .rys-zl-kafle { opacity: .6; }
.rys-zl-pusto { color: var(--text-3, #5c6370); font-size: 12px; }
.rys-zl-pusto:empty { display: none; }
.rys-zl-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; transition: opacity .12s; }
.rys-zl-kafel { padding: 8px 10px; border-radius: 8px; background: var(--rys-tlo-panelu); border: 1px solid var(--rys-ramka); min-width: 0; }
.rys-zl-kafel-nazwa { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3, #5c6370); }
.rys-zl-kafel-wartosc { margin-top: 2px; font: 600 14px 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-zl-kafel-pod { margin-top: 1px; font-size: 10.5px; color: var(--text-2, #9aa0aa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-zl-kafel.ryzyko .rys-zl-kafel-wartosc { color: var(--zl-czerwony); }
.rys-zl-kafel.zysk .rys-zl-kafel-wartosc { color: var(--zl-zielony); }
.rys-zl-bledy, .rys-zl-ostrzezenia { margin: 0; padding: 8px 10px 8px 26px; border-radius: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.rys-zl-bledy { color: var(--zl-czerwony); background: color-mix(in srgb, var(--zl-czerwony) 9%, transparent); border: 1px solid color-mix(in srgb, var(--zl-czerwony) 30%, transparent); }
.rys-zl-ostrzezenia { color: var(--zl-zolty); background: color-mix(in srgb, var(--zl-zolty) 8%, transparent); border: 1px solid color-mix(in srgb, var(--zl-zolty) 28%, transparent); }
.rys-zl-nogi { width: 100%; border-collapse: collapse; font: 11.5px 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.rys-zl-nogi th { text-align: right; font: 600 10px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3, #5c6370); padding: 3px 6px; border-bottom: 1px solid var(--rys-ramka); }
.rys-zl-nogi td { text-align: right; padding: 3px 6px; }
.rys-zl-nogi :is(th, td):first-child { text-align: left; color: var(--text-3, #5c6370); }
.rys-zl-nogi tr:nth-child(even) td { background: color-mix(in srgb, var(--text-1, #f4f5f7) 3%, transparent); }

.rys-zl-stopka { flex-wrap: wrap; }
.rys-zl-zdanie { flex: 1 1 100%; padding: 10px 12px; border-radius: 8px; background: var(--rys-akcent-tlo); border: 1px solid var(--rys-akcent-ramka); font-weight: 600; line-height: 1.45; }
.rys-zl-zdanie:empty { display: none; }
.rys-zl-stopka .rys-zl-zdanie + .rys-guzik { margin-left: auto; }
.rys-zl-potwierdz { min-width: 170px; }
.rys-zl-wynik { font-weight: 600; }
.rys-zl-wynik-nogi { margin: 0; padding-left: 18px; font: 11.5px 'JetBrains Mono', ui-monospace, monospace; }
.rys-zl-wynik-nogi .stan-blad { color: var(--zl-czerwony, #ef5350); }
.rys-zl-wynik-nogi .stan-pominiete { color: var(--text-3, #5c6370); }
.rys-guzik.niebezpieczny { border-color: color-mix(in srgb, var(--rys-czerwony) 55%, transparent); color: var(--rys-czerwony); }
.rys-guzik.niebezpieczny:hover:not(:disabled) { background: color-mix(in srgb, var(--rys-czerwony) 14%, transparent); }
.rys-zl-dymek { display: flex; flex-direction: column; gap: 8px; max-width: 300px; padding: 10px 12px; }
.rys-zl-dymek-tytul { font-weight: 600; }
.rys-zl-dymek .rys-guzik { align-self: flex-start; }

.rys-warstwa-zlecen { margin-top: 6px; border-top: 1px dashed var(--rys-ramka); padding-top: 6px; }
.rys-warstwa-zlecen svg { color: #ffc233; }
.rys-zlecenie-wiersz { align-items: flex-start; }
/* „Rozbrój" widać zawsze (nie dopiero po najechaniu) - to ma być pod ręką. */
.rys-zlecenie-wiersz .rys-obiekt-akcje { opacity: 1; }
.rys-zlecenie-wiersz .rys-obiekt-nazwa { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.rys-zl-stan { font-size: 10.5px; color: var(--text-3, #5c6370); }
.rys-zlecenie-wiersz.stan-uzbrojone .rys-zl-stan { color: #ffc233; }
.rys-zlecenie-wiersz.stan-wykonywane .rys-zl-stan { color: #ffb74d; }
.rys-zlecenie-wiersz.stan-wykonane .rys-zl-stan { color: #26a69a; }
.rys-zlecenie-wiersz.stan-blad .rys-zl-stan { color: var(--rys-czerwony); }
.rys-zl-znak { width: 14px; font-size: 10px; line-height: 16px; text-align: center; }
.rys-zl-znak.kupno { color: #26a69a; }
.rys-zl-znak.sprzedaz { color: #ef5350; }
.rys-zl-ostatnie { margin: 6px 0 2px 8px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3, #5c6370); }

@media (max-width: 600px), (pointer: coarse) {
    .rys-zl-okno { width: 100vw; max-height: 90vh; }
    .rys-zl-okno .rys-okno-tresc { display: flex; }
    .rys-zl-okno .rys-zl-podglad { position: static; }
    .rys-zl-okno .rys-wiersz-pola > .rys-pole.rys-zl-liczba { flex: 1 1 140px; width: auto; }
    .rys-zl-okno .rys-wiersz-pola > .rys-pole.rys-zl-liczba.waskie { flex: 0 0 90px; }
    .rys-zl-para { flex: 1 1 100%; }
    .rys-zl-para .rys-pole.rys-zl-liczba { flex: 1 1 auto; width: auto; }
    .rys-zl-suwak { height: 32px; }
    .rys-zl-potwierdz { flex: 1 1 auto; }
}

/* ── E6: automaty analizy - „Utrwal" ─────────────────────────────────── */

.rys-utrwal { min-width: 260px; max-width: 360px; }
.rys-utrwal .rys-lista-wiersz svg { color: var(--rys-akcent); flex-shrink: 0; }
.rys-utrwal .rys-lista-nazwa { white-space: normal; }
.rys-utrwal-wszystkie { margin: 6px 8px 4px; width: calc(100% - 16px); }
.rys-utrwal-pusto { padding: 6px 10px 8px; }
/* Wybór wyniku automatu (26.10.2026): Auto-Fibo / Auto-formacje - jeden wynik, „Narysuj". */
.rys-wybor { min-width: 300px; max-width: 400px; }
.rys-wybor-w-oknie { min-width: 0; max-width: none; width: 100%; border: 1px solid var(--rys-ramka, #2a3140); border-radius: 8px;
    max-height: 300px; overflow-y: auto; }
.rys-wybor-wiersz { align-items: center; gap: 8px; }
.rys-wybor-wiersz .rys-lista-nazwa { white-space: nowrap; }
.rys-wybor-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rys-wybor-dopisek { font-size: 10px; color: var(--text-3, #8b93a1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-wybor-kropka { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-3, #8b93a1); }
.rys-wybor-kropka-wsz { background: transparent; border: 1px solid var(--text-3, #8b93a1); }
.rys-wybor-wiersz.akt { box-shadow: inset 3px 0 0 var(--rys-akcent); }
.rys-wybor-narysuj { flex-shrink: 0; }
/* Oko przy wyniku (31.10.2026, RadKo): pokaż / schowaj każdy wynik automatu osobno. */
.rys-wybor-oko { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-1, #e6e8eb); cursor: pointer; }
.rys-wybor-oko:hover, .rys-wybor-oko:focus-visible { border-color: var(--rys-ramka, #2a3140); background: var(--rys-tlo-hover, rgba(255,255,255,.06)); }
.rys-wybor-wiersz.schowany .rys-wybor-tekst, .rys-wybor-wiersz.schowany .rys-wybor-kropka { opacity: .42; }
.rys-wybor-wiersz.schowany .rys-wybor-oko { color: var(--text-3, #8b93a1); }
.rys-wybor-chowanie { display: flex; align-items: center; gap: 6px; padding: 2px 10px 6px; }
/* Lista z oka na tabliczce automatu (03.11.2026): ptaszek = wynik na wykresie. */
.rys-wybor-ptaszek { flex-shrink: 0; width: 16px; height: 16px; margin: 0 2px; accent-color: var(--rys-akcent, #4d94ff); cursor: pointer; }
.rys-wybor-licznik { flex: 1; min-width: 0; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rys-wybor-chowanie .rys-guzik[disabled] { opacity: .45; cursor: default; }
.rys-wybor-rodzaj { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; }
.rys-wybor-rodzaj select { flex: 1; min-width: 0; }
.rys-wybor-pusto, .rys-wybor-stopka { padding: 6px 10px 8px; white-space: normal; }
.rys-wybor-stopka { font-size: 10px; border-top: 1px solid var(--rys-ramka, #2a3140); margin-top: 4px; }
@media (max-width: 700px) {
    .rys-wybor { min-width: 0; max-width: calc(100vw - 16px); }
    .rys-wybor-narysuj { min-height: 36px; padding: 0 12px; }
    .rys-wybor-oko { width: 36px; height: 36px; }
    .rys-wybor-ptaszek { width: 22px; height: 22px; }
    .rys-wybor-chowanie { flex-wrap: wrap; }
    .rys-wybor-chowanie .rys-guzik { min-height: 36px; }
}