/* rolnik.coreinfra.eu — arkusz podstawowy
   Jasny i ciemny motyw sterowany preferencją systemu.
   Bez zewnętrznych fontów: pierwsze wyświetlenie ma być natychmiastowe. */

:root {
    --tlo:          #fbfaf6;
    --tlo-karty:    #ffffff;
    --tlo-pasek:    #1f3a24;
    --tekst:        #1c2118;
    --tekst-slaby:  #5d6657;
    --linia:        #e3e1d6;
    --akcent:       #3f7d3f;
    --akcent-jasny: #eef4ea;
    --zboze:        #c9a227;
    --promien:      10px;
    --szer:         1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tlo:          #14170f;
        --tlo-karty:    #1c2018;
        --tlo-pasek:    #101a11;
        --tekst:        #e8e9e2;
        --tekst-slaby:  #9aa392;
        --linia:        #2c3226;
        --akcent:       #7bb96f;
        --akcent-jasny: #1e2a1c;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.srodek {
    max-width: var(--szer);
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--akcent); }

/* ── Pasek górny ───────────────────────────────────────────────────────── */

.pasek {
    background: var(--tlo-pasek);
    border-bottom: 3px solid var(--zboze);
}

.pasek .srodek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 16px;
}

.logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.logo span { color: var(--zboze); font-weight: 400; }

.pasek nav { display: flex; gap: 22px; }

.pasek nav a {
    color: #d7ded2;
    text-decoration: none;
    font-size: 0.95rem;
}

.pasek nav a:hover { color: #fff; text-decoration: underline; }

/* ── Treść ─────────────────────────────────────────────────────────────── */

main { padding-block: 40px 64px; }

h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

h2 { font-size: 1.35rem; margin: 40px 0 16px; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }

.lead { font-size: 1.1rem; max-width: 62ch; color: var(--tekst-slaby); }
.lead strong { color: var(--tekst); }

.uwaga {
    margin-top: 24px;
    padding: 14px 16px;
    background: var(--akcent-jasny);
    border-left: 3px solid var(--akcent);
    border-radius: 0 var(--promien) var(--promien) 0;
    font-size: 0.95rem;
    max-width: 62ch;
}

/* ── Kafle rynków ──────────────────────────────────────────────────────── */

.siatka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.kafel {
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 18px 20px;
}

.kafel p { margin: 0; color: var(--tekst-slaby); font-size: 0.9rem; }

.kafel--nieaktywny { opacity: 0.7; }

.wkrotce {
    display: inline-block;
    margin-top: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--akcent-jasny);
    color: var(--akcent);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Stopka ────────────────────────────────────────────────────────────── */

.stopka {
    border-top: 1px solid var(--linia);
    padding-block: 28px 40px;
    font-size: 0.85rem;
    color: var(--tekst-slaby);
}

.stopka .zrodla { max-width: 70ch; margin: 0 0 14px; }

/* Linki wymiany: zwykłe znaczniki <a>, renderowane po stronie serwera. */
.footer-links {
    margin: 14px 0;
    padding-top: 14px;
    border-top: 1px dashed var(--linia);
    line-height: 2;
}

.footer-links a { color: var(--tekst-slaby); text-decoration: none; margin-right: 14px; }
.footer-links a:hover { color: var(--akcent); text-decoration: underline; }

.prawa { margin: 0; }

/* ── Strona błędu ──────────────────────────────────────────────────────── */

.strona-bledu main { text-align: center; padding-block: 90px; }

.strona-bledu .kod {
    font-size: 4rem;
    font-weight: 700;
    color: var(--zboze);
    margin: 0;
    line-height: 1;
}

.strona-bledu .szczegoly {
    text-align: left;
    max-width: 100%;
    overflow-x: auto;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 16px;
    font-size: 0.8rem;
}

.powrot { display: inline-block; margin-top: 20px; }

/* Szerokie tabele i wykresy nigdy nie rozpychają strony. */
table { width: 100%; border-collapse: collapse; }
.przewijane { overflow-x: auto; }
img, svg { max-width: 100%; height: auto; }

/* ── Strony cenowe ─────────────────────────────────────────────────────── */

.okruchy {
    font-size: 0.85rem;
    color: var(--tekst-slaby);
    margin-bottom: 14px;
}

.okruchy a { color: var(--tekst-slaby); }

.pusto {
    padding: 20px;
    background: var(--akcent-jasny);
    border-radius: var(--promien);
    max-width: 62ch;
}

.kafel h3 a { color: var(--tekst); text-decoration: none; }
.kafel h3 a:hover { color: var(--akcent); text-decoration: underline; }

.kafel-cena { margin: 8px 0 4px !important; color: var(--tekst) !important; }
.kafel-cena strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.kafel-cena .jedn { font-size: 0.85rem; color: var(--tekst-slaby); }
.kafel-meta { font-size: 0.8rem !important; }

.kafel--link {
    display: block;
    text-decoration: none;
    color: var(--tekst);
}

.kafel--link:hover { border-color: var(--akcent); }
.kafel--link strong { display: block; margin-bottom: 4px; }
.kafel--link span { font-size: 0.88rem; color: var(--tekst-slaby); }

.siatka--linki { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Kafel z liczbą — jedna wartość nie potrzebuje wykresu. */
.cena-glowna {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    margin: 24px 0;
}

.kafel-stat {
    flex: 1 1 280px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 20px 22px;
}

.kafel-stat--waski { max-width: 360px; margin: 20px 0; }

.kafel-stat .etykieta,
.kafel-iskra .etykieta {
    margin: 0 0 6px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tekst-slaby);
}

.kafel-stat .liczba {
    margin: 0;
    font-size: clamp(2.2rem, 6vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.kafel-stat .liczba .jedn {
    font-size: 1rem;
    font-weight: 400;
    color: var(--tekst-slaby);
    letter-spacing: 0;
}

.kafel-stat .okres { margin: 6px 0 0; font-size: 0.88rem; color: var(--tekst-slaby); }

/* Kierunek niesie strzałka, nie kolor.
   Zielony spadek / czerwony wzrost to konwencja giełdowa kupującego. Rolnik
   sprzedaje — dla niego wzrost ceny jest dobry. Skoro ten sam znak znaczy
   przeciwne rzeczy dla dwóch stron rynku, nie barwimy go wcale. */
.zmiana { margin: 12px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--tekst); }
.zmiana--bez-zmian { color: var(--tekst-slaby); }

.kafel-iskra {
    flex: 0 1 260px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.opis-produktu { max-width: 62ch; color: var(--tekst-slaby); }

/* ── Zakładki wariantów ────────────────────────────────────────────────── */

.zakladki {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}

.zakladka {
    padding: 7px 14px;
    border: 1px solid var(--linia);
    border-radius: 999px;
    background: var(--tlo-karty);
    color: var(--tekst-slaby);
    text-decoration: none;
    font-size: 0.88rem;
}

.zakladka:hover { border-color: var(--akcent); color: var(--akcent); }

.zakladka--aktywna {
    background: var(--akcent);
    border-color: var(--akcent);
    color: #fff;
    font-weight: 600;
}

/* ── Wykresy (SVG z serwera) ───────────────────────────────────────────── */

.wykres {
    margin: 24px 0 8px;
    padding: 16px 8px 8px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.plotno { display: block; width: 100%; height: auto; }

/* Siatka i osie mają być tłem, nie treścią. */
.plotno .siatka { stroke: var(--linia); stroke-width: 1; }

.plotno .etykieta-y,
.plotno .etykieta-x,
.plotno .jednostka,
.plotno .wartosc-slupka {
    fill: var(--tekst-slaby);
    font: 11px/1 system-ui, sans-serif;
}

.plotno .wartosc-slupka { fill: var(--tekst); font-weight: 600; font-variant-numeric: tabular-nums; }
.plotno .jednostka { font-size: 10px; }

.plotno .linia { fill: none; stroke-width: 2; }
.plotno .punkt { stroke: var(--tlo-karty); stroke-width: 2; }

.plotno .seria-1 { stroke: #2a78d6; }
.plotno circle.seria-1 { fill: #2a78d6; }
.plotno .seria-2 { stroke: #eb6834; }
.plotno circle.seria-2 { fill: #eb6834; }
.plotno .slupek { fill: #2a78d6; }

@media (prefers-color-scheme: dark) {
    .plotno .seria-1 { stroke: #3987e5; }
    .plotno circle.seria-1 { fill: #3987e5; }
    .plotno .seria-2 { stroke: #d95926; }
    .plotno circle.seria-2 { fill: #d95926; }
    .plotno .slupek { fill: #3987e5; }
}

.legenda { margin: 0 8px 10px; font-size: 0.88rem; color: var(--tekst-slaby); }

.klucz {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin: 0 6px 0 14px;
    vertical-align: baseline;
}

.legenda .klucz:first-child { margin-left: 0; }
.klucz--1 { background: #2a78d6; }
.klucz--2 { background: #eb6834; }

@media (prefers-color-scheme: dark) {
    .klucz--1 { background: #3987e5; }
    .klucz--2 { background: #d95926; }
}

.iskra { width: 100%; height: 46px; }
.iskra polyline { fill: none; stroke: #2a78d6; stroke-width: 2; vector-effect: non-scaling-stroke; }

@media (prefers-color-scheme: dark) {
    .iskra polyline { stroke: #3987e5; }
}

.pusto-wykres {
    margin: 24px 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--tekst-slaby);
    background: var(--tlo-karty);
    border: 1px dashed var(--linia);
    border-radius: var(--promien);
}

/* ── Tabela z danymi wykresu ───────────────────────────────────────────── */

.dane-wykresu { margin: 0 0 28px; font-size: 0.9rem; }

.dane-wykresu summary {
    cursor: pointer;
    color: var(--akcent);
    padding: 6px 0;
}

.dane-wykresu table { margin-top: 8px; font-variant-numeric: tabular-nums; }

.dane-wykresu th,
.dane-wykresu td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--linia);
}

.dane-wykresu th { color: var(--tekst-slaby); font-weight: 600; font-size: 0.82rem; }
.dane-wykresu td:last-child, .dane-wykresu th:last-child { text-align: right; }

.podsumowanie { max-width: 70ch; }

/* ── Atrybucja źródeł ──────────────────────────────────────────────────── */

.zrodla-danych {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--linia);
    font-size: 0.88rem;
    color: var(--tekst-slaby);
}

.zrodla-danych h2 { font-size: 0.95rem; margin: 0 0 8px; }
.zrodla-danych ul { margin: 0; padding-left: 20px; }

/* ── Kafel z trendem na liście produktów ───────────────────────────────── */

.kafel-liczby {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.kafel-liczby .kafel-cena { margin: 0 !important; }

/* Iskra dostaje resztę szerokości kafla, ale nigdy więcej niż połowę —
   liczba jest ważniejsza od kształtu. */
.kafel-iskra-mini {
    flex: 0 1 46%;
    min-width: 0;
    opacity: 0.85;
}

.kafel-iskra-mini .iskra { height: 30px; }

.kafel-zmiana {
    margin: 8px 0 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: var(--tekst) !important;
}

.kafel-zmiana .drobne { font-weight: 400; color: var(--tekst-slaby); }

/* ── Prognoza ──────────────────────────────────────────────────────────── */

.kafel-stat--prognoza { border-left: 4px solid #2a78d6; }
.kafel-stat--blad     { flex: 0 1 300px; }

.liczba--mala { font-size: clamp(1.6rem, 4vw, 2.1rem) !important; }

.przedzial { margin: 10px 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.przedzial .objasnienie { display: block; font-size: 0.8rem; color: var(--tekst-slaby); margin-top: 2px; }

.komentarz {
    margin: 32px 0;
    padding: 20px 22px;
    background: var(--akcent-jasny);
    border-radius: var(--promien);
    max-width: 70ch;
}

.komentarz h2 { margin-top: 0; font-size: 1.05rem; }
.komentarz p { margin: 0 0 10px; }
.komentarz .metka { font-size: 0.8rem; color: var(--tekst-slaby); margin: 0; }

.jak-liczone { margin-top: 40px; max-width: 70ch; }
.jak-liczone p { color: var(--tekst-slaby); }

.ostrzezenie {
    padding: 14px 16px;
    border-left: 3px solid var(--zboze);
    background: var(--tlo-karty);
    border-radius: 0 var(--promien) var(--promien) 0;
    color: var(--tekst) !important;
}

/* ── Formularz alertu ──────────────────────────────────────────────────── */

.formularz-alertu { max-width: 520px; }

.pole { margin-bottom: 22px; border: 0; padding: 0; }

.pole > label, .pole legend {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    padding: 0;
}

.pole input[type="text"],
.pole input[type="email"],
.pole input[type="number"],
.pole select {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--tekst);
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.pole input:focus, .pole select:focus {
    outline: 2px solid var(--akcent);
    outline-offset: 1px;
}

.pole-z-jednostka { display: flex; align-items: center; gap: 10px; }
.pole-z-jednostka input { max-width: 120px; }
.pole-z-jednostka span { color: var(--tekst-slaby); }

/* Wyższa swoistość niż `.pole > label`, inaczej etykiety opcji dziedziczą
   pogrubienie przeznaczone dla nagłówka pola. */
.pole > label.wybor, .wybor { display: block; font-weight: 400; margin: 5px 0; cursor: pointer; }
.wybor input { margin-right: 8px; }

.podpowiedz { font-size: 0.85rem; color: var(--tekst-slaby); margin: 6px 0 0; }

.przycisk {
    display: inline-block;
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--akcent);
    border: 0;
    border-radius: var(--promien);
    cursor: pointer;
    text-decoration: none;
}

.przycisk:hover { filter: brightness(1.1); }

.drobny-druk { font-size: 0.82rem; color: var(--tekst-slaby); margin-top: 20px; max-width: 62ch; }

/* Pułapka na roboty — musi być niewidoczna, ale nie przez display:none,
   bo część botów pomija pola tak ukryte. */
.pulapka {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.komunikat {
    padding: 14px 16px;
    border-radius: var(--promien);
    max-width: 62ch;
}

.komunikat--ok   { background: var(--akcent-jasny); border-left: 3px solid var(--akcent); }
.komunikat--blad { background: var(--tlo-karty); border-left: 3px solid #b64a12; }

/* ── Filtry listy cen ──────────────────────────────────────────────────── */

.filtry {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 24px 0 18px;
    padding: 16px 18px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.filtr { display: flex; flex-direction: column; gap: 5px; }
.filtr--szukaj { flex: 1 1 260px; }

.filtr label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tekst-slaby);
}

.filtry input, .filtry select {
    padding: 9px 11px;
    font: inherit;
    color: var(--tekst);
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.filtry input:focus, .filtry select:focus { outline: 2px solid var(--akcent); outline-offset: 1px; }
.filtr--przycisk { flex-direction: row; align-items: center; gap: 12px; }
.wyczysc { font-size: 0.85rem; color: var(--tekst-slaby); }

.wynik-licznik { color: var(--tekst-slaby); font-size: 0.9rem; margin: 0 0 8px; }
.kafel-rynek { font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 2px !important; }

/* ── Stronicowanie ─────────────────────────────────────────────────────── */

.stronicowanie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 32px 0 8px;
}

.stronicowanie a, .stronicowanie .teraz {
    display: inline-block;
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    text-decoration: none;
}

.stronicowanie a { background: var(--tlo-karty); color: var(--tekst); }
.stronicowanie a:hover { border-color: var(--akcent); color: var(--akcent); }

.stronicowanie .teraz {
    background: var(--akcent);
    border-color: var(--akcent);
    color: #fff;
    font-weight: 600;
}

.stronicowanie .wielokropek { padding: 0 4px; color: var(--tekst-slaby); }

/* ── Rankingi ──────────────────────────────────────────────────────────── */

.rankingi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    margin-top: 8px;
}

.ranking h2 { margin-top: 0; font-size: 1.1rem; }

.tabela-rankingu { font-size: 0.92rem; }

.tabela-rankingu th, .tabela-rankingu td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--linia);
    text-align: left;
    vertical-align: top;
}

.tabela-rankingu th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tekst-slaby); }
.tabela-rankingu .miejsce { width: 2.2rem; color: var(--tekst-slaby); font-variant-numeric: tabular-nums; }
.tabela-rankingu .liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-rankingu .mocno { font-weight: 700; }
.tabela-rankingu a { text-decoration: none; font-weight: 600; }
.tabela-rankingu a:hover { text-decoration: underline; }
.tabela-rankingu .drobne { color: var(--tekst-slaby); font-weight: 400; font-size: 0.8rem; }

/* ── Porównania ────────────────────────────────────────────────────────── */

.lista-par { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.lista-par li { break-inside: avoid; margin-bottom: 6px; }
.lista-par .kontra { color: var(--tekst-slaby); font-style: italic; }

@media (max-width: 700px) { .lista-par { columns: 1; } }

/* Kafle porównania noszą kolor swojej serii na wykresie — inaczej trzeba by
   zgadywać, która liczba należy do której linii. */
.kafel-stat--a { border-left: 4px solid #2a78d6; }
.kafel-stat--b { border-left: 4px solid #eb6834; }

@media (prefers-color-scheme: dark) {
    .kafel-stat--a { border-left-color: #3987e5; }
    .kafel-stat--b { border-left-color: #d95926; }
}

.kafel-stat .etykieta .klucz { margin-left: 0; margin-right: 7px; }

/* ── Fakty policzone z danych (hub produktu) ───────────────────────────────
   Pasmo roczne to jedna oś, nie wykres: pokazuje położenie jednej wartości
   w znanym przedziale. Rysowanie tego jako wykresu dodałoby drugą oś tam,
   gdzie jest tylko jedna liczba. */

.fakty {
    margin: 28px 0;
    padding: 20px 22px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    max-width: 70ch;
}

.fakty h2 { margin: 0 0 16px; font-size: 1.05rem; }

.pasmo { margin: 0 0 18px; }

.pasmo-skala {
    position: relative;
    height: 8px;
    border-radius: 4px;
    /* Od minimum do maksimum: jeden odcień, jaśniej tam, gdzie taniej.
       Dwa kolory sugerowałyby, że któryś koniec jest dobry — a to zależy
       od tego, czy ktoś kupuje, czy sprzedaje. */
    background: linear-gradient(to right, var(--akcent-jasny), var(--akcent));
}

.pasmo-znacznik {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 16px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--tekst);
    box-shadow: 0 0 0 2px var(--tlo-karty);
}

.pasmo-mediana {
    position: absolute;
    top: 0;
    width: 2px;
    height: 8px;
    margin-left: -1px;
    background: var(--tlo-karty);
    opacity: 0.85;
}

.pasmo-opisy {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--tekst-slaby);
    font-variant-numeric: tabular-nums;
}

/* Podpis mediany siedzi nad swoją wartością na osi, nie w połowie wiersza. */
.pasmo-srodek {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.lista-faktow { margin: 0; padding-left: 18px; }
.lista-faktow li { margin-bottom: 8px; line-height: 1.55; }

.fakty .metka {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: var(--tekst-slaby);
}

/* ── Strona 404 z podpowiedziami ───────────────────────────────────────────
   Lista jest krótka i klikalna: człowiek trafia tu z literówki albo starego
   linku i ma stąd wyjść w jedno kliknięcie, a nie zacząć szukania od zera. */

.lista-podpowiedzi { list-style: none; padding: 0; margin: 0 0 28px; max-width: 60ch; }

.lista-podpowiedzi li {
    padding: 10px 14px;
    margin-bottom: 6px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.lista-podpowiedzi a { font-weight: 600; }

.lista-rynkow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lista-rynkow a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--tlo-karty);
    border: 1px solid var(--linia);
    border-radius: 999px;
    font-size: 0.9rem;
}

/* Data danych w stopce. Wyróżniona dopiero wtedy, gdy dane się zestarzały —
   stała ramka wokół normalnego stanu uczy czytelnika ją ignorować. */
.swiezosc { margin: 0 0 10px; font-size: 0.9rem; }

.swiezosc--stara {
    padding: 8px 12px;
    border-left: 3px solid var(--zboze);
    background: var(--tlo-karty);
    border-radius: 0 var(--promien) var(--promien) 0;
}