/* Kolory, kroje i komponenty zgodne z motywem wpins.ujk.edu.pl (wpins-ujk-prod) */
.lf {
  /* Paleta WPiNS */
  --lf-red-100: #e52528;
  --lf-red-70: #ed6669;
  --lf-red-10: #fce9ea;
  --lf-ink-100: #000;
  --lf-ink-90: #1a1a1a;
  --lf-ink-70: #4d4d4d;
  --lf-ink-30: #b3b3b3;
  --lf-white: #fff;
  --lf-green: #1d6b3a;

  /* Role – na stronie WPiNS brane z tokenów motywu (--color-wpins-*, design-system/tokens.json);
     wartości po przecinku działają tylko poza motywem (samodzielna strona) */
  --lf-accent: var(--color-wpins-accent, var(--lf-red-100));
  --lf-accent-text: var(--color-wpins-accent-text, var(--lf-red-100));
  --lf-text: var(--color-wpins-text, var(--lf-ink-100));
  --lf-text-muted: var(--color-wpins-text-muted, var(--lf-ink-70));
  --lf-heading: var(--color-wpins-heading, var(--lf-ink-90));
  --lf-canvas: var(--color-wpins-canvas, #fff);
  --lf-alt: var(--color-wpins-alt, #f7f5f2);
  --lf-fog: var(--color-wpins-fog, #f5f5f5);
  --lf-border: var(--color-wpins-border, #e8e8e8);
  --lf-focus: var(--color-wpins-focus, var(--lf-red-100));
  --lf-err-bg: var(--color-wpins-red-10, var(--lf-red-10));
  --lf-ok: var(--lf-green);

  --lf-font-heading: var(--font-wpins-heading, "PT Sans Narrow", "Noto Sans", system-ui, sans-serif);
  --lf-font-body: var(--font-wpins-body, "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --lf-font-ui: var(--font-wpins-ui, Lato, "Noto Sans", system-ui, sans-serif);

  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 16px 64px;
  color: var(--lf-text);
  background: var(--lf-canvas);
  font: 16px/1.6 var(--lf-font-body);
}

/* Ciemny motyw: przełącznik strony (data-theme) albo ustawienie systemu */
[data-theme="dark"] .lf {
  --lf-accent-text: var(--color-wpins-accent-text, var(--lf-red-70));
  --lf-text: var(--color-wpins-text, #fff);
  --lf-text-muted: var(--color-wpins-text-muted, var(--lf-ink-30));
  --lf-heading: var(--color-wpins-heading, #fff);
  --lf-canvas: var(--color-wpins-canvas, #0a0a0a);
  --lf-alt: var(--color-wpins-alt, #161616);
  --lf-fog: var(--color-wpins-fog, #202020);
  --lf-border: var(--color-wpins-border, #2a2a2a);
  --lf-err-bg: #2a1213;
  --lf-ok: #5fbf85;
}
@media (prefers-color-scheme: dark) {
  /* tylko samodzielna strona; w WordPressie motyw sam przełącza data-theme */
  :root:not([data-theme="light"]) .lf.lf--auto-theme {
    --lf-accent-text: var(--lf-red-70);
    --lf-text: #fff;
    --lf-text-muted: var(--lf-ink-30);
    --lf-heading: #fff;
    --lf-canvas: #0a0a0a;
    --lf-alt: #161616;
    --lf-fog: #202020;
    --lf-border: #2a2a2a;
    --lf-err-bg: #2a1213;
    --lf-ok: #5fbf85;
  }
}

.lf *, .lf *::before, .lf *::after { box-sizing: border-box; }
.lf [hidden] { display: none !important; }
.lf :focus-visible { outline: 3px solid var(--lf-focus); outline-offset: 4px; }
.lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Linki jak w treści strony: czarny tekst, czerwone podkreślenie */
.lf a { color: var(--lf-text); text-decoration: underline; text-decoration-color: var(--lf-accent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.lf a:hover { text-decoration-thickness: 2px; }

/* Listy z czerwonym kwadratem */
.lf-list { margin: 0; padding: 0; list-style: none; }
.lf-list li { position: relative; margin: 0 0 .55rem; padding-left: 1.4rem; line-height: 1.5; }
.lf-list li:last-child { margin-bottom: 0; }
.lf-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; background: var(--lf-accent); }

/* Nagłówek */
.lf-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font: 700 12.5px/1.4 var(--lf-font-ui);
  letter-spacing: .22em; text-transform: uppercase; color: var(--lf-text-muted);
}
.lf-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lf-accent); flex: none; }
.lf-header h1 {
  margin: 0 0 18px;
  font: 700 clamp(2.2rem, 6vw, 3.5rem)/1.02 var(--lf-font-heading);
  text-transform: uppercase; color: var(--lf-heading);
}
.lf-header h1 em { font-style: normal; color: var(--lf-accent); }
.lf-lead { max-width: 720px; margin: 0 0 12px; font-size: 1.08rem; }
.lf-privacy { display: flex; gap: 8px; align-items: flex-start; max-width: 720px; margin: 0; font-size: .92rem; color: var(--lf-text-muted); }
.lf-privacy-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--lf-accent-text); }

.lf-h2 {
  position: relative;
  margin: 0 0 22px; padding-bottom: 12px;
  font: 800 clamp(1.5rem, 3.4vw, 2rem)/1.1 var(--lf-font-heading);
  text-transform: uppercase; color: var(--lf-heading);
}
.lf-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--lf-accent); }
.lf-step { margin-top: 44px; }

.lf-muted { color: var(--lf-text-muted); }
.lf-small { font-size: .85rem; }

/* Strefa wgrywania */
.lf-drop {
  border: 2px dashed var(--lf-ink-30);
  background: var(--lf-alt);
  text-align: center;
  padding: 48px 16px;
  transition: border-color .15s;
}
.lf-drop.is-over { border-color: var(--lf-accent); border-style: solid; }
.lf-drop-icon { width: 44px; height: 44px; margin: 0 auto 10px; color: var(--lf-accent-text); }
.lf-drop-title { margin: 0; font: 800 1.5rem/1.2 var(--lf-font-heading); text-transform: uppercase; color: var(--lf-heading); }
.lf-drop-formats { margin: 6px 0 20px; font-size: .9rem; color: var(--lf-text-muted); }
.lf-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lf-only-touch { display: none !important; }
@media (pointer: coarse) { .lf-only-touch { display: inline-flex !important; } }

/* Przyciski jak .wpins-btn */
.lf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13.6px 24px;
  border: 1px solid var(--lf-text); border-radius: 0;
  background: transparent; color: var(--lf-text);
  font: 700 13px/1.2 var(--lf-font-ui); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.lf-btn:hover { background: var(--lf-text); color: var(--lf-canvas); }
.lf-btn-primary { background: var(--lf-text); color: var(--lf-canvas); }
.lf-btn-primary:hover { background: var(--lf-accent); border-color: var(--lf-accent); color: var(--lf-white); }
.lf-btn:disabled { opacity: .4; cursor: not-allowed; }
.lf-btn:disabled:hover { background: var(--lf-text); border-color: var(--lf-text); color: var(--lf-canvas); }
.lf-btn:has(input:focus-visible) { outline: 3px solid var(--lf-focus); outline-offset: 4px; }
/* Natywny input pliku: ukryty wizualnie, ale dostępny z klawiatury (etykieta = przycisk) */
.lf-btn input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lf-link {
  display: inline-flex; align-items: center; min-height: 44px; /* cel dotykowy ≥ 44px */
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 400 1rem/1.4 var(--lf-font-body); color: var(--lf-text);
  text-decoration: underline; text-decoration-color: var(--lf-accent); text-underline-offset: 2px;
}
.lf-link:hover { text-decoration-thickness: 2px; }

/* Plakietki jak .wpins-badge */
.lf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .2rem .6rem; border: 1px solid transparent; border-radius: 0;
  font: 700 .7rem/1.3 var(--lf-font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.lf-badge--accent { background: var(--lf-accent); color: var(--lf-white); }
.lf-badge--kontrast { background: var(--lf-heading); color: var(--lf-canvas); }
.lf-badge--kontur { background: transparent; border-color: var(--lf-heading); color: var(--lf-heading); }
.lf-badge--ok { background: transparent; border-color: var(--lf-ok); color: var(--lf-ok); }

/* Komunikaty */
.lf-status { padding: 14px 18px; margin: 20px 0; background: var(--lf-alt); border-left: 3px solid var(--lf-heading); }
.lf-status-row { display: flex; gap: 12px; align-items: center; }
.lf-status-pct { margin-left: auto; font: 700 13px/1 var(--lf-font-ui); letter-spacing: .06em; }
.lf-progress { height: 4px; margin-top: 12px; background: var(--lf-border); overflow: hidden; }
/* scaleX zamiast width: animację wykonuje karta graficzna, więc pasek jedzie także wtedy,
   gdy telefon jest zajęty liczeniem (animacja szerokości na iPhonie wtedy stoi) */
.lf-progress-bar { width: 100%; height: 100%; background: var(--lf-accent); transform: scaleX(0); transform-origin: left center; transition: transform .2s linear; will-change: transform; }
.lf-preload { max-width: 420px; margin: 20px auto 0; font-size: .85rem; color: var(--lf-text-muted); }
.lf-preload .lf-progress { margin-top: 6px; }
.lf-spinner { width: 18px; height: 18px; border: 3px solid var(--lf-border); border-top-color: var(--lf-accent); border-radius: 50%; animation: lf-spin .8s linear infinite; flex: none; }
@keyframes lf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lf-spinner { animation-duration: 2.4s; } }
.lf-error { padding: 14px 18px; margin: 20px 0; background: var(--lf-err-bg); color: var(--lf-text); border-left: 3px solid var(--lf-accent); font-weight: 600; }
.lf-test-badge { margin-bottom: 16px; }

/* Wynik */
.lf-work { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 760px) { .lf-work { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.lf-canvas-wrap { position: relative; width: 100%; max-width: 360px; aspect-ratio: 492 / 633; margin: 0 auto; background: #fff; outline: 1px solid var(--lf-border); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.lf-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lf-preview-tools { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 16px 0 6px; font-size: .92rem; }
.lf-check { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
.lf-check input { width: 18px; height: 18px; accent-color: var(--lf-accent); }

/* Akordeon jak .wpins-acc */
.lf-acc { margin-top: 20px; }
.lf-acc__item { border-bottom: 1px solid var(--lf-border); }
.lf-acc__item:first-child { border-top: 1px solid var(--lf-border); }
.lf-acc__summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 56px; padding: 1rem .25rem; cursor: pointer; list-style: none;
  font: 800 1.5rem/1.2 var(--lf-font-heading); color: var(--lf-heading);
}
.lf-acc__summary--sm { font-size: 1.25rem; }
.lf-acc__summary::-webkit-details-marker { display: none; }
.lf-acc__chevron { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lf-accent-text); transition: transform .2s; }
.lf-acc__item[open] > .lf-acc__summary .lf-acc__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .lf-acc__chevron { transition: none; } }
.lf-acc__body { padding: 0 .25rem 1.5rem; }
.lf-acc__body label { display: block; margin: 0 0 14px; }
.lf-acc__body input[type=range] { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--lf-accent); }
.lf-acc__body p { margin: 16px 0 0; }

/* Werdykt */
.lf-verdict { padding: 18px 20px; margin-bottom: 18px; background: var(--lf-alt); border-left: 3px solid var(--lf-heading); }
.lf-verdict h3 { margin: 0 0 4px; font: 800 1.6rem/1.15 var(--lf-font-heading); text-transform: uppercase; color: var(--lf-heading); }
.lf-verdict p { margin: 0; color: var(--lf-text-muted); }
.lf-verdict.is-ok { border-left-color: var(--lf-ok); }
.lf-verdict.is-ok h3 { color: var(--lf-ok); }
.lf-verdict.is-err { background: var(--lf-err-bg); border-left-color: var(--lf-accent); }
.lf-verdict.is-err h3 { color: var(--lf-accent-text); }

/* Lista kontroli */
.lf-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lf-border); }
.lf-checks li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--lf-border); }
.lf-checks .lf-badge { justify-self: start; margin-top: 3px; }
.lf-checks b { display: block; font-weight: 600; }
.lf-checks .lf-msg { display: block; color: var(--lf-text-muted); font-size: .92rem; }
@media (max-width: 420px) { .lf-checks li { grid-template-columns: 1fr; gap: 6px; } }

.lf-manual { margin: 22px 0; padding: 16px 20px; background: var(--lf-alt); }
.lf-manual h3 { margin: 0 0 10px; font: 700 1.0625rem/1.4 var(--lf-font-ui); color: var(--lf-heading); }
.lf-manual .lf-list li { color: var(--lf-text-muted); }

.lf-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.lf-file-info { margin-top: 10px; }

.lf-tips { margin-top: 44px; }