:root {
  /* motyw jasny - domyslny */
  --bg: #f2f4f8;
  --panel: #ffffff;
  --line: #e4e8f0;
  --fg: #15171e;
  --muted: #5b6070;
  --wygaszony: #9498a6;
  --accent: #2962ff;
  --up: #0b8f6f;
  --down: #d92b3c;
  --welon: rgba(242, 244, 248, 0.92);
  --cien: 0 1px 2px rgba(20, 25, 45, 0.04), 0 6px 20px rgba(20, 25, 45, 0.05);
  --r: 12px;         /* karty, kafle, okna */
  --r-maly: 8px;     /* przyciski, pola, wiersze */
  --baza: 15px;      /* podstawa rozmiaru tekstu, regulowana w Ustawieniach */
}
html.motyw-ciemny {
  --bg: #131722;
  --panel: #1e222d;
  --line: #2a2e39;
  --fg: #d1d4dc;
  --muted: #787b86;
  --wygaszony: #4a4e5a;
  --accent: #2962ff;
  --up: #26a69a;
  --down: #ef5350;
  --welon: rgba(19, 23, 34, 0.92);
  --cien: 0 1px 2px rgba(0, 0, 0, 0.25);
}
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
html { font-size: var(--baza); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: 52px 1fr;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.45 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.tnum { font-variant-numeric: tabular-nums; }
.etykieta { color: var(--muted); font-size: 0.846rem; }
#t212-stan:not([hidden]) { display: block; width: 100%; }
#t212-stan.blad { color: var(--down); }
.gora { color: var(--up); } .dol { color: var(--down); }

/* ---------- gorny pasek ---------- */
#gora {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.marka { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.01em; }
.marka svg { width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
#szukaj-pole {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  width: 360px;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
}
#szukaj-pole:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--panel); }
#szukaj-pole input { border: 0; background: transparent; padding: 0; flex: 1; min-width: 0; color: var(--fg); font: inherit; }
#szukaj-pole input:focus { outline: none; }
#szukaj-pole kbd { border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; font: inherit; font-size: 0.846rem; color: var(--wygaszony); }
#szukaj-wyniki {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  list-style: none; max-height: 300px; overflow: auto; z-index: 20;
}
#szukaj-wyniki li { display: flex; gap: 8px; padding: 7px 10px; border-radius: var(--r-maly); cursor: pointer; }
#szukaj-wyniki li.sel, #szukaj-wyniki li:hover { background: var(--line); }
#szukaj-wyniki li.grupa, #szukaj-wyniki li.info {
  color: var(--muted); font-size: 0.846rem; cursor: default; padding: 6px 8px 2px;
}
#szukaj-wyniki li.grupa:hover, #szukaj-wyniki li.info:hover { background: transparent; }
#szukaj-wyniki .lista { margin-left: auto; color: var(--muted); font-size: 0.846rem; }
.gora-prawo { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.para { display: flex; align-items: baseline; gap: 7px; background: transparent; border: 0;
  padding: 4px 8px; border-radius: var(--r-maly); color: inherit; font: inherit; cursor: pointer; }
.para:hover { background: var(--line); }
#gora-dzisiaj { display: flex; align-items: baseline; gap: 6px; }
.pion { width: 1px; height: 18px; background: var(--line); }
#stan { display: flex; align-items: center; gap: 6px; color: var(--up); font-size: 0.846rem; }
#stan.off, #stan.cisza { color: var(--down); }
#stan .kropka { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#stan.cisza .kropka { box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.25); }
.wiersz.zrodlo { grid-template-columns: 130px 1fr 70px 2fr; }
.wiersz.zrodlo .kropka { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--wygaszony); }
.wiersz.zrodlo .kropka.ok { background: var(--up); }
.wiersz.zrodlo .kropka.cisza { background: var(--down); }
.wiersz.zrodlo .kropka.poza { background: var(--muted); }

/* ---------- szyna ikon ---------- */
#szyna { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
#szyna button {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 10px;
  color: var(--muted); cursor: pointer; font-weight: 500;
}
#szyna button:hover { color: var(--fg); background: var(--line); }
#szyna button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#szyna button.na-dole { margin-top: auto; }
#szyna .nazwa { display: none; white-space: nowrap; }
body.szyna-szeroka { grid-template-columns: 200px 1fr; }
body.szyna-szeroka #szyna { align-items: stretch; padding: 10px 8px; }
body.szyna-szeroka #szyna button { width: auto; justify-content: flex-start; gap: 10px; padding: 0 10px; }
body.szyna-szeroka #szyna .nazwa { display: inline; }
body.szyna-szeroka #szyna .plakietka { position: static; margin-left: auto; }
body.szyna-szeroka #szyna-przelacz svg { transform: rotate(180deg); }
#szyna-przelacz { color: var(--wygaszony); }
.plakietka { background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.769rem; padding: 0 6px; line-height: 1.5; font-weight: 600; }
#szyna .plakietka { position: absolute; top: 2px; right: 2px; }

/* ---------- tresc i panele ---------- */
#tresc { min-width: 0; min-height: 0; overflow: hidden; }
.panel { height: 100%; min-height: 0; padding: 14px; display: grid; gap: 14px; }
.panel[data-panel="pulpit"] { grid-template-rows: 1fr; }
.panel:not([data-panel="pulpit"]) { grid-template-rows: 1fr; }

.karta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--cien); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: clip; }
.karta.rozciagnij { height: 100%; }
.karta-pasek { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.karta-tytul { font-weight: 650; letter-spacing: -0.005em; }
.przewijak { flex: 1; min-height: 0; overflow: auto; }

/* ---------- kafle ---------- */
.kafel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--cien); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kafel > .etykieta { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 600; }
.kafel .duza { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.kafel .pod { color: var(--muted); font-size: 0.846rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kafel.klik { cursor: pointer; }
.kafel.klik:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* ---------- srodek pulpitu ---------- */
#pulpit-srodek { display: grid; grid-template-columns: 1fr 380px; gap: 14px; min-height: 0; }
#wykres-obszar { position: relative; flex: 1; min-height: 0; }
#wykres { position: absolute; inset: 0; }

/* ---------- zakladka Fundamenty (SEC EDGAR) ---------- */
/* zastepuje obszar wykresu w tej samej karcie; wykres zostaje w DOM, zeby nie tracic serii */
#fundamenty-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; overflow: auto; }
#fundamenty-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#fundamenty-kafle .kafel { padding: 8px 10px; }
#fundamenty-kafle .duza { font-size: 1.154rem; font-weight: 600; }
#fundamenty-wykres-tlo { position: relative; height: 240px; flex: none; }
#fundamenty-wykres { width: 100%; height: 100%; display: block; }
#fundamenty-wykres text { font: 0.769rem -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--muted); font-variant-numeric: tabular-nums; }
#fundamenty-wykres .os { stroke: var(--line); stroke-width: 1; }
#fundamenty-wykres .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
#fundamenty-wykres .przychod { fill: var(--accent); opacity: 0.85; }
#fundamenty-wykres .wynik.gora { fill: var(--up); }
#fundamenty-wykres .wynik.dol { fill: var(--down); }
#fundamenty-wykres .akcje { fill: none; stroke: #f5a623; stroke-width: 2; }
#fundamenty-wykres .akcje-punkt { fill: #f5a623; }
#fundamenty-wykres .wyliczone { fill: var(--muted); }
#fundamenty-panel .legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.846rem; color: var(--muted); }
#fundamenty-panel .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
#fundamenty-panel .przewijak { flex: none; max-height: 260px; }
#fundamenty-tabela th:first-child, #fundamenty-tabela td:first-child { text-align: left; white-space: nowrap; }
#fundamenty-tabela td.wyliczone { color: var(--muted); }
#fundamenty-komunikaty .wiersz { display: grid; grid-template-columns: 90px 70px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
#fundamenty-komunikaty .wiersz:hover { background: var(--line); }
#fundamenty-komunikaty .naglowek { font-weight: 600; padding: 4px 0; }
.komunikat-forma.emisja { color: var(--down); font-weight: 600; }
.komunikat-forma.zakup { color: var(--up); font-weight: 600; }
#komunikaty-dane { width: 100%; }
#komunikaty-dane th:last-child, #komunikaty-dane td:last-child { text-align: left; white-space: normal; width: 60%; }
#komunikaty-dane td.link { cursor: pointer; }
#komunikaty-dane tr:hover td { background: var(--line); }
.panel[data-panel="kalendarz"] { display: grid; grid-template-rows: minmax(160px, 1fr) minmax(200px, 1.4fr); gap: 14px; }

/* ---------- rysowanie na wykresie ---------- */
#rysunki { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
#rysunki.aktywny { pointer-events: auto; cursor: crosshair; touch-action: none; }
#rysunki .linia-r { stroke: var(--accent); stroke-width: 1.5; }
#rysunki .poziom-r { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 6 3; }
#rysunki .punkt-r { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
#rysunki .etykieta-r text { font: 0.846rem -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--fg); font-variant-numeric: tabular-nums; white-space: pre; }
#rysunki .etykieta-r .tlo { fill: var(--panel); stroke: var(--line); }
#rysunki .etykieta-r .gora { fill: var(--up); }
#rysunki .etykieta-r .dol { fill: var(--down); }
#rysunki .etykieta-r .klik { pointer-events: auto; cursor: pointer; fill: var(--muted); }
#rysunki .etykieta-r .klik:hover { fill: var(--fg); }
#rysowanie-podpowiedz { color: var(--accent); }
.lista-kompakt { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 10px; }
.wiersz { display: grid; gap: 8px; align-items: baseline; padding: 5px 0; }
.wiersz.alert { grid-template-columns: 104px 100px 1fr 82px 18px; }
.wiersz.wyd { grid-template-columns: 104px 1fr 88px; }
.wiersz .usun { color: var(--wygaszony); cursor: pointer; text-align: right; }
.wiersz .usun:hover { color: var(--down); }
.pusto { color: var(--wygaszony); padding: 8px 0; }

/* ---------- watchlista ---------- */
#karta-watch .karta-pasek { flex-wrap: nowrap; }
#listy { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 6px; }
/* przyciski ikonowe w pasku karty: jeden rozmiar, stan wlaczony w kolorze akcentu */
.karta-pasek .ikony { margin-left: auto; display: flex; gap: 2px; }
button.ikona { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--muted); }
button.ikona:hover { color: var(--fg); background: var(--line); }
button.ikona.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ikona .gdy-on { display: none; }
.ikona.on .gdy-on { display: block; }
.ikona.on .gdy-off { display: none; }

/* ---------- akordeon list ---------- */
/* naglowek listy to mala etykieta wersalikami z licznikiem w pigulce; aktywna lista ma pasek
   akcentu po lewej (zamiast podkreslenia tekstu) i pelny kolor nazwy */
.lista { position: relative; padding: 0 6px; }
.lista + .lista { margin-top: 2px; }
.lista-naglowek { display: flex; align-items: center; gap: 2px; padding: 0 2px 0 4px; border-radius: 8px; }
.lista-naglowek.drop { background: var(--accent); }
.lista-naglowek.drop .lista-tytul, .lista-naglowek.drop .ile { color: #fff; }
.lista-tytul { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  background: transparent; border: 0; padding: 7px 4px; color: var(--muted);
  font: inherit; font-size: 0.769rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  text-align: left; cursor: pointer; }
.lista-tytul:hover { color: var(--fg); }
.lista-tytul .nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-tytul .strzalka { flex: none; color: var(--wygaszony); transition: transform 0.12s; }
.lista:not(.zwinieta) .lista-tytul .strzalka { transform: rotate(90deg); }
.lista-tytul .ile { flex: none; font-weight: 600; font-size: 0.72rem; letter-spacing: 0; line-height: 1.6;
  padding: 0 7px; border-radius: 999px; background: var(--line); color: var(--muted); }
.lista.aktywna .lista-tytul { color: var(--fg); }
.lista.aktywna .lista-tytul .ile { background: var(--accent); color: #fff; }
.lista.aktywna::before { content: ""; position: absolute; left: 0; top: 9px; height: 16px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); }
.lista-naglowek .zmien, .lista-naglowek .usun, .lista-naglowek .sortuj { border: 0; background: transparent; color: var(--muted);
  cursor: pointer; padding: 3px 6px; border-radius: 6px; opacity: 0; display: inline-flex; align-items: center; gap: 3px; }
.lista-naglowek:hover .zmien, .lista-naglowek:hover .usun, .lista-naglowek:hover .sortuj { opacity: 1; }
.lista-naglowek .zmien:hover, .lista-naglowek .usun:hover, .lista-naglowek .sortuj:hover { background: var(--line); color: var(--fg); }
/* wlaczone sortowanie widac zawsze: ikona w kolorze akcentu i znak trybu (A-Z, %) */
.lista-naglowek .sortuj.on { opacity: 1; color: var(--accent); }
.lista-naglowek .sortuj .tryb { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.lista.zwinieta .watch { display: none; }
.watch .pusta { display: block; padding: 2px 10px 8px; color: var(--wygaszony); font-size: 0.846rem; cursor: default; }
#wybor-listy { flex: 1; min-width: 0; }
.watch { list-style: none; margin: 0; padding: 0 0 4px; }
/* wiersz: ticker, cena w pelnym kolorze tekstu, zmiana dzienna jako pigulka, menu tylko po najechaniu */
.watch li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 46px auto 64px 16px; gap: 8px; align-items: center;
  padding: 5px 4px 5px 10px; border-radius: 8px; cursor: grab; }
.watch li:hover { background: var(--line); }
.watch li.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.watch li.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.watch li.dragging { opacity: 0.4; }
.watch .wiecej { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 0; width: 16px; line-height: 1; font-size: 1rem; opacity: 0; border-radius: 4px; }
.watch li:hover .wiecej, .watch li.on .wiecej { opacity: 1; }
.watch .wiecej:hover { color: var(--fg); }
@media (hover: none) { .watch .wiecej { opacity: 0.55; } }
.watch .sym { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; line-height: 1.2; }
/* pierwsza linia wiersza: ticker i pigulka notowania przed albo po sesji (PRE +3,0%) */
.watch .tik { display: flex; align-items: center; gap: 6px; min-width: 0; }
.watch .pp { flex: none; font-size: 0.68rem; font-weight: 700; line-height: 1.5; padding: 0 5px; border-radius: 5px;
  background: var(--line); color: var(--muted); letter-spacing: 0.01em; }
.watch .pp:empty { display: none; }
.watch .pp.gora { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.watch .pp.dol { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.watch .wiek { font-size: 0.769rem; font-weight: 400; color: var(--wygaszony); }
.watch .wiek.zywo, #wiek.zywo { color: var(--up); }
.watch .wiek.stare, #wiek.stare { color: var(--wygaszony); }
/* mini wykres 7 sesji; kolor od kierunku pierwsze -> ostatnie zamkniecie */
.watch .iskra { display: block; width: 46px; height: 18px; }
.watch svg.iskra polyline { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.watch svg.iskra.gora polyline { stroke: var(--up); }
.watch svg.iskra.dol polyline { stroke: var(--down); }
.watch .poz { white-space: nowrap; font-size: 0.769rem; font-weight: 600; }
.watch .poz.gora { color: var(--up); } .watch .poz.dol { color: var(--down); }
.watch .px { text-align: right; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.watch .zm { justify-self: end; min-width: 60px; text-align: center; padding: 1px 6px; border-radius: 6px;
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--line); color: var(--muted); }
.watch .zm:empty { background: transparent; }
.watch .zm.gora { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.watch .zm.dol { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.menu-podreczne {
  position: fixed; margin: 0; padding: 4px; min-width: 150px; z-index: 40;
  max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  list-style: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.menu-podreczne li { padding: 7px 9px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.menu-podreczne li:hover { background: var(--line); }
.menu-podreczne li.grupa { color: var(--muted); font-size: 0.846rem; cursor: default; padding: 4px 9px 2px; }
.menu-podreczne li.grupa:hover { background: transparent; }
.menu-podreczne li.grupa[data-wstecz] { cursor: pointer; padding: 7px 9px; }
.menu-podreczne li.grupa[data-wstecz]:hover { background: var(--line); }
.menu-podreczne li.grozna { color: var(--down); }
.plakietka.szara { background: var(--line); color: var(--muted); }
.plakietka.szara.gora { color: var(--up); }
.plakietka.szara.dol { color: var(--down); }
#rozszerzone.on { color: var(--fg); border-color: var(--accent); }
/* tryb gesty: wiersz to jedna linia, pelna nazwa i wiek notowania siedza w dymku */
html.lista-gesto .watch li { padding: 2px 4px 2px 10px; }
html.lista-gesto .watch .sym .pod { display: none; }
html.lista-gesto .lista-tytul { padding: 5px 4px; }
.drop { outline: 1px solid var(--accent); }

/* ---------- pasek wykresu ---------- */
#pasek-wykresu { gap: 12px; }
#tytul { font-weight: 700; font-size: 1.154rem; }
#cena { font-size: 1.154rem; font-weight: 600; }
.grupa { display: flex; gap: 1px; background: var(--bg); border-radius: var(--r-maly); padding: 3px; }
.grupa button { background: transparent; border: 0; border-radius: 6px; color: var(--muted); padding: 3px 9px; cursor: pointer; font: inherit; font-weight: 500; }
.grupa button:hover { color: var(--fg); }
.grupa button.on { background: var(--panel); color: var(--fg); box-shadow: 0 1px 2px rgba(20, 25, 45, 0.14); }
html.motyw-ciemny .grupa button.on { background: var(--line); box-shadow: none; }
#alert-z-wykresu { margin-left: auto; }
#ustawienia-wykresu-stan { color: var(--wygaszony); font-size: 0.846rem; }
button.cichy { color: var(--muted); font-size: 0.846rem; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; }
#alert-pola { display: contents; }
#alert-pola .procent { position: relative; }
#alert-pola .procent::after { content: "%"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#alert-pola .procent input { padding-right: 22px; }
#spolka-form { border-bottom: 1px solid var(--line); }
/* czerwone linie: lista zapisanych warunkow nad wierszem dodawania; spelniona linia na czerwono */
#linie-lista { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; }
#linie-lista:empty { display: none; }
#linie-lista .linia { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
#linie-lista .linia .wynik { color: var(--muted); font-size: 0.846rem; }
#linie-lista .linia.spelniona .wynik, #linie-lista .linia.spelniona .etykieta-linii { color: var(--down); }
#linie-lista .linia .usun { margin-left: auto; }
#linie-symbol:empty { display: none; }
/* znaczek spelnionych czerwonych linii w kolumnie "Od przegladu" tabeli pozycji */
.linie-znaczek { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: var(--down); color: #fff; font-size: 0.769rem; line-height: 1.5; text-align: center; }
td.przeglad .zalegly { color: var(--muted); font-size: 0.769rem; margin-left: 4px; }
#gora-dzisiaj.spokoj .proc { color: var(--muted); }
#gora-dzisiaj.spokoj.uwaga .proc { color: var(--down); }

/* ---------- menu wskaznikow ---------- */
.menu { position: relative; }
.menu-tresc { position: absolute; top: calc(100% + 4px); left: 0; z-index: 15; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-maly); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.menu-tresc label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 3px; cursor: pointer; color: var(--muted); }
.menu-tresc label:hover { background: var(--line); color: var(--fg); }
.menu-tresc label:has(:checked) { color: var(--fg); }

/* ---------- formularze ---------- */
button { background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-maly); padding: 4px 10px; cursor: pointer; font: inherit; font-weight: 500; }
button:hover { color: var(--fg); background: var(--line); }
button.glowny { background: var(--accent); color: #fff; font-weight: 600; padding: 6px 14px; box-shadow: 0 1px 2px rgba(41, 98, 255, 0.3); }
button.glowny:hover { background: #1e4fd8; color: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }
input, select { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-maly); padding: 6px 10px; font: inherit; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--panel); }
form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--line); }
form label { display: flex; align-items: center; gap: 6px; color: var(--muted); }

/* ---------- tabele ---------- */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; user-select: none; z-index: 1; }
th:hover { color: var(--fg); }
th.sort::after { content: " ▾"; }
th.sort.asc::after { content: " ▴"; }
td:first-child, th:first-child { text-align: left; font-weight: 600; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
td.brak { color: var(--wygaszony); }
td.symbol { cursor: pointer; }
td .usun { color: var(--wygaszony); cursor: pointer; }
td .usun:hover { color: var(--down); }

/* ---------- portfel ---------- */
/* panel portfela to jedna przewijana kolumna kart, a nie tabela rozpychana na cala
   wysokosc - przy dziewieciu pozycjach polowa ekranu byla pusta */
.panel[data-panel="portfel"] { display: block; overflow: auto; }
.panel[data-panel="portfel"] > * { margin-bottom: 14px; }
#portfel-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* przelacznik rachunkow nad kaflami portfela; aktywny przycisk wypelniony kolorem akcentu */
#portfel-rachunki { display: flex; gap: 6px; flex-wrap: wrap; }
#portfel-rachunki button { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; background: var(--panel); }
#portfel-rachunki button.aktywny { background: var(--accent); border-color: var(--accent); color: #fff; }
/* naglowek sekcji rachunku w tabelach portfela: nazwa konta i sumy ustawione pod kolumnami */
tr.grupa-rachunku td { background: var(--bg); font-weight: 600; border-top: 2px solid var(--line); }
tr.grupa-rachunku td:first-child { text-align: left; }
tr.grupa-rachunku .ile { margin-left: 8px; font-weight: 400; font-size: 0.846rem; color: var(--muted); }
tbody tr.grupa-rachunku:hover td { background: var(--bg); }
button.gotowka-rachunku { border: 0; border-bottom: 1px dashed currentColor; border-radius: 0; padding: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; }
button.cena-reczna { border: 1px dashed var(--line); border-radius: 4px; padding: 1px 6px; font: inherit; color: inherit; }
#import-mapa { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 0; }
details.karta > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; }
details.karta > summary::-webkit-details-marker { display: none; }
details.karta > summary::before { content: ""; width: 7px; height: 7px; margin: 0 4px 2px 2px; border-right: 2px solid var(--wygaszony); border-bottom: 2px solid var(--wygaszony);
  transform: rotate(-45deg); transition: transform 0.12s; }
details.karta[open] > summary::before { transform: rotate(45deg); margin-bottom: 5px; }
details.karta[open] > summary { border-bottom: 1px solid var(--line); }
details.karta > summary:hover .karta-tytul { color: var(--accent); }
#portfel-dane td.symbol, #zamkniete-dane td.symbol { line-height: 1.25; }
td .pelna { display: block; font-weight: 400; font-size: 0.77rem; color: var(--muted);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.udzial { color: var(--muted); }
.paski { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 12px; }
.paski h4 { margin: 0 0 6px; font-size: 0.846rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pasek { display: grid; grid-template-columns: 108px 1fr 58px; gap: 8px; align-items: center; padding: 3px 0; font-size: 0.923rem; }
.pasek .nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasek .tor { display: block; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.pasek .slupek { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.pasek.duzy .slupek { background: var(--down); }
.pasek .proc { text-align: right; color: var(--muted); }
#transakcje-dane, #zamkniete-dane { display: table; }
#transakcje-lista > table { display: block; max-height: 420px; overflow: auto; }

/* naglowek kolumny z objasnieniem: kropkowane podkreslenie i kursor pomocy */
th.z-opisem { text-decoration: underline dotted var(--wygaszony); text-underline-offset: 3px; cursor: help; }

/* ---------- logowanie ---------- */
#logowanie { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--welon); }
#logowanie-form { flex-direction: column; align-items: stretch; gap: 12px; width: 320px; padding: 28px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); }
#logowanie-form .marka { justify-content: center; font-size: 1.308rem; margin-bottom: 4px; }
#logowanie-form input { padding: 9px 10px; font-size: 1.077rem; }
#logowanie-form button { padding: 8px 12px; }
#logowanie-blad { min-height: 1.4em; text-align: center; font-size: 0.923rem; }
body.zablokowana > :not(#logowanie) { filter: blur(3px); pointer-events: none; }

/* ---------- zakresy czasu, motyw, nazwy spolek ---------- */
#zakresy button { min-width: 26px; }
#motyw { color: var(--muted); display: flex; align-items: center; padding: 4px 6px; }
#motyw:hover { color: var(--fg); }
#tytul-nazwa { color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch .sym .pod { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.watch .pelna { font-size: 0.77rem; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* wiek notowania ustepuje miejsca nazwie albo wynikowi pozycji: skraca sie wielokropkiem */
.watch .wiek { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch .pelna, .watch .poz { flex: 0 1 auto; }
#szukaj-wyniki .pelna { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skala-podglad { color: var(--muted); }

/* ---------- powiadomienia w ustawieniach ---------- */
#ust-powiadomienia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; padding: 12px; }
.powiadomienie { border: 1px solid var(--line); border-radius: var(--r-maly); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.powiadomienie .przelacznik { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.powiadomienie .przelacznik .nazwa { font-weight: 600; }
.powiadomienie .opis { margin: 0; }
.powiadomienie .przyklad { margin: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-maly); font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; color: var(--fg); }
.powiadomienie .test { align-self: flex-start; }
.powiadomienie:has(input:not(:checked)) .opis, .powiadomienie:has(input:not(:checked)) .przyklad { opacity: 0.5; }

/* ---------- import z XTB ---------- */
/* import i ustawienia to przewijane kolumny kart, jak portfel: siatka rozciagnieta na 100%
   wysokosci z overflow: hidden w #tresc ucinala dol ustawien (digest, zrodla, wylogowanie) */
.panel[data-panel="import"], .panel[data-panel="ustawienia"] { display: block; overflow: auto; }
.panel[data-panel="ustawienia"] .karta.rozciagnij { height: auto; }
#import-xtb form { border-bottom: 0; }
#import-wynik { max-height: 300px; overflow: auto; padding: 0 12px 12px; }
#import-wynik .glowne { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 0 8px; }
#import-wynik table { margin-top: 6px; }
#import-wynik .uwaga { color: var(--down); }

/* ---------- brak polaczenia ---------- */
#pasek-offline { position: fixed; top: 52px; left: 0; right: 0;
  z-index: 50; background: var(--down); color: #fff; text-align: center;
  padding: 6px 10px; font-size: 0.867rem; }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  /* minmax(0, 1fr): kolumna nie moze rosnac od min-content dzieci (pole szukania z domyslna
     szerokoscia inputa rozpychalo naglowek do 443 px i ucinalo dolny pasek zakladek) */
  body { height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px 1fr 54px;
    overscroll-behavior-y: none; }
  body.szyna-szeroka { grid-template-columns: minmax(0, 1fr); }
  #gora { padding: 0 10px; gap: 8px; min-width: 0; }
  #szukaj-pole input { width: 100%; }
  /* pole szukania musi umiec sie skurczyc, inaczej wypycha pasek poza ekran
     i cala strona dostaje poziomy overflow: ucieta os wykresu i ikony po prawej */
  #szukaj-pole { min-width: 0; }
  .gora-prawo { gap: 8px; }
  /* w pasku telefonu miejsca starcza na sam procent dnia; kwota i wartosc portfela
     siedza w widoku Portfel, ktory otwiera klikniecie w ten procent */
  #gora .pion, #gora .para .etykieta, #gora-portfel, #gora-dzisiaj .kwota { display: none; }
  #gora .para { padding: 4px; }
  #szukaj-pole { width: auto; flex: 1; }
  #szukaj-pole kbd { display: none; }
  #stan-tekst { display: none; }
  #stan .kropka { width: 9px; height: 9px; }

  /* szyna staje sie dolnym paskiem zakladek */
  #szyna { grid-row: 3; grid-column: 1; flex-direction: row; justify-content: space-around; align-items: center;
    padding: 4px 6px; border-right: 0; border-top: 1px solid var(--line); }
  body.szyna-szeroka #szyna { align-items: center; padding: 4px 6px; }
  #szyna button, body.szyna-szeroka #szyna button { flex: 1 1 0; min-width: 0; width: auto; max-width: 56px; height: 42px; padding: 0; justify-content: center; }
  #szyna button.na-dole { margin-top: 0; }
  #szyna-przelacz, #szyna .nazwa, body.szyna-szeroka #szyna .nazwa { display: none !important; }
  #szyna .plakietka, body.szyna-szeroka #szyna .plakietka { position: absolute; top: 2px; right: 4px; margin: 0; }

  #tresc { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .panel, .panel[data-panel="pulpit"], .panel:not([data-panel="pulpit"]) { display: flex; flex-direction: column; height: auto; min-height: 100%; padding: 10px; gap: 10px; }
  .karta.rozciagnij { height: auto; }
  .panel[data-panel="kalendarz"] { display: flex; }
  #fundamenty-wykres-tlo { height: 200px; }
  #fundamenty-komunikaty .wiersz { grid-template-columns: 80px 60px 1fr; }
  .karta.rozciagnij .przewijak { max-height: 60vh; }
  #portfel-kafle { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel[data-panel="portfel"] > * { margin-bottom: 10px; }
  td .pelna { display: none; }
  .kafel { padding: 10px 12px; }
  .kafel .duza { font-size: 1.308rem; }
  #pulpit-srodek { display: flex; flex-direction: column; }
  #karta-wykres { flex: none; }
  #wykres-obszar { height: 55vh; flex: none; }
  #karta-watch { max-height: none; }
  #listy { overflow: visible; }
  .lista-naglowek .zmien, .lista-naglowek .usun, .lista-naglowek .sortuj { opacity: 1; }
  .lista-tytul { padding: 10px 4px; }
  .watch li { padding: 8px 4px 8px 10px; }
  html.lista-gesto .watch li { padding: 5px 4px 5px 10px; grid-template-columns: 1fr auto 64px 16px; }
  html.lista-gesto .watch .iskra { display: none; }

  #pasek-wykresu { gap: 6px; padding: 6px 8px; }
  #tytul, #cena { font-size: 1.077rem; }
  #alert-z-wykresu { margin-left: 0; }
  #ustawienia-wykresu-stan { display: none; }
  .grupa button { padding: 4px 7px; }
  .menu-tresc { left: auto; right: 0; }

  .przewijak { overflow-x: auto; }
  th, td { padding: 6px 8px; }
  form { padding: 8px; gap: 6px; }
  form input:not([type=date]), form select { flex: 1 1 40%; }
  form .etykieta { flex-basis: 100%; }
  #logowanie-form { width: 90%; }
  .paski { grid-template-columns: 1fr; }
  .wiersz.zrodlo { grid-template-columns: 1fr 1fr; }
}
/* przycisk "Przejrzano" w tabeli pozycji: dyskretny, widoczny w pelni po najechaniu na wiersz */
td.przeglad { white-space: nowrap; }
td.przeglad .przejrzano { border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 3px; cursor: pointer; padding: 0 5px; margin-left: 6px; font-size: 0.8rem; line-height: 1.4; opacity: 0.55; }
td.przeglad .przejrzano:hover, tr:hover td.przeglad .przejrzano { opacity: 1; color: var(--accent); border-color: var(--accent); }