/* ============================================================
   skryptyPHP.com — arkusz stylów (ciemny motyw)
   ============================================================ */

:root {
    --tlo:            #0e1016;
    --tlo-2:          #12151f;
    --powierzchnia:   #171b28;
    --powierzchnia-2: #1e2333;
    --obramowanie:    #262d40;
    --obram-jasne:    #343d58;
    --tekst:          #e8eaf2;
    --tekst-2:        #a9b1c5;
    --tekst-3:        #78829d;
    --akcent:         #9198e5;   /* fiolet PHP, rozjaśniony */
    --akcent-mocny:   #777bb4;   /* oficjalny fiolet PHP */
    --akcent-ciemny:  #4f5b93;
    --zielony:        #7dc98a;
    --zolty:          #e3c078;
    --czerwony:       #e08087;
    --promien:        14px;
    --promien-maly:   8px;
    --czcionka: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── Baza ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font-family: var(--czcionka);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--akcent-ciemny); color: #fff; }

a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 3px;
    border-radius: 4px;
}

code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--powierzchnia-2);
    border: 1px solid var(--obramowanie);
    border-radius: 5px;
    padding: 0.1em 0.4em;
    color: #d6d9f0;
    overflow-wrap: break-word;
}

.szerokosc {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.wizualnie-ukryte {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pomin {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--akcent-mocny);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    z-index: 100;
}
.pomin:focus { left: 0; }

/* ── Nagłówek strony ───────────────────────────────────────── */

.naglowek {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(14, 16, 22, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--obramowanie);
}

.naglowek-srodek {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 68px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tekst);
    letter-spacing: -0.02em;
}
.logo:hover { text-decoration: none; }
.logo b { color: var(--akcent); font-weight: 800; }
.logo i { color: var(--tekst-3); font-style: normal; font-weight: 500; }

.logo-znak {
    width: 34px;
    height: 34px;
    padding: 7px;
    color: #fff;
    background: linear-gradient(135deg, var(--akcent-mocny), var(--akcent-ciemny));
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(119, 123, 180, 0.35);
    flex-shrink: 0;
}

.menu {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.menu a {
    color: var(--tekst-2);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 500;
}
.menu a:hover {
    color: var(--tekst);
    background: var(--powierzchnia-2);
    text-decoration: none;
}
.menu a.aktywny { color: var(--tekst); background: var(--powierzchnia-2); }

.menu-przycisk {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    color: var(--tekst);
    width: 42px;
    height: 42px;
    padding: 9px;
    cursor: pointer;
}
.menu-przycisk svg { width: 100%; height: 100%; }

/* ── Sekcja hero ───────────────────────────────────────────── */

.bohater {
    position: relative;
    padding: 84px 0 64px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(52% 130% at 50% -30%, rgba(119, 123, 180, 0.28), transparent 70%),
        radial-gradient(40% 90% at 85% 10%, rgba(86, 182, 194, 0.07), transparent 70%),
        var(--tlo-2);
    border-bottom: 1px solid var(--obramowanie);
}

.bohater h1 {
    margin: 0 auto 20px;
    max-width: 800px;
    font-size: clamp(30px, 5.4vw, 52px);
    line-height: 1.14;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.akcent {
    background: linear-gradient(120deg, #a6acff, var(--akcent-mocny));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bohater-opis {
    max-width: 640px;
    margin: 0 auto 34px;
    color: var(--tekst-2);
    font-size: 18px;
}

.szukajka {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.szukajka svg {
    position: absolute;
    left: 18px;
    top: 50%;
    translate: 0 -50%;
    width: 20px;
    height: 20px;
    color: var(--tekst-3);
    pointer-events: none;
}

.szukajka input {
    width: 100%;
    padding: 16px 20px 16px 52px;
    font-size: 17px;
    font-family: inherit;
    color: var(--tekst);
    background: var(--powierzchnia);
    border: 1px solid var(--obram-jasne);
    border-radius: 999px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.szukajka input::placeholder { color: var(--tekst-3); }
.szukajka input:focus {
    outline: none;
    border-color: var(--akcent-mocny);
    box-shadow: 0 0 0 4px rgba(119, 123, 180, 0.22);
}

.bohater-liczby {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    color: var(--tekst-2);
    font-size: 14.5px;
}

.bohater-liczby li {
    background: rgba(23, 27, 40, 0.75);
    border: 1px solid var(--obramowanie);
    border-radius: 999px;
    padding: 7px 18px;
}
.bohater-liczby strong { color: var(--tekst); }

/* ── Sekcje ────────────────────────────────────────────────── */

.sekcja { padding: 58px 0 10px; }

.sekcja-tytul {
    font-size: clamp(22px, 3vw, 28px);
    letter-spacing: -0.02em;
    margin: 0 0 26px;
}

.sekcja-naglowek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.licznik-wynikow { color: var(--tekst-3); margin: 0 0 26px; font-size: 14.5px; }

/* ── Karty kategorii ───────────────────────────────────────── */

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

.kategoria-karta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: var(--promien);
    color: var(--tekst);
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.kategoria-karta:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--kolor-kat) 55%, var(--obramowanie));
    background: var(--powierzchnia-2);
}

.kategoria-ikona {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 11px;
    color: var(--kolor-kat, var(--akcent));
    background: color-mix(in srgb, var(--kolor-kat, var(--akcent)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--kolor-kat, var(--akcent)) 30%, transparent);
}
.kategoria-ikona svg { width: 22px; height: 22px; }

.kategoria-tekst { display: flex; flex-direction: column; line-height: 1.35; }
.kategoria-tekst strong { font-size: 15.5px; }
.kategoria-tekst small { color: var(--tekst-3); font-size: 13px; }

/* ── Karty skryptów ────────────────────────────────────────── */

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

.skrypt-karta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: var(--promien);
    color: var(--tekst);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.skrypt-karta:hover {
    text-decoration: none;
    transform: translateY(-3px);
    border-color: var(--obram-jasne);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.skrypt-kategoria {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kolor-kat, var(--akcent));
}

.skrypt-karta h3 {
    margin: 0;
    font-size: 18.5px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.skrypt-karta p {
    margin: 0;
    color: var(--tekst-2);
    font-size: 14.5px;
    flex-grow: 1;
}

.skrypt-stopka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.skrypt-wiecej {
    font-size: 14px;
    font-weight: 600;
    color: var(--akcent);
    opacity: 0;
    translate: -4px 0;
    transition: opacity 0.15s, translate 0.15s;
}
.skrypt-karta:hover .skrypt-wiecej { opacity: 1; translate: 0 0; }

.poziom {
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.poziom-latwy {
    color: var(--zielony);
    background: rgba(125, 201, 138, 0.1);
    border-color: rgba(125, 201, 138, 0.3);
}
.poziom-sredni {
    color: var(--zolty);
    background: rgba(227, 192, 120, 0.1);
    border-color: rgba(227, 192, 120, 0.3);
}
.poziom-trudny {
    color: var(--czerwony);
    background: rgba(224, 128, 135, 0.1);
    border-color: rgba(224, 128, 135, 0.3);
}

.brak-wynikow {
    text-align: center;
    color: var(--tekst-2);
    padding: 40px 0;
    font-size: 17px;
}

/* ── Sekcja „Zacznij w 3 krokach" ──────────────────────────── */

.sekcja-start {
    margin-top: 58px;
    padding: 58px 0 64px;
    background: var(--tlo-2);
    border-top: 1px solid var(--obramowanie);
}

.kroki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    list-style: none;
    counter-reset: krok;
    padding: 0;
    margin: 0;
}

.kroki li {
    counter-increment: krok;
    position: relative;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: var(--promien);
    padding: 24px 24px 20px 24px;
}

.kroki li::before {
    content: counter(krok);
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 10px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--akcent-mocny), var(--akcent-ciemny));
}

.kroki strong { display: block; font-size: 17px; margin-bottom: 6px; }
.kroki p { margin: 0; color: var(--tekst-2); font-size: 14.5px; }

/* ── Okruszki ──────────────────────────────────────────────── */

.okruszki {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 30px 0 6px;
    font-size: 14px;
    color: var(--tekst-3);
}
.okruszki a { color: var(--tekst-3); }
.okruszki a:hover { color: var(--akcent); }
.okruszki [aria-current] {
    color: var(--tekst-2);
    max-width: 45ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Strona skryptu ────────────────────────────────────────── */

.artykul { padding-bottom: 40px; }

.artykul-naglowek h1 {
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 12px 0 14px;
}

.artykul-metki {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.metka {
    font-size: 13px;
    color: var(--tekst-2);
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 999px;
    padding: 4px 13px;
}
.metka-kategoria {
    color: var(--kolor-kat, var(--akcent));
    border-color: color-mix(in srgb, var(--kolor-kat, var(--akcent)) 35%, transparent);
    background: color-mix(in srgb, var(--kolor-kat, var(--akcent)) 10%, transparent);
    font-weight: 600;
}

.artykul-wstep {
    max-width: 780px;
    color: var(--tekst-2);
    font-size: 17px;
}
.artykul-wstep p { margin: 0 0 14px; }
.artykul-wstep em { color: var(--tekst); }

/* ── Blok kodu ─────────────────────────────────────────────── */

.kod-sekcja {
    margin: 30px 0;
    border: 1px solid var(--obram-jasne);
    border-radius: var(--promien);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.kod-pasek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--powierzchnia-2);
    border-bottom: 1px solid var(--obramowanie);
}

.kod-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--tekst-3);
}

.kod-jezyk {
    color: var(--akcent);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.kod-przyciski { display: flex; gap: 8px; }

.przycisk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--tekst);
    background: var(--powierzchnia);
    border: 1px solid var(--obram-jasne);
    border-radius: var(--promien-maly);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.przycisk svg { width: 15px; height: 15px; }
.przycisk:hover {
    background: var(--powierzchnia-2);
    border-color: var(--akcent-ciemny);
    text-decoration: none;
    color: var(--tekst);
}

.przycisk-kopiuj.skopiowano {
    color: var(--zielony);
    border-color: rgba(125, 201, 138, 0.5);
    background: rgba(125, 201, 138, 0.08);
}

.przycisk-glowny {
    padding: 11px 22px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--akcent-mocny), var(--akcent-ciemny));
    border: none;
    box-shadow: 0 6px 20px rgba(119, 123, 180, 0.3);
}
.przycisk-glowny:hover {
    background: linear-gradient(135deg, #8489c4, var(--akcent-ciemny));
    color: #fff;
}

pre.kod-blok {
    margin: 0;
    padding: 20px;
    overflow: auto;
    max-height: 720px;
    background: #0c0e14;
    font-family: var(--mono);
    font-size: 13.8px;
    line-height: 1.62;
    tab-size: 4;
}
pre.kod-blok code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ── Sekcje artykułu ───────────────────────────────────────── */

.artykul-sekcja { margin: 38px 0; max-width: 820px; }
.artykul-sekcja h2 {
    font-size: 23px;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
}

.lista-krokow {
    list-style: none;
    counter-reset: krok-uzycia;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lista-krokow li {
    counter-increment: krok-uzycia;
    position: relative;
    padding: 14px 18px 14px 58px;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: var(--promien-maly);
    color: var(--tekst-2);
}
.lista-krokow li::before {
    content: counter(krok-uzycia);
    position: absolute;
    left: 16px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--akcent);
    background: rgba(119, 123, 180, 0.14);
    border: 1px solid rgba(119, 123, 180, 0.3);
}

.lista-uwag {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lista-uwag li {
    padding: 12px 16px 12px 20px;
    border-left: 3px solid var(--akcent-ciemny);
    background: var(--powierzchnia);
    border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
    color: var(--tekst-2);
}

/* ── Ramka polecajki ───────────────────────────────────────── */

.wskazowka {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 820px;
    margin: 38px 0;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--akcent-ciemny) 12%, var(--powierzchnia));
    border: 1px solid color-mix(in srgb, var(--akcent-mocny) 30%, var(--obramowanie));
    border-radius: var(--promien);
    color: var(--tekst-2);
    font-size: 15px;
}
.wskazowka svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--zolty);
}
.wskazowka p { margin: 0; }
.wskazowka a { font-weight: 600; }

/* ── Tagi ──────────────────────────────────────────────────── */

.artykul-tagi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 30px 0;
}
.tag {
    font-size: 13.5px;
    font-family: var(--mono);
    color: var(--tekst-3);
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 999px;
    padding: 4px 12px;
}

.podobne { max-width: none; }

/* ── Strona kategorii ──────────────────────────────────────── */

.kategoria-naglowek {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 24px 0 34px;
}
.kategoria-naglowek h1 {
    margin: 0 0 8px;
    font-size: clamp(26px, 4vw, 36px);
    letter-spacing: -0.02em;
}
.kategoria-ikona-duza {
    width: 62px;
    height: 62px;
    border-radius: 16px;
}
.kategoria-ikona-duza svg { width: 30px; height: 30px; }
.kategoria-opis { margin: 0; color: var(--tekst-2); max-width: 640px; }
.kategoria-licznik { margin: 8px 0 0; color: var(--tekst-3); font-size: 14px; }

.powrot { margin: 34px 0 60px; }

/* ── Strona 404 ────────────────────────────────────────────── */

.blad-404 {
    text-align: center;
    padding: 60px 24px 70px;
}
.blad-kod {
    margin: 0;
    font-size: clamp(80px, 16vw, 150px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(160deg, #a6acff, var(--akcent-ciemny));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.9;
}
.blad-404 h1 { margin: 10px 0 12px; letter-spacing: -0.02em; }
.blad-opis {
    max-width: 480px;
    margin: 0 auto 26px;
    color: var(--tekst-2);
}
.blad-propozycje {
    margin-top: 50px;
    text-align: left;
}

/* ── Podstrona tekstowa (O stronie) ────────────────────────── */

.artykul-tekstowy { max-width: 800px; }
.artykul-tekstowy h1 { margin-top: 34px; }
.artykul-tekstowy h2 {
    font-size: 22px;
    margin: 36px 0 12px;
    letter-spacing: -0.015em;
}
.artykul-tekstowy p { color: var(--tekst-2); }
.artykul-tekstowy strong { color: var(--tekst); }

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

.stopka {
    margin-top: 70px;
    background: var(--tlo-2);
    border-top: 1px solid var(--obramowanie);
    font-size: 14.5px;
}

.stopka-kolumny {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 40px;
    padding-top: 46px;
    padding-bottom: 30px;
}

.stopka-kolumna h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tekst-3);
    margin: 0 0 14px;
}

.stopka-kolumna ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.stopka-kolumna a { color: var(--tekst-2); }
.stopka-kolumna a:hover { color: var(--akcent); }
.stopka-o p { color: var(--tekst-3); margin: 0 0 12px; max-width: 40ch; }

.stopka-logo {
    font-size: 19px;
    font-weight: 700;
    color: var(--tekst) !important;
}
.stopka-logo b { color: var(--akcent); }
.stopka-logo i { color: var(--tekst-3); font-style: normal; font-weight: 500; }

.stopka-dol {
    border-top: 1px solid var(--obramowanie);
    padding-top: 20px;
    padding-bottom: 26px;
    color: var(--tekst-3);
    font-size: 13.5px;
}
.stopka-dol p { margin: 0 0 6px; }
.stopka-drobne { opacity: 0.8; }

/* ── Pasek przewijania (WebKit) ────────────────────────────── */

pre.kod-blok::-webkit-scrollbar { height: 10px; width: 10px; }
pre.kod-blok::-webkit-scrollbar-track { background: transparent; }
pre.kod-blok::-webkit-scrollbar-thumb {
    background: var(--obram-jasne);
    border-radius: 999px;
}
pre.kod-blok::-webkit-scrollbar-thumb:hover { background: var(--akcent-ciemny); }

/* ── Wersja mobilna ────────────────────────────────────────── */

@media (max-width: 760px) {
    .menu-przycisk { display: block; }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        padding: 10px 16px 16px;
        background: rgba(14, 16, 22, 0.97);
        border-bottom: 1px solid var(--obramowanie);
    }
    .menu.otwarte { display: flex; }
    .menu a { padding: 12px 14px; }

    .bohater { padding: 56px 0 46px; }
    .stopka-kolumny { grid-template-columns: 1fr; gap: 28px; }
    .kategoria-naglowek { flex-direction: column; }
    .kod-pasek { padding: 10px 12px; }
    pre.kod-blok { font-size: 12.8px; padding: 16px 14px; }
    .artykul-metki { margin-bottom: 20px; }
}

/* ── Ograniczony ruch ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}