:root {
  --bg:#0A0D12; --card:#10161F; --text:#E6E9EF; --muted:#AAB2BF;
  --accent:#4A90E2; --accent2:#8FC6FF; --border:#1A2230; --shadow:0 8px 24px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6; }

/* Ujednolicona szerokość dla wszystkich podstron */
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* Komponenty */
header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0 16px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img { width:60px; height:60px; border-radius:12px; }
.name { font-weight:800; letter-spacing:.3px; font-size:18px; }
.badge { display:inline-block; padding:3px 10px; border:1px solid var(--border); color:var(--muted); border-radius:999px; font-size:12px; }

.lang { display:flex; gap:8px; }
.btn { cursor:pointer; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#0f141d; color:var(--text); font-weight:700; }
.btn[aria-current="true"] { background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#0b1220; border-color:transparent; }

.hero { margin-top:24px; background:linear-gradient(135deg, rgba(74,144,226,.12), rgba(143,198,255,.04)); border:1px solid var(--border); border-radius:20px; padding:32px; box-shadow:var(--shadow); margin-bottom:24px; }
.hero h1 { font-size:clamp(24px, 4vw, 36px); margin:0 0 8px; }
.hero p { color:var(--muted); margin:0; font-size:clamp(14px, 1.6vw, 16px); }

.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:var(--shadow); }
h2 { font-size: clamp(18px, 2.4vw, 24px); margin: 16px 0 8px; }
h3 { font-size: clamp(16px, 2vw, 20px); margin: 14px 0 8px; }
a { color: #87b7ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.two-cols { display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .two-cols { grid-template-columns: 1fr 1fr; }
  .grid-2{grid-template-columns:1fr 1fr}
}

.list{display:grid;gap:8px;margin:8px 0 0;padding-left:18px}
.a-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#0f141d;color:var(--text);text-decoration:none;font-weight:700}
.a-btn:hover{border-color:var(--accent)}
.a-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220;border-color:transparent}

footer{margin:28px 0 16px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:#87b7ff;text-decoration:none}
footer a:hover{text-decoration:underline}
.hidden { display:none !important; }
.toc a { display:block; padding:6px 0; }
.pill{background:#0f141d;color:var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-size:12px}