:root {
  --fiolet:#7c5cff; --rozowy:#ff6fb5; --niebieski:#4fc3f7;
  --zolty:#ffd54f; --tlo:#fdf4ff; --tekst:#3a3a5c;
  --ciemny:#2c2c4f; --jasny:#f7f5ff;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:linear-gradient(160deg,var(--tlo),#eef6ff); color:var(--tekst); min-height:100vh; display:flex; flex-direction:column; }

nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:3px solid rgba(124,92,255,.15); }
nav .pojemnik { max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
nav .logo { font-size:22px; font-weight:800; color:var(--fiolet); text-decoration:none; display:flex; align-items:center; gap:8px; }
nav .logo span { background:linear-gradient(135deg,var(--fiolet),var(--rozowy)); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav .linki { display:flex; gap:6px; flex-wrap:wrap; }
nav .linki a { padding:8px 14px; border-radius:50px; font-weight:600; text-decoration:none; color:var(--tekst); transition:.15s; }
nav .linki a:hover { background:var(--jasny); color:var(--fiolet); }
nav .linki a.aktywny { background:var(--fiolet); color:#fff; }

.hero { text-align:center; padding:52px 20px 34px; position:relative; overflow:hidden; }
.hero h1 { font-size:clamp(30px,6vw,52px); color:var(--fiolet); text-shadow:3px 3px 0 rgba(124,92,255,.15); }
.hero p { font-size:clamp(16px,2.5vw,20px); color:#7777a0; margin-top:10px; max-width:640px; margin-left:auto; margin-right:auto; }
.hero .przyciski { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.hero .przycisk { background:linear-gradient(135deg,var(--fiolet),#9b7bff); color:#fff; border:none; padding:14px 28px; border-radius:50px; font-size:17px; font-weight:700; cursor:pointer; transition:.15s; box-shadow:0 6px 18px rgba(124,92,255,.35); font-family:inherit; text-decoration:none; display:inline-block; }
.hero .przycisk:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,92,255,.45); }
.hero .przycisk.bialy { background:#fff; color:var(--fiolet); border:3px solid var(--fiolet); box-shadow:none; }

main { flex:1; max-width:1100px; margin:0 auto; padding:0 20px 50px; width:100%; }
.panel { background:#fff; border-radius:24px; padding:26px; box-shadow:0 8px 30px rgba(124,92,255,.12); border:3px solid rgba(124,92,255,.15); margin-top:26px; }
.panel h2 { font-size:clamp(22px,3vw,30px); color:var(--fiolet); margin-bottom:6px; }
.panel .podtytul { color:#8888ad; margin-bottom:18px; }

#pasek-modelu { max-width:860px; margin:14px auto 0; padding:12px 18px; border-radius:16px; font-size:14px; text-align:center; display:none; }
#pasek-modelu.ai-ok { background:#e8f9ec; border:2px solid #a5d6a7; color:#2e7d32; }
#pasek-modelu.ai-oczek { background:#fff8e1; border:2px solid #ffd54f; color:#7a6a3a; }
#pasek-modelu.ai-off { background:#fdecea; border:2px solid #ef9a9a; color:#c62828; }
.postep { width:100%; height:12px; background:#fff3c4; border-radius:8px; margin-top:8px; overflow:hidden; display:none; }
.postep .wypelnienie { height:100%; width:0%; background:linear-gradient(90deg,#ffd54f,#ff9800); transition:width .5s; }

.kategorie { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.kat-btn { border:2px solid #e6e2ff; background:#f7f5ff; color:var(--tekst); padding:8px 14px; border-radius:50px; font-size:15px; cursor:pointer; transition:.15s; font-family:inherit; text-decoration:none; }
.kat-btn:hover { transform:scale(1.05); border-color:var(--fiolet); }
.kat-btn.aktywny { background:var(--fiolet); color:#fff; border-color:var(--fiolet); }

label { display:block; font-weight:600; margin:12px 0 8px; font-size:15px; }
textarea { width:100%; padding:13px; border:2px solid #e6e2ff; border-radius:14px; font-size:16px; font-family:inherit; color:var(--tekst); resize:vertical; min-height:55px; }
textarea:focus, input:focus { outline:none; border-color:var(--fiolet); }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.wybor { display:flex; align-items:center; gap:12px; }
.wybor label { margin:0; }
select { padding:10px 14px; border:2px solid #e6e2ff; border-radius:12px; font-size:15px; font-family:inherit; color:var(--tekst); cursor:pointer; }
.przycisk { background:linear-gradient(135deg,var(--fiolet),#9b7bff); color:#fff; border:none; padding:15px 30px; border-radius:50px; font-size:18px; font-weight:700; cursor:pointer; transition:.15s; box-shadow:0 6px 18px rgba(124,92,255,.35); font-family:inherit; width:100%; margin-top:18px; }
.przycisk:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,92,255,.45); }
.przycisk:disabled { opacity:.6; cursor:wait; transform:none; }
#ladowanie { display:none; text-align:center; padding:26px 0; }
.spinner { width:52px; height:52px; border:6px solid #ece6ff; border-top-color:var(--fiolet); border-radius:50%; margin:0 auto 12px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }
.siatka { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; margin-top:24px; }
.karta { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(124,92,255,.15); border:3px solid #eeeaff; display:flex; flex-direction:column; animation:pojaw .4s ease; }
@keyframes pojaw { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
.karta img { width:100%; height:240px; object-fit:contain; background:#fff; display:block; }
.karta .opis { padding:8px 12px 2px; font-weight:600; font-size:14px; color:var(--fiolet); }
.karta .pasek { display:flex; gap:8px; padding:10px; }
.karta .pasek a, .karta .pasek button { flex:1; text-align:center; text-decoration:none; padding:9px 0; border-radius:12px; font-size:14px; font-weight:600; border:none; cursor:pointer; font-family:inherit; }
.pobierz { background:var(--fiolet); color:#fff; }
.pobierz:hover { background:#6b4dff; }
.drukuj { background:var(--niebieski); color:#fff; }
.drukuj:hover { background:#3fb2e8; }
.pasek-info { text-align:center; color:#aaaacf; font-size:14px; margin-top:18px; }
.info-api { background:#fff8e1; border:2px dashed #ffd54f; border-radius:14px; padding:13px 17px; font-size:14px; margin-top:18px; color:#7a6a3a; }

.sekcja { margin-top:38px; }
.sekcja > h2 { text-align:center; color:var(--fiolet); font-size:clamp(22px,3vw,30px); }
.sekcja > p { text-align:center; color:#8888ad; margin:8px 0 22px; }
.karty-sekcji { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.karta-sekcji { background:#fff; border-radius:20px; padding:22px; box-shadow:0 6px 20px rgba(124,92,255,.12); border:3px solid #eeeaff; text-align:center; }
.karta-sekcji .ikona { font-size:38px; }
.karta-sekcji h3 { color:var(--fiolet); margin:10px 0 8px; }
.karta-sekcji p { font-size:14px; color:#7777a0; }

.opis-strony { background:#fff; border-radius:20px; padding:22px; border:3px solid #eeeaff; box-shadow:0 6px 20px rgba(124,92,255,.12); }
.opis-strony p { font-size:15px; line-height:1.65; margin-bottom:12px; }
.opis-strony p:last-child { margin-bottom:0; }
.opis-strony ol, .opis-strony ul { margin:8px 0 14px 22px; line-height:1.65; }
.opis-strony li { margin-bottom:6px; }
.opis-strony h3 { color:var(--fiolet); margin:18px 0 8px; }
.opis-strony b { color:var(--tekst); }

.formularz input, .formularz textarea { width:100%; padding:13px; border:2px solid #e6e2ff; border-radius:14px; font-size:16px; font-family:inherit; color:var(--tekst); margin-bottom:12px; }
.formularz input:focus, .formularz textarea:focus { border-color:var(--fiolet); }
.formularz .przycisk { margin-top:4px; }

footer { text-align:center; padding:22px; color:#aaaacf; font-size:14px; background:rgba(255,255,255,.7); border-top:3px solid rgba(124,92,255,.15); }
footer .linki-stopki { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
footer .linki-stopki a { color:#8a8ab0; text-decoration:none; font-weight:600; }
footer .linki-stopki a:hover { color:var(--fiolet); }

@media (max-width:640px) {
  nav .pojemnik { justify-content:center; }
  nav .linki a { padding:6px 10px; font-size:14px; }
  .panel { padding:18px; }
}

/* === Nowa siatka generatora: kontrolki + podgląd === */
.gen-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.gen-kontrolki { min-width:0; }
.grupa { border:2px solid #eeeaff; border-radius:16px; padding:14px 16px; margin:0 0 16px; background:#fdfbff; }
.grupa legend { font-weight:700; color:var(--fiolet); padding:0 8px; font-size:15px; }
.grupa .kategorie { margin-bottom:0; }
.grupa textarea { margin-top:2px; }
.przyciski-generatora { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.przyciski-generatora .przycisk { flex:1 1 220px; width:auto; margin-top:0; }
.przycisk.bialy { background:#fff; color:var(--fiolet); border:3px solid var(--fiolet); box-shadow:none; }
.przycisk.bialy:hover { background:#f7f5ff; }

.gen-podglad { position:sticky; top:84px; background:#fff; border:3px solid #eeeaff; border-radius:20px; padding:16px; box-shadow:0 8px 30px rgba(124,92,255,.12); }
.naglowek-podgladu { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.naglowek-podgladu h3 { color:var(--fiolet); font-size:18px; }
.strzalki { display:flex; align-items:center; gap:8px; }
.strzalki span { font-size:13px; color:#8a8ab0; font-weight:600; }
.strzalka { background:var(--jasny); border:2px solid #e6e2ff; color:var(--fiolet); width:34px; height:34px; border-radius:50%; font-size:15px; cursor:pointer; font-family:inherit; transition:.15s; }
.strzalka:hover { background:var(--fiolet); color:#fff; }
#podglad-obraz { background:#fff; border:2px solid #f0ecff; border-radius:14px; overflow:hidden; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
#podglad-obraz img { width:100%; height:100%; object-fit:contain; display:block; }
#podglad-opis { text-align:center; font-weight:700; color:var(--fiolet); margin:10px 0 6px; font-size:16px; }
.gen-podglad .pasek { display:flex; gap:8px; }
.gen-podglad .pasek a, .gen-podglad .pasek button { flex:1; text-align:center; text-decoration:none; padding:10px 0; border-radius:12px; font-size:14px; font-weight:600; border:none; cursor:pointer; font-family:inherit; }

.ladowanie-czas { color:#8a8ab0; font-size:13px; margin-top:6px; }

.karta.mini { text-decoration:none; cursor:pointer; }
.karta.mini:hover { transform:translateY(-3px); }

/* === FAQ === */
.faq { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details { background:#fff; border:3px solid #eeeaff; border-radius:16px; padding:14px 18px; box-shadow:0 6px 20px rgba(124,92,255,.1); }
.faq summary { cursor:pointer; font-weight:700; color:var(--fiolet); font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::after { content:'＋'; font-size:18px; color:var(--fiolet); transition:.2s; }
.faq details[open] summary::after { content:'－'; }
.faq p { margin-top:10px; color:#66668c; line-height:1.6; font-size:15px; }

@media (max-width:860px) {
  .gen-grid { grid-template-columns:1fr; }
  .gen-podglad { position:static; }
}