/* =====================================================================
   Motyw narzędzi webp.pl (7.11.2026) — wygląd nowych narzędzi spójny z motywem strony:
   granatowy tusz (#1e293b), grube obrysy, twarde cienie bez rozmycia, żółte wyróżnienia,
   pomarańczowe przyciski, kremowe tła, nagłówki Plus Jakarta Sans.
   Działa na narzędziach z klasą .wm na korzeniu (dodaje ją <x-tools.motyw />). Ładowany PO stylu narzędzia,
   selektory z prefiksem „html body .wm”, żeby wygrywały z <x-tools.skin> i stylami narzędzia.
   ===================================================================== */
html body .wm {
    --wm-tusz: #1e293b; --wm-krem: #fffaf3; --wm-krem2: #fdeeda; --wm-zolty: #fcd34d; --wm-zolty2: #fde68a;
    --wm-pom: #f28c3c; --wm-pom2: #d97a2c; --wm-ziel: #16a34a; --wm-czer: #dc2626; --wm-nieb: #2563eb;
    --wm-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --c-primary: #2563eb; --c-border: #1e293b; --c-text: #1e293b;
    color: var(--wm-tusz);
}

/* ---------- karta narzędzia ---------- */
html body .wm .tool-card { background: var(--wm-krem); border: 3px solid var(--wm-tusz); border-radius: 22px; box-shadow: 6px 6px 0 var(--wm-tusz); }
html body .wm .tool-card::before { display: none; }
html body .wm h3, html body .wm .section-label + h3 { font-family: var(--wm-head); letter-spacing: -.01em; color: var(--wm-tusz); }
html body .wm .section-label { color: var(--wm-tusz); opacity: .75; font-weight: 800; letter-spacing: .08em; }
html body .wm .f-label { color: var(--wm-tusz); font-weight: 700; }
html body .wm [class$="-sekcja"], html body .wm .gkz-sekcja { border-top: 2.5px dashed rgba(30, 41, 59, .25); }

/* ---------- pola ---------- */
html body .wm .f-input, html body .wm .f-select, html body .wm .tinput, html body .wm select:not(.f-select), html body .wm input[type="time"], html body .wm input[type="date"] {
    background: #fff; border: 2.5px solid var(--wm-tusz); border-radius: 12px; color: var(--wm-tusz); box-shadow: 3px 3px 0 rgba(30, 41, 59, .18);
}
html body .wm .f-input:focus, html body .wm .f-select:focus, html body .wm .tinput:focus, html body .wm select:focus {
    outline: none; border-color: var(--wm-tusz); background: #fff; box-shadow: 3px 3px 0 var(--wm-pom);
}
html body .wm .f-input.blad { border-color: var(--wm-czer); background: #fff5f5; box-shadow: 3px 3px 0 var(--wm-czer); }
html body .wm input[type="checkbox"], html body .wm input[type="radio"] { accent-color: var(--wm-pom); width: 18px; height: 18px; }
html body .wm input[type="color"] { border: 2.5px solid var(--wm-tusz) !important; border-radius: 10px; }

/* ---------- przyciski ---------- */
html body .wm .btn-generate {
    background: var(--wm-pom); color: #fff; border: 2.5px solid var(--wm-tusz); border-radius: 14px; box-shadow: 4px 4px 0 var(--wm-tusz);
    font-family: var(--wm-head); font-weight: 800; letter-spacing: .01em; transition: transform .1s ease, box-shadow .1s ease;
}
html body .wm .btn-generate:hover { color: #fff; background: var(--wm-pom2); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--wm-tusz); }
html body .wm .btn-generate:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--wm-tusz); }
html body .wm .btn-util, html body .wm label.btn-util {
    background: #fff; color: var(--wm-tusz); border: 2px solid var(--wm-tusz); border-radius: 12px; box-shadow: 2.5px 2.5px 0 var(--wm-tusz);
    font-weight: 700; transition: transform .1s ease, box-shadow .1s ease;
}
html body .wm .btn-util:hover { background: var(--wm-zolty2); color: var(--wm-tusz); border-color: var(--wm-tusz); transform: translate(-1px, -1px); box-shadow: 3.5px 3.5px 0 var(--wm-tusz); }
html body .wm .btn-util:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--wm-tusz); }
html body .wm .btn-util.copied { background: #dcfce7; color: #166534; border-color: var(--wm-tusz); }
html body .wm .btn-util:disabled { opacity: .45; box-shadow: none; transform: none; }
html body .wm .btn-clear { color: var(--wm-tusz); opacity: .7; font-weight: 700; border-radius: 12px; }
html body .wm .btn-clear:hover { opacity: 1; background: #fee2e2; color: #991b1b; }

/* chipy / szybkie przykłady */
html body .wm button[class$="-chip"], html body .wm .gog-f, html body .wm .kj-pill, html body .wm .kj-chip {
    background: #fff; color: var(--wm-tusz); border: 2px solid var(--wm-tusz); border-radius: 10px; box-shadow: 2px 2px 0 var(--wm-tusz);
    font-family: "Inter", system-ui, sans-serif; font-weight: 700; transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
html body .wm button[class$="-chip"]:hover, html body .wm .gog-f:hover, html body .wm .kj-chip:hover { background: var(--wm-zolty2); color: var(--wm-tusz); border-color: var(--wm-tusz); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--wm-tusz); }
html body .wm button[class$="-chip"] small { color: #475569; font-weight: 600; }

/* przełączniki trybu (aria-pressed): tryby, kierunki, strony, narzędzia tablicy */
html body .wm button[aria-pressed] { transition: transform .1s ease, box-shadow .1s ease, background .1s ease; }
html body .wm [class$="-tryb"], html body .wm .rad-k, html body .wm .ulo-k, html body .wm .tts-t, html body .wm .mgk-tryb, html body .wm .prz-d, html body .wm .gog-f {
    background: #fff; color: var(--wm-tusz); border: 2.5px solid var(--wm-tusz) !important; border-radius: 14px; box-shadow: 3px 3px 0 var(--wm-tusz);
}
html body .wm [class$="-tryb"][aria-pressed="true"], html body .wm .rad-k[aria-pressed="true"], html body .wm .ulo-k[aria-pressed="true"], html body .wm .tts-t[aria-pressed="true"],
html body .wm .mgk-tryb[aria-pressed="true"], html body .wm .prz-d[aria-pressed="true"], html body .wm .gog-f[aria-pressed="true"], html body .wm .kj-pill[aria-pressed="true"] {
    background: var(--wm-zolty); color: var(--wm-tusz); border-color: var(--wm-tusz); box-shadow: 4px 4px 0 var(--wm-tusz); transform: translate(-1px, -1px);
}
html body .wm [class$="-tryb"][aria-pressed="true"] b, html body .wm [class$="-tryb"][aria-pressed="true"] span { color: var(--wm-tusz); }
html body .wm .trd-kier button, html body .wm .sgl-strona button { border: 2.5px solid var(--wm-tusz); box-shadow: 2.5px 2.5px 0 var(--wm-tusz); border-radius: 12px; }
html body .wm .tbo-grupa { background: #fff; border: 2px solid var(--wm-tusz); box-shadow: 2.5px 2.5px 0 var(--wm-tusz); border-radius: 14px; }
html body .wm .tbo-b[aria-pressed="true"] { background: var(--wm-zolty); color: var(--wm-tusz); border-color: var(--wm-tusz); }

/* ---------- wyniki ---------- */
/* wynik główny */
html body .wm [class$="-glowny"] {
    background: var(--wm-zolty); border: 3px solid var(--wm-tusz); border-radius: 18px; box-shadow: 5px 5px 0 var(--wm-tusz); color: var(--wm-tusz);
}
html body .wm [class$="-glowny"] span { color: var(--wm-tusz); opacity: .8; }
html body .wm [class$="-glowny"] b { font-family: var(--wm-head); color: var(--wm-tusz); }
html body .wm [class$="-glowny"] small { color: #334155; }
/* kafelki */
html body .wm [class$="-kafel"], html body .wm .sgl-kaf, html body .wm .gog-k, html body .wm .wfx-karta, html body .wm .prz-d {
    background: #fff; border: 2.5px solid var(--wm-tusz); border-top-width: 2.5px; border-top-color: var(--wm-tusz); border-radius: 14px; box-shadow: 3.5px 3.5px 0 var(--wm-tusz);
}
html body .wm [class$="-kafel"] span, html body .wm .sgl-kaf span { color: #475569; }
html body .wm [class$="-kafel"] b, html body .wm .sgl-kaf b, html body .wm .wfx-karta h3 { font-family: var(--wm-head); color: var(--wm-tusz); }
html body .wm .gog-k { border-left-width: 2.5px; }
html body .wm .gog-k.otwarta { background: #ecfdf5; }
html body .wm .gog-k.przerwa { background: #fffbeb; }
html body .wm .gog-st { border: 2px solid var(--wm-tusz); box-shadow: 2px 2px 0 var(--wm-tusz); }
html body .wm .gog-pasek { border: 2px solid var(--wm-tusz); height: 10px; background: #fff; }
/* postacie wzorów, karty zadań, karty krzyżówki itp. */
html body .wm .fkw-postac, html body .wm .mgk-karta, html body .wm .sgl-zlec, html body .wm .gkz-dalej {
    background: #fff; border: 2.5px solid var(--wm-tusz); border-radius: 14px; box-shadow: 3px 3px 0 var(--wm-tusz);
}
html body .wm .fkw-postac code { font-family: var(--wm-head); font-weight: 700; }
/* komunikaty */
html body .wm .err-box, html body .wm [class$="-blad"].err-box, html body .wm .her-nier {
    background: #fff1f2; color: #9f1239; border: 2.5px solid var(--wm-tusz); border-radius: 12px; box-shadow: 3px 3px 0 var(--wm-czer);
}
html body .wm .tts-decyzja, html body .wm .mgk-wynik, html body .wm .sgl-koniec, html body .wm .gkz-msg, html body .wm .sgl-msg, html body .wm .tts-uwaga, html body .wm .stl-uwaga {
    border: 2.5px solid var(--wm-tusz) !important; border-radius: 14px; box-shadow: 4px 4px 0 var(--wm-tusz);
}
html body .wm .empty-state { background: #fff; border: 2.5px dashed rgba(30, 41, 59, .35); border-radius: 14px; }
html body .wm .metrics-bar { border-top: 2.5px dashed rgba(30, 41, 59, .25); }
html body .wm .metric-dot { background: var(--wm-pom); box-shadow: 0 0 0 2px var(--wm-tusz); }
html body .wm .plus { color: #15803d; } html body .wm .minus { color: #b91c1c; }

/* ---------- wykresy, sceny, płótna ---------- */
html body .wm [class$="-wykres"], html body .wm .wfx-plot, html body .wm .stl-scena, html body .wm .tbo-scena, html body .wm .fkw-os, html body .wm .prz-os, html body .wm .gog-os, html body .wm .rad-kolo, html body .wm .her-rys, html body .wm .fkw-wykres {
    border: 2.5px solid var(--wm-tusz) !important; border-radius: 16px; box-shadow: 4px 4px 0 var(--wm-tusz); background: #fff; overflow: hidden;
}
html body .wm .stl-drop { background: #fff; border: 3px dashed var(--wm-tusz); border-radius: 18px; }
html body .wm .stl-drop.nad { background: var(--wm-zolty2); }
html body .wm .gkz-siatka-wrap { padding: .4rem; }

/* ---------- tabele ---------- */
html body .wm table th { background: var(--wm-krem2); color: var(--wm-tusz); }
html body .wm [class$="-tab"] table, html body .wm .gog-tab table, html body .wm .rad-tab table, html body .wm .wfx-tab table, html body .wm .tts-tab table {
    background: #fff; border: 2.5px solid var(--wm-tusz); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 3px 3px 0 var(--wm-tusz);
}
html body .wm .trd-tab tr.akt td, html body .wm .rad-tab tr.akt td, html body .wm .hor-tab tr.b td.r { background: var(--wm-zolty); }
html body .wm .gkz-def li.akt button { background: var(--wm-zolty2); }
html body .wm .gkz-def .n { color: var(--wm-pom2); }

/* ---------- telefon ---------- */
@media (max-width: 640px) {
    html body .wm .tool-card { border-width: 2.5px; box-shadow: 4px 4px 0 var(--wm-tusz); border-radius: 18px; }
    html body .wm [class$="-glowny"] { box-shadow: 4px 4px 0 var(--wm-tusz); }
}

/* ---------- tryb ciemny ---------- */
body.theme-dark .wm, [theme-mode="dark"] .wm { --wm-tusz: #e2e8f0; --wm-krem: #0f172a; --wm-krem2: #1e293b; color: #e2e8f0; }
body.theme-dark .wm .tool-card, [theme-mode="dark"] .wm .tool-card { background: #0b1222; }
body.theme-dark .wm .f-input, body.theme-dark .wm .f-select, body.theme-dark .wm .tinput, body.theme-dark .wm .btn-util, body.theme-dark .wm button[class$="-chip"],
body.theme-dark .wm [class$="-kafel"], body.theme-dark .wm [class$="-tab"] table { background: #111a2e; color: #e2e8f0; }
body.theme-dark .wm [class$="-glowny"], body.theme-dark .wm [class$="-glowny"] b, body.theme-dark .wm [class$="-glowny"] span { color: #1e293b; }