/* ============================================================
   Miastoo.pl — style platformy ogłoszeniowej
   ============================================================ */

:root {
    --kolor-glowny: #2f6fed;
    --kolor-glowny-ciemny: #1f55c0;
    --kolor-akcent: #11b886;
    --tlo: #f4f6f9;
    --tekst: #2a3340;
    --tekst-jasny: #6b7785;
    --obramowanie: #e2e7ee;
    --biel: #ffffff;
    --cien: 0 2px 10px rgba(20, 40, 80, 0.06);
    --cien-hover: 0 8px 24px rgba(20, 40, 80, 0.12);
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--tlo);
    color: var(--tekst);
    line-height: 1.6;
}

a { color: var(--kolor-glowny); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.25; }

.kontener { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- Nagłówek / pasek górny --- */
.topbar { background: var(--biel); box-shadow: var(--cien); position: sticky; top: 0; z-index: 1000; }
.topbar-inner { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
.logo { font-size: 1.6em; font-weight: 800; color: var(--tekst); flex-shrink: 0; overflow-wrap: anywhere; line-height: 1.1; }
.logo span { color: var(--kolor-glowny); }
.logo:hover { text-decoration: none; }
.logo-lokalna { font-size: 1.12em; max-width: 42vw; }

.szukajka-wrapper { position: relative; flex: 1; max-width: 560px; }
.szukajka { display: flex; width: 100%; }
.szukajka input {
    flex: 1; padding: 10px 14px; border: 1px solid var(--obramowanie);
    border-right: none; border-radius: 8px 0 0 8px; font-size: 0.95em; outline: none;
}
.szukajka input:focus { border-color: var(--kolor-glowny); }
.szukajka button {
    background: var(--kolor-glowny); color: #fff; border: none;
    padding: 0 18px; border-radius: 0 8px 8px 0; cursor: pointer; font-size: 1em;
}
.szukajka button:hover { background: var(--kolor-glowny-ciemny); }

/* Autocomplete styles */
.autocomplete-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border: 1px solid var(--obramowanie); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1000; display: none;
    max-height: 400px; overflow-y: auto; margin-top: 6px; padding: 8px 0;
}
.autocomplete-title {
    padding: 8px 16px; font-size: 0.75em; text-transform: uppercase;
    color: var(--tekst-jasny); font-weight: 700; letter-spacing: 0.5px;
}
.autocomplete-item {
    display: flex; gap: 14px; align-items: center; padding: 10px 16px;
    text-decoration: none; color: var(--tekst); transition: background 0.2s ease, padding-left 0.2s ease;
}
.autocomplete-item:hover { background: #f8fafc; padding-left: 20px; text-decoration: none; }
.autocomplete-item img {
    width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); flex-shrink: 0;
}
.autocomplete-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.autocomplete-item-title { font-weight: 600; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.autocomplete-item-price { font-weight: 700; color: var(--kolor-glowny); font-size: 0.9em; }
.highlight { color: var(--kolor-glowny); font-weight: 800; }

.user-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.link-profil, .link-wyloguj, .link-admin { color: var(--tekst); font-weight: 600; white-space: nowrap; }
.link-wyloguj { color: var(--tekst-jasny); font-weight: 500; }
.link-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #bfd0ee;
    border-radius: 8px;
    background: #eef4ff;
    color: var(--kolor-glowny);
    font-size: .9em;
}
.link-admin:hover { text-decoration: none; border-color: #8fb0ed; background: #e3edff; }
.admin-badge,
.profil-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid #b8c9e8;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--kolor-glowny);
    font-size: .74em;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}
.profil-role-badge {
    margin-left: 8px;
    font-size: .42em;
    transform: translateY(-2px);
}
.link-wiadomosci { position: relative; color: var(--tekst); font-size: 1.1em; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f1f5f9; transition: background 0.2s; }
.link-wiadomosci:hover { background: #e2e8f0; text-decoration: none; }
.badge-nieprzeczytane { position: absolute; top: -4px; right: -4px; background: var(--kolor-akcent); color: #fff; font-size: 0.7em; font-weight: bold; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }

/* Chat Styles */
.wiadomosci-layout { display: flex; gap: 20px; height: calc(100vh - 120px); min-height: 500px; margin-top: 20px; background: #fff; border-radius: 12px; border: 1px solid var(--obramowanie); overflow: hidden; }
.wiadomosci-sidebar { width: 320px; border-right: 1px solid var(--obramowanie); display: flex; flex-direction: column; background: #f8fafc; }
.wiadomosci-sidebar-header { padding: 16px; font-weight: bold; font-size: 1.1em; border-bottom: 1px solid var(--obramowanie); background: #fff; }
.wiadomosci-lista { flex: 1; overflow-y: auto; }
.rozmowca-item { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--obramowanie); text-decoration: none; color: var(--tekst); transition: background 0.2s; cursor: pointer; }
.rozmowca-item:hover, .rozmowca-item.aktywny { background: #fff; text-decoration: none; }
.rozmowca-item.aktywny { border-left: 4px solid var(--kolor-glowny); }
.rozmowca-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--kolor-glowny); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em; flex-shrink: 0; }
.rozmowca-info { flex: 1; min-width: 0; }
.rozmowca-nazwa { font-weight: bold; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; }
.rozmowca-ostatnia { font-size: 0.85em; color: var(--tekst-jasny); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiadomosci-chat { flex: 1; display: flex; flex-direction: column; background: #fff; }
.chat-header { padding: 16px 20px; border-bottom: 1px solid var(--obramowanie); display: flex; align-items: center; gap: 12px; font-weight: bold; font-size: 1.1em; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; background: #f8fafc; }
.wiadomosc-dymek { max-width: 70%; padding: 12px 16px; border-radius: 16px; position: relative; line-height: 1.4; }
.wiadomosc-ja { align-self: flex-end; background: var(--kolor-glowny); color: #fff; border-bottom-right-radius: 4px; }
.wiadomosc-on { align-self: flex-start; background: #fff; border: 1px solid var(--obramowanie); border-bottom-left-radius: 4px; }
.wiadomosc-zdjecie { max-width: 100%; border-radius: 8px; margin-top: 8px; cursor: pointer; }
.wiadomosc-czas { font-size: 0.75em; opacity: 0.7; margin-top: 4px; display: block; text-align: right; }
.wiadomosc-ja .wiadomosc-czas { color: rgba(255,255,255,0.8); }
.wiadomosc-on .wiadomosc-czas { color: var(--tekst-jasny); }
.chat-input-area { padding: 16px; border-top: 1px solid var(--obramowanie); background: #fff; display: flex; gap: 12px; align-items: flex-end; }
.chat-input-wrapper { flex: 1; display: flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 20px; padding: 8px 16px; border: 1px solid transparent; transition: border-color 0.2s; }
.chat-input-wrapper:focus-within { border-color: var(--kolor-glowny); background: #fff; }
.chat-textarea { flex: 1; border: none; background: transparent; outline: none; resize: none; max-height: 100px; padding: 4px 0; font-family: inherit; font-size: 0.95em; }
.btn-upload { color: var(--tekst-jasny); cursor: pointer; font-size: 1.2em; padding: 4px; transition: color 0.2s; }
.btn-upload:hover { color: var(--kolor-glowny); }
.btn-send { background: var(--kolor-glowny); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1em; transition: background 0.2s; flex-shrink: 0; }
.btn-send:hover { background: var(--kolor-glowny-ciemny); }
.puste-wiadomosci { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--tekst-jasny); }
.puste-wiadomosci i { font-size: 3em; margin-bottom: 16px; opacity: 0.5; }
.zdjecie-preview { position: relative; display: inline-block; margin-bottom: 8px; }
.zdjecie-preview img { max-width: 100px; border-radius: 8px; border: 1px solid var(--obramowanie); }
.zdjecie-preview .usun-zdjecie { position: absolute; top: -6px; right: -6px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7em; }

@media (max-width: 768px) {
    .wiadomosci-layout { flex-direction: column; height: calc(100vh - 80px); margin-top: 0; border-radius: 0; border: none; }
    .wiadomosci-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--obramowanie); }
    .wiadomosci-layout.w-chacie .wiadomosci-sidebar { display: none; }
    .wiadomosci-layout:not(.w-chacie) .wiadomosci-chat { display: none; }
    .btn-back-chat { display: flex; align-items: center; gap: 8px; font-size: 0.9em; font-weight: normal; color: var(--tekst-jasny); cursor: pointer; margin-right: 8px; }
}

.przycisk {
    display: inline-block; background: var(--kolor-glowny); color: #fff !important;
    padding: 9px 16px; border-radius: 8px; font-weight: 700; border: none;
    cursor: pointer; font-size: 0.95em; transition: background .2s;
}
.przycisk:hover { background: var(--kolor-glowny-ciemny); text-decoration: none; }
.przycisk-dodaj { background: var(--kolor-akcent); }
.przycisk-dodaj:hover { background: #0e9d72; }
.przycisk-pelny { display: block; width: 100%; text-align: center; }
.przycisk-duzy { padding: 14px; font-size: 1.05em; }

/* --- Nawigacja kategorii --- */
.glowna-nawigacja { border-top: 1px solid var(--obramowanie); background: var(--biel); }
.glowna-nawigacja ul {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 4px;
    overflow-x: auto; white-space: nowrap; scrollbar-width: thin;
}
.glowna-nawigacja li a {
    display: inline-block; padding: 12px 14px; color: var(--tekst-jasny);
    font-size: 0.9em; font-weight: 600;
}
.glowna-nawigacja li a:hover { color: var(--kolor-glowny); text-decoration: none; }

main.kontener { padding-top: 28px; padding-bottom: 40px; }

/* --- Hero --- */
.hero {
    background: linear-gradient(135deg, var(--kolor-glowny), #5a8bf5);
    color: #fff; border-radius: var(--radius); padding: 44px 30px; text-align: center; margin-bottom: 28px;
}
.hero h1 { margin: 0 0 8px; font-size: 2.1em; }
.hero p { margin: 0 0 22px; opacity: .92; font-size: 1.1em; }
.hero-szukaj { display: flex; max-width: 620px; margin: 0 auto; }
.hero-szukaj input {
    flex: 1; padding: 14px 18px; border: none; border-radius: 8px 0 0 8px; font-size: 1em; outline: none;
}
.hero-szukaj button {
    background: var(--kolor-akcent); color: #fff; border: none; padding: 0 24px;
    border-radius: 0 8px 8px 0; cursor: pointer; font-weight: 700; font-size: 1em;
}
.hero-szukaj button:hover { background: #0e9d72; }

/* --- Kafelki kategorii (Drzewo z karuzelą) --- */
.categories-container { margin-bottom: 36px; }
.categories-carousel {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 15px;
}
.categories-carousel::-webkit-scrollbar { display: none; }
.category-card {
    flex: 0 0 280px; scroll-snap-align: start; background: var(--biel);
    border: 1px solid var(--obramowanie); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--cien); transition: transform 0.2s;
}
.category-card:hover { box-shadow: var(--cien-hover); transform: translateY(-2px); }
.category-title { font-size: 1.15em; margin: 0 0 15px; border-bottom: 1px solid var(--obramowanie); padding-bottom: 12px; }
.category-title a { color: var(--tekst); display: flex; align-items: center; gap: 8px; }
.category-title a:hover { color: var(--kolor-glowny); text-decoration: none; }
.category-title i { color: var(--kolor-glowny); font-size: 1.2em; }
.subcategory-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.subcategory-link { color: var(--tekst-jasny); font-size: 0.95em; transition: color 0.2s; }
.subcategory-link:hover { color: var(--kolor-glowny); }
@media (max-width: 768px) { .category-card { flex: 0 0 85vw; } }

/* --- Nagłówki sekcji / okruszki --- */
.naglowek-sekcji { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.naglowek-sekcji h1, .naglowek-sekcji h2 { margin: 0; }
.liczba-wynikow { color: var(--tekst-jasny); font-size: 0.95em; }
.okruszki { color: var(--tekst-jasny); font-size: 0.9em; margin-bottom: 16px; }
.okruszki span { color: var(--tekst); }

/* --- Lista ogłoszeń --- */
.lista-ogloszen {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.ogloszenie-item {
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: var(--radius);
    overflow: hidden; transition: all .2s;
}
.ogloszenie-item:hover { box-shadow: var(--cien-hover); transform: translateY(-2px); }
.ogloszenie-item a { color: inherit; }
.ogloszenie-item a:hover { text-decoration: none; }
.ogloszenie-img { width: 100%; height: 180px; overflow: hidden; background: #eef1f5; }
.ogloszenie-img img { width: 100%; height: 100%; object-fit: cover; }
.ogloszenie-info { padding: 14px; }
.ogloszenie-tytul { font-size: 1.05em; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogloszenie-cena { font-size: 1.25em; font-weight: 800; margin: 0 0 8px; color: var(--tekst); }
.ogloszenie-lokalizacja { color: var(--tekst-jasny); margin: 0 0 4px; font-size: 0.88em; }
.ogloszenie-data { font-size: 0.8em; color: #a4adb8; margin: 0; }
.info-pusto { grid-column: 1 / -1; color: var(--tekst-jasny); background: var(--biel); padding: 30px; border-radius: var(--radius); text-align: center; }
.link-miejscowosci { color: var(--kolor-glowny); font-weight: 600; }

/* --- Drzewo miejscowości --- */
.sekcja-miejscowosci, .drzewo-lokalizacji {
    margin-top: 34px;
}
.top-miejscowosci {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: 8px; padding: 16px;
}
.top-miejscowosci a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px;
    border: 1px solid var(--obramowanie); border-radius: 8px; background: #f8fafc;
    color: var(--tekst); font-weight: 700; font-size: .92em;
}
.top-miejscowosci a:hover { color: var(--kolor-glowny); text-decoration: none; border-color: #b8c9e8; }
.podtytul-drzewa { margin: 22px 0 12px; font-size: 1.05em; }
.wojewodztwa-grid, .drzewo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
}
.wojewodztwo-link, .drzewo-item {
    display: block; min-height: 76px; padding: 14px 15px; background: var(--biel);
    border: 1px solid var(--obramowanie); border-radius: 8px; color: var(--tekst);
}
.wojewodztwo-link:hover, .drzewo-item:hover {
    text-decoration: none; border-color: #b8c9e8; box-shadow: var(--cien);
}
.wojewodztwo-link strong, .drzewo-item strong { display: block; margin-bottom: 4px; }
.wojewodztwo-link span, .drzewo-item span { display: block; color: var(--tekst-jasny); font-size: .86em; }

/* --- Lokalna strona miejscowości --- */
.lokalny-hero {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: 8px;
    padding: 18px; margin-bottom: 24px; box-shadow: var(--cien);
}
.lokalny-hero h1 { margin: 0 0 8px; font-size: 2em; }
.lokalny-adres {
    margin: 0 0 6px; color: var(--kolor-glowny); font-weight: 800;
    overflow-wrap: anywhere;
}
.lokalny-meta {
    display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline;
    border-top: 1px solid var(--obramowanie); padding-top: 14px;
}
.lokalny-meta strong { font-size: 2em; line-height: 1; }
.lokalny-meta span { font-weight: 800; }
.lokalny-meta small { grid-column: 1 / -1; color: var(--tekst-jasny); }
.lokalne-kategorie { margin-bottom: 30px; }
.lokalne-kategorie-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
.lokalna-kategoria-card {
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: 8px;
    padding: 14px; min-width: 0;
}
.lokalna-kategoria-card:hover { border-color: #b8c9e8; box-shadow: var(--cien); }
.lokalna-kategoria-title {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    color: var(--tekst); font-weight: 800;
}
.lokalna-kategoria-title:hover { color: var(--kolor-glowny); text-decoration: none; }
.lokalna-kategoria-title i { color: var(--kolor-glowny); }
.lokalna-kategoria-title em {
    min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #eef4ff; color: var(--kolor-glowny); font-style: normal; font-size: .85em;
}
.lokalne-podkategorie {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.lokalne-podkategorie a {
    color: var(--tekst-jasny); background: #f8fafc; border: 1px solid var(--obramowanie);
    border-radius: 999px; padding: 5px 9px; font-size: .86em;
}
.lokalne-podkategorie a:hover { color: var(--kolor-glowny); text-decoration: none; border-color: #b8c9e8; }
.lokalne-ogloszenia-naglowek { margin-top: 8px; }
.dopisek-naglowka {
    display: block; margin-top: 4px; color: var(--tekst-jasny); font-size: .62em; font-weight: 600;
}

@media (min-width: 620px) {
    .lokalne-kategorie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .lokalny-hero { grid-template-columns: 1fr auto; align-items: center; padding: 24px; }
    .lokalny-meta {
        min-width: 170px; border-top: 0; border-left: 1px solid var(--obramowanie);
        padding-top: 0; padding-left: 22px;
    }
    .lokalne-kategorie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Układ kategorii z filtrami --- */
.kategoria-uklad { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.filtry {
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: var(--radius);
    padding: 20px; position: sticky; top: 130px;
}
.filtr-grupa { margin-bottom: 16px; }
.filtr-grupa label { display: block; font-weight: 600; font-size: 0.9em; margin-bottom: 6px; }
.filtry select, .filtry input {
    width: 100%; padding: 9px 10px; border: 1px solid var(--obramowanie); border-radius: 7px; font-size: 0.9em;
}
.filtr-cena { display: flex; gap: 8px; }
.link-reset { display: block; text-align: center; margin-top: 10px; font-size: 0.85em; color: var(--tekst-jasny); }

/* --- Szczegóły ogłoszenia --- */
.ogloszenie-szczegoly { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; }
.ogloszenie-kolumna-glowna h1 { margin-top: 0; }
.meta-ogloszenia { display: flex; flex-wrap: wrap; gap: 16px; color: var(--tekst-jasny); font-size: 0.88em; margin: 0 0 20px; }
.galeria-glowne { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); background: #eef1f5; }
.galeria-miniatury { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.galeria-miniatury img { width: 90px; height: 70px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.galeria-miniatury img:hover { border-color: var(--kolor-glowny); }
.opis { white-space: pre-wrap; background: var(--biel); padding: 18px; border-radius: var(--radius); border: 1px solid var(--obramowanie); }

.parametry {
    list-style: none; padding: 18px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--biel); border-radius: var(--radius); border: 1px solid var(--obramowanie);
}
.parametry li { padding: 8px 4px; border-bottom: 1px solid var(--obramowanie); display: flex; justify-content: space-between; gap: 10px; }
.parametry li span { color: var(--tekst-jasny); }

.panel-boczny {
    background: var(--biel); padding: 20px; border-radius: var(--radius); border: 1px solid var(--obramowanie); margin-bottom: 18px;
}
.cena-szczegoly { font-size: 2em; font-weight: 800; margin: 0; color: var(--tekst); }
.podkat-tag { display: inline-block; margin: 10px 0 0; font-size: 0.82em; color: var(--tekst-jasny); background: var(--tlo); padding: 3px 10px; border-radius: 20px; }
.panel-uzytkownika h3, .panel-lokalizacja h3 { margin-top: 0; }
.sprzedajacy-link { font-size: 1.1em; }
.telefon { font-weight: 600; }
.telefon-ukryty, .telefon-widoczny {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: 44px; margin: 12px 0; padding: 11px 12px; border: 1px solid var(--obramowanie);
    border-radius: 8px; background: #f7f9fc; color: var(--tekst); cursor: pointer;
    font-family: inherit; font-size: .95em; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.telefon-ukryty:hover, .telefon-ukryty:focus { border-color: var(--kolor-glowny); background: #eef5ff; box-shadow: 0 0 0 3px rgba(28, 92, 168, .12); outline: none; }
.telefon-widoczny { cursor: default; background: #eef7f2; border-color: #b9dec8; color: #155f3b; }
.telefon-brak { color: var(--tekst-jasny); }
.mapa-mini { height: 200px; border-radius: 8px; margin-top: 12px; }
.pasek-wlasciciela { background: #fff6e0; border: 1px solid #f0d699; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; }
.link-akcji { display: inline-block; margin-left: 10px; font-weight: 700; }
.link-usun { background: none; border: none; color: #d9342b; cursor: pointer; font-weight: 600; text-decoration: underline; padding: 0; }

/* --- Formularze (auth / dodaj / profil) --- */
.formularz-auth, .formularz-dodaj {
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: var(--radius);
    padding: 30px; max-width: 720px; margin: 0 auto;
}
.formularz-auth { max-width: 440px; }
.formularz-auth h1, .formularz-dodaj h1 { margin-top: 0; }
.formularz-auth label, .formularz-dodaj label, .edycja-profilu label {
    display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.92em;
}
.formularz-auth input, .formularz-dodaj input, .formularz-dodaj textarea, .formularz-dodaj select,
.edycja-profilu input, .edycja-profilu textarea {
    width: 100%; padding: 11px 12px; margin-top: 6px; border: 1px solid var(--obramowanie);
    border-radius: 8px; font-size: 0.95em; font-family: inherit; font-weight: 400;
}
.formularz-dodaj fieldset { border: 1px solid var(--obramowanie); border-radius: var(--radius); padding: 20px; margin: 0 0 22px; }
.formularz-dodaj legend { font-weight: 700; padding: 0 8px; color: var(--kolor-glowny); }
.pola-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.przycisk-malutki { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 8px 11px; border-radius: 8px; font-size: .85em; }
.przycisk-drugorzedny { background: #eef2f7; color: var(--tekst); border: 1px solid var(--obramowanie); }
.mapa-dodawania-wrapper { display: grid; gap: 10px; margin-top: 10px; }
.mapa-dodawania-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mapa-dodawania-toolbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.mapa-dodawania { min-height: 320px; height: 42vh; max-height: 480px; border: 1px solid var(--obramowanie); border-radius: 8px; overflow: hidden; background: #eef2f7; }
.input-plik-ukryty { position: absolute; width: 1px !important; height: 1px; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; }
.dropzone-zdjecia { display: grid; justify-items: center; gap: 9px; padding: 24px; border: 2px dashed #b8c9e8; border-radius: 8px; background: #f7f9fc; text-align: center; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.dropzone-zdjecia:focus, .dropzone-zdjecia:hover, .dropzone-zdjecia.drag-over { border-color: var(--kolor-glowny); background: #eef5ff; box-shadow: 0 0 0 3px rgba(28, 92, 168, .12); outline: none; }
.dropzone-zdjecia i { color: var(--kolor-glowny); font-size: 2em; }
.dropzone-zdjecia span { color: var(--tekst-jasny); font-size: .9em; }
.istniejace-zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-bottom: 14px; }
.istniejace-zdjecie { display: grid !important; gap: 7px; margin: 0 !important; font-weight: 500 !important; min-width: 0; }
.istniejace-zdjecie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--obramowanie); }
.istniejace-zdjecie span { display: inline-flex; align-items: center; gap: 6px; color: var(--tekst-jasny); font-size: .85em; }
.istniejace-zdjecie input { width: auto !important; margin: 0 !important; }
.podglad-zdjec { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 12px; }
.podglad-zdjec .zdjecie-preview { position: relative; display: grid; gap: 6px; min-width: 0; }
.podglad-zdjec img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--obramowanie); }
.podglad-zdjec .zdjecie-preview span { color: var(--tekst-jasny); font-size: .78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podglad-zdjec .usun-zdjecie { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 999px; background: rgba(179, 38, 30, .95); color: #fff; cursor: pointer; font-size: 1.15em; line-height: 1; display: flex; align-items: center; justify-content: center; }
.auth-stopka { text-align: center; margin-top: 18px; color: var(--tekst-jasny); }
.auth-demo { text-align: center; font-size: 0.85em; color: var(--tekst-jasny); background: var(--tlo); padding: 10px; border-radius: 8px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; }
.alert-blad { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.alert-ok { background: #e6f7ef; color: #0e7a55; border: 1px solid #b2e3cd; }

/* --- Panel miejscowości TERYT --- */
/* Wymusza aktualizację CSS na dev razem z widokiem admin/miejscowosci.php. */
.admin-panel { display: grid; gap: 18px; }
.admin-metryki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-metryki > div {
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: 8px;
    padding: 14px; min-width: 0;
}
.admin-metryki strong { display: block; margin-bottom: 4px; }
.admin-metryki span { color: var(--tekst-jasny); font-size: .92em; word-break: break-word; }
.admin-filtry {
    display: grid; grid-template-columns: 2fr 1fr 1fr 150px auto; gap: 12px; align-items: end;
    background: var(--biel); border: 1px solid var(--obramowanie); border-radius: 8px; padding: 16px;
}
.admin-filtry label { display: grid; gap: 5px; font-size: .88em; font-weight: 700; }
.admin-filtry input, .admin-filtry select {
    width: 100%; padding: 10px 11px; border: 1px solid var(--obramowanie); border-radius: 8px; font: inherit;
}
.admin-tabela-wrap { overflow-x: auto; background: var(--biel); border: 1px solid var(--obramowanie); border-radius: 8px; }
.admin-tabela { width: 100%; border-collapse: collapse; min-width: 980px; }
.admin-tabela th, .admin-tabela td { padding: 11px 12px; border-bottom: 1px solid var(--obramowanie); text-align: left; vertical-align: top; }
.admin-tabela th { background: #f8fafc; font-size: .85em; color: var(--tekst-jasny); }
.tekst-pomocniczy { color: var(--tekst-jasny); font-size: .82em; margin-top: 2px; }
.tag-uwaga { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 6px; background: #fff6e0; color: #8a5a00; font-size: .78em; font-weight: 700; }
.pusto-tabela { text-align: center; color: var(--tekst-jasny); padding: 28px !important; }
.paginacja { display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--tekst-jasny); }

/* --- Panel konfiguracji portalu --- */
.portal-config {
    display: grid;
    gap: 18px;
}

.portal-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    box-shadow: var(--cien);
}

.portal-config-kicker {
    margin: 0 0 4px;
    color: var(--tekst-jasny);
    font-size: .82em;
    font-weight: 800;
    text-transform: uppercase;
}

.portal-config-header h1 {
    margin: 0;
    font-size: 1.75em;
    letter-spacing: 0;
}

.portal-config-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--obramowanie);
    background: #f8fafc;
    color: #405066;
    font-size: .86em;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill i { font-size: .68em; }
.status-active { background: #e8f8f1; border-color: #b8e7d1; color: #0d6b4c; }
.status-read_only { background: #fff8e6; border-color: #efd48a; color: #806113; }
.status-maintenance { background: #eef4ff; border-color: #c8d8fb; color: #244f99; }
.status-disabled { background: #fdecec; border-color: #f3b8b8; color: #a62d2d; }
.status-neutral { background: #f4f6f9; color: #48576d; }

.portal-config-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.portal-config-metrics > div {
    min-width: 0;
    padding: 15px 16px;
    background: #fff;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
}

.portal-config-metrics span {
    display: block;
    margin-bottom: 4px;
    color: var(--tekst-jasny);
    font-size: .82em;
    font-weight: 800;
}

.portal-config-metrics strong {
    display: block;
    color: var(--tekst);
    font-size: 1.45em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.portal-config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.portal-config-main,
.portal-config-side {
    display: grid;
    gap: 16px;
}

.portal-config-side {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.config-file-editor {
    grid-column: 1;
}

.config-section,
.side-card {
    min-width: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    box-shadow: var(--cien);
}

.config-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.config-section-head i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef4ff;
    color: var(--kolor-glowny);
    flex: 0 0 auto;
}

.config-section-head h2 {
    margin: 0;
    font-size: 1.05em;
}

.config-section-subhead {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--obramowanie);
}

.config-grid-two,
.messages-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.portal-config label {
    display: grid;
    gap: 6px;
    margin: 0 0 13px;
    color: #344256;
    font-size: .88em;
    font-weight: 800;
}

.portal-config label:last-child { margin-bottom: 0; }

.portal-config input[type="text"],
.portal-config select,
.portal-config textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #fff;
    color: var(--tekst);
    font: inherit;
    font-weight: 500;
}

.portal-config textarea {
    min-height: 420px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .86em;
    line-height: 1.45;
    white-space: pre;
    overflow: auto;
}

.portal-config input[type="text"]:focus,
.portal-config select:focus,
.portal-config textarea:focus {
    border-color: var(--kolor-glowny);
    outline: 3px solid rgba(47, 111, 237, .13);
}

.config-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.config-file-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--obramowanie);
    border-radius: 999px;
    background: #fbfcfe;
    color: var(--tekst-jasny);
    font-size: .8em;
    font-weight: 800;
}

.config-file-actions {
    display: flex;
    justify-content: flex-end;
}

.scope-picker {
    display: grid;
    gap: 10px;
}

.scope-panel {
    min-width: 0;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    background: #fbfcfe;
    overflow: hidden;
}

.scope-panel summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    color: #2f3c4f;
    font-weight: 900;
}

.scope-panel summary span {
    color: var(--tekst-jasny);
    font-size: .86em;
    font-weight: 800;
    white-space: nowrap;
}

.scope-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    max-height: 360px;
    overflow: auto;
    border-top: 1px solid var(--obramowanie);
}

.scope-list-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scope-check {
    display: flex !important;
    align-items: flex-start;
    gap: 10px !important;
    min-width: 0;
    min-height: 48px;
    margin: 0 !important;
    padding: 10px 12px;
    border-right: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    color: var(--tekst) !important;
    cursor: pointer;
}

.scope-check:hover {
    background: #f5f8fc;
}

.scope-check input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--kolor-glowny);
}

.scope-check span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.scope-check strong {
    display: block;
    font-size: .93em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.scope-check small {
    display: block;
    color: var(--tekst-jasny);
    font-size: .78em;
    font-weight: 700;
    line-height: 1.25;
}

.scope-check-main {
    min-height: 54px;
    background: #f6f9ff;
    border-bottom-color: #dce6f7;
}

.scope-check-main strong i {
    width: 18px;
    color: var(--kolor-glowny);
}

.scope-empty {
    margin: 0;
    padding: 14px;
    border-top: 1px solid var(--obramowanie);
    color: var(--tekst-jasny);
    font-weight: 700;
}

.category-picker {
    margin-top: 4px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.category-card {
    min-width: 0;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.category-card > .scope-check {
    border-right: 0;
}

.category-subgrid {
    display: grid;
    grid-template-columns: 1fr;
    max-height: 260px;
    overflow: auto;
    background: #fbfcfe;
}

.category-subgrid .scope-check {
    min-height: 42px;
    padding-left: 34px;
    border-right: 0;
}

.flag-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.flag-group {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    background: #fbfcfe;
}

.flag-group h3 {
    margin: 0 0 10px;
    color: #536176;
    font-size: .82em;
    text-transform: uppercase;
}

.switch-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 0;
    border-top: 1px solid #edf1f6;
    cursor: pointer;
}

.switch-row:first-of-type { border-top: 0; }
.switch-row span { overflow-wrap: anywhere; }
.switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-row em {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #c8d1dc;
    transition: background .18s ease;
}

.switch-row em::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 40, 80, .22);
    transition: transform .18s ease;
}

.switch-row input:checked + em { background: var(--kolor-akcent); }
.switch-row input:checked + em::after { transform: translateX(18px); }
.switch-row input:focus + em { outline: 3px solid rgba(17, 184, 134, .16); }

.portal-savebar {
    position: sticky;
    bottom: 12px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(20, 40, 80, .12);
    backdrop-filter: blur(8px);
}

.portal-savebar .przycisk {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.summary-list {
    display: grid;
    gap: 8px;
}

.summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--obramowanie);
}

.summary-list span { color: var(--tekst-jasny); font-size: .88em; }
.summary-list strong { text-align: right; }

.config-json {
    margin-top: 14px;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    overflow: hidden;
}

.config-json summary {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--kolor-glowny);
    font-weight: 800;
}

.config-json pre {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    background: #111827;
    color: #dbeafe;
    font-size: .82em;
    line-height: 1.45;
}

/* --- Profil --- */
.profil-naglowek { display: flex; gap: 24px; background: var(--biel); border: 1px solid var(--obramowanie); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; align-items: center; }
.profil-avatar { width: 110px; height: 110px; border-radius: 50%; background: var(--tlo); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profil-avatar i { font-size: 3em; color: #b7c0cc; }
.profil-dane h1 { margin: 0 0 6px; }
.profil-opis { margin: 0 0 8px; color: var(--tekst-jasny); }
.profil-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--tekst-jasny); font-size: 0.9em; margin: 0; }
.profil-kontakt { margin: 12px 0 0; }
.edycja-profilu { background: var(--biel); border: 1px solid var(--obramowanie); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 24px; }
.edycja-profilu summary { cursor: pointer; font-weight: 700; color: var(--kolor-glowny); }
.edycja-profilu form { margin-top: 16px; }

/* --- Mapa --- */
.mapa-glowna { height: 600px; border-radius: var(--radius); border: 1px solid var(--obramowanie); }
.map-popup { text-align: center; width: 160px; }
.map-popup img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.map-popup-cena { display: block; font-weight: 800; margin: 4px 0; }

/* --- Mapa strony --- */
.mapa-strony { display: grid; gap: 18px; }
.mapa-strony-podsumowanie {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 18px;
    background: var(--biel);
    border: 1px solid var(--obramowanie);
    border-radius: var(--radius);
}
.mapa-strony-podsumowanie strong { color: var(--kolor-glowny); font-size: 1.8em; line-height: 1; }
.mapa-strony-podsumowanie span { color: var(--tekst-jasny); font-weight: 700; }
.mapa-strony-sekcje {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.mapa-strony-sekcja {
    background: var(--biel);
    border: 1px solid var(--obramowanie);
    border-radius: var(--radius);
    overflow: hidden;
}
.mapa-strony-sekcja-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--obramowanie);
}
.mapa-strony-sekcja-head h2 { margin: 0; font-size: 1.05em; }
.mapa-strony-sekcja-head span {
    min-width: 32px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--tlo);
    color: var(--tekst-jasny);
    font-weight: 800;
    font-size: .85em;
}
.mapa-strony-lista {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    max-height: 480px;
    overflow: auto;
}
.mapa-strony-lista li + li { border-top: 1px solid #edf0f5; }
.mapa-strony-lista a {
    display: grid;
    gap: 3px;
    padding: 10px 16px;
    color: var(--tekst);
}
.mapa-strony-lista a:hover { background: #f8fafc; text-decoration: none; color: var(--kolor-glowny); }
.mapa-strony-lista strong { font-size: .94em; overflow-wrap: anywhere; }
.mapa-strony-lista span { color: var(--tekst-jasny); font-size: .82em; overflow-wrap: anywhere; }

/* --- Stopka --- */
footer { margin-top: 50px; padding: 30px 0 20px; background: var(--biel); border-top: 1px solid var(--obramowanie); color: var(--tekst-jasny); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; margin-bottom: 20px; }
.footer-kol strong { display: block; color: var(--tekst); margin-bottom: 10px; }
.footer-kol a { display: block; color: var(--tekst-jasny); margin-bottom: 6px; font-size: 0.92em; }
.copyright { text-align: center; font-size: 0.85em; border-top: 1px solid var(--obramowanie); padding-top: 16px; margin: 0; }

/* --- Responsywność --- */
@media (max-width: 900px) {
    .kategoria-uklad { grid-template-columns: 1fr; }
    .filtry { position: static; }
    .ogloszenie-szczegoly { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .admin-metryki, .admin-filtry { grid-template-columns: 1fr; }
    .portal-config-layout { grid-template-columns: 1fr; }
    .portal-config-side, .config-file-editor { grid-column: auto; grid-row: auto; }
    .portal-config-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-config-side { order: 2; }
    .scope-list, .scope-list-compact, .category-grid, .mapa-strony-sekcje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .kontener { padding: 0 14px; }
    main.kontener { padding-top: 18px; }
    .topbar-inner { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .logo { font-size: 1.35em; max-width: calc(100vw - 170px); }
    .logo-lokalna { font-size: .98em; max-width: calc(100vw - 170px); }
    .user-actions { gap: 10px; }
    .link-profil { font-size: .9em; }
    .przycisk-dodaj { padding: 8px 10px; font-size: .88em; }
    .szukajka-wrapper { order: 3; max-width: none; flex-basis: 100%; }
    .hero { padding: 30px 18px; }
    .hero h1, .lokalny-hero h1 { font-size: 1.65em; }
    .naglowek-sekcji { align-items: flex-start; }
    .pola-2 { grid-template-columns: 1fr; }
    .parametry { grid-template-columns: 1fr; }
    .profil-naglowek { flex-direction: column; text-align: center; }
    .profil-meta { justify-content: center; }
    .portal-config-header { align-items: flex-start; flex-direction: column; padding: 18px; }
    .portal-config-header-actions { justify-content: flex-start; }
    .portal-config-metrics, .config-grid-two, .messages-grid, .flag-groups, .scope-list, .scope-list-compact, .category-grid, .mapa-strony-sekcje { grid-template-columns: 1fr; }
    .config-section, .side-card { padding: 15px; }
    .portal-savebar { position: static; justify-content: stretch; }
    .portal-savebar .przycisk { width: 100%; justify-content: center; }
    .scope-panel summary { align-items: flex-start; flex-direction: column; }
}
/* Firebase Auth */
.firebase-auth {
    max-width: 440px;
    margin: 42px auto;
    padding: 28px;
    border: 1px solid #dde4ed;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(24, 37, 56, 0.08);
}

.firebase-auth h1 {
    margin-bottom: 18px;
    font-size: 1.55rem;
}

.auth-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #f5f7fa;
}

.auth-mode-tabs button,
.auth-link {
    border: 0;
    background: transparent;
    color: #435166;
    font: inherit;
    cursor: pointer;
}

.auth-mode-tabs button {
    min-height: 38px;
    border-radius: 6px;
    font-weight: 700;
}

.auth-mode-tabs button.active {
    background: #fff;
    color: #142133;
    box-shadow: 0 1px 4px rgba(24, 37, 56, 0.12);
}

.auth-message {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #d8e0ea;
    background: #f5f7fa;
    color: #283548;
}

.auth-message-error {
    border-color: #f3b8b8;
    background: #fff0f0;
    color: #9b1c1c;
}

.auth-message-warning {
    border-color: #f0d58a;
    background: #fff8df;
    color: #7b5200;
}

.auth-message-success {
    border-color: #a9ddb8;
    background: #edf9f0;
    color: #16632f;
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #6b778a;
    font-size: 0.92rem;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #d8e0ea;
}

.auth-provider {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
    color: #182638;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.auth-provider:hover {
    border-color: #9aa8ba;
    background: #f8fafc;
}

.auth-link {
    margin-top: 10px;
    padding: 0;
    color: #2366d1;
    font-weight: 700;
}

.auth-conflict {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #d8e0ea;
}

.auth-conflict h2 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}