/* Wyniesione z HTML do pliku (2026-10-13), zeby przegladarka trzymala je w cache zamiast pobierac przy kazdej odslonie.
   Zrodlo: tabela advanceds.insert_body (panel: Insert body code): <style id="content-skin"> + <style id="global-tweaks"> */
/* === id="content-skin" === */
/* ============================================================
   SKÓRKA TREŚCI (#content-skin-tex) — jedno źródło stylów dla
   opisów narzędzi, kategorii i strony głównej. Klasy używane w
   treści: lead, h-fluid, text-gradient, pill, cta, grid-2,
   macro-grid, card-soft, card-mini, sum-card, badge, checklist,
   note, note-strong, table-wrap, kbd, muted, value-strong,
   shadow-soft, focus-ring, reveal, shimmer, neon-anim, anchor.
   ============================================================ */
#content-skin-tex {
    --cs-text: #0f172a;
    --cs-body: #334155;
    --cs-muted: #64748b;
    --cs-primary: #4f46e5;
    --cs-primary-2: #7c3aed;
    --cs-primary-soft: #eef2ff;
    --cs-card: #ffffff;
    --cs-soft: #f8fafc;
    --cs-border: #e5e9f2;
    --cs-border-strong: #cbd5e1;
    --cs-radius: 14px;
    --cs-radius-lg: 18px;
    --cs-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(15, 23, 42, .22);
    --cs-shadow-hover: 0 14px 34px -16px rgba(15, 23, 42, .3);
    --cs-space: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);

    max-width: 920px;
    margin-inline: auto;
    color: var(--cs-body);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.03rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

/* ---------- rytm sekcji: jeden odstęp, bez podwójnych marginesów ---------- */
#content-skin-tex > header,
#content-skin-tex > section,
#content-skin-tex > div { margin: 0 0 var(--cs-space); }
#content-skin-tex > *:last-child { margin-bottom: 0; }
#content-skin-tex > header > *:last-child,
#content-skin-tex > section > *:last-child { margin-bottom: 0; }
#content-skin-tex p { margin: 0 0 1rem; }
#content-skin-tex .mb-5 { margin-bottom: var(--cs-space) !important; }
#content-skin-tex .mb-4 { margin-bottom: 1.5rem !important; }
#content-skin-tex .mb-3, #content-skin-tex .mb-2 { margin-bottom: 1rem !important; }
#content-skin-tex .mt-5 { margin-top: var(--cs-space) !important; }
#content-skin-tex .mt-4 { margin-top: 1.5rem !important; }
#content-skin-tex .mt-3, #content-skin-tex .mt-2 { margin-top: 1rem !important; }
#content-skin-tex .pt-2, #content-skin-tex .p-3, #content-skin-tex .p-4 { padding: 0 !important; }
#content-skin-tex .card-soft.p-3, #content-skin-tex .card-soft.p-4,
#content-skin-tex .card-mini.p-3, #content-skin-tex .sum-card.p-3 { padding: 1.35rem !important; }

/* ---------- nagłówki ---------- */
#content-skin-tex h1,
#content-skin-tex h2,
#content-skin-tex h3,
#content-skin-tex h4 {
    color: var(--cs-text);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.02em;
    text-wrap: balance;
}
#content-skin-tex h1, #content-skin-tex .h-fluid { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); margin: 0 0 1.1rem; }
#content-skin-tex h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); margin: 2.25rem 0 .9rem; position: relative; padding-bottom: .55rem; }
#content-skin-tex h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 2.75rem; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--cs-primary), var(--cs-primary-2));
}
#content-skin-tex h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); margin: 1.75rem 0 .6rem; }
#content-skin-tex h4 { font-size: 1.02rem; margin: 1.4rem 0 .5rem; }
#content-skin-tex > header h2:first-child,
#content-skin-tex > section > h2:first-child,
#content-skin-tex h2:first-child { margin-top: 0; }
#content-skin-tex .card-soft h2, #content-skin-tex .card-mini h2, #content-skin-tex .sum-card h2,
#content-skin-tex .card-soft h3, #content-skin-tex .card-mini h3, #content-skin-tex .sum-card h3 {
    margin-top: 0; padding-bottom: 0; font-size: 1.18rem;
}
#content-skin-tex .card-soft h2::after, #content-skin-tex .card-mini h2::after, #content-skin-tex .sum-card h2::after { display: none; }
#content-skin-tex .text-gradient,
#content-skin-tex .h-fluid.text-gradient {
    background: linear-gradient(120deg, #0f172a 0%, var(--cs-primary) 55%, var(--cs-primary-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
#content-skin-tex .lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.18rem); color: var(--cs-text); font-weight: 400; margin-bottom: 1.5rem; }
#content-skin-tex .muted, #content-skin-tex .text-muted { color: var(--cs-muted) !important; }
#content-skin-tex strong, #content-skin-tex b { color: var(--cs-text); font-weight: 700; }
#content-skin-tex .value-strong { color: var(--cs-primary); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- linki (globalny reset gasi podkreślenia, w treści je przywracamy) ---------- */
#content-skin-tex a:not(.cta):not(.pill):not(.btn):not(.anchor) {
    color: var(--cs-primary);
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in oklab, var(--cs-primary) 35%, transparent);
    transition: color .15s ease, text-decoration-color .15s ease;
}
#content-skin-tex a:not(.cta):not(.pill):not(.btn):not(.anchor):hover {
    color: var(--cs-primary-2);
    text-decoration-color: currentColor;
}
#content-skin-tex a.anchor { text-decoration: none !important; color: var(--cs-border-strong); }

/* ---------- pigułki i przyciski ---------- */
#content-skin-tex .pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--cs-card); border: 1px solid var(--cs-border);
    padding: .38rem .85rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: var(--cs-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
#content-skin-tex .pill:hover { transform: translateY(-2px); border-color: var(--cs-primary); background: var(--cs-primary-soft); }
#content-skin-tex .d-flex { display: flex !important; flex-wrap: wrap; gap: .5rem; }
#content-skin-tex .d-flex.gap-3 { gap: .65rem; }
#content-skin-tex nav.d-flex { gap: .6rem; margin: 1.25rem 0 0; }
#content-skin-tex nav.d-flex .cta { margin: 0 !important; }
#content-skin-tex .cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-primary-2) 100%);
    color: #fff !important; font-weight: 700; font-size: .95rem;
    padding: .72rem 1.4rem; border-radius: 999px;
    text-decoration: none !important; border: 0;
    box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .85);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#content-skin-tex .cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(79, 70, 229, .95); filter: saturate(1.05); }
#content-skin-tex .cta:active { transform: translateY(0); }
#content-skin-tex .cta.ghost,
#content-skin-tex nav.d-flex .cta:nth-child(n+2) {
    background: var(--cs-card); color: var(--cs-primary) !important;
    border: 1px solid var(--cs-border); box-shadow: none;
}
#content-skin-tex .cta.ghost:hover,
#content-skin-tex nav.d-flex .cta:nth-child(n+2):hover { background: var(--cs-primary-soft); border-color: var(--cs-primary); }
#content-skin-tex .badge {
    display: inline-block; background: var(--cs-primary-soft); color: var(--cs-primary);
    padding: .2rem .6rem; border-radius: 7px; font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em;
}
#content-skin-tex .kbd, #content-skin-tex kbd {
    display: inline-block; background: var(--cs-soft); border: 1px solid var(--cs-border);
    border-bottom-width: 2px; border-radius: 6px; padding: .1rem .45rem;
    font: 600 .85em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cs-text);
}
#content-skin-tex code:not(pre code) {
    background: var(--cs-soft); border: 1px solid var(--cs-border); border-radius: 6px;
    padding: .1rem .4rem; font-size: .88em; color: #be185d;
}
#content-skin-tex pre {
    background: #0f172a; color: #e2e8f0; border-radius: var(--cs-radius);
    padding: 1rem 1.15rem; overflow-x: auto; font-size: .88rem; line-height: 1.6; margin: 1.5rem 0;
}
#content-skin-tex pre code { background: none; border: 0; color: inherit; padding: 0; }

/* ---------- karty i siatki ---------- */
#content-skin-tex .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 1.5rem 0; }
#content-skin-tex .macro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin: 1.5rem 0; }
@media (min-width: 768px) { #content-skin-tex .grid-2 { grid-template-columns: 1fr 1fr; } }
#content-skin-tex .card-soft,
#content-skin-tex .card-mini,
#content-skin-tex .sum-card {
    background: var(--cs-card); border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg); padding: 1.35rem;
    box-shadow: var(--cs-shadow); height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#content-skin-tex .card-soft:hover,
#content-skin-tex .card-mini:hover,
#content-skin-tex .sum-card:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow-hover); border-color: color-mix(in oklab, var(--cs-primary) 35%, var(--cs-border)); }
#content-skin-tex .card-mini { background: linear-gradient(180deg, var(--cs-card), var(--cs-soft)); }
#content-skin-tex .card-mini .badge { margin-bottom: .6rem; }
#content-skin-tex .card-mini h3 { margin-bottom: .5rem; }
#content-skin-tex .sum-card { background: linear-gradient(180deg, var(--cs-primary-soft), var(--cs-card)); border-color: color-mix(in oklab, var(--cs-primary) 25%, var(--cs-border)); }
#content-skin-tex .card-soft > *:last-child,
#content-skin-tex .card-mini > *:last-child,
#content-skin-tex .sum-card > *:last-child { margin-bottom: 0; }
#content-skin-tex .shadow-soft { box-shadow: var(--cs-shadow); border-radius: var(--cs-radius); }

/* ---------- listy ---------- */
#content-skin-tex ul:not(.checklist) { margin: 0 0 1.1rem; padding-left: 1.35rem; }
#content-skin-tex ul:not(.checklist) li { margin-bottom: .45rem; }
#content-skin-tex ul:not(.checklist) li::marker { color: var(--cs-primary); }
#content-skin-tex ul.checklist { list-style: none; padding: 0; margin: 1.25rem 0; }
#content-skin-tex ul.checklist li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
#content-skin-tex ul.checklist li::before {
    content: "✓"; position: absolute; left: 0; top: .28em;
    width: 1.35rem; height: 1.35rem; background: #dcfce7; color: #166534;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 900;
}
#content-skin-tex ol { counter-reset: item; list-style: none; padding: 0; margin: 1.25rem 0; }
#content-skin-tex ol li { position: relative; padding-left: 2.6rem; margin-bottom: .8rem; }
#content-skin-tex ol li::before {
    content: counter(item); counter-increment: item;
    position: absolute; left: 0; top: .1em;
    width: 1.75rem; height: 1.75rem; border-radius: 9px;
    background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-2)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem;
    box-shadow: 0 6px 12px -6px rgba(79, 70, 229, .8);
}
#content-skin-tex li > ul, #content-skin-tex li > ol { margin-top: .45rem; }

/* ---------- ramki informacyjne ---------- */
#content-skin-tex .note, #content-skin-tex .note-strong, #content-skin-tex .alert {
    border-radius: var(--cs-radius); padding: 1rem 1.15rem; margin: 1.5rem 0;
    border: 1px solid transparent; border-left: 4px solid; font-size: .96rem;
}
#content-skin-tex .note { background: #fff7ed; border-left-color: #f97316; color: #9a3412; }
#content-skin-tex .note-strong, #content-skin-tex .alert-warning { background: #fef2f2; border-left-color: #ef4444; color: #991b1b; }
#content-skin-tex .alert-info { background: var(--cs-primary-soft); border-left-color: var(--cs-primary); color: #3730a3; }
#content-skin-tex .alert-success { background: #ecfdf5; border-left-color: #10b981; color: #065f46; }
#content-skin-tex .note > *:last-child, #content-skin-tex .note-strong > *:last-child, #content-skin-tex .alert > *:last-child { margin-bottom: 0; }
#content-skin-tex blockquote {
    margin: 1.5rem 0; padding: .85rem 1.2rem; border-left: 4px solid var(--cs-primary);
    background: var(--cs-soft); border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
    font-style: italic; color: var(--cs-text);
}
#content-skin-tex hr { border: 0; border-top: 1px solid var(--cs-border); margin: var(--cs-space) 0; }
#content-skin-tex img { max-width: 100%; height: auto; border-radius: var(--cs-radius); }

/* ---------- tabele ---------- */
#content-skin-tex .table-wrap {
    overflow-x: auto; border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow); margin: 1.5rem 0; background: var(--cs-card);
}
#content-skin-tex table { width: 100%; border-collapse: collapse; background: var(--cs-card); font-size: .95rem; }
#content-skin-tex .table-wrap table { min-width: 480px; }
#content-skin-tex th {
    background: var(--cs-soft); color: var(--cs-text); font-weight: 700;
    text-transform: uppercase; font-size: .72rem; letter-spacing: .05em;
    padding: .8rem 1rem; border-bottom: 1px solid var(--cs-border); text-align: left; white-space: nowrap;
}
#content-skin-tex td { padding: .75rem 1rem; border-bottom: 1px solid var(--cs-border); color: var(--cs-body); vertical-align: top; }
#content-skin-tex tbody tr:last-child td { border-bottom: 0; }
#content-skin-tex tbody tr:hover td { background: color-mix(in oklab, var(--cs-primary-soft) 55%, transparent); }
#content-skin-tex .table-striped tbody tr:nth-child(odd) td { background: color-mix(in oklab, var(--cs-soft) 65%, transparent); }

/* ---------- FAQ (jeden znacznik: plus obracany w krzyżyk) ---------- */
#content-skin-tex details {
    background: var(--cs-card); border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius); padding: .95rem 1.15rem; margin-bottom: .75rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#content-skin-tex details:hover { border-color: var(--cs-border-strong); }
#content-skin-tex details[open] { border-color: var(--cs-primary); box-shadow: 0 10px 26px -18px rgba(79, 70, 229, .9); background: color-mix(in oklab, var(--cs-primary-soft) 45%, var(--cs-card)); }
#content-skin-tex summary {
    font-weight: 700; color: var(--cs-text); cursor: pointer;
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
#content-skin-tex summary::-webkit-details-marker { display: none; }
#content-skin-tex summary::before { content: none !important; }
#content-skin-tex summary::after {
    content: "+"; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 8px;
    background: var(--cs-primary-soft); color: var(--cs-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 700; line-height: 1; transition: transform .25s ease, background .2s ease;
}
#content-skin-tex details[open] summary::after { transform: rotate(45deg); background: var(--cs-primary); color: #fff; }
#content-skin-tex details p:first-of-type { margin-top: .9rem; }
#content-skin-tex details > *:last-child { margin-bottom: 0; }

/* ---------- efekty ---------- */
#content-skin-tex .focus-ring:focus-visible,
#content-skin-tex a:focus-visible, #content-skin-tex summary:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--cs-primary) 45%, transparent);
    outline-offset: 2px; border-radius: 6px;
}
#content-skin-tex .reveal { animation: csFadeUp .6s ease-out both; }
@keyframes csFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#content-skin-tex .shimmer {
    background: linear-gradient(90deg, var(--cs-text) 0%, var(--cs-primary) 45%, var(--cs-primary-2) 60%, var(--cs-text) 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent; animation: csShimmer 6s linear infinite;
}
@keyframes csShimmer { to { background-position: -220% 0; } }
#content-skin-tex .neon-anim { position: relative; }
#content-skin-tex .neon-anim::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--cs-primary) 35%, transparent), 0 0 24px -6px rgba(124, 58, 237, .45);
}
@media (prefers-reduced-motion: reduce) {
    #content-skin-tex * { animation: none !important; transition: none !important; }
    #content-skin-tex .card-soft:hover, #content-skin-tex .card-mini:hover, #content-skin-tex .pill:hover, #content-skin-tex .cta:hover { transform: none; }
}

/* ---------- telefon ---------- */
@media (max-width: 575.98px) {
    #content-skin-tex { font-size: 1rem; }
    #content-skin-tex .card-soft, #content-skin-tex .card-mini, #content-skin-tex .sum-card,
    #content-skin-tex .card-soft.p-3, #content-skin-tex .card-soft.p-4 { padding: 1.05rem !important; }
    #content-skin-tex .cta { width: 100%; }
    #content-skin-tex th, #content-skin-tex td { padding: .6rem .7rem; }
}

/* ---------- tryb ciemny ---------- */
body.theme-dark #content-skin-tex, [theme-mode="dark"] #content-skin-tex {
    --cs-text: #e2e8f0; --cs-body: #cbd5e1; --cs-muted: #94a3b8;
    --cs-primary: #818cf8; --cs-primary-2: #c084fc; --cs-primary-soft: rgba(129, 140, 248, .14);
    --cs-card: #111827; --cs-soft: #0b1220; --cs-border: #24314d; --cs-border-strong: #33415c;
    --cs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -18px rgba(0, 0, 0, .8);
    --cs-shadow-hover: 0 16px 36px -18px rgba(0, 0, 0, .9);
}
body.theme-dark #content-skin-tex .text-gradient, [theme-mode="dark"] #content-skin-tex .text-gradient {
    background: linear-gradient(120deg, #f8fafc 0%, #a5b4fc 55%, #d8b4fe 100%);
    -webkit-background-clip: text; background-clip: text;
}
body.theme-dark #content-skin-tex .note, [theme-mode="dark"] #content-skin-tex .note { background: rgba(249, 115, 22, .12); color: #fdba74; }
body.theme-dark #content-skin-tex .note-strong, [theme-mode="dark"] #content-skin-tex .note-strong { background: rgba(239, 68, 68, .12); color: #fca5a5; }
body.theme-dark #content-skin-tex ul.checklist li::before, [theme-mode="dark"] #content-skin-tex ul.checklist li::before { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
body.theme-dark #content-skin-tex pre, [theme-mode="dark"] #content-skin-tex pre { background: #060b16; }
body.theme-dark #content-skin-tex code:not(pre code), [theme-mode="dark"] #content-skin-tex code:not(pre code) { color: #f9a8d4; }

/* ---------- kontener artykułu (#content-box) — równe marginesy na wszystkich stronach ---------- */
#content-box > .card { border: 0; background: transparent; box-shadow: none; }
#content-box > .card > .card-body { padding: clamp(1rem, .5rem + 2vw, 2.5rem) clamp(1rem, .4rem + 2.4vw, 2rem) clamp(1.25rem, .6rem + 1.4vw, 2rem); }
#content-box > .card > .card-header {
    border: 0; padding: 0 0 .75rem; background: transparent !important;
    color: #0f172a !important;
}
#content-box > .card > .card-header .card-title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800; letter-spacing: -.02em; color: #0f172a !important;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); margin: 0 0 .35rem;
}
#content-box > .card > .card-header p { color: #64748b !important; margin: 0; font-size: 1rem; }
body.theme-dark #content-box > .card > .card-header,
body.theme-dark #content-box > .card > .card-header .card-title,
[theme-mode="dark"] #content-box > .card > .card-header,
[theme-mode="dark"] #content-box > .card > .card-header .card-title { color: #e2e8f0 !important; }
[theme-mode="dark"] #content-box > .card > .card-header p { color: #94a3b8 !important; }

/* === id="global-tweaks" === */
/* === globalne ustawienia motywu === */
:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --bg-body: #f8fafc;
    --tblr-navbar-padding-y: 0;
    --tblr-navbar-border-width: 0;
}
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .02); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* linki bez podkreśleń w nawigacji i kartach; treść artykułu podkreśla je sama */
a { text-decoration: none; }