/* Kierunek Bliskość dla mężczyzn — wygląd platformy (23.10.2026, kopia testowa).
   Marka z formatki: granat #17325E, zieleń #246B52, złoto #B7995D, papier #F4F5F3, błękit #DDE7F0.
   Czcionki z otwartą licencją SIL OFL 1.1 (pliki licencji w kb/fonty): Libre Franklin (nagłówki, zamiast
   Franklin Gothic) i Arimo (tekst, zamiast Ariala). Tryb ciemny = te same zmienne pod html[data-motyw="ciemny"].
   Kontrast tekstu do tła w obu trybach co najmniej 4,5:1. */

@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonty/libre-franklin-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonty/libre-franklin-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Arimo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonty/arimo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Arimo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonty/arimo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Arimo";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonty/arimo-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Arimo";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonty/arimo-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --granat:#17325e; --zielen:#246b52; --zloto:#b7995d; --papier:#f4f5f3; --blekit:#dde7f0;
  --tlo:#f4f5f3; --tlo-sekcji:#eaeff3; --karta:#ffffff; --pole:#ffffff; --linia:#d9dfe3; --linia-mocna:#b9c4cd;
  --tekst:#1f2c3b; --tekst2:#53606b; --naglowek:#17325e; --akcent:#246b52; --akcent-h:#1d5843; --akcent-tekst:#ffffff;
  --zloto-tekst:#7c6229; --zloto-tlo:#f6efdf; --link:#1f5f96;
  --ok-tlo:#e7f2ec; --ok-linia:#b9d9c7; --ok-tekst:#1d5843;
  --blad-tlo:#fbeeee; --blad-linia:#e7c4c4; --blad-tekst:#8a2b2b;
  --zastepcze-tlo:#e8eef4; --zastepcze-linia:#a9b9c9; --zastepcze-tekst:#46586b;
  --cien:0 1px 2px rgba(23,50,94,.06),0 8px 24px rgba(23,50,94,.07);
  --cien-mocny:0 2px 4px rgba(23,50,94,.08),0 18px 40px rgba(23,50,94,.12);
  --promien:16px; --szer:1140px;
  --f-nagl:"Libre Franklin",Arial,sans-serif; --f-tekst:Arimo,Arial,sans-serif;
  color-scheme:light;
}
html[data-motyw="ciemny"]{
  --tlo:#0e1621; --tlo-sekcji:#121c28; --karta:#16202c; --pole:#1b2735; --linia:#2c3b4d; --linia-mocna:#3a4c63;
  --tekst:#e5ebf2; --tekst2:#a9b6c6; --naglowek:#e9eef5; --akcent:#246b52; --akcent-h:#1d5843; --akcent-tekst:#ffffff;
  --zloto-tekst:#e0bb5a; --zloto-tlo:#2a2414; --link:#8fc0ec;
  --ok-tlo:#16302a; --ok-linia:#2f6b52; --ok-tekst:#cfe9dc;
  --blad-tlo:#3a1c1c; --blad-linia:#6b2f2f; --blad-tekst:#f0b4b4;
  --zastepcze-tlo:#1a2533; --zastepcze-linia:#3f5268; --zastepcze-tekst:#a9b6c6;
  --cien:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  --cien-mocny:0 2px 4px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.4);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--tlo);color:var(--tekst);font-family:var(--f-tekst);font-size:17px;line-height:1.65;
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
h1,h2,h3,h4{font-family:var(--f-nagl);color:var(--naglowek);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.4vw,50px);font-weight:800}
h2{font-size:clamp(25px,3vw,36px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--zloto);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

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

/* ---------- logo: zawsze oryginalne kolory — granat #17325E i zieleń #246B52, bez rozjaśnionych wersji (Ania 23.10.2026);
   w trybie ciemnym logo stoi na jasnej plakietce, żeby granat był widoczny ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--naglowek)}
.logo img{width:34px;height:auto}
.logo-napis{display:flex;flex-direction:column;line-height:1;font-family:var(--f-nagl);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--zielen)}   /* bez szeryfów (Ania 23.10.2026) */
.logo-napis small{font-family:var(--f-nagl);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--granat);margin-bottom:3px}
html[data-motyw="ciemny"] .logo,html[data-motyw="ciemny"] .stopka-marka{background:var(--papier);padding:6px 14px 6px 10px;border-radius:12px}

/* ---------- nagłówek i menu ---------- */
.gora{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--tlo) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--linia)}
.gora-wnetrze{max-width:var(--szer);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.menu{display:flex;align-items:center;gap:18px;margin-left:auto}
.menu ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.menu li a{display:block;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--tekst);font-weight:600;font-size:15.5px}
.menu li a:hover{background:var(--tlo-sekcji)}
.menu li a[aria-current="page"]{color:var(--akcent);background:var(--ok-tlo)}
html[data-motyw="ciemny"] .menu li a[aria-current="page"]{color:#fff;background:var(--zielen)}
.menu-przyciski{display:flex;align-items:center;gap:10px}
.menu-przycisk{display:none;margin-left:auto;align-items:center;gap:8px;border:1px solid var(--linia-mocna);background:var(--karta);
  border-radius:10px;padding:8px 14px;font-weight:700;cursor:pointer}
.menu-przycisk span{width:18px;height:2px;background:currentColor;position:relative;display:inline-block}
.menu-przycisk span::before,.menu-przycisk span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.menu-przycisk span::before{top:-6px}.menu-przycisk span::after{top:6px}
.motyw{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linia-mocna);background:var(--karta);color:var(--tekst);
  border-radius:99px;padding:8px 13px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.motyw-ikona::before{content:"☾";font-size:15px}
html[data-motyw="ciemny"] .motyw-ikona::before{content:"☀"}
@media (max-width:980px){
  .menu-przycisk{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--karta);border-bottom:1px solid var(--linia);
    box-shadow:var(--cien-mocny);flex-direction:column;align-items:stretch;padding:12px 20px 18px;gap:12px}
  .menu.otwarte{display:flex}
  .menu ul{flex-direction:column}
  .menu li a{padding:12px}
  .menu-przyciski{flex-wrap:wrap}
  .menu-przyciski .przycisk{flex:1 1 auto;text-align:center}
}

/* ---------- przyciski ---------- */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--akcent);color:var(--akcent-tekst);
  border:2px solid var(--akcent);border-radius:12px;padding:11px 20px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  transition:background .15s,transform .15s;font-family:var(--f-nagl)}
.przycisk:hover{background:var(--akcent-h);border-color:var(--akcent-h)}
.przycisk:active{transform:translateY(1px)}
.przycisk.duzy{padding:15px 28px;font-size:18px;border-radius:14px}
.przycisk.zloty{background:var(--zloto);border-color:var(--zloto);color:#17325e}
.przycisk.zloty:hover{background:#c8ab6f;border-color:#c8ab6f}
.przycisk.cichy{background:transparent;color:var(--naglowek);border-color:var(--linia-mocna)}
.przycisk.cichy:hover{background:var(--tlo-sekcji)}
.przycisk[aria-disabled="true"],.przycisk:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.przycisk.maly{padding:7px 13px;font-size:14px;border-radius:10px}

/* ---------- układ ---------- */
.wnetrze{max-width:var(--szer);margin:0 auto;padding:0 20px}
.waskie{max-width:760px;padding-top:48px;padding-bottom:64px}
.sekcja{padding:76px 0}
.sekcja.jasna{background:var(--tlo-sekcji)}
.kicker{font-family:var(--f-nagl);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--zloto-tekst);margin:0 0 12px}
.lead{font-size:19px;color:var(--tekst2);max-width:62ch}
.tytul-sekcji{max-width:760px;margin-bottom:38px}
/* maziaj złoty pod nagłówkami sekcji */
.maziaj{position:relative;display:inline-block;padding-bottom:14px}
.maziaj::after{content:"";position:absolute;left:-6px;bottom:-2px;width:min(190px,85%);height:20px;
  background:url(marka/zloto.webp) left center/100% 100% no-repeat}
.maziaj.zielony::after{background-image:url(marka/zielen.webp?v=3)}
.maziaj.granatowy::after{background-image:url(marka/granat.webp)}

/* ---------- pola zastępcze (zdjęcia, filmy, prezentacje) ---------- */
.zastepcze{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  background:var(--zastepcze-tlo);border:2px dashed var(--zastepcze-linia);border-radius:var(--promien);color:var(--zastepcze-tekst);
  padding:20px;font-size:14.5px;font-weight:600;min-height:140px;width:100%}
.zastepcze svg{width:44px;height:44px;opacity:.8}
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r45{aspect-ratio:4/5}.r11{aspect-ratio:1/1}.r32{aspect-ratio:3/2}
img.r169,img.r43,img.r45,img.r11,img.r32{width:100%;object-fit:cover;border-radius:var(--promien)}

/* ---------- strona oferty: pierwszy ekran ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 84px;
  background:radial-gradient(1100px 520px at 85% 10%,color-mix(in srgb,var(--blekit) 75%,transparent),transparent 70%)}
html[data-motyw="ciemny"] .hero{background:radial-gradient(1100px 520px at 85% 10%,rgba(36,107,82,.22),transparent 70%)}
.hero-siatka{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{margin-bottom:18px}
.hero .lead{margin-bottom:28px}
.hero-przyciski{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-fakty{display:flex;flex-wrap:wrap;gap:10px 26px;margin:30px 0 0;padding:0;list-style:none;color:var(--tekst2);font-size:15px}
.hero-fakty li{display:flex;gap:8px;align-items:center}
.hero-fakty li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--zloto)}
.ramka-okragla{position:relative;max-width:440px;margin:0 auto;width:100%}
.ramka-okragla .zastepcze,.ramka-okragla img{border-radius:50%;aspect-ratio:1/1;object-fit:cover;width:84%;margin:8%;min-height:0;border-style:solid}
.ramka-okragla::after{content:"";position:absolute;inset:0;background:url(marka/obwodka.webp?v=3) center/contain no-repeat;pointer-events:none}
.hero-luk{position:absolute;right:-60px;bottom:-120px;width:260px;opacity:.25;pointer-events:none}
@media (max-width:860px){.hero{padding:36px 0 56px}.hero-siatka{grid-template-columns:1fr;gap:28px}.ramka-okragla{max-width:300px}.hero-luk{display:none}}

/* ---------- listy z punktami ---------- */
.punkty{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.punkty li{position:relative;padding-left:34px}
.punkty li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;
  background:var(--akcent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.punkty.nie li::before{background:var(--tekst2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.dwie-kolumny{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:760px){.dwie-kolumny{grid-template-columns:1fr}}
.karta{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);padding:26px;box-shadow:var(--cien)}
.karta h3{margin-bottom:14px}

/* ---------- 12 obszarów ---------- */
.obszary{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.obszar{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);padding:20px 20px 18px;display:flex;flex-direction:column;
  gap:10px;box-shadow:var(--cien);position:relative;transition:transform .15s,box-shadow .15s;text-decoration:none;color:inherit}
a.obszar:hover{transform:translateY(-2px);box-shadow:var(--cien-mocny)}
.obszar-nr{width:40px;height:40px;border-radius:50%;background:var(--granat);color:#f1dfb5;display:grid;place-items:center;
  font-family:var(--f-nagl);font-weight:800;font-size:16px;flex:none}
html[data-motyw="ciemny"] .obszar-nr{background:#24406b}
.obszar h3{font-size:17.5px;margin:0;line-height:1.3}
.obszar p{margin:0;font-size:15px;color:var(--tekst2)}

/* ---------- jak wygląda lekcja ---------- */
.trzy{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.trzy{grid-template-columns:1fr}}
.krok{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);padding:24px;box-shadow:var(--cien)}
.krok-ikona{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ok-tlo);color:var(--akcent);margin-bottom:14px}
html[data-motyw="ciemny"] .krok-ikona{color:#fff;background:var(--zielen)}
.krok-ikona svg{width:28px;height:28px}
.krok:nth-child(2) .krok-ikona{background:var(--blekit);color:var(--granat)}
html[data-motyw="ciemny"] .krok:nth-child(2) .krok-ikona{background:#1f3350;color:#a9c4ea}
.krok:nth-child(3) .krok-ikona{background:var(--zloto-tlo);color:var(--zloto-tekst)}
.krok p{margin:0;color:var(--tekst2)}

/* ---------- stopnie ---------- */
.stopnie{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;margin:28px 0 0;padding:0;counter-reset:st}
.stopnie li{position:relative;padding:0 18px 0 0}
.stopnie li::before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--karta);border:3px solid var(--zloto);font-family:var(--f-nagl);font-weight:800;color:var(--naglowek);position:relative;z-index:1;margin-bottom:12px}
.stopnie li::after{content:"";position:absolute;top:22px;left:46px;right:0;height:3px;background:linear-gradient(90deg,var(--zloto),var(--linia))}
.stopnie li:last-child::after{display:none}
.stopnie b{display:block;font-family:var(--f-nagl);color:var(--naglowek);font-size:18px}
.stopnie span{color:var(--tekst2);font-size:15px}
@media (max-width:700px){.stopnie{grid-template-columns:1fr;gap:18px}.stopnie li::after{display:none}}

/* ---------- mentorzy ---------- */
.mentorzy{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px;list-style:none;margin:0;padding:0}
/* 7 mentorów (Ania 28.10.2026): po 3 w rzędzie, duże kółka; siódmy sam, na środku (kolejność z panelu); na telefonie po 2, ostatni na środku */
@media (min-width:700px){
  .mentorzy:has(>.mentor:nth-child(7):last-child){grid-template-columns:repeat(6,minmax(0,1fr));max-width:1180px;margin:0 auto;gap:34px 28px}
  .mentorzy:has(>.mentor:nth-child(7):last-child)>.mentor{grid-column:span 2}
  .mentorzy:has(>.mentor:nth-child(7):last-child)>.mentor:nth-child(7){grid-column:3 / span 2}
}
@media (max-width:699px){
  .mentorzy:has(>.mentor:nth-child(7):last-child)>.mentor:last-child{grid-column:1 / -1;max-width:50%;justify-self:center;width:100%}
}
.mentor{text-align:center}
.mentor .ramka-okragla{max-width:180px;margin-bottom:12px}
@media (min-width:700px){.mentor .ramka-okragla{max-width:340px}}   /* 28.10.2026 (Anna): duże kółka mentorów na komputerze, 3 w rzędzie */
.mentor .zastepcze{font-size:12px;padding:14px;line-height:1.25}
.mentor .zastepcze svg{width:30px;height:30px}
.mentor b{display:block;font-family:var(--f-nagl);font-size:18px;color:var(--naglowek)}
.mentor span{display:block;color:var(--tekst2);font-size:14.5px}

/* ---------- cena ---------- */
.cena-pudlo{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--karta);border:1px solid var(--linia);border-radius:22px;
  overflow:hidden;box-shadow:var(--cien-mocny)}
.cena-lewa{padding:34px;background:var(--granat);color:#e9eef5;position:relative;overflow:hidden}
.cena-lewa h3{color:#fff;margin-bottom:6px}
.cena-kwota{font-family:var(--f-nagl);font-weight:800;font-size:clamp(44px,6vw,64px);color:#fff;line-height:1;margin:18px 0 6px}
.cena-kwota small{font-size:16px;font-weight:600;color:#c9d6e6;margin-left:6px}
.cena-lewa p{color:#c9d6e6;margin:0}
.cena-lewa::after{content:"";position:absolute;left:-30px;bottom:-12px;width:360px;height:70px;background:url(marka/zloto.webp) center/contain no-repeat;opacity:.9}
.cena-prawa{padding:34px}
.uwaga-test{margin-top:14px;font-size:14px;color:var(--tekst2);display:flex;gap:8px;align-items:flex-start}
.uwaga-test::before{content:"i";flex:none;width:20px;height:20px;border-radius:50%;background:var(--zloto-tlo);color:var(--zloto-tekst);
  font-weight:800;display:grid;place-items:center;font-size:12px;margin-top:2px}
@media (max-width:760px){.cena-pudlo{grid-template-columns:1fr}.cena-lewa,.cena-prawa{padding:26px}}

/* ---------- pytania ---------- */
.pytania{display:grid;gap:12px;max-width:820px}
.pytania details{background:var(--karta);border:1px solid var(--linia);border-radius:14px;padding:0 20px}
.pytania summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-family:var(--f-nagl);font-weight:700;color:var(--naglowek);position:relative}
.pytania summary::-webkit-details-marker{display:none}
.pytania summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;color:var(--zloto-tekst);font-weight:400}
.pytania details[open] summary::after{content:"–"}
.pytania details p{margin:0 0 18px;color:var(--tekst2)}

/* ---------- stopka ---------- */
.stopka{border-top:1px solid var(--linia);background:var(--tlo-sekcji);margin-top:40px}
.stopka-wnetrze{max-width:var(--szer);margin:0 auto;padding:34px 20px 80px;display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.stopka nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.stopka nav a{color:var(--tekst2);text-decoration:none;font-size:15px}
.stopka nav a:hover{color:var(--naglowek);text-decoration:underline}
.stopka nav a.wkrotce{pointer-events:none;opacity:.75}
.stopka-drobne{width:100%;margin:0;color:var(--tekst2);font-size:13.5px}
.stopka-marka{display:flex;align-items:center;gap:10px}
.stopka-marka img{width:30px}

/* ---------- platforma uczestnika ---------- */
.pasek-podgladu{background:var(--zloto-tlo);color:var(--zloto-tekst);text-align:center;font-weight:700;font-size:14.5px;padding:9px 16px;border-bottom:1px solid var(--linia)}
.platforma-gora{padding:40px 0 10px}
.okruszki{font-size:14.5px;color:var(--tekst2);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.okruszki a{color:var(--tekst2)}
.okruszki span[aria-hidden]{opacity:.6}
.powitanie{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
@media (max-width:760px){.powitanie{grid-template-columns:1fr}}
.postep-karta{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);padding:18px 22px;min-width:280px;box-shadow:var(--cien)}
.postep-karta b{font-family:var(--f-nagl);font-size:28px;color:var(--naglowek)}
.pasek{height:8px;background:var(--linia);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.pasek i{display:block;height:100%;background:var(--zielen);border-radius:99px}
.drobne{font-size:14px;color:var(--tekst2)}
.dalej{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:var(--granat);color:#e9eef5;border-radius:var(--promien);padding:20px 24px;margin:26px 0 0;
  position:relative;overflow:hidden}
.dalej b{font-family:var(--f-nagl);color:#fff;font-size:18px;display:block}
.dalej span{color:#c9d6e6;font-size:14.5px}
.dalej .przycisk{margin-left:auto}
.dalej::after{content:"";position:absolute;right:-40px;top:-20px;width:240px;height:60px;background:url(marka/zielen.webp?v=3) center/contain no-repeat;opacity:.55;pointer-events:none}
.kafle{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;list-style:none;margin:0;padding:0}
.kafel{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;box-shadow:var(--cien);transition:transform .15s,box-shadow .15s;height:100%}
a.kafel:hover{transform:translateY(-2px);box-shadow:var(--cien-mocny)}
.kafel .zastepcze,.kafel img{border-radius:0;border-width:0 0 1px 0;aspect-ratio:16/9;min-height:0}
.kafel img{width:100%;object-fit:cover}   /* 25.10.2026: zdjęcie w kaflu przycinane, nie rozciągane (punkt kadru = object-position) */
.kafel-tresc{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.kafel-tresc h3{font-size:17px;margin:0;line-height:1.3}
.kafel-gora{display:flex;align-items:center;gap:10px}
.kafel-gora .obszar-nr{width:32px;height:32px;font-size:14px}
.kafel-stopka{margin-top:auto}
.znaczek{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:99px;padding:3px 10px;background:var(--tlo-sekcji);color:var(--tekst2)}
.znaczek.ok{background:var(--ok-tlo);color:var(--ok-tekst)}
.znaczek.zloty{background:var(--zloto-tlo);color:var(--zloto-tekst)}
.znaczek.blad{background:var(--blad-tlo);color:var(--blad-tekst)}
/* panel: stan materiału (24.10.2026) */
.stan-materialu{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.stan-materialu li{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;align-items:baseline}
.stan-materialu li>.znaczek{justify-self:start}
.braki{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:560px){.stan-materialu li{grid-template-columns:1fr}}
.kafel.wkrotce{border-style:dashed;box-shadow:none;background:transparent}
.kafel.wkrotce .kafel-tresc{justify-content:center}

/* ---------- obszar ---------- */
.obszar-glowa{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center}
@media (max-width:860px){.obszar-glowa{grid-template-columns:1fr}}
.etap{margin:34px 0 0}
.etap-glowa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.etap-glowa h2{font-size:24px;margin:0}
.lekcje{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lekcja-wiersz{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--karta);border:1px solid var(--linia);
  border-radius:14px;padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--cien);transition:border-color .15s}
a.lekcja-wiersz:hover{border-color:var(--akcent)}
.lekcja-nr{width:38px;height:38px;border-radius:12px;background:var(--blekit);color:var(--granat);display:grid;place-items:center;font-family:var(--f-nagl);font-weight:800}
html[data-motyw="ciemny"] .lekcja-nr{background:#1f3350;color:#a9c4ea}
.lekcja-wiersz.zrobiona .lekcja-nr{background:var(--akcent);color:#fff}
.lekcja-wiersz h3{font-size:17px;margin:0 0 2px}
.lekcja-wiersz p{margin:0;font-size:14.5px;color:var(--tekst2)}
.lekcja-wiersz.zamknieta{opacity:.75;box-shadow:none;background:transparent;border-style:dashed}
@media (max-width:560px){.lekcja-wiersz{grid-template-columns:auto 1fr}.lekcja-wiersz>.znaczek{grid-column:2;justify-self:start}}

/* ---------- lekcja ---------- */
.lekcja-uklad{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;padding-bottom:40px}
@media (max-width:980px){.lekcja-uklad{grid-template-columns:1fr}}
.blok{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);padding:22px;box-shadow:var(--cien);margin-bottom:22px}
.blok-glowa{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.blok-glowa h2{font-size:21px;margin:0}
.blok-nr{width:30px;height:30px;border-radius:50%;background:var(--zloto);color:#17325e;display:grid;place-items:center;font-weight:800;font-family:var(--f-nagl);font-size:14px;flex:none}
.film{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prezentacja{width:100%;aspect-ratio:4/3;border:1px solid var(--linia);border-radius:12px;background:#fff}
.opis-lekcji p:last-child{margin-bottom:0}
.zadanie-pyt{display:block;margin:0 0 18px}
.zadanie-pyt>span{display:block;font-weight:700;color:var(--naglowek);margin-bottom:6px}
textarea,input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=date],select{width:100%;
  background:var(--pole);border:1px solid var(--linia-mocna);border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.5}
textarea{min-height:110px;resize:vertical}
textarea:focus,input:focus,select:focus{outline:3px solid color-mix(in srgb,var(--akcent) 35%,transparent);border-color:var(--akcent)}
.zadanie-stopka{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--linia);padding-top:16px;margin-top:6px}
/* materiały przeniesione ze starej części dla mężczyzn (23.10.2026): film z pliku, slajdy, ćwiczenie z blokami, czysty PDF */
.film-wideo{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#000}
.slajdy-scena{position:relative;background:#0c1e3c;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.slajdy-scena img{display:block;width:100%;height:100%;object-fit:contain}
.slajdy-scena:fullscreen{border-radius:0}
.slajdy-strzalka{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(12,30,60,.6);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.slajdy-strzalka:hover{background:rgba(12,30,60,.88)}
.slajdy-strzalka[disabled]{opacity:.3;cursor:default}
.slajdy-prev{left:8px}.slajdy-next{right:8px}
.slajdy-dol{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.slajdy-licznik{font-size:14px;font-weight:700;color:var(--tekst2)}
.slajdy-kropki{display:flex;gap:6px;flex-wrap:wrap}
.slajdy-kropka{position:relative;width:26px;height:24px;border:0;padding:0;background:none;cursor:pointer}   /* 26.10.2026: cel dotyku 26×24 px */
.slajdy-kropka::after{content:"";position:absolute;left:0;right:0;top:9px;height:6px;border-radius:4px;background:var(--linia-mocna)}
.slajdy-kropka.on::after{background:var(--zloto)}
.cw-tytul{font-size:21px;margin:0 0 6px}
.cw-wstep{color:var(--tekst2);margin:0 0 12px}
.cw-blok{border:0;border-top:1px solid var(--linia);margin:0;padding:14px 0 2px}
.cw-blok legend{padding:0 8px 0 0;font-family:var(--f-nagl);font-weight:800;font-size:15px;color:var(--naglowek);text-transform:uppercase;letter-spacing:.03em}
.cw-mysl{margin:6px 0 16px;padding:12px 14px;background:var(--tlo-sekcji);border-left:3px solid var(--zloto);border-radius:10px;color:var(--naglowek)}
#wydruk{display:none}
.edytor-cwiczenia{font-family:ui-monospace,Consolas,'Courier New',monospace;font-size:14px;line-height:1.5}
.gotowe-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.gotowy{display:flex;flex-direction:column;gap:6px;height:100%;background:var(--karta);border:1px solid var(--linia);border-left:4px solid var(--zloto);
  border-radius:var(--promien);padding:18px 20px;box-shadow:var(--cien);text-decoration:none;color:var(--tekst)}
.gotowy:hover{border-color:var(--linia-mocna);border-left-color:var(--zloto)}
.gotowy b{font-family:var(--f-nagl);font-size:18px;color:var(--naglowek);line-height:1.3}
.gotowy-sklad{font-size:14px;color:var(--tekst2)}
.gotowy .znaczek{align-self:flex-start}
.zadanie-stan{font-size:14px;color:var(--tekst2);margin-right:auto}
.boczna{position:sticky;top:92px;display:grid;gap:16px}
@media (max-width:980px){.boczna{position:static}}
.autor{display:flex;gap:12px;align-items:center}
.autor .zastepcze,.autor img{width:54px;height:54px;min-height:0;border-radius:50%;padding:0;flex:none;object-fit:cover;border-style:solid;border-width:1px}
.autor .zastepcze svg{width:22px;height:22px}
.autor .zastepcze span{display:none}
.autor b{display:block;font-family:var(--f-nagl);color:var(--naglowek)}
.autor small{color:var(--tekst2)}
.nawigacja-lekcji{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.ukonczona{display:flex;align-items:center;gap:10px;background:var(--ok-tlo);border:1px solid var(--ok-linia);color:var(--ok-tekst);border-radius:12px;padding:12px 14px;font-weight:700}

/* ---------- formularze, komunikaty ---------- */
.pole{display:block;margin:0 0 16px}
.pole>span{display:block;font-weight:700;color:var(--naglowek);margin:0 0 6px;font-size:15.5px}
.pole small{display:block;color:var(--tekst2);font-size:13.5px;margin-top:5px;font-weight:400}
/* robocze teksty strony (23.10.2026) */
.wstep-pasek{padding:34px 0 38px;border-bottom:1px solid var(--linia)}
.wstep-glowne{font-family:var(--f-nagl);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.35;color:var(--naglowek);max-width:46ch;margin:0 0 12px}
.wstep-pasek .lead{margin:0;max-width:70ch}
.wstep-pasek .hero-fakty{margin-top:18px}
.hero-haslo{font-family:var(--f-nagl);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--akcent);margin:-6px 0 14px}
html[data-motyw="ciemny"] .hero-haslo{color:#3a9a76}   /* tylko ciemny motyw: wariant C zatwierdzony przez Annę 24.10.2026 (kontrast 5,25:1); jasny bez zmian */
.akapity{max-width:70ch;font-size:18px;line-height:1.6}
.akapity p{margin:0 0 1em}
.akapit-pod{max-width:62ch;color:var(--tekst2);margin:10px 0 0}
.przycisk-pod{margin:34px 0 0;text-align:center}
/* formularz kontaktowy (23.10.2026) */
.pomin-wzrok{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* tekst tylko dla czytników ekranu */
.kontakt-wnetrze{max-width:820px}
.pole>label{display:block}
.pole>label>span{display:block;font-weight:700;color:var(--naglowek);margin:0 0 6px;font-size:15.5px}
.pole.z-bledem input,.pole.z-bledem textarea{border-color:var(--blad-tekst);box-shadow:0 0 0 1px var(--blad-tekst)}
.blad-pola{color:var(--blad-tekst)!important;font-weight:600!important}
.pulapka{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.formularz-kontakt .drobne{margin:4px 0 18px}
html{scroll-padding-top:88px}   /* 26.10.2026: kotwice ORAZ element z fokusem (Tab) nie chowają się pod przyklejonym nagłówkiem */
.komunikat{border-radius:12px;padding:12px 16px;margin:0 0 18px;border:1px solid}
.komunikat.ok{background:var(--ok-tlo);border-color:var(--ok-linia);color:var(--ok-tekst)}
.komunikat.blad{background:var(--blad-tlo);border-color:var(--blad-linia);color:var(--blad-tekst)}
.komunikat.uwaga{background:var(--zloto-tlo);border-color:color-mix(in srgb,var(--zloto) 45%,transparent);color:var(--zloto-tekst)}
.komunikat.uwaga a{color:inherit;font-weight:700}
.siatka-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.siatka-form{grid-template-columns:1fr}}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th,.tabela td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linia);vertical-align:top}
.tabela th{font-family:var(--f-nagl);color:var(--naglowek);font-size:14px}
.tabela-przewijana{overflow-x:auto;-webkit-overflow-scrolling:touch}
.makieta{position:relative}
.makieta-znak{display:inline-flex;gap:6px;align-items:center;background:var(--zloto-tlo);color:var(--zloto-tekst);font-weight:800;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 10px}

/* ---------- panel mentora i panel treści: zakładki ---------- */
.zakladki{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 24px;padding:0;list-style:none;border-bottom:1px solid var(--linia)}
.zakladki a{display:block;padding:10px 14px;text-decoration:none;color:var(--tekst2);font-weight:700;border-bottom:3px solid transparent;margin-bottom:-1px}
.zakladki a[aria-current="page"]{color:var(--naglowek);border-bottom-color:var(--zloto)}
.zakladki a:hover{color:var(--naglowek)}
.liczby{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:0 0 24px}
.liczba{background:var(--karta);border:1px solid var(--linia);border-radius:14px;padding:16px 18px}
.liczba b{display:block;font-family:var(--f-nagl);font-size:28px;color:var(--naglowek)}
.liczba span{color:var(--tekst2);font-size:14px}
.kopiuj{display:flex;gap:8px;flex-wrap:wrap}
.kopiuj input{flex:1;min-width:220px}
.lista-prosta{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lista-prosta li{background:var(--karta);border:1px solid var(--linia);border-radius:12px;padding:12px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lista-prosta li>a:first-child,.lista-prosta li>b:first-child{font-weight:700;margin-right:auto}
.wybor-miejsc{display:grid;gap:6px;max-height:420px;overflow:auto;border:1px solid var(--linia);border-radius:12px;padding:10px;background:var(--pole)}
.wybor-miejsc label{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;font-size:14.5px}
.wybor-miejsc select,.wybor-miejsc input[type=number]{width:auto;padding:4px 8px;font-size:14px;border-radius:8px}
.wybor-miejsc input[type=number]{width:64px}
.miniatura{width:160px;border-radius:10px;border:1px solid var(--linia)}

/* ---------- druk: tylko zadanie z odpowiedziami ---------- */
@media print{
  .gora,.stopka,.boczna,.pasek-podgladu,.nie-drukuj,.okruszki,.blok:not(.blok-zadanie){display:none!important}
  body{background:#fff;color:#000}
  .blok{border:0;box-shadow:none;padding:0}
  textarea{border:1px solid #999;min-height:0;height:auto}
}
@media print{
  html.druk-cwiczenia body>*:not(#wydruk){display:none!important}
  html.druk-cwiczenia body{background:#fff!important}
  html.druk-cwiczenia #wydruk{display:block!important;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:11.5pt;line-height:1.45}
  #wydruk .wd-gora{font-size:9pt;letter-spacing:.12em;text-transform:uppercase;color:#666}
  #wydruk h1{font-size:17pt;margin:4pt 0 2pt;color:#17325e}
  #wydruk h2{font-size:13pt;margin:0 0 4pt;color:#17325e}
  #wydruk .wd-data{font-size:9.5pt;color:#555;margin:0 0 8pt}
  #wydruk .wd-wstep{font-size:10pt;color:#333;margin:0 0 10pt}
  #wydruk h3{font-size:11pt;text-transform:uppercase;color:#17325e;border-bottom:1px solid #ccc;padding-bottom:2pt;margin:14pt 0 6pt}
  #wydruk .wd-pyt{margin:0 0 8pt;break-inside:avoid}
  #wydruk .wd-q{font-weight:bold}
  #wydruk .wd-a{margin-top:2pt;padding-left:8pt;border-left:2px solid #c9d4e3}
  #wydruk .wd-pusto{color:#999;font-style:italic}
  #wydruk .wd-mysl{margin-top:12pt;padding:6pt 8pt;border-left:2px solid #b7995d;color:#17325e}
}
/* ---------- aplikacja na telefon (PWA, 25.10.2026) ---------- */
.pwa-aktualizacja{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;background:var(--karta);color:var(--tekst);border:1px solid var(--linia-mocna);border-radius:14px;box-shadow:0 12px 32px rgba(10,20,30,.18)}
.pwa-aktualizacja span{flex:1 1 260px;font-size:15px}
.pwa-karta{margin:0 0 22px}
/* etap 19 (25.10.2026): kroki instalacji z ikonami tych samych symboli, które widać na ekranie */
.pwa-kroki{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.pwa-kroki li{display:flex;gap:12px;align-items:center;line-height:1.4}
.pwa-ikona{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blekit);color:var(--granat);vertical-align:middle}
.pwa-ikona svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pwa-ikona svg circle{fill:currentColor;stroke:none}
[data-pwa-jest] .pwa-ikona,[data-pwa-dodano] .pwa-ikona{width:28px;height:28px;border-radius:50%;margin-right:6px}
[data-pwa-jest] .pwa-ikona svg,[data-pwa-dodano] .pwa-ikona svg{width:18px;height:18px}
[data-motyw="ciemny"] .pwa-ikona{background:#1f3550;color:#dfe8f2}
/* brak zdjęcia: spokojne tło marki zamiast pola „Miejsce na zdjęcie” (pole z podpisem widzi tylko prowadząca) */
.obraz-marka{display:flex;align-items:center;justify-content:center;border-radius:var(--promien);min-height:120px;
  background:linear-gradient(135deg,var(--zielen) 0%,var(--granat) 100%);color:#fff}
.obraz-marka span{font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-.02em;opacity:.92}
.obraz-marka img{width:42%;max-width:160px;height:auto;filter:brightness(0) invert(1);opacity:.9}
.kafel .obraz-marka{border-radius:0;aspect-ratio:16/9;min-height:0}
.ramka-okragla .obraz-marka{border-radius:50%;aspect-ratio:1/1;width:84%;margin:8%;min-height:0}
.karta .tabela td{overflow-wrap:anywhere}   /* długi e-mail w „Moje konto” nie wystaje z karty na telefonie (etap 19) */
.cw-gdzie{margin:0 0 14px}.cw-gdzie summary{cursor:pointer;font-weight:600}.cw-gdzie p{margin:8px 0 0}
@media (display-mode: standalone){.gora{padding-top:env(safe-area-inset-top)}}
/* etap 20 (25.10.2026): kadr zdjęcia w panelu i osobny podgląd propozycji — zdjęcie, ramka, pociągnięcia i tekst zostają osobno */
.kadr-uklad{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin:8px 0}
.kadr-wybor{position:relative;margin:0;max-width:360px;cursor:crosshair;border-radius:10px;overflow:hidden;outline-offset:3px}
.kadr-wybor img{display:block;width:100%;height:auto}
.kadr-punkt{position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--granat),0 2px 6px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.kadr-podglady{display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:380px}
.kadr-podglady .drobne{flex-basis:100%}
.kadr-169{width:220px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.kadr-169.waski{width:140px}
.kadr-kolo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--zloto)}
.kadr-kolo.maly{width:60px;height:60px}
.podglad-ramki{display:flex;gap:16px;flex-wrap:wrap}
.podglad-ramki figure{margin:0}
.podglad-okno{border:1px solid var(--zastepcze-linia);border-radius:12px;overflow:hidden;background:#fff}
.podglad-okno iframe{border:0;display:block}
.podglad-tel .podglad-okno,.podglad-tel iframe{width:375px;height:640px}
.podglad-komp .podglad-okno{width:640px;height:400px}
.podglad-komp iframe{width:1280px;height:800px;transform:scale(.5);transform-origin:0 0}
@media (max-width:700px){.podglad-komp .podglad-okno{width:320px;height:200px}.podglad-komp iframe{transform:scale(.25)}.podglad-tel .podglad-okno{width:100%}}

/* ---------- OKŁADKA OBSZARU (26.10.2026, pakiet nocny pkt 5): kompozycja z projektu Codexa z osobnych elementów ----------
   Proporcje z projektu 1280×720: tekst 53% / zdjęcie 47%, tytuł 61 px (4,77%), numer 25 px, marka 29 px, kompas 78 px,
   hasło 20 px, łuk 9 px. Jednostki cqw = procent szerokości okładki (container query), z minimalnymi wielkościami czytelności.
   Kolory z formatki: papier #F4F5F3 / ciemne tło #16202C, granat, złoto #B7995D; ciemny motyw jak ciemny projekt. */
.okladka{container:okladka/inline-size;--okl-tlo:var(--papier);--okl-tytul:#17325e;--okl-haslo:#53606b;
  position:relative;background:var(--okl-tlo);border-radius:var(--promien);overflow:hidden;isolation:isolate}
html[data-motyw="ciemny"] .okladka{--okl-tlo:#16202c;--okl-tytul:#e9eef5;--okl-haslo:#a9b6c6}
.okl-wnetrze{display:grid;grid-template-columns:53% 47%;aspect-ratio:16/9}
.okl-tekst{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  padding:3.2cqw 1.5cqw 3.4cqw 4.8cqw}
.okl-marka{display:flex;align-items:center;gap:1.4cqw;color:var(--okl-tytul);font-family:var(--f-tekst);font-size:max(12px,2.27cqw);line-height:1.1}
.okladka .okl-kompas{width:max(30px,6.1cqw);height:auto;aspect-ratio:160/167;border:0;border-radius:0;object-fit:contain;flex:none}
.okladka .okl-ciemny{display:none}
html[data-motyw="ciemny"] .okladka .okl-jasny{display:none}
html[data-motyw="ciemny"] .okladka .okl-ciemny{display:block}
.okladka .okl-nr{position:relative;margin:4.6cqw 0 0;padding-bottom:3.2cqw;font-family:var(--f-nagl);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:max(12px,1.95cqw);line-height:1.1;color:var(--okl-tytul)}
.okl-nr::after{content:"";position:absolute;left:-.8cqw;bottom:.2cqw;width:max(110px,22cqw);height:max(12px,2.6cqw);
  background:url(marka/zloto.webp) left center/100% 100% no-repeat}
.okladka .okl-tytul{margin:1.6cqw 0 0;font-family:var(--f-nagl);font-weight:800;color:var(--okl-tytul);
  font-size:max(19px,4.77cqw);line-height:1.17;letter-spacing:-.012em;max-width:100%;hyphens:manual}
.okladka.okl-dlugi .okl-tytul{font-size:max(18px,3.65cqw)}
.okladka .okl-haslo{margin:auto 0 0;padding-top:2.4cqw;font-family:var(--f-tekst);text-transform:uppercase;letter-spacing:.12em;
  font-size:max(11px,1.56cqw);line-height:1.2;color:var(--okl-haslo)}
.okl-haslo::before{content:"";display:block;width:max(120px,23cqw);height:max(14px,3.3cqw);margin:0 0 1.6cqw -.6cqw;
  background:url(marka/zielen.webp) left center/100% 100% no-repeat}
.okl-foto{position:relative;min-height:0;overflow:hidden}
.okladka .okl-foto > img,.okladka .okl-foto > .obraz-marka,.okladka .okl-foto > .zastepcze{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto;border:0;border-radius:0;min-height:0}
.okl-luk{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.okl-papier{fill:var(--okl-tlo)}
.okl-zloto{fill:none;stroke:#b7995d;stroke-width:max(3px,.7cqw);vector-effect:non-scaling-stroke}
.okl-luk-gora{display:none}
/* wąska okładka (telefon, wąska kolumna): tekst nad zdjęciem, elastyczna wysokość, łuk na górnej krawędzi zdjęcia */
@container okladka (max-width: 470px){
  .okl-wnetrze{grid-template-columns:1fr;aspect-ratio:auto}
  .okl-tekst{padding:18px 18px 6px 20px}
  .okl-marka{font-size:15px;gap:10px}
  .okladka .okl-kompas{width:40px}
  .okladka .okl-nr{margin-top:20px;font-size:13px;padding-bottom:16px}
  .okl-nr::after{width:130px;height:14px;bottom:1px;left:-4px}
  .okladka .okl-tytul,.okladka.okl-dlugi .okl-tytul{margin-top:8px;font-size:clamp(22px,6.6cqw,30px)}
  .okladka .okl-haslo{margin-top:14px;padding-top:0;font-size:11.5px}
  .okl-haslo::before{width:140px;height:17px;margin:0 0 8px -3px}
  .okl-foto{aspect-ratio:16/10;margin-top:6px}
  .okl-luk-bok{display:none}
  .okl-luk-gora{display:block}
}
/* warianty: kafel (lista obszarów), program (strona programu), nagłówek obszaru */
.kafle.z-okladkami{grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:22px}
.kafel.kafel-okladka .okladka{border-radius:0}
.kafel.kafel-okladka .kafel-tresc{padding:12px 18px 16px;flex:0}
.obszary.z-okladkami{grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:22px}
.obszary.z-okladkami .obszar{padding:0;overflow:hidden;gap:0}
.obszary.z-okladkami .obszar .okladka{border-radius:0}
.obszary.z-okladkami .obszar > p{padding:14px 20px 18px}
.okladka-naglowek{box-shadow:var(--cien);border:1px solid var(--linia)}
@container okladka (min-width: 471px){.okladka-naglowek .okl-wnetrze{aspect-ratio:21/9}}   /* 28.10: na telefonie 21/9 zerowało zdjęcie nagłówka */
.okladka-naglowek .okl-tytul{font-size:clamp(26px,4.2cqw,50px)}
.okladka-naglowek.okl-dlugi .okl-tytul{font-size:clamp(22px,3.3cqw,40px)}
.obszar-glowa-okladka .lead{margin:18px 0 0;max-width:62ch}
/* 26.10.2026 (pakiet nocny pkt 4): komunikat o nowej wersji aplikacji jest przyklejony do dołu ekranu — dopóki jest widoczny,
   strona ma zapas na dole, a fokus z klawiatury nie chowa się pod nim */
html:has(.pwa-aktualizacja){scroll-padding-bottom:150px}
body:has(> .pwa-aktualizacja){padding-bottom:150px}
.pwa-aktualizacja .pwa-uwaga{flex-basis:100%;margin:0;font-size:15px;color:var(--blad-tekst)}
/* 26.10.2026 (blok 5): nagłówek profilu mentora — na telefonie zdjęcie nad imieniem (dotąd 260 px obok imienia ucinało nazwisko) */
.obszar-glowa.profil-glowa{grid-template-columns:260px 1fr;align-items:center}
.profil-glowa .ramka-okragla{max-width:260px}
@media (max-width:640px){.obszar-glowa.profil-glowa{grid-template-columns:1fr;gap:18px}.profil-glowa .ramka-okragla{max-width:200px}}
/* 26.10.2026 (blok 5): skład materiału na liście obszaru (Film · Slajdy · Ćwiczenie) */
.lekcja-wiersz p.lekcja-sklad{margin-top:4px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--akcent)}

/* 28.10.2026: wspólna strona główna marki — dwie drogi pod karuzelą, myśl przewodnia, oznaczenie programów mentora */
.drogi-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.droga{position:relative;border-radius:16px;overflow:hidden;background:#13201b;min-height:420px;display:flex;align-items:flex-end;box-shadow:0 16px 40px rgba(20,40,34,.16)}
.droga img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.droga::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,17,0) 40%,rgba(8,16,14,.88) 100%)}
.droga-tresc{position:relative;z-index:1;padding:26px;color:#fff;width:100%}
.droga-tresc h3{margin:0;font-size:clamp(24px,2.6vw,32px);color:#fff}
.droga-tresc p{margin:8px 0 16px;color:#e3ece8}
.drogi-logowanie{margin:22px 0 0;text-align:center}
.mysl-marki{background:linear-gradient(90deg,#1b3a63 0%,#175150 50%,#1d4536 100%);color:#eaf3ef;text-align:center}
.mysl-marki h2{color:#fff;margin:0 0 14px}
.mysl-marki p{max-width:760px;margin:0 auto;font-size:18px;line-height:1.6}
.znaczek-programy{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--zielen,#246b52);letter-spacing:.02em}
@media(max-width:700px){.drogi-siatka{grid-template-columns:1fr}.droga{min-height:340px}}
/* ---------- strona mentora (29.10.2026): własne materiały, biblioteka, propozycje współpracy, kontakt ---------- */
.ms-sekcja{margin-top:38px}
.ms-sekcja > h2{font-size:24px;margin:0 0 4px}
.ms-sekcja > .ms-uwaga{margin:0 0 18px;max-width:72ch}
.ms-znaczki{display:flex;flex-wrap:wrap;gap:6px}
.ms-kontakt{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ms-autor-link{text-decoration:none;color:inherit;margin:14px 0 6px}
.ms-autor-link small{display:block;color:var(--tekst2)}
p.komunikat.ms-uwaga{background:var(--tlo-sekcji);border-color:var(--linia);color:var(--tekst2);font-size:15px;margin-top:16px}
.ms-tresc p{max-width:70ch}
.ms-okladka img{width:100%;height:auto;border-radius:12px;aspect-ratio:16/9;object-fit:cover}
.kafel.ms-oferta .kafel-tresc p{font-size:15px}
.ms-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ms-lista li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border:1px solid var(--linia);border-radius:12px;background:var(--karta)}
.ms-lista li > b{flex:1 1 220px}
.ms-lista form{display:inline}
/* 30.10.2026 (pakiet dzienny pkt 3): stan programu pod zapowiedzią obszarów, znaczek „W przygotowaniu” na karcie obszaru,
   zachęta z przyciskiem do formularza w części o dostępie */
.obszary-stan{font-weight:600;color:var(--tekst)}
.obszar > .obszar-stan{align-self:flex-start}
.obszary.z-okladkami .obszar > .obszar-stan{margin:14px 20px 0}
.obszary.z-okladkami .obszar > .obszar-stan + p{padding-top:8px}
.dostep-kontakt{max-width:70ch;margin:26px 0 0;padding:22px 24px;border:1px solid var(--linia);border-radius:var(--promien);background:var(--karta);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.dostep-kontakt p{margin:0;flex:1 1 280px;font-size:18px;line-height:1.5}
.logowanie-linki{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
/* 30.10.2026: polityka prywatnosci (statyczna) w oprawie stron publicznych; tresc bez zmian */
.tekst-prawny-strona{padding-top:40px;padding-bottom:50px}
.tekst-prawny{padding:28px 30px 20px;line-height:1.65}
.tekst-prawny h1{font-size:clamp(28px,4vw,38px);margin:0 0 6px}
.tekst-prawny .data{color:var(--tekst2);font-size:14px;margin:0 0 18px}
.tekst-prawny h2{font-size:19px;margin:26px 0 8px}
.tekst-prawny ul{padding-left:22px;margin:6px 0 10px}
.tekst-prawny li{margin:3px 0}
@media (max-width:560px){.tekst-prawny{padding:20px 16px 12px}}