/* =====================================================================================================
   TŁO SEKCJI HERO — motyw jasny, wersja „dżungla” (markup: js/app/herofx.js, liście i papuga: assets/ui/hero/*.png z Ming)
   Warstwy od tyłu: zielony gradient → poświata (aurora) → promienie słońca → rozmyte liście → ostre liście → opadające listki → błyski → papuga; wejście przy pierwszym uruchomieniu (.hf-intro).
   Tylko transform / opacity / translate (płynnie na telefonie); w ciemnym motywie warstwa jest ukryta.
   ===================================================================================================== */
.hero-fx { display: none; }
:root:not([data-theme="dark"]) .hero { background: linear-gradient(165deg, #e6f9d3 0%, #c9f0b0 52%, #b0e7c0 100%); }
:root:not([data-theme="dark"]) .hero::before, :root:not([data-theme="dark"]) .hero::after { opacity: 0.5; }
:root:not([data-theme="dark"]) .hero-fx { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --px: 0; --py: 0; contain: layout paint style; }

/* poświata */
.hf-aurora { position: absolute; border-radius: 50%; will-change: transform; }
.hf-aurora.a { left: -22%; top: -14%; width: max(520px, 80vmin); height: max(520px, 80vmin); background: radial-gradient(circle, rgba(110, 220, 120, 0.8), rgba(110, 220, 120, 0) 68%); animation: hf-drift-a 17s ease-in-out infinite alternate; }
.hf-aurora.b { right: -26%; top: 18%; width: max(560px, 86vmin); height: max(560px, 86vmin); background: radial-gradient(circle, rgba(222, 244, 110, 0.8), rgba(222, 244, 110, 0) 68%); animation: hf-drift-b 23s ease-in-out infinite alternate; }
.hf-aurora.c { left: 6%; bottom: -30%; width: max(520px, 80vmin); height: max(520px, 80vmin); background: radial-gradient(circle, rgba(90, 214, 188, 0.7), rgba(90, 214, 188, 0) 66%); animation: hf-drift-c 20s ease-in-out infinite alternate; }
@keyframes hf-drift-a { to { transform: translate(14%, 18%) scale(1.18); } }
@keyframes hf-drift-b { to { transform: translate(-16%, -12%) scale(1.22); } }
@keyframes hf-drift-c { to { transform: translate(18%, -16%) scale(1.15); } }
.hf-rays { position: absolute; right: -750px; top: -750px; width: 1500px; height: 1500px; opacity: 0.55; background: repeating-conic-gradient(from 0deg, rgba(255, 252, 214, 0.8) 0 5deg, rgba(255, 252, 214, 0) 5deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 14%, transparent 72%); mask-image: radial-gradient(closest-side, #000 14%, transparent 72%); animation: hf-spin 100s linear infinite; }
@keyframes hf-spin { to { transform: rotate(360deg); } }

/* błyski (pyłek w słońcu) */
.hf-spark { position: absolute; width: var(--s); height: var(--s); background: #fff; opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: hf-twinkle var(--du) ease-in-out var(--dl) infinite; }
.hf-spark.gold { background: #ffcf5c; }
@keyframes hf-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* liście: zewnętrzny span — pozycja, paralaksa (mysz), wlot; img — kołysanie wokół „ogonka”; rozmycie jest wypieczone w obrazku (tools/blur-leaves.js) — filter: blur w CSS zacinał przewijanie */
.hf-leaf { position: absolute; width: var(--s); aspect-ratio: 1; opacity: var(--o); translate: calc(var(--px) * var(--k) * -12px) calc(var(--py) * var(--k) * -9px); }
.hf-leaf img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--r)); transform-origin: var(--org); animation: hf-sway var(--d) ease-in-out infinite alternate; }
@keyframes hf-sway { from { transform: rotate(calc(var(--r) - 6deg)); } to { transform: rotate(calc(var(--r) + 6deg)); } }
@media (min-width: 800px) { .hf-leaf { width: calc(var(--s) * 1.55); } }

/* opadające listki: span spada, img się obraca i buja */
.hf-fall { position: absolute; top: -50px; width: var(--s); opacity: 0.85; animation: hf-leaffall var(--d) linear var(--dl) infinite; }
.hf-fall img { display: block; width: 100%; animation: hf-flutter 3.2s ease-in-out infinite alternate; }
@keyframes hf-leaffall { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 0.85; } 92% { opacity: 0.85; } 100% { transform: translate(var(--dx), 105vh); opacity: 0; } }
@keyframes hf-flutter { from { transform: translateX(-16px) rotate(-50deg) scaleX(0.7); } to { transform: translateX(16px) rotate(50deg) scaleX(1); } }

/* papuga: przelot w prawo, chwila przerwy, powrót w lewo (odbita); skrzydła „machają” przez pulsowanie obrazka */
.hf-parrot { position: absolute; left: 0; top: 12%; width: 92px; opacity: 0; animation: hf-fly 28s ease-in-out -2s infinite; }
.hf-parrot img { display: block; width: 100%; transform-origin: 50% 70%; filter: drop-shadow(0 12px 8px rgba(20, 90, 40, 0.28)); animation: hf-flap 0.42s ease-in-out infinite alternate; }
@keyframes hf-flap { from { transform: scale(1, 1.06) translateY(-3px) rotate(-3deg); } to { transform: scale(1.03, 0.9) translateY(4px) rotate(3deg); } }
@keyframes hf-fly {
  0% { opacity: 0; transform: translate(-22vw, 60px) rotate(8deg); }
  3% { opacity: 1; }
  14% { transform: translate(14vw, -8px) rotate(-7deg); }
  28% { transform: translate(48vw, 56px) rotate(6deg); }
  42% { transform: translate(86vw, 0) rotate(-5deg); }
  47% { opacity: 1; transform: translate(118vw, 40px) rotate(4deg); }
  48%, 52% { opacity: 0; transform: translate(118vw, 150px) scaleX(-1) rotate(4deg); }
  53% { opacity: 1; }
  66% { transform: translate(78vw, 200px) scaleX(-1) rotate(-6deg); }
  82% { transform: translate(34vw, 120px) scaleX(-1) rotate(7deg); }
  97% { opacity: 1; transform: translate(-12vw, 190px) scaleX(-1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-22vw, 200px) scaleX(-1) rotate(-4deg); }
}
@media (min-width: 800px) { .hf-parrot { width: 150px; top: 8%; } }

/* promienie za fiszką słówka */
:root:not([data-theme="dark"]) .ln-art::after { content: ""; position: absolute; z-index: 0; width: min(580px, 150vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0.8;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.75) 0 6deg, rgba(255, 255, 255, 0) 6deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 70%); mask-image: radial-gradient(closest-side, #000 18%, transparent 70%); animation: hf-spin 80s linear infinite; }

/* ---------- wejście przy pierwszym uruchomieniu ---------- */
.hf-burst, .hf-ring { position: absolute; left: 50%; top: 40%; border-radius: 50%; opacity: 0; }
.hf-burst { width: 140px; height: 140px; margin: -70px 0 0 -70px; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 70%); }
.hf-ring { width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 3px solid rgba(255, 255, 255, 0.95); }
.hf-ring.r2 { border-color: rgba(255, 200, 61, 0.9); }
.hf-intro .hf-burst { animation: hf-burst 1.2s ease-out 0.15s both; }
.hf-intro .hf-ring.r1 { animation: hf-ring 1.3s ease-out 0.2s both; }
.hf-intro .hf-ring.r2 { animation: hf-ring 1.5s ease-out 0.45s both; }
@keyframes hf-burst { 0% { opacity: 0; transform: scale(0.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(14); } }
@keyframes hf-ring { 0% { opacity: 0.95; transform: scale(0.3); } 100% { opacity: 0; transform: scale(11); } }
.hf-intro .hf-leaf { animation: hf-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) var(--ind, 0.6s) backwards; }
@keyframes hf-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.2); } }
.hf-intro .hf-parrot { animation: hf-fly 28s ease-in-out 0.9s infinite; }
.hf-intro .statusbar > * { animation: hf-drop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.hf-intro .statusbar > :nth-child(1) { animation-delay: 0.25s; } .hf-intro .statusbar > :nth-child(2) { animation-delay: 0.33s; }
.hf-intro .statusbar > :nth-child(3) { animation-delay: 0.41s; } .hf-intro .statusbar > :nth-child(4) { animation-delay: 0.49s; }
@keyframes hf-drop { from { opacity: 0; transform: translateY(-46px) scale(0.6); } }
.hf-intro .ph-title { animation: hf-rise 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) 0.5s backwards; }
@keyframes hf-rise { from { opacity: 0; transform: translateY(26px) scale(0.9); } }
.hf-intro .ln-tile, .hf-intro .ln-tile.ln-flip { animation: hf-tile 1.05s cubic-bezier(0.2, 1.25, 0.3, 1) 0.45s backwards; }
@keyframes hf-tile { from { opacity: 0; transform: perspective(700px) rotateY(95deg) scale(0.25) rotate(-14deg); } 60% { transform: perspective(700px) rotateY(-12deg) scale(1.08); } }
.hf-intro .ln-word > *, .hf-intro .ph-task, .hf-intro .ph-cta, .hf-intro .ln-rv, .hf-intro .ln-dots { animation: hf-up 0.6s ease-out backwards; }
.hf-intro .ln-word > :nth-child(1) { animation-delay: 0.9s; } .hf-intro .ln-word > :nth-child(2) { animation-delay: 1s; } .hf-intro .ln-word > :nth-child(3) { animation-delay: 1.1s; }
.hf-intro .ph-task { animation-delay: 1.15s; } .hf-intro .ph-cta { animation-delay: 1.3s; }
.hf-intro .ln-rv:nth-child(1) { animation-delay: 1.45s; } .hf-intro .ln-rv:nth-child(2) { animation-delay: 1.55s; } .hf-intro .ln-rv:nth-child(3) { animation-delay: 1.65s; } .hf-intro .ln-rv:nth-child(4) { animation-delay: 1.75s; }
@keyframes hf-up { from { opacity: 0; transform: translateY(22px); } }
.hf-conf { position: absolute; top: -14px; width: var(--w); height: calc(var(--w) * 1.7); border-radius: 2px; background: var(--c); opacity: 0; animation: hf-fall var(--du) cubic-bezier(0.3, 0.1, 0.5, 1) var(--dl) forwards; }
@keyframes hf-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sw), 900px) rotate(calc(var(--r) + 540deg)); } }

@media (prefers-reduced-motion: reduce) {
  .hf-aurora, .hf-rays, .hf-spark, .hf-leaf img, .hf-fall, .hf-parrot, .hf-parrot img, .ln-art::after { animation: none !important; }
  .hf-spark { opacity: 0.8; }
  .hf-fall { display: none; }
  .hf-parrot { opacity: 1; left: 58%; top: 14%; }
}

/* =====================================================================================================
   TYPOGRAFIA I PLAKIETKI HERO — „dżungla” (tylko jasny motyw): tytuły jak naklejki (ciemnozielone litery z białym obrysem i zielonym spodem),
   plakietki jak przyciski 3D z jaskrawozieloną ramką, wspólna paleta z paskiem statusu (zielony #3bdc1e, spód #23a80f)
   ===================================================================================================== */
:root:not([data-theme="dark"]) .hero .ph-title,
:root:not([data-theme="dark"]) .hero .ln-en { color: #0c4a1c; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(35, 168, 15, 0.5), 0 6px 12px rgba(20, 110, 10, 0.25); letter-spacing: 0.01em; }
:root:not([data-theme="dark"]) .hero .ph-title .ph-mode { -webkit-text-stroke: 0; text-shadow: none; }
:root:not([data-theme="dark"]) .hero .ln-pl { color: #0f5a1f; font-weight: 800; -webkit-text-stroke: 3.5px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(35, 168, 15, 0.4), 0 4px 8px rgba(20, 110, 10, 0.18); }

/* plakietka trybu („Tylko słówka”) i temat */
:root:not([data-theme="dark"]) .hero .ph-mode,
:root:not([data-theme="dark"]) .hero .ln-topic { color: #17751a; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 2.5px solid #3bdc1e; box-shadow: 0 3px 0 #23a80f, 0 8px 14px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); font-weight: 800; }
:root:not([data-theme="dark"]) .hero .ph-mode:hover { background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); transform: translateY(-2px); box-shadow: 0 5px 0 #23a80f, 0 12px 18px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ph-mode:active { transform: translateY(2px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ph-mode.static:hover { transform: none; box-shadow: 0 3px 0 #23a80f, 0 8px 14px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }

/* poziom (A1…) i „Nowe słowo”: zielone przyciski 3D z białym tekstem */
:root:not([data-theme="dark"]) .hero .ln-cefr,
:root:not([data-theme="dark"]) .hero .ln-new { color: #fff; background: linear-gradient(180deg, #8ff04f 0%, #33c515 100%); border: 0; text-shadow: 0 1px 0 #1c7a0b, 0 2px 3px rgba(10, 80, 10, 0.4); box-shadow: 0 4px 0 #1f9a0c, 0 10px 16px -8px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.55); }
:root:not([data-theme="dark"]) .hero .ln-new { box-shadow: 0 4px 0 #1f9a0c, 0 10px 16px -6px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.55); }

/* głośniczek obok słówka: biały okrąg z zieloną ramką jak przycisk ustawień */
:root:not([data-theme="dark"]) .hero .ln-say { background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 3px solid #3bdc1e; box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); -webkit-text-stroke: 0; }
:root:not([data-theme="dark"]) .hero .ln-say:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ln-say:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ln-say .btn-3d { width: 30px; height: 30px; }
@media (max-width: 440px) { :root:not([data-theme="dark"]) .hero .ph-title, :root:not([data-theme="dark"]) .hero .ln-en { -webkit-text-stroke-width: 3.5px; } }

/* plakietka trybu / zestawu („Tylko słówka”, „Rozmówki ✕”) — w nowej linii pod tytułem „Nauka” */
.ph-head .ph-title .ph-mode { display: flex; width: fit-content; margin: 10px 0 0; }
.ph-head .ph-title .ph-mode.static, .ph-head .ph-title .ph-mode.ph-cont { display: flex; }
:root:not([data-theme="dark"]) .hero .ph-cont-x { background: linear-gradient(180deg, #8ff04f 0%, #33c515 100%); color: #fff; box-shadow: 0 2px 0 #1f9a0c, inset 0 1.5px 0 rgba(255, 255, 255, 0.55); -webkit-text-stroke: 0; text-shadow: 0 1px 1px rgba(10, 80, 10, 0.4); }
:root:not([data-theme="dark"]) .hero .ph-cont-x:hover { background: linear-gradient(180deg, #ff8a6a 0%, #f2461f 100%); box-shadow: 0 2px 0 #b52a0c, inset 0 1.5px 0 rgba(255, 255, 255, 0.5); }

/* ekran Nauka: tytuł z plakietką wyśrodkowany NAD kafelkiem słówka i większy (dawniej gubił się w lewym rogu) */
.ph-head .ph-title .ph-mode { margin: 10px auto 0; }
.plan-hero:has(> .ph-grid.ln-grid) > .ph-head { justify-content: center; text-align: center; margin: 10px 2px 0; }
.plan-hero:has(> .ph-grid.ln-grid) > .ph-head .ph-title { font-size: 46px; text-align: center; }
.plan-hero:has(> .ph-grid.ln-grid) > .ph-head .ph-mode { font-size: 16px; padding: 5px 16px; }
.plan-hero:has(> .ph-grid.ln-grid) > .ph-head .ph-mode.ph-cont { padding: 5px 8px 5px 12px; }
@media (min-width: 720px) {
  .plan-hero:has(> .ph-grid.ln-grid) > .ph-head { width: calc((100% - 36px) / 2.05); }
  .plan-hero:has(> .ph-grid.ln-grid) > .ph-head .ph-title { font-size: 58px; }
  .plan-hero:has(> .ph-grid.ln-grid) > .ph-head .ph-mode { font-size: 17px; padding: 6px 18px; }
  .plan-hero:has(> .ph-grid.ln-grid) > .ph-grid.ln-grid { align-items: start; }
}
.plan-hero:has(> .ph-grid.ln-grid) > .ph-grid.ln-grid { margin-top: 16px; }

/* ekran Nauka, szeroki ekran: pod kafelkiem karta z przykładowym zdaniem do aktualnego słówka — „Papuga podpowiada” */
.ln-left { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ln-left > .ln-art { width: 100%; }
.ln-ex { display: none; }
@media (min-width: 720px) {
  .ln-ex:not(:empty) { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; width: 100%; max-width: 410px; margin-top: 6px; padding: 12px 14px; border-radius: 22px; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 2.5px solid #3bdc1e; box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
  .ln-ex.ln-in { animation: ln-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
.ln-ex-av { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #ddf3e4; border: 3px solid #3bdc1e; box-shadow: 0 3px 0 #23a80f; object-fit: contain; padding: 2px; }
.ln-ex-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ln-ex-h { font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #23a80f; }
.ln-ex-en { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.25; color: #0c4a1c; }
.ln-ex-en mark, .ln-ex-en b, .ln-ex-en strong { background: linear-gradient(180deg, transparent 58%, rgba(255, 210, 61, 0.65) 58%); color: #0c4a1c; font-weight: 800; border-radius: 3px; padding: 0 1px; }
.ln-ex-pl { font-size: 14px; font-weight: 600; line-height: 1.3; color: #3f7a46; }
.ln-ex-say { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 3px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ln-ex-say .btn-3d { width: 24px; height: 24px; object-fit: contain; }
.ln-ex-say:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.ln-ex-say:active { transform: translateY(2px); box-shadow: 0 1px 0 #23a80f; }
:root[data-theme="dark"] .ln-ex:not(:empty) { background: #2a2733; box-shadow: 0 4px 0 #1c7a0d, 0 14px 22px -12px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .ln-ex-en { color: #e4e6f0; } :root[data-theme="dark"] .ln-ex-en mark { color: #fff; } :root[data-theme="dark"] .ln-ex-pl { color: #a8c8ad; } :root[data-theme="dark"] .ln-ex-say { background: #201d2a; }

/* ---------- okienko tempa mowy (nad głośnikiem): ramka i suwak w stylu dżungli ---------- */
.rate-pop { flex-direction: column; align-items: stretch; gap: 8px; width: 290px; max-width: calc(100vw - 16px); padding: 12px 14px 14px; border-radius: 22px; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 3px solid #3bdc1e; box-shadow: 0 5px 0 #23a80f, 0 18px 30px -12px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.rate-pop .rp-top { display: flex; align-items: center; justify-content: space-between; }
.rate-pop .rp-title { font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #23a80f; }
.rate-pop .rp-val { min-width: 0; padding: 2px 12px; border-radius: 999px; font-family: var(--display); font-size: 18px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ffd84d 0%, #f0a500 100%); text-shadow: 0 1px 0 rgba(150, 90, 0, 0.5); box-shadow: 0 3px 0 #c98200, inset 0 1.5px 0 rgba(255, 255, 255, 0.55); }
.rate-pop .rp-row { display: flex; align-items: center; gap: 8px; }
.rate-pop img.rp-ic { width: 34px; height: 34px; flex-shrink: 0; }
.rate-pop input[type="range"] { flex: 1; width: auto; min-width: 0; height: 28px; margin: 0; background: transparent; accent-color: #3bdc1e; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rate-pop input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #5cf03a 0, #2fbf12 var(--p, 50%), #d9ead2 var(--p, 50%)); box-shadow: inset 0 2px 3px rgba(20, 90, 10, 0.25); }
.rate-pop input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -7px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #ffe27a, #f0a500); box-shadow: 0 3px 0 #c98200, 0 5px 8px rgba(0, 0, 0, 0.25); }
.rate-pop input[type="range"]::-moz-range-track { height: 12px; border-radius: 999px; background: #d9ead2; }
.rate-pop input[type="range"]::-moz-range-progress { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #5cf03a, #2fbf12); }
.rate-pop input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #ffe27a, #f0a500); box-shadow: 0 3px 0 #c98200; }
.rate-pop .rp-chips { display: flex; gap: 6px; }
.rate-pop .rp-chip { flex: 1; padding: 6px 4px; border-radius: 999px; border: 2px solid #3bdc1e; background: #fff; box-shadow: 0 3px 0 #23a80f; font-family: var(--display); font-size: 13px; font-weight: 800; color: #17751a; cursor: pointer; line-height: 1.15; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.rate-pop .rp-chip small { display: block; font-size: 11px; font-weight: 700; color: #4a8a4f; }
.rate-pop .rp-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 #23a80f; }
.rate-pop .rp-chip.on { background: linear-gradient(180deg, #8ff04f 0%, #33c515 100%); color: #fff; box-shadow: 0 3px 0 #1f9a0c; text-shadow: 0 1px 0 #1c7a0b; }
.rate-pop .rp-chip.on small { color: #eaffdc; }
:root[data-theme="dark"] .rate-pop .rp-chip { background: #2a2733; color: #8cf06a; }
:root[data-theme="dark"] .rate-pop .rp-chip small { color: #9ac79c; }
:root[data-theme="dark"] .rate-pop .rp-chip.on { background: linear-gradient(180deg, #5fd830 0%, #2aa30f 100%); color: #fff; }

/* ikona w plakietce „Nowe słowo / Nowy zwrot”: złota, wypełniona gwiazdka z białym obrysem i delikatnym migotaniem */
.ln-new svg { width: 19px; height: 19px; flex-shrink: 0; fill: #ffd84d; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 0 rgba(150, 90, 0, 0.55)) drop-shadow(0 0 5px rgba(255, 216, 77, 0.8)); animation: ln-star 2.4s ease-in-out infinite; }
@keyframes ln-star { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .ln-new svg { animation: none; } }

/* ikona tematu w plakietce (3D z Ming) zamiast systemowego emoji */
.ln-topic-ic { width: 24px; height: 24px; object-fit: contain; vertical-align: -7px; margin: -3px 2px -3px -4px; filter: drop-shadow(0 2px 2px rgba(20, 90, 10, 0.25)); }

/* =====================================================================================================
   RAMKA KAFELKA SŁÓWKA I KROPKI — „dżungla”
   Ramka: jaskrawozielony obrys 3D z białą obwódką i listkami w rogach (kołyszą się); kropki: kapsuła, ukończone = zielone listki,
   następne = jasne kulki, aktywna = złoty pasek z paskami i iskierką, który napełnia się przez czas pokazu słówka.
   ===================================================================================================== */
:root:not([data-theme="dark"]) .ln-tile:not(.done) {
  border-width: 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #efeaff) 70%, #ffffff), var(--tint, #efeaff)) padding-box, linear-gradient(135deg, #b9f884 0%, #3bdc1e 45%, #1f9a0c 100%) border-box;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 10px 0 1px #23a80f, 0 32px 46px -16px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
:root:not([data-theme="dark"]) .ln-tile:not(.done):hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 13px 0 1px #23a80f, 0 38px 54px -16px rgba(20, 110, 10, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .ln-tile:not(.done):active { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 3px 0 1px #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
/* ozdoby w rogach: liść monstery w lewym górnym, kwiat lotosu w prawym dolnym */
:root:not([data-theme="dark"]) .ln-tile:not(.done)::before {
  content: ""; position: absolute; inset: -30px; z-index: 3; pointer-events: none; transform-origin: 50% 50%;
  background: url("assets/ui/hero/leaf-monstera.png") no-repeat 0 0 / 66px, url("assets/ui/hero/lotus.png") no-repeat 100% 100% / 78px;
  filter: drop-shadow(0 4px 3px rgba(20, 90, 10, 0.3)); animation: ln-leaf-sway 5.5s ease-in-out infinite alternate;
}
@keyframes ln-leaf-sway { from { transform: rotate(-1.6deg) scale(1); } to { transform: rotate(1.6deg) scale(1.025); } }

/* kropki */
.ln-dots { align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 2px solid rgba(59, 220, 30, 0.75); box-shadow: 0 3px 0 rgba(35, 168, 15, 0.85), 0 10px 16px -10px rgba(20, 110, 10, 0.5); }
.ln-dots i { width: 11px; height: 11px; border-radius: 50%; overflow: visible; background: radial-gradient(circle at 35% 30%, #ffffff, #cfe9c6); border: 1.5px solid rgba(59, 220, 30, 0.55); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* ukończone (przed aktywną): zielone listki */
.ln-dots i:has(~ i.on) { width: 13px; height: 13px; border: 0; border-radius: 0 85% 0 85%; transform: rotate(-8deg); background: linear-gradient(135deg, #a6f27a, #2fbf12); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), 0 2px 0 #1f9a0c; }
/* aktywna: złoty pasek, który się napełnia */
.ln-dots i.on { width: 38px; height: 12px; border: 0; border-radius: 99px; overflow: hidden; background: rgba(240, 165, 0, 0.22); box-shadow: inset 0 1.5px 2px rgba(150, 90, 0, 0.3); animation: ln-dot-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ln-dots i.on::after { background: linear-gradient(90deg, #ffe066, #f0a500); box-shadow: 0 0 10px rgba(255, 190, 40, 0.9), inset 0 1.5px 0 rgba(255, 255, 255, 0.55); }
.ln-dots i.on::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 4px, rgba(255, 255, 255, 0) 4px 9px); background-size: 18px 100%; animation: ln-stripes 0.9s linear infinite; mix-blend-mode: soft-light; }
@keyframes ln-stripes { to { background-position: 18px 0; } }
@keyframes ln-dot-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18, 1.5); } 100% { transform: scale(1); } }
:root[data-theme="dark"] .ln-dots { background: rgba(32, 29, 42, 0.8); }
:root[data-theme="dark"] .ln-dots i:not(.on):not(:has(~ i.on)) { background: radial-gradient(circle at 35% 30%, #4a4660, #2c2842); }
@media (prefers-reduced-motion: reduce) { .ln-tile::before, .ln-dots i.on, .ln-dots i.on::before { animation: none !important; } }

/* =====================================================================================================
   KARTA NAUKA — prawa kolumna w stylu dżungli: karta celu, zielony przycisk „Dokończ naukę”, wiersze powtórek i przyciski „Powtórz”
   (tylko jasny motyw; dotyczy każdej sekcji .hero — Nauka, Słownictwo, Audio, Profil i podstron)
   ===================================================================================================== */
:root:not([data-theme="dark"]) .hero .ph-task {
  min-height: 68px; border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%);
  box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease;
}
:root:not([data-theme="dark"]) .hero .ph-task:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #23a80f, 0 20px 28px -12px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ph-task:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ph-icon { width: 52px; height: 52px; filter: drop-shadow(0 3px 3px rgba(20, 90, 10, 0.25)); }
:root:not([data-theme="dark"]) .hero .ph-label { font-weight: 700; color: #0c4a1c; }
:root:not([data-theme="dark"]) .hero .ph-num { color: #6f9a74; }
:root:not([data-theme="dark"]) .hero .ph-num b { color: #6f9a74; }
:root:not([data-theme="dark"]) .hero .ph-task.going .ph-num b { color: #e09a00; text-shadow: 0 1px 0 #fff; }
:root:not([data-theme="dark"]) .hero .ph-bar { height: 12px; background: rgba(35, 168, 15, 0.16); box-shadow: inset 0 2px 3px rgba(20, 90, 10, 0.22); }
:root:not([data-theme="dark"]) .hero .ph-bar i { box-shadow: 0 0 10px rgba(255, 190, 40, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.45); }

/* „Dokończ naukę / Ucz się”: zielony przycisk 3D z błyskiem */
:root:not([data-theme="dark"]) .hero .ph-cta {
  height: 64px; margin-top: 6px; font-size: 25px; letter-spacing: 0.01em; text-shadow: 0 2px 0 #1c7a0b, 0 3px 6px rgba(10, 80, 10, 0.35);
  background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%);
  box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55);
}
:root:not([data-theme="dark"]) .hero .ph-cta::before { background: linear-gradient(180deg, #b3f77a 0%, #4bdc25 100%); }
:root:not([data-theme="dark"]) .hero .ph-cta:hover:not(:disabled) { transform: translateY(-3px); filter: none; background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); box-shadow: 0 9px 0 #1f9a0c, 0 24px 32px -10px rgba(20, 110, 10, 0.7), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); }
:root:not([data-theme="dark"]) .hero .ph-cta:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #1f9a0c, inset 0 2.5px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .hero .ph-cta::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: go-shine 5s ease-in-out 1.5s infinite; }

/* wiersze powtórek */
:root:not([data-theme="dark"]) .hero .ln-rvs { gap: 8px; margin-top: 4px; }
:root:not([data-theme="dark"]) .hero .ln-rv {
  padding: 8px 8px 8px 10px; border: 2px solid rgba(59, 220, 30, 0.8); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 255, 232, 0.88));
  box-shadow: 0 3px 0 rgba(35, 168, 15, 0.9), 0 12px 18px -12px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease;
}
:root:not([data-theme="dark"]) .hero .ln-rv:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(35, 168, 15, 0.95), 0 16px 22px -12px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hero .ln-rv-ic { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(20, 90, 10, 0.25)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
:root:not([data-theme="dark"]) .hero .ln-rv:hover .ln-rv-ic { transform: scale(1.12) rotate(-8deg); }
:root:not([data-theme="dark"]) .hero .ln-rv-text, :root:not([data-theme="dark"]) .hero .ln-rv-name { color: #0c4a1c; }
:root:not([data-theme="dark"]) .hero .ln-rv-name:hover { color: #17a00a; }
:root:not([data-theme="dark"]) .hero .ln-rv-sub, :root:not([data-theme="dark"]) .hero .ln-rv-open { color: #4a8a4f; }
:root:not([data-theme="dark"]) .hero .ln-rv-open:hover { color: #17a00a; }
:root:not([data-theme="dark"]) .hero .ln-rv-sel:hover { background-color: rgba(59, 220, 30, 0.18); }
/* „Powtórz”: biały przycisk z zieloną ramką, po najechaniu wypełnia się zielenią */
:root:not([data-theme="dark"]) .hero .ln-rv-go {
  padding: 8px 18px; border: 2.5px solid #3bdc1e; color: #17751a; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%);
  box-shadow: 0 3px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease, background 0.2s ease, color 0.2s ease;
}
:root:not([data-theme="dark"]) .hero .ln-rv-go:hover:not(:disabled) { color: #fff; border-color: #2fbf12; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); text-shadow: 0 1px 0 #1c7a0b; transform: translateY(-2px); box-shadow: 0 5px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .hero .ln-rv-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #23a80f; }
:root:not([data-theme="dark"]) .hero .ln-rv-go:disabled { border-color: #b9c6b0; color: #8a9a88; box-shadow: 0 3px 0 #b9c6b0; }
/* kropki karuzeli kart (Nauka / Ścieżka) w zieleni */
:root:not([data-theme="dark"]) .hero .dot { background: rgba(35, 168, 15, 0.25); }
:root:not([data-theme="dark"]) .hero .dot.active { background: linear-gradient(180deg, #8ff04f, #2fbf12); box-shadow: 0 2px 0 #1f9a0c; }

/* ---------- podstrony z sekcją hero (Słownictwo, Audio, Profil, podstrony z przyciskiem „wróć”) w tym samym stylu ---------- */
/* liczniki-pastylki i zaznaczenie wiersza: zieleń i złoto zamiast fioletu */
:root:not([data-theme="dark"]) .sub-hero .ph-num { background: #e6f9dc; box-shadow: 0 3px 0 #c5ecb4; }
:root:not([data-theme="dark"]) .sub-hero .ph-task.going .ph-num { background: #fff3c9; box-shadow: 0 3px 0 #f3dc8f; }
:root:not([data-theme="dark"]) .sub-hero .ph-task.sel { border-color: #23a80f; background: linear-gradient(180deg, #f2ffe9, #dcf8c9); box-shadow: 0 4px 0 #1f9a0c, 0 0 0 5px rgba(59, 220, 30, 0.25), 0 14px 22px -12px rgba(20, 110, 10, 0.55); }
:root:not([data-theme="dark"]) .sub-hero .ph-task { border-radius: 24px; animation-duration: 0.5s; }
/* przycisk „wróć” jak okrągłe przyciski w pasku statusu */
:root:not([data-theme="dark"]) .sub-hero .sh-back { border: 3px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); color: #17751a; box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .sub-hero .sh-back:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .sub-hero .sh-back:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .sub-hero .sh-sub { color: #3f7a46; font-weight: 600; }
/* tytuł z plakietką pod nim — wyśrodkowany nad grafiką (jak na ekranie Nauka); podstrony z „wróć” zostają po staremu */
.hero:not(.sub-hero) .page-hero > .ph-head { justify-content: center; text-align: center; margin: 10px 2px 0; }
.hero:not(.sub-hero) .page-hero > .ph-head .ph-title { font-size: 46px; text-align: center; }
.hero:not(.sub-hero) .page-hero > .ph-head .ph-mode { font-size: 16px; padding: 5px 16px; }
@media (min-width: 720px) {
  .hero:not(.sub-hero) .page-hero > .ph-head { width: calc((100% - 36px) / 2.05); }
  .hero:not(.sub-hero) .page-hero > .ph-head .ph-title { font-size: 58px; }
  .hero:not(.sub-hero) .page-hero > .ph-head .ph-mode { font-size: 17px; padding: 6px 18px; }
}
.hero:not(.sub-hero) .page-hero .ph-art { margin-top: 12px; }

/* Audio: kafelki „Słuchaj” i „Mów” — białe z zieloną ramką jak reszta */
:root:not([data-theme="dark"]) .au-mode, :root:not([data-theme="dark"]) .au-mode.speak {
  border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%);
  box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease;
}
:root:not([data-theme="dark"]) .au-mode:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 7px 0 #23a80f, 0 20px 28px -12px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .au-mode:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .au-mode b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .au-mode span { color: #4a8a4f; }

/* =====================================================================================================
   MENU SŁOWNICTWA (Słówka do nauczenia, Pomyłki, Moje słówka …) — osobne zielone kapsuły z ikonami 3D z Ming (assets/ui/vc/, rv/mistakes)
   Efekty: wjazd z opóźnieniem, uniesienie i „skok” ikony po najechaniu, szewron wsuwa się, licznik jako pastylka
   ===================================================================================================== */
:root:not([data-theme="dark"]) .voc-menu { gap: 10px; padding: 4px 2px 8px; background: none; box-shadow: none; }
:root:not([data-theme="dark"]) .voc-row {
  position: relative; overflow: hidden; gap: 14px; padding: 10px 14px 10px 12px; border: 2.5px solid rgba(59, 220, 30, 0.85); border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease; animation: vc-in 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) backwards;
}
:root:not([data-theme="dark"]) .voc-row + .voc-row { box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .voc-row:nth-child(1) { animation-delay: 0.05s; } :root:not([data-theme="dark"]) .voc-row:nth-child(2) { animation-delay: 0.11s; }
:root:not([data-theme="dark"]) .voc-row:nth-child(3) { animation-delay: 0.17s; } :root:not([data-theme="dark"]) .voc-row:nth-child(4) { animation-delay: 0.23s; }
:root:not([data-theme="dark"]) .voc-row:nth-child(5) { animation-delay: 0.29s; } :root:not([data-theme="dark"]) .voc-row:nth-child(6) { animation-delay: 0.35s; }
:root:not([data-theme="dark"]) .voc-row:nth-child(7) { animation-delay: 0.41s; }
@keyframes vc-in { from { opacity: 0; transform: translateX(-26px) scale(0.96); } }
:root:not([data-theme="dark"]) .voc-row:hover { background: linear-gradient(180deg, #ffffff 0%, #e6fbd8 100%); transform: translateY(-3px); box-shadow: 0 7px 0 #23a80f, 0 20px 28px -12px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .voc-row:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .voc-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transition: left 0.7s ease; }
:root:not([data-theme="dark"]) .voc-row:hover::after { left: 130%; }
:root:not([data-theme="dark"]) .voc-ic { width: 52px; height: 52px; filter: drop-shadow(0 4px 4px rgba(20, 90, 10, 0.28)); }
:root:not([data-theme="dark"]) .voc-row:hover .voc-ic { animation: vc-hop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); transform: none; }
@keyframes vc-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9px) scale(1.14) rotate(-8deg); } 100% { transform: translateY(0) scale(1.06) rotate(-4deg); } }
:root:not([data-theme="dark"]) .voc-row b { font-weight: 700; color: #0c4a1c; }
:root:not([data-theme="dark"]) .voc-n { min-width: 40px; padding: 3px 12px; border-radius: 999px; text-align: center; font-weight: 800; color: #17751a; background: #e6f9dc; box-shadow: 0 3px 0 #c5ecb4; }
:root:not([data-theme="dark"]) .voc-n.alert { background: linear-gradient(180deg, #ff9a7a, #f2461f); color: #fff; box-shadow: 0 3px 0 #b52a0c; text-shadow: 0 1px 1px rgba(120, 20, 0, 0.4); animation: vc-pulse 2s ease-in-out infinite; }
@keyframes vc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
:root:not([data-theme="dark"]) .voc-chev { color: #3bdc1e; font-weight: 800; transition: transform 0.2s ease; }
:root:not([data-theme="dark"]) .voc-row:hover .voc-chev { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .voc-row, .voc-n.alert, .voc-row:hover .voc-ic { animation: none !important; } }

/* =====================================================================================================
   BANER „SPRAWDŹ SWÓJ POZIOM” — styl dżungli: zielona kapsuła 3D, papuga w birecie, zielony przycisk z błyskiem
   ===================================================================================================== */
:root:not([data-theme="dark"]) .pl-banner {
  gap: 14px; padding: 14px 16px 14px 12px; border: 2.5px solid #3bdc1e; border-radius: 28px;
  background: radial-gradient(60% 120% at 8% 50%, rgba(255, 236, 150, 0.45), transparent 70%), linear-gradient(180deg, #ffffff 0%, #effde6 100%);
  box-shadow: 0 5px 0 #23a80f, 0 18px 26px -14px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
:root:not([data-theme="dark"]) .pl-banner::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 30%; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: go-shine 6s ease-in-out 1.5s infinite; }
:root:not([data-theme="dark"]) .pl-banner > img { width: 74px; height: 74px; filter: drop-shadow(0 6px 5px rgba(20, 90, 10, 0.35)); animation: pl-nod 3.2s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes pl-nod { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
:root:not([data-theme="dark"]) .pl-banner-text b { color: #0c4a1c; font-size: 20px; }
:root:not([data-theme="dark"]) .pl-banner-text small { color: #3f7a46; font-weight: 700; }
:root:not([data-theme="dark"]) .pl-go {
  padding: 10px 18px; font-size: 16px; color: #fff; text-shadow: 0 1px 0 #1c7a0b, 0 2px 3px rgba(10, 80, 10, 0.35);
  background: linear-gradient(180deg, #96f255 0%, #2fbf12 100%); box-shadow: 0 5px 0 #1f9a0c, 0 12px 16px -8px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease;
}
:root:not([data-theme="dark"]) .pl-go:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #1f9a0c, 0 16px 20px -8px rgba(20, 110, 10, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .pl-go:active { transform: translateY(4px); box-shadow: 0 1px 0 #1f9a0c; }
:root:not([data-theme="dark"]) .pl-later { color: #4a8a4f; }
:root:not([data-theme="dark"]) .pl-later:hover { color: #17751a; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .pl-banner::after, .pl-banner > img { animation: none !important; } }

/* =====================================================================================================
   EKRAN GŁÓWNY POD SEKCJĄ HERO — styl dżungli (jasny motyw): nagłówki sekcji, pakiety, gry, powtórka błędów, „Dziś” (gramatyka), Audio
   Wspólny język: zielone ramki z „dołem” 3D (#3bdc1e / #23a80f), złoty akcent (postęp, bieżący krok), ikony 3D z Ming, skok ikony i unoszenie po najechaniu
   ===================================================================================================== */
/* nagłówki sekcji: tytuł-naklejka + przycisk „Wszystkie ›” jako zielona pastylka */
:root:not([data-theme="dark"]) .section-title { color: #0c4a1c; font-size: 26px; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(35, 168, 15, 0.45), 0 6px 10px rgba(20, 110, 10, 0.18); }
:root:not([data-theme="dark"]) .section-head .link { padding: 6px 15px; border: 2.5px solid #3bdc1e; border-radius: 999px; color: #17751a; font-size: 14px; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 3px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease, background 0.2s ease, color 0.2s ease; }
:root:not([data-theme="dark"]) .section-head .link:hover { color: #fff; border-color: #2fbf12; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); text-shadow: 0 1px 0 #1c7a0b; transform: translateY(-2px); box-shadow: 0 5px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .section-head .link:active { transform: translateY(3px); box-shadow: 0 0 0 #23a80f; }

/* pakiety słówek i gry: kolorowe kafle w zielonej ramce 3D */
:root:not([data-theme="dark"]) .pack { border: 3px solid #3bdc1e; box-shadow: 0 5px 0 #23a80f, 0 14px 20px -10px rgba(20, 110, 10, 0.45); transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease; }
:root:not([data-theme="dark"]) .pack:hover { transform: translateY(-4px); box-shadow: 0 9px 0 #23a80f, 0 20px 28px -10px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .pack:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .gm-mini { border-color: #3bdc1e; border-width: 3px; box-shadow: 0 5px 0 #23a80f, 0 14px 20px -10px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .gm-mini:hover { box-shadow: 0 9px 0 #23a80f, 0 20px 28px -10px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .gm-mini:active { box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .gm-mini b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .gm-mini span { color: #3f7a46; }

/* „Powtórka błędów” */
:root:not([data-theme="dark"]) .float-card { padding: 10px 12px 10px 12px; border: 2.5px solid #3bdc1e; border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .fc-icon { width: 54px; height: 54px; background: none; border-radius: 0; }
:root:not([data-theme="dark"]) .fc-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(20, 90, 10, 0.28)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
:root:not([data-theme="dark"]) .float-card:hover .fc-icon img { transform: scale(1.1) rotate(-8deg); }
:root:not([data-theme="dark"]) .fc-text b { color: #0c4a1c; font-weight: 700; }
:root:not([data-theme="dark"]) .fc-text .muted { color: #4a8a4f; font-weight: 700; }
:root:not([data-theme="dark"]) .float-card .btn.pill, :root:not([data-theme="dark"]) .float-card .btn.pill:hover:not(:disabled) { color: #fff; text-shadow: 0 1px 0 #1c7a0b, 0 2px 3px rgba(10, 80, 10, 0.35); background: linear-gradient(180deg, #96f255 0%, #2fbf12 100%); box-shadow: 0 5px 0 #1f9a0c, 0 12px 16px -8px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .float-card .btn.pill:hover:not(:disabled) { transform: translateY(-2px); filter: none; }
:root:not([data-theme="dark"]) .float-card .btn.pill:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #1f9a0c; }

/* „Dziś” w gramatyce */
:root:not([data-theme="dark"]) .hm-today { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #effde6 100%); box-shadow: 0 5px 0 #23a80f, 0 18px 26px -14px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .hm-today.all { border-color: #ffd23d; background: linear-gradient(180deg, #fffdf0 0%, #fff5c4 100%); box-shadow: 0 5px 0 #e6b800, 0 18px 26px -14px rgba(190, 140, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .td-art { background: radial-gradient(circle at 30% 24%, #ffffff, #d6f5c6); border-radius: 20px; box-shadow: inset 0 -3px 0 rgba(35, 168, 15, 0.15), 0 4px 0 #23a80f; }
:root:not([data-theme="dark"]) .td-art img { width: 50px; height: 50px; filter: drop-shadow(0 3px 3px rgba(20, 90, 10, 0.28)); }
:root:not([data-theme="dark"]) .td-ht b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .td-ht span { color: #4a8a4f; }
:root:not([data-theme="dark"]) .td-prog { border: 2px solid #3bdc1e; color: #17751a; background: linear-gradient(180deg, #ffffff, #f2ffe9); box-shadow: 0 2px 0 #23a80f; }
:root:not([data-theme="dark"]) .td-dots i { background: #cfe9c6; }
:root:not([data-theme="dark"]) .td-dots i.on { background: linear-gradient(180deg, #ffe066, #f0a500); box-shadow: 0 0 6px rgba(255, 190, 40, 0.8); }
:root:not([data-theme="dark"]) .td-step { border: 2px solid rgba(59, 220, 30, 0.75); background: linear-gradient(180deg, #ffffff, #f4fff0); box-shadow: 0 3px 0 rgba(35, 168, 15, 0.85), inset 0 2px 0 rgba(255, 255, 255, 0.9); transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease; }
:root:not([data-theme="dark"]) .td-step:hover:not(:disabled) { transform: translateY(-2px); border-color: #3bdc1e; box-shadow: 0 5px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .td-step:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #23a80f; }
:root:not([data-theme="dark"]) .td-step.now { border-color: #ffd23d; background: linear-gradient(180deg, #fffdf0, #fff5c4); box-shadow: 0 3px 0 #e6b800, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .td-step.now:hover { box-shadow: 0 5px 0 #e6b800, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .td-step.done { border-color: #cfe9c6; background: #f6fbf3; box-shadow: 0 3px 0 #cfe9c6; }
:root:not([data-theme="dark"]) .td-step.done .td-tx b { color: #6f9a74; }
:root:not([data-theme="dark"]) .td-ic { width: 50px; height: 50px; background: radial-gradient(circle at 30% 24%, #ffffff, #dff7d0); box-shadow: inset 0 -3px 0 rgba(35, 168, 15, 0.12); }
:root:not([data-theme="dark"]) .td-ic img { width: 42px; height: 42px; filter: drop-shadow(0 2px 2px rgba(20, 90, 10, 0.25)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
:root:not([data-theme="dark"]) .td-step:hover .td-ic img { transform: scale(1.12) rotate(-8deg); }
:root:not([data-theme="dark"]) .td-tx b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .td-tx small { color: #4a8a4f; }
:root:not([data-theme="dark"]) .td-go { background: linear-gradient(180deg, #8ff04f, #2fbf12); box-shadow: 0 3px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.45); }
:root:not([data-theme="dark"]) .td-arr { color: #3bdc1e; }
/* strzałki karuzel (pakiety, gry) */
@media (hover: hover) { :root:not([data-theme="dark"]) .row-arr { border: 3px solid #3bdc1e; color: #17751a; box-shadow: 0 4px 0 #23a80f, 0 12px 18px -8px rgba(20, 110, 10, 0.45); } :root:not([data-theme="dark"]) .row-arr:hover { box-shadow: 0 6px 0 #23a80f, 0 16px 22px -8px rgba(20, 110, 10, 0.5); } :root:not([data-theme="dark"]) .row-arr:active { box-shadow: 0 1px 0 #23a80f; } }

/* kafle pakietów: kolor pakietu zostaje (inline), na nim połysk od góry i lekki cień dołu; ikona (assets/ui/pkc, GPT Image 2) to okrągła scena wypełniająca CAŁE kółko
   z białą obwódką; podpis zawsze ciemnozielony „naklejką” — nie zależy już od koloru tła */
:root:not([data-theme="dark"]) .pack {
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.08) 100%) !important;
}
:root:not([data-theme="dark"]) .pack:has(.pack-img) .pack-art {
  width: 94px; height: 94px; margin-top: 0; overflow: hidden; border-radius: 50%; border: 3px solid #ffffff; background: #ffffff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 10px 14px -6px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root:not([data-theme="dark"]) .pack:hover .pack-art { transform: translateY(-3px) scale(1.05); }
:root:not([data-theme="dark"]) .pack-art .pack-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: none; transition: transform 0.4s ease; }
:root:not([data-theme="dark"]) .pack:hover .pack-img { transform: scale(1.1); }
:root:not([data-theme="dark"]) .pack b { color: #0c4a1c !important; font-size: 17px; -webkit-text-stroke: 3.5px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(35, 168, 15, 0.4); }

/* ikony wierszy (assets/ui/rvc, GPT Image 2) są okrągłymi scenami: biała obwódka i cień zamiast cienia „przedmiotu”; płytka pod ikoną w „Dziś” znika */
img[src*="/rvc/"] { border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14), 0 5px 8px -3px rgba(20, 90, 10, 0.35); filter: none !important; object-fit: cover; background: #fff; }
.td-ic:has(img[src*="/rvc/"]) { background: none !important; box-shadow: none !important; }
:root:not([data-theme="dark"]) .ln-say .btn-3d { width: 100%; height: 100%; border: 0; box-shadow: none; }
:root:not([data-theme="dark"]) .ln-say { padding: 0; overflow: hidden; }

/* tło sekcji hero: scena dżungli z GPT Image 2 (assets/ui/hero/bg-jungle.jpg, tools/gen-hero-gpt.js) zamiast gradientu; poświaty (aurory) wyłączone —
   obraz ma własne światło, a mniej wielkich warstw = lżejsze przewijanie. Liście, papuga i opadające listki też pochodzą z GPT Image 2 */
:root:not([data-theme="dark"]) .hero { background: url("assets/ui/hero/bg-jungle.jpg") center / cover no-repeat, linear-gradient(165deg, #e6f9d3 0%, #c9f0b0 52%, #b0e7c0 100%); }
:root:not([data-theme="dark"]) .hf-aurora { display: none; }
:root:not([data-theme="dark"]) .hf-rays { opacity: 0.35; }

/* tło strony (assets/ui/page-bg.jpg, GPT Image 2): jasne, z bladymi liśćmi przy krawędziach; przypięte do okna (osobna warstwa — płynne przewijanie, działa też na iOS) */
:root:not([data-theme="dark"]) { background: #f6fbf0; }
:root:not([data-theme="dark"]) body { background: transparent; } /* kolor na <html>: z kolorem na body Chrome malował jasny prostokąt pod przewijanymi karuzelami */
:root:not([data-theme="dark"]) body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("assets/ui/page-bg.jpg") center / cover no-repeat, #f6fbf0; }

/* kafle gier jak kafle pakietów: nasycony kolor gry, połysk od góry, okrągła ikona-scena (assets/ui/gmc) z białą obwódką, podpis „naklejką”, wynik w białej pigułce */
:root:not([data-theme="dark"]) .gm-mini {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.08) 100%),
    color-mix(in srgb, var(--pill) 78%, #ffffff);
  justify-content: center; gap: 6px; padding: 10px 10px 12px;
}
:root:not([data-theme="dark"]) .gm-mini .gm-art {
  width: 92px; height: 92px; margin: 0; border-radius: 50%; border: 3px solid #ffffff; background: #ffffff; object-fit: cover;
  filter: none; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 10px 14px -6px rgba(0, 0, 0, 0.35);
}
:root:not([data-theme="dark"]) .gm-mini:hover .gm-art { transform: translateY(-3px) scale(1.06); }
:root:not([data-theme="dark"]) .gm-mini b { color: #0c4a1c; font-size: 16px; line-height: 1.1; -webkit-text-stroke: 3.5px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(35, 168, 15, 0.4); }
:root:not([data-theme="dark"]) .gm-mini span { color: #17751a; font-size: 11.5px; font-weight: 800; line-height: 1.2; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); max-width: 100%; }
.gm-card .gm-art { border-radius: 50%; border: 3px solid #ffffff; object-fit: cover; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.16), 0 10px 14px -6px rgba(0, 0, 0, 0.3); filter: none; }

/* awatary (assets/ui/avatar, GPT Image 2) to okrągłe portrety wypełniające całe kółko — bez wewnętrznego marginesu */
.av-opt img, .flag.avatar img, .ln-ex-av { padding: 0; object-fit: cover; border-radius: 50%; }
:root:not([data-theme="dark"]) .av-opt { box-shadow: 0 0 0 2px rgba(59, 220, 30, 0.25), 0 6px 12px -6px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .av-opt.on { box-shadow: 0 0 0 3px #3bdc1e, 0 8px 16px -6px rgba(35, 168, 15, 0.6); }

/* GPT Image 2: ikony dolnego menu (assets/ui/nav-*.png), zielone podświetlenie aktywnej zakładki zamiast fioletowego */
:root:not([data-theme="dark"]) .nav { border-top: 2px solid rgba(59, 220, 30, 0.35); box-shadow: 0 -8px 26px rgba(20, 110, 10, 0.12); }
:root:not([data-theme="dark"]) .nav-ic { filter: saturate(0.85) drop-shadow(0 2px 2px rgba(20, 90, 10, 0.18)); }
:root:not([data-theme="dark"]) .nav button > span:last-child { color: #4f7a55; }
:root:not([data-theme="dark"]) .nav button.active .nav-ind { background: linear-gradient(180deg, rgba(59, 220, 30, 0.26), rgba(59, 220, 30, 0.08)); box-shadow: inset 0 0 0 2px rgba(59, 220, 30, 0.45); }
:root:not([data-theme="dark"]) .nav button.active .nav-ic { filter: drop-shadow(0 4px 5px rgba(20, 110, 10, 0.4)); }
:root:not([data-theme="dark"]) .nav button.active > span:last-child { color: #17751a; }

/* poziom „A1”: zielona tarcza ze złotą gwiazdką (assets/ui/btn/cefr.png) przed tekstem */
:root:not([data-theme="dark"]) .hero .ln-cefr { display: inline-flex; align-items: center; gap: 3px; padding-left: 5px; }
:root:not([data-theme="dark"]) .hero .ln-cefr::before { content: ''; width: 24px; height: 24px; margin: -4px 0; background: url("assets/ui/btn/cefr.png") center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(10, 80, 10, 0.35)); }

/* „Ucz się / Dokończ naukę”: złoty przycisk „play” przed tekstem i listki zaglądające w rogi (assets/ui/btn/cta.png, leaves.png) */
:root:not([data-theme="dark"]) .hero .ph-cta[data-act="learn-new"],
:root:not([data-theme="dark"]) .hero .ph-cta[data-act="learn-new"]:hover:not(:disabled) {
  background:
    url("assets/ui/btn/leaves.png") left -22px top -28px / 64px no-repeat,
    linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%);
}
:root:not([data-theme="dark"]) .hero .ph-cta[data-act="learn-new"]::before {
  background:
    url("assets/ui/btn/leaves.png") left -22px top -28px / 64px no-repeat,
    linear-gradient(180deg, #b3f77a 0%, #4bdc25 100%);
}

/* linki „Wszystkie / Moduły / Więcej”: zielona strzałka (assets/ui/btn/arrow.png) zamiast „›” */
.link-arr { width: 20px; height: 20px; margin: -4px -6px -4px 6px; vertical-align: middle; object-fit: contain; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.link:hover .link-arr { transform: translateX(3px); }

/* ---------- efekty i animacje przycisków (motyw jasny; przy „ogranicz ruch” wyłączone) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* „Ucz się”: oddychająca zielona poświata, pulsujący złoty „play”, kołyszące się listki; po najechaniu listki się rozchylają */
  :root:not([data-theme="dark"]) .hero .ph-cta[data-act="learn-new"] { transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease, background-position 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

  /* linki „Wszystkie”: strzałka co chwilę zaprasza do kliknięcia; po najechaniu przelatuje błysk */
  :root:not([data-theme="dark"]) .section-head .link { position: relative; overflow: hidden; }
  :root:not([data-theme="dark"]) .section-head .link::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); pointer-events: none; }
  :root:not([data-theme="dark"]) .section-head .link:hover::after { left: 130%; transition: left 0.6s ease; }
  .link-arr { animation: bfx-nudge 3.2s ease-in-out infinite; }
  .link:hover .link-arr { animation: none; transform: translateX(4px) scale(1.12); }

  /* odznaka poziomu: tarcza co kilka sekund błyśnie i się zakołysze */
  :root:not([data-theme="dark"]) .hero .ln-cefr::before { animation: bfx-wiggle 5s ease-in-out 1s infinite; }

  /* pasek statusu: moneta-piórko się obraca, płomień migocze, ikona podskakuje po najechaniu */
  :root:not([data-theme="dark"]) .hero .statusbar .stat-gems .stat-img { animation: bfx-coin 6s ease-in-out 2s infinite; }
  :root:not([data-theme="dark"]) .hero .statusbar .flame .stat-img { transform-origin: 50% 90%; animation: bfx-flicker 1.6s ease-in-out infinite; }
  :root:not([data-theme="dark"]) .hero .statusbar .pill-stat:hover .stat-img { animation: bfx-hop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }

  /* kafle gier i pakietów: ikona tańczy po najechaniu */
  :root:not([data-theme="dark"]) .gm-mini:hover .gm-art, :root:not([data-theme="dark"]) .pack:hover .pack-art { animation: bfx-dance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }

  /* dolne menu: ikona podskakuje po najechaniu */
  :root:not([data-theme="dark"]) .nav button:not(.active):hover .nav-ic { animation: bfx-hop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }

  /* „galaretka” przy dotknięciu (klasa z js/app/herofx.js) */
  :root:not([data-theme="dark"]) .bfx-jelly { animation: bfx-jelly 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
  :root:not([data-theme="dark"]) .nav button.bfx-jelly { animation: none !important; }
  :root:not([data-theme="dark"]) .nav button.bfx-jelly .nav-ic { animation: bfx-jelly 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
}
/* iskry i listki z „Ucz się” (warstwa nad wszystkim, poza przyciskiem — nie znikają przy zmianie widoku) */
.bfx-box { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.bfx-p { position: fixed; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); animation: bfx-fly 1.15s cubic-bezier(0.15, 0.8, 0.3, 1) var(--dl) both; }
.bfx-p.star { background: linear-gradient(135deg, #fff6b0, #ffd23d 45%, #f0a500); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px rgba(255, 210, 61, 0.9)); }
.bfx-p.leaf { background: url("assets/ui/hero/leaf-small.png") center / contain no-repeat; }
.ph-cta .ripple, .gm-mini .ripple, .pack .ripple, .pl-go .ripple { background: rgba(255, 255, 255, 0.5); }
.section-head .link .ripple { background: rgba(59, 220, 30, 0.3); }

@keyframes bfx-breathe { 0%, 100% { box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55), 0 0 0 0 rgba(59, 220, 30, 0.45); } 50% { box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55), 0 0 0 9px rgba(59, 220, 30, 0); } }
@keyframes bfx-sway { 0%, 100% { background-position: right -16px bottom -26px, left -22px top -28px, 0 0; } 50% { background-position: right -13px bottom -23px, left -19px top -25px, 0 0; } }
@keyframes bfx-play { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.18) rotate(-8deg); } 86% { transform: scale(0.95) rotate(4deg); } 93% { transform: scale(1.06); } }
@keyframes bfx-nudge { 0%, 72%, 100% { transform: none; } 80% { transform: translateX(5px); } 86% { transform: translateX(-1px); } 92% { transform: translateX(3px); } }
@keyframes bfx-wiggle { 0%, 84%, 100% { transform: none; filter: drop-shadow(0 2px 2px rgba(10, 80, 10, 0.35)); } 88% { transform: rotate(-14deg) scale(1.2); filter: drop-shadow(0 0 6px rgba(255, 220, 80, 0.95)); } 93% { transform: rotate(9deg) scale(1.08); } 97% { transform: rotate(-3deg); } }
@keyframes bfx-coin { 0%, 80%, 100% { transform: none; } 90% { transform: rotateY(180deg) scale(1.1); } }
@keyframes bfx-flicker { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(0.96, 1.05) rotate(-2deg); } 50% { transform: scale(1.03, 0.97); } 75% { transform: scale(0.98, 1.04) rotate(2deg); } }
@keyframes bfx-hop { 0% { transform: none; } 40% { transform: translateY(-6px) scale(1.12) rotate(-6deg); } 70% { transform: translateY(1px) scale(0.97); } 100% { transform: none; } }
@keyframes bfx-dance { 0% { transform: none; } 25% { transform: rotate(-8deg) scale(1.08); } 50% { transform: rotate(6deg) scale(1.1); } 75% { transform: rotate(-3deg) scale(1.06); } 100% { transform: translateY(-3px) scale(1.05); } }
@keyframes bfx-jelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.12, 0.88); } 50% { transform: scale(0.92, 1.08); } 70% { transform: scale(1.04, 0.97); } 100% { transform: scale(1, 1); } }
@keyframes bfx-fly { 0% { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); opacity: 0; } }
.pl-go { position: relative; overflow: hidden; } /* fala po kliknięciu nie wychodzi poza przycisk */

/* karty z poradami pod nagłówkiem Słownictwa: zielona ramka 3D jak wiersze, grafiki z papugą (assets/ui/promo-*.png, GPT Image 2), zielony przycisk ze strzałką */
:root:not([data-theme="dark"]) .promo {
  overflow: hidden; border: 3px solid #3bdc1e; padding: 16px 14px 14px 18px;
  background:
    radial-gradient(120px 120px at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%);
  box-shadow: 0 5px 0 #23a80f, 0 14px 20px -10px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease;
}
:root:not([data-theme="dark"]) .promo:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #23a80f, 0 20px 28px -10px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .promo b { color: #0c4a1c; font-size: 20px; text-shadow: 0 2px 0 rgba(59, 220, 30, 0.25); }
:root:not([data-theme="dark"]) .promo span { color: #3f7a46; font-size: 14px; }
:root:not([data-theme="dark"]) .promo-img { width: 104px; height: 104px; filter: drop-shadow(0 8px 10px rgba(20, 90, 10, 0.3)); }
:root:not([data-theme="dark"]) .promo-go {
  display: inline-flex; align-items: center; padding: 7px 14px 7px 16px; border-radius: 999px; font-size: 15px; color: #fff; text-shadow: 0 1px 0 #1c7a0b;
  background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); box-shadow: 0 4px 0 #1f9a0c, 0 8px 14px -6px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease;
}
:root:not([data-theme="dark"]) .promo-go:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 0 #1f9a0c, 0 12px 18px -6px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .promo-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .promo-go .link-arr { margin: -4px -8px -4px 6px; border-radius: 50%; box-shadow: 0 0 0 2px #ffffff; }
:root:not([data-theme="dark"]) .promo-x { background: #ffffff; border: 2px solid #3bdc1e; color: #17751a; box-shadow: 0 2px 0 #23a80f; }
:root:not([data-theme="dark"]) .promo-x:hover { background: #f2ffe9; color: #0c4a1c; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme="dark"]) .promo:hover .promo-img { animation: bfx-dance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
}

/* ---------- ekrany z nagłówkiem .cx-hero (zestaw słówek: Wyuczone, Pomyłki, pakiety, listy; Gry; Gramatyka) w stylu dżungli ---------- */
:root:not([data-theme="dark"]) body:has(.cx-hero) #bgfx { display: none; } /* fioletowe tło z samolocikami → jasne tło strony z liśćmi */
:root:not([data-theme="dark"]) .cx-hero {
  background: url("assets/ui/hero/bg-jungle.jpg") center / cover no-repeat, linear-gradient(165deg, #e6f9d3 0%, #c9f0b0 52%, #b0e7c0 100%);
  box-shadow: 0 6px 0 #23a80f, 0 18px 28px -14px rgba(20, 110, 10, 0.45);
}
:root:not([data-theme="dark"]) .cx-hero::before, :root:not([data-theme="dark"]) .cx-hero::after { border-color: rgba(255, 255, 255, 0.22); }
:root:not([data-theme="dark"]) .cx-btn { border: 3px solid #3bdc1e; color: #17751a; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .cx-btn:hover { box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .cx-btn:active { box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .cx-dots i { background: #2fbf12; }
:root:not([data-theme="dark"]) .cx-art img, :root:not([data-theme="dark"]) .cx-art .art3d { filter: drop-shadow(0 12px 12px rgba(20, 90, 10, 0.4)); }
:root:not([data-theme="dark"]) .cx-art img[src*="/pkc/"] { border-radius: 50%; border: 4px solid #ffffff; filter: none; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.15), 0 14px 20px -8px rgba(20, 90, 10, 0.5); }
:root:not([data-theme="dark"]) .cx-title { color: #0c4a1c; -webkit-text-stroke: 6px #ffffff; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(35, 168, 15, 0.45), 0 8px 16px rgba(10, 70, 10, 0.25); }
:root:not([data-theme="dark"]) .cx-chips span { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 3px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); color: #17751a; font-weight: 800; }
:root:not([data-theme="dark"]) .cx-chips b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .cx-chips .ok { border-color: #f0c419; background: linear-gradient(180deg, #fffbe6 0%, #ffefb0 100%); box-shadow: 0 3px 0 #e0a800, inset 0 2px 0 rgba(255, 255, 255, 0.9); color: #8a5a00; }
:root:not([data-theme="dark"]) .cx-chips .ok b { color: #b86e00; }
:root:not([data-theme="dark"]) .cx-prog { background: #ffffff; border: 2.5px solid #3bdc1e; box-shadow: 0 3px 0 #23a80f, inset 0 2px 3px rgba(20, 110, 10, 0.12); }
:root:not([data-theme="dark"]) .cx-prog i { background: linear-gradient(90deg, #8ff04f, #2fbf12); box-shadow: 0 0 10px rgba(59, 220, 30, 0.6); }
:root:not([data-theme="dark"]) .cx-prog b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .cx-desc { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #17751a; box-shadow: 0 3px 10px -4px rgba(20, 90, 10, 0.35); }
:root:not([data-theme="dark"]) .cx-pop { border-color: #c9f2b8; box-shadow: 0 5px 0 #a7e48f, 0 24px 34px -14px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .cx-pop button { color: #0c4a1c; }
:root:not([data-theme="dark"]) .cx-pop button:hover:not(:disabled) { background: #f0fde8; }

/* szukaj / sortuj */
:root:not([data-theme="dark"]) .cx-search, :root:not([data-theme="dark"]) .cx-sort { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f6fff0 100%); box-shadow: 0 4px 0 #23a80f, 0 10px 16px -10px rgba(20, 110, 10, 0.4); color: #17751a; }
:root:not([data-theme="dark"]) .cx-search:focus-within { border-color: #2fbf12; background: #ffffff; box-shadow: 0 4px 0 #23a80f, 0 0 0 5px rgba(59, 220, 30, 0.2); }
:root:not([data-theme="dark"]) .cx-search input { color: #0c4a1c; }
:root:not([data-theme="dark"]) .cx-search input::placeholder { color: #7fa883; }
:root:not([data-theme="dark"]) .cx-sort:hover { box-shadow: 0 6px 0 #23a80f, 0 14px 20px -10px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .cx-sort:active { box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .cx-sort.on { color: #0c4a1c; background: #ecfde2; border-color: #2fbf12; }

/* filtry i zakładki: białe z jasnozieloną ramką; wybrana — zielony cukierek */
:root:not([data-theme="dark"]) .cx-filters .chip, :root:not([data-theme="dark"]) .cx-tabs button, :root:not([data-theme="dark"]) .cx-filters .segmented { border: 2.5px solid #b5ec9f; background: #ffffff; box-shadow: 0 4px 0 #8fd97a; color: #2d6a33; }
:root:not([data-theme="dark"]) .cx-filters .chip:hover, :root:not([data-theme="dark"]) .cx-tabs button:hover { color: #0c4a1c; border-color: #3bdc1e; box-shadow: 0 6px 0 #23a80f; }
:root:not([data-theme="dark"]) .cx-filters .chip.on, :root:not([data-theme="dark"]) .cx-tabs button.on, :root:not([data-theme="dark"]) .cx-filters .seg.on { color: #ffffff; border-color: #2fbf12; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); box-shadow: 0 4px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.45); text-shadow: 0 1px 0 #1c7a0b; }

/* karty słówek */
:root:not([data-theme="dark"]) .cx-list .word-row { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f4fdec 100%); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -16px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .cx-list .word-row:hover { background: linear-gradient(180deg, #ffffff 0%, #ecfbe0 100%); box-shadow: 0 8px 0 #23a80f, 0 20px 26px -16px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .cx-list .word-row:active { box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .cx-list .wr-img, :root:not([data-theme="dark"]) .cx-list .wr-emoji { box-shadow: 0 5px 10px -3px rgba(20, 90, 10, 0.3); }
:root:not([data-theme="dark"]) .cx-list .wr-en b { color: #0c4a1c; }

/* pusto: zielone teksty; przycisk na dole nie zasłania pustej skrzynki */
:root:not([data-theme="dark"]) .cx-empty { color: #3f7a46; }
:root:not([data-theme="dark"]) .cx-empty b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .cx-empty img { filter: drop-shadow(0 10px 10px rgba(20, 90, 10, 0.3)); }
.cx-list:has(.cx-empty) ~ .cx-cta { position: static; }

/* przyciski na dole: „Ucz się” i „Powtórz” jako zielone cukierki, „Słuchaj” z zieloną ramką */
:root:not([data-theme="dark"]) .cv-cta { background: linear-gradient(180deg, rgba(246, 251, 240, 0), rgba(246, 251, 240, 0.92) 45%); }
:root:not([data-theme="dark"]) .cx-cta { background: none; }
:root:not([data-theme="dark"]) .cx-go, :root:not([data-theme="dark"]) .cx-go.review { background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); text-shadow: 0 2px 0 #1c7a0b, 0 3px 6px rgba(10, 80, 10, 0.35); box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.6), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); }
:root:not([data-theme="dark"]) .cx-go:hover:not(:disabled), :root:not([data-theme="dark"]) .cx-go.review:hover:not(:disabled) { filter: none; box-shadow: 0 9px 0 #1f9a0c, 0 24px 32px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); }
:root:not([data-theme="dark"]) .cx-go:active:not(:disabled) { box-shadow: 0 1px 0 #1f9a0c, inset 0 2.5px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .cx-go:disabled { filter: saturate(0.5); opacity: 0.6; }
:root:not([data-theme="dark"]) .cx-links button { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 4px 0 #23a80f; color: #17751a; }
:root:not([data-theme="dark"]) .cx-links button:hover:not(:disabled) { color: #0c4a1c; border-color: #3bdc1e; background: #ffffff; box-shadow: 0 6px 0 #23a80f; }
:root:not([data-theme="dark"]) .cx-links button:active:not(:disabled) { box-shadow: 0 1px 0 #23a80f; }

/* karty list (Gry → Wszystkie, Pakiety) z zieloną ramką 3D */
:root:not([data-theme="dark"]) .pk-card { border: 2.5px solid #3bdc1e; box-shadow: 0 5px 0 #23a80f, 0 14px 20px -12px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .pk-card:hover { box-shadow: 0 8px 0 #23a80f, 0 20px 26px -12px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .pk-card .pk-name { color: #0c4a1c; }
/* iskierki obok grafiki w nagłówku: złote gwiazdki zamiast fioletowych */
:root:not([data-theme="dark"]) .cx-art::before, :root:not([data-theme="dark"]) .cx-art::after { background: linear-gradient(135deg, #fff6b0, #ffd23d 45%, #f0a500); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px rgba(255, 210, 61, 0.9)); }
/* wiersze słówek: kropki poziomu i strzałka w zieleni zamiast fioletu */
:root:not([data-theme="dark"]) .cx-list .wr-lvl.dots { background: #ecfbe2; }
:root:not([data-theme="dark"]) .cx-list .wr-lvl.dots i { background: #cfe9c4; }
:root:not([data-theme="dark"]) .cx-list .wr-lvl.dots i.on { background: linear-gradient(180deg, #8ff04f, #2fbf12); box-shadow: 0 0 6px rgba(59, 220, 30, 0.55); }
:root:not([data-theme="dark"]) .cx-list .wr-chev { background: #ecfbe2; color: #17751a; }
/* zakładki Wyuczone / Ostatni tydzień…: pasek przewija się w bok, więc ucinał cień 3D i uniesienie po najechaniu — miejsce w środku zamiast marginesu */
:root:not([data-theme="dark"]) .cx-tabs { padding: 6px 4px 10px; margin: -4px -4px 4px; }

/* ---------- karta słówka (.wd-hero / .wd-body / .wd-cta) w stylu dżungli ---------- */
:root:not([data-theme="dark"]) .wd-hero { background: url("assets/ui/hero/bg-jungle.jpg") center / cover no-repeat, linear-gradient(165deg, #e6f9d3 0%, #c9f0b0 52%, #b0e7c0 100%); }
:root:not([data-theme="dark"]) .wd-hero::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 65%); }
:root:not([data-theme="dark"]) .wd-bar .pk-back { width: 50px; height: 50px; border: 3px solid #3bdc1e; color: #17751a; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.15s ease; }
:root:not([data-theme="dark"]) .wd-bar .pk-back:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .wd-bar .pk-back:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .wd-art .wa-img { border: 4px solid #ffffff; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12), 0 20px 28px -14px rgba(20, 90, 10, 0.55); }
:root:not([data-theme="dark"]) .wd-hero .wd-en { color: #0c4a1c; -webkit-text-stroke: 6px #ffffff; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(35, 168, 15, 0.45), 0 8px 16px rgba(10, 70, 10, 0.25); }
:root:not([data-theme="dark"]) .wd-pron { color: #c2531f; background: linear-gradient(180deg, #ffffff 0%, #fff8ee 100%); border: 2.5px solid #3bdc1e; box-shadow: 0 3px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .wd-sb { border: 3px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); color: #0c4a1c; box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .wd-sb:hover { box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .wd-sb:active { box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .wd-sb img[src*="btn-speaker"] { border-radius: 50%; }

/* biała część z zieloną krawędzią u góry */
:root:not([data-theme="dark"]) .wd-body { background: linear-gradient(180deg, #ffffff 0%, #fbfff8 100%); border-top: 3px solid #3bdc1e; box-shadow: 0 -8px 20px -10px rgba(20, 110, 10, 0.35); }
:root:not([data-theme="dark"]) .wd-pl { border-bottom-color: #e3f5da; }
:root:not([data-theme="dark"]) .wd-pl b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .wd-badges .ln-cefr { background: linear-gradient(180deg, #8ff04f 0%, #33c515 100%); box-shadow: 0 3px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.55); text-shadow: 0 1px 0 #1c7a0b; }
:root:not([data-theme="dark"]) .wd-topic { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); color: #17751a; box-shadow: 0 4px 0 #23a80f; }
:root:not([data-theme="dark"]) .wd-topic:hover { color: #0c4a1c; border-color: #3bdc1e; background: #ffffff; box-shadow: 0 6px 0 #23a80f; }
:root:not([data-theme="dark"]) .wd-block { border-bottom-color: #e3f5da; }
:root:not([data-theme="dark"]) .wd-block h3 { color: #17751a; }

/* notatki: uwagi (zielone), przykład (turkusowe), skojarzenie (złote) z ramką w kolorze */
:root:not([data-theme="dark"]) .wc-note { background: #f0fde8; border: 2px solid #c9f2b8; }
:root:not([data-theme="dark"]) .wc-note h4 { color: #17751a; }
:root:not([data-theme="dark"]) .wc-note.n-ex { background: #e8f8f3; border-color: #b4e9da; }
:root:not([data-theme="dark"]) .n-ex h4 { color: #0f8a7c; }
:root:not([data-theme="dark"]) .wc-note.n-mnemo { background: #fff8dc; border-color: #f6e19a; }
:root:not([data-theme="dark"]) .n-mnemo h4 { color: #b77d00; }
:root:not([data-theme="dark"]) .wc-note:hover { box-shadow: 0 10px 20px -12px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .wc-ni { background: #ffffff; border: 2px solid #c9f2b8; box-shadow: 0 3px 0 #a7e48f; }
:root:not([data-theme="dark"]) .wc-exsay { background: #ffffff; border: 2px solid #3bdc1e; box-shadow: 0 3px 0 #23a80f; }

/* ścieżka postępu: zielona */
:root:not([data-theme="dark"]) .wd-block.wd-prog { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f4fdec 100%); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -14px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .wd-step::before { background: #d7efcb; }
:root:not([data-theme="dark"]) .wd-step i { border-color: #c9e8bc; }
:root:not([data-theme="dark"]) .wd-step.done::before, :root:not([data-theme="dark"]) .wd-step.cur::before { background: linear-gradient(90deg, #8ff04f, #2fbf12); }
:root:not([data-theme="dark"]) .wd-step.done i { background: linear-gradient(180deg, #8ff04f, #2fbf12); border-color: #2fbf12; }
:root:not([data-theme="dark"]) .wd-step.cur i { border-color: #2fbf12; background: radial-gradient(circle, #2fbf12 0 38%, #ffffff 42%); box-shadow: 0 0 0 5px rgba(59, 220, 30, 0.22); }
:root:not([data-theme="dark"]) .wd-step.cur small { color: #17751a; }
:root:not([data-theme="dark"]) .wd-step:last-child i { border: 0; box-shadow: none; background: url("assets/ui/sx-trophy.png") center / 30px no-repeat; }
:root:not([data-theme="dark"]) .wd-step:last-child.cur i, :root:not([data-theme="dark"]) .wd-step:last-child.done i { background-size: 36px; }
:root:not([data-theme="dark"]) .wd-prog .wd-level { background: #ecfbe2; color: #2d6a33; }
:root:not([data-theme="dark"]) .wd-prog .wd-level b { color: #17751a; }

/* przyciski na dole: „Ucz się” zielony cukierek, „Wiem” biały z zieloną ramką */
:root:not([data-theme="dark"]) .wd-cta .pick-go { background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); text-shadow: 0 2px 0 #1c7a0b, 0 3px 6px rgba(10, 80, 10, 0.35); box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.6), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); }
:root:not([data-theme="dark"]) .wd-cta .pick-go:hover:not(:disabled) { filter: none; box-shadow: 0 9px 0 #1f9a0c, 0 24px 32px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); }
:root:not([data-theme="dark"]) .wd-cta .pick-go:active:not(:disabled) { box-shadow: 0 1px 0 #1f9a0c, inset 0 2.5px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .wd-cta .wd-link { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); color: #17751a; box-shadow: 0 4px 0 #23a80f, 0 10px 16px -10px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .wd-cta .wd-link:hover { color: #0c4a1c; border-color: #3bdc1e; background: #ffffff; box-shadow: 0 6px 0 #23a80f, 0 14px 20px -10px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .wd-cta .wd-link:active { box-shadow: 0 1px 0 #23a80f; }
/* bieżący etap: zielona pulsująca kropka zamiast fioletowej; listy słówka: zielone chipy */
:root:not([data-theme="dark"]) .wd-step.cur:not(:last-child) i { background: linear-gradient(180deg, #8ff04f, #2fbf12); border-color: #ffffff; box-shadow: 0 3px 0 #1f9a0c, 0 0 0 5px rgba(59, 220, 30, 0.25); animation: wd-pulse-g 1.8s ease-in-out infinite; }
@keyframes wd-pulse-g { 0%, 100% { box-shadow: 0 3px 0 #1f9a0c, 0 0 0 4px rgba(59, 220, 30, 0.25); transform: scale(1); } 50% { box-shadow: 0 3px 0 #1f9a0c, 0 0 0 10px rgba(59, 220, 30, 0.06); transform: scale(1.12); } }
:root:not([data-theme="dark"]) .wd-step.cur::before { background: linear-gradient(90deg, #2fbf12, #d7efcb); }
:root:not([data-theme="dark"]) .wd-block .chip { border-color: #b5ec9f; box-shadow: 0 4px 0 #8fd97a; color: #2d6a33; }
:root:not([data-theme="dark"]) .wd-block .chip:hover { color: #0c4a1c; border-color: #3bdc1e; box-shadow: 0 6px 0 #23a80f; }
:root:not([data-theme="dark"]) .wd-block .chip:active { box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .wd-block .chip.on { color: #ffffff; border-color: #2fbf12; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); box-shadow: 0 4px 0 #1f9a0c; text-shadow: 0 1px 0 #1c7a0b; }
:root:not([data-theme="dark"]) .wd-block .chip.dashed { border-color: #8fd97a; box-shadow: none; background: transparent; color: #3f7a46; }
:root:not([data-theme="dark"]) .wd-block .chip.dashed:hover { background: #f0fde8; color: #17751a; }
@media (prefers-reduced-motion: reduce) { :root:not([data-theme="dark"]) .wd-step.cur:not(:last-child) i { animation: none; } }

/* ---------- ekran „Pakiety słówek”: działy (.pg), karty zestawów (.pk-card), ikony tematów ---------- */
:root:not([data-theme="dark"]) .pg-cap { color: #17751a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
:root:not([data-theme="dark"]) .pg { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f6fff0 100%); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -14px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .pg:hover { box-shadow: 0 7px 0 #23a80f, 0 18px 24px -14px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .pg.open { border-color: #2fbf12; box-shadow: 0 5px 0 #1f9a0c, 0 16px 22px -14px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .pg-ic { background: linear-gradient(160deg, #f4ffec, #dcf7cc); box-shadow: inset 0 -3px 0 rgba(35, 168, 15, 0.15), 0 3px 0 #b5ec9f; }
:root:not([data-theme="dark"]) .pg.open .pg-ic { background: linear-gradient(160deg, #eaffdc, #c9f2b2); }
:root:not([data-theme="dark"]) .pg-ic img { filter: drop-shadow(0 4px 4px rgba(20, 90, 10, 0.3)); }
:root:not([data-theme="dark"]) .pg-text b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .pg-text > span:not(.pg-bar) { color: #4f7a55; }
:root:not([data-theme="dark"]) .pg-bar { background: #e1f5d6; }
:root:not([data-theme="dark"]) .pg-chev { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); color: #17751a; box-shadow: 0 3px 0 #23a80f; }
:root:not([data-theme="dark"]) .pg-head:hover .pg-chev { background: #ffffff; border-color: #2fbf12; box-shadow: 0 4px 0 #1f9a0c; }
:root:not([data-theme="dark"]) .pg.open .pg-chev { background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); border-color: #2fbf12; color: #ffffff; box-shadow: 0 3px 0 #1f9a0c; }

/* karty zestawów: jasne tło w kolorze zestawu, ciemnozielona nazwa, zielona pigułka postępu, ikona-kółko w białej obwódce */
:root:not([data-theme="dark"]) .pk-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%), color-mix(in srgb, var(--tint) 70%, #ffffff); }
:root:not([data-theme="dark"]) .pk-card .pk-name, :root:not([data-theme="dark"]) .pk-card .pk-chev { color: #0c4a1c; }
:root:not([data-theme="dark"]) .pk-card .pk-count { color: #4f7a55; }
:root:not([data-theme="dark"]) .pk-card .pk-pill { background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); color: #ffffff; text-shadow: 0 1px 0 #1c7a0b; box-shadow: 0 4px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.45); }
:root:not([data-theme="dark"]) .pk-card .pk-img[src*="/tpc/"], :root:not([data-theme="dark"]) .pk-card .pk-img[src*="/pkc/"] { border-radius: 50%; border: 4px solid #ffffff; filter: none; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.14), 0 14px 18px -8px rgba(20, 90, 10, 0.45); }

/* ikona tematu przy słówku (chip „Kluczowe czasowniki” itp.): małe kółko w białej obwódce */
.ln-topic-ic[src*="/tpc/"] { border-radius: 50%; box-shadow: 0 0 0 1.5px #ffffff, 0 2px 3px rgba(20, 90, 10, 0.3); filter: none; }

/* ---------- ekran Audio: zestawy, pakiety z przyciskami słuchaj / mów, trening słuchu ---------- */
:root:not([data-theme="dark"]) .au-set { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f4fdec 100%); box-shadow: 0 4px 0 #23a80f, 0 12px 18px -14px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .au-set.locked { opacity: 1; border-color: #c9ecb9; box-shadow: 0 4px 0 #a9dc93; background: linear-gradient(180deg, #ffffff 0%, #f7fbf4 100%); }
:root:not([data-theme="dark"]) .au-set.locked .au-set-ic { filter: saturate(0.55); opacity: 0.8; }
:root:not([data-theme="dark"]) .au-set-ic[src*="/rvc/"] { border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 5px 8px -3px rgba(20, 90, 10, 0.35); }
:root:not([data-theme="dark"]) .au-set-text b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .au-set-text small { color: #4f7a55; }
.au-lock { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(120, 80, 0, 0.3)); }

/* przyciski słuchaj / mów: białe kółka z zieloną (słuchaj) i złotą (mów) ramką 3D */
:root:not([data-theme="dark"]) .au-pl { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); box-shadow: 0 4px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .au-pl.mic { border-color: #f0c419; background: linear-gradient(180deg, #ffffff 0%, #fff8dc 100%); box-shadow: 0 4px 0 #e0a800, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .au-pl:hover { box-shadow: 0 6px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .au-pl.mic:hover { box-shadow: 0 6px 0 #e0a800, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
:root:not([data-theme="dark"]) .au-pl:active { box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .au-pl.mic:active { box-shadow: 0 1px 0 #e0a800; }

/* kafle pakietów: zielona ramka 3D, kolor pakietu jako tło, ikona-kółko w białej obwódce */
:root:not([data-theme="dark"]) .au-pack { border: 3px solid #3bdc1e; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--bg) 55%, #ffffff); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -12px rgba(20, 110, 10, 0.45); transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.16s ease; }
:root:not([data-theme="dark"]) .au-pack:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #23a80f, 0 20px 26px -12px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .au-pack-text b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .au-pack-text small { color: #3f7a46; }
:root:not([data-theme="dark"]) .au-pack-img[src*="/pkc/"] { border-radius: 50%; border: 3px solid #ffffff; opacity: 1; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.14), 0 10px 14px -6px rgba(20, 90, 10, 0.45); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
:root:not([data-theme="dark"]) .au-pack:hover .au-pack-img { transform: rotate(-6deg) scale(1.06); }

/* trening słuchu: jasnozielona karta z zieloną ramką, przycisk jak zielony cukierek */
:root:not([data-theme="dark"]) .au-quiz { border: 3px solid #3bdc1e; background: radial-gradient(140px 100px at 12% 50%, rgba(255, 220, 120, 0.35), transparent 70%), linear-gradient(180deg, #ffffff 0%, #ecfbe2 100%); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -12px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .au-quiz-img { width: 66px; height: 66px; filter: drop-shadow(0 6px 8px rgba(20, 90, 10, 0.3)); }
:root:not([data-theme="dark"]) .au-quiz-text b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .au-quiz-text small { color: #3f7a46; }
:root:not([data-theme="dark"]) .au-quiz-go { color: #ffffff; text-shadow: 0 1px 0 #1c7a0b; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); box-shadow: 0 4px 0 #1f9a0c, 0 8px 14px -6px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.5); transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease; }
:root:not([data-theme="dark"]) .au-quiz-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 #1f9a0c, 0 12px 18px -6px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .au-quiz-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1f9a0c; }
:root:not([data-theme="dark"]) .au-quiz-go:disabled { opacity: 1; color: #6f9a74; text-shadow: none; background: linear-gradient(180deg, #ffffff 0%, #eef8e8 100%); box-shadow: 0 4px 0 #b5dca5; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme="dark"]) .au-quiz-img { animation: bfx-wiggle 5s ease-in-out 1.5s infinite; }
}
/* pasek pakietów przewija się w bok — miejsce na uniesienie i cień 3D kafli */
:root:not([data-theme="dark"]) .au-packs { padding: 8px 4px 14px; margin: -4px -4px 0; }

/* ---------- poprawki do jungle.css (wygenerowanego z tools/build-jungle.js) ---------- */
/* akcent jak przyciski dżungli; tekst akcentu ciemniejszy (czytelny na bieli); piórka są złote, nie fioletowe */
:root:not([data-theme="dark"]) { --accent: #2fbf12; --accent-text: #17751a; --gem: #e6b800; }
/* kolory ustawiane w kodzie (style="--c / --g1"): fiolet → zieleń; kolory poziomów CEFR (A1…C1) zostają jako kody poziomów */
:root:not([data-theme="dark"]) .set-icon.glossy[style*="#6a4cff"], :root:not([data-theme="dark"]) .set-icon.glossy[style*="#6D28D9"] { --c: #2fbf12 !important; }
:root:not([data-theme="dark"]) .ph-sq[style*="#6143ff"], :root:not([data-theme="dark"]) .ph-sq[style*="#4f63f0"] { --g1: #9be86f !important; --g2: #2fbf12 !important; }
:root:not([data-theme="dark"]) .gr-lv[data-l="all"] { --c: #2fbf12 !important; }
:root:not([data-theme="dark"]) .set-icon.glossy, :root:not([data-theme="dark"]) .ph-sq { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(20, 90, 10, 0.18); }
/* karty na stronie (profil, ustawienia, statystyki, zadania…): zielona ramka 3D jak reszta dżungli */
:root:not([data-theme="dark"]) .app > .card, :root:not([data-theme="dark"]) .app > section.card { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #fbfff8 100%); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -14px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .card-title { color: #0c4a1c; }
/* duże przyciski „pigułki” (Zrób test poziomu, Rozwiąż zadania, Otwórz…): zielony cukierek 3D zamiast niebiesko-fioletowego */
:root:not([data-theme="dark"]) .btn.pill { background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); color: #ffffff; text-shadow: 0 2px 0 #1c7a0b; box-shadow: 0 5px 0 #1f9a0c, 0 14px 22px -10px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5); transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease; }
:root:not([data-theme="dark"]) .btn.pill:hover:not(:disabled) { background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); transform: translateY(-2px); box-shadow: 0 7px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .btn.pill:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.5); }
/* ćwiczenia, gry, podsumowania: zamiast fioletowo-niebieskich scen z samolocikami (#bgfx) jasne tło strony z liśćmi dżungli */
:root:not([data-theme="dark"]) #bgfx { display: none; }
/* odpowiedzi w ćwiczeniach: wyraźniejsza zielona ramka 3D, po najechaniu soczysta zieleń */
:root:not([data-theme="dark"]) .opt { border: 2.5px solid #bfeaa9; box-shadow: 0 5px 0 #9fdc85, 0 10px 22px -14px rgba(20, 110, 10, 0.35); }
:root:not([data-theme="dark"]) .opt:hover:not(:disabled) { border-color: #3bdc1e; box-shadow: 0 8px 0 #23a80f, 0 14px 26px -14px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .opt:active:not(:disabled) { box-shadow: 0 2px 0 #23a80f; }
:root:not([data-theme="dark"]) .opt::before { background: linear-gradient(180deg, #8ff04f, #2fbf12); }
:root:not([data-theme="dark"]) .opt.picked { border-color: #2fbf12; box-shadow: 0 6px 0 #1f9a0c; }
:root:not([data-theme="dark"]) .opt.ok { border-color: #22c55e; box-shadow: 0 6px 0 #9fdcaf; }
:root:not([data-theme="dark"]) .opt.bad { border-color: var(--bad); box-shadow: 0 6px 0 #f4c5c5; }
/* moduły gramatyki na liście: zielona ramka 3D; zablokowane jaśniejsze */
:root:not([data-theme="dark"]) .gr-row { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f6fff0 100%); box-shadow: 0 5px 0 #23a80f, 0 12px 18px -14px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .gr-row.locked { border-color: #cdeebd; background: linear-gradient(180deg, #ffffff 0%, #f8fcf5 100%); box-shadow: 0 4px 0 #b5e2a0; }
:root:not([data-theme="dark"]) .gr-row b { color: #0c4a1c; }
/* podsumowanie lekcji: nagłówek z liśćmi dżungli, kafle z zieloną ramką 3D */
:root:not([data-theme="dark"]) .sx-hero { background: url("assets/ui/hero/bg-jungle.jpg") center / cover no-repeat, linear-gradient(160deg, #f2fbec, #e3f7d6); border: 3px solid #3bdc1e; box-shadow: 0 6px 0 #23a80f, 0 18px 26px -14px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .sx-tile { border: 2.5px solid #3bdc1e; background: linear-gradient(180deg, #ffffff 0%, #f6fff0 100%); box-shadow: 0 5px 0 #23a80f, 0 14px 20px -14px rgba(20, 110, 10, 0.4); }
:root:not([data-theme="dark"]) .sx-tile:hover { box-shadow: 0 8px 0 #23a80f, 0 20px 26px -14px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .sx-tile small { color: #6f9a74; }

/* ---------- Zadania z lekcji: numer lekcji, wybór lekcji, części A–D, gramatyka do lekcji, zadania od AI ---------- */
:root:not([data-theme="dark"]) .lk-num { background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); text-shadow: 0 2px 0 #1c7a0b; box-shadow: 0 4px 0 #1f9a0c, 0 10px 16px -8px rgba(20, 110, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
:root:not([data-theme="dark"]) .lk-chip { height: 38px; border: 2.5px solid #b5ec9f; background: #ffffff; color: #2d6a33; box-shadow: 0 4px 0 #8fd97a; transition: transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.14s ease; }
:root:not([data-theme="dark"]) .lk-chip:hover { transform: translateY(-2px); background: #ffffff; color: #0c4a1c; border-color: #3bdc1e; box-shadow: 0 6px 0 #23a80f; }
:root:not([data-theme="dark"]) .lk-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .lk-chip.on { color: #ffffff; border-color: #2fbf12; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); text-shadow: 0 1px 0 #1c7a0b; box-shadow: 0 4px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.45); }
:root:not([data-theme="dark"]) .lk-part { border: 2px solid #c9ecb9; background: #ffffff; color: #0c4a1c; box-shadow: 0 3px 0 #b5e2a0; }
:root:not([data-theme="dark"]) .lk-part:hover { border-color: #3bdc1e; box-shadow: 0 5px 0 #23a80f, 0 10px 16px -10px rgba(20, 110, 10, 0.45); }
:root:not([data-theme="dark"]) .lk-part:hover > i { color: #17751a; }
:root:not([data-theme="dark"]) .lk-parts b { background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); color: #ffffff; text-shadow: 0 1px 0 #1c7a0b; box-shadow: 0 2px 0 #1f9a0c; }
:root:not([data-theme="dark"]) .lk-gram { border: 2px solid #c9ecb9; background: #ffffff; box-shadow: 0 3px 0 #b5e2a0; }
:root:not([data-theme="dark"]) .lk-gram:hover { border-color: #3bdc1e; box-shadow: 0 5px 0 #23a80f; }
:root:not([data-theme="dark"]) .lk-gram:active { box-shadow: 0 1px 0 #23a80f; }
:root:not([data-theme="dark"]) .lk-gram-tx small { color: #4f7a55; }
:root:not([data-theme="dark"]) .lk-gram-tx b { color: #0c4a1c; }
:root:not([data-theme="dark"]) .lk-gram i { color: #6fbf5a; }
:root:not([data-theme="dark"]) .lk-ai { background: radial-gradient(120px 80px at 90% 20%, rgba(255, 230, 120, 0.45), transparent 70%), linear-gradient(120deg, #2fbf12, #17a589); text-shadow: 0 1px 0 rgba(10, 70, 10, 0.4); box-shadow: 0 5px 0 #1f7a3c, 0 14px 22px -10px rgba(20, 110, 10, 0.5); }
:root:not([data-theme="dark"]) .lk-ai:hover { box-shadow: 0 7px 0 #1f7a3c, 0 18px 26px -10px rgba(20, 110, 10, 0.55); }

/* ikonki kart ustawień i rodzajów ćwiczeń: okrągłe sceny (assets/ui/rvc) w białej obwódce — reguła img[src*="/rvc/"] wyżej */
.set-icon.set-art { width: 44px; height: 44px; padding: 0; object-fit: cover; }
.ex-ic .ex-img[src*="/rvc/"] { width: 44px; height: 44px; object-fit: cover; }
.ex-chip:not(.on) .ex-img[src*="/rvc/"] { filter: grayscale(0.7) opacity(0.75) !important; }
/* litery części zadań (A–D) w ustawieniach zadań: zielone kwadraciki */
:root:not([data-theme="dark"]) .tk-part-icon { color: #ffffff; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); text-shadow: 0 1px 0 #1c7a0b; box-shadow: 0 3px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.45); }
/* rodzaje zadań gramatyki (ustawienia) i plakietka zadania w ćwiczeniu: okrągłe sceny */
.gp-set-ic[src*="/rvc/"] { width: 44px; height: 44px; object-fit: cover; }
.gp-badge-ic[src*="/rvc/"] { border-width: 1.5px; object-fit: cover; }

/* polskie zdanie przykładowe: dotknięcie czyta je po polsku (nagranie z panelu → Wymowa → Przykłady, a bez nagrania syntezator) */
.ln-ex-pl[data-saypl], .wc-expl[data-saypl] { cursor: pointer; border-radius: 6px; transition: background 0.15s ease; }
.ln-ex-pl[data-saypl]::after, .wc-expl[data-saypl]::after { content: " 🔈"; font-size: 0.85em; opacity: 0.55; }
.ln-ex-pl[data-saypl]:hover, .wc-expl[data-saypl]:hover { background: rgba(59, 220, 30, 0.12); }

/* Baner „Sprawdź swój poziom” i karta „Trening słuchu” na telefonie: przyciski pod tekstem, żeby tytuł nie łamał się po jednym słowie */
@media (max-width: 480px) {
  .pl-banner, .au-quiz { flex-wrap: wrap; }
  .pl-banner-text, .au-quiz-text { flex: 1 1 0; }
  .pl-banner-btns { flex: 1 0 100%; flex-direction: row; justify-content: center; gap: 14px; }
  .pl-banner-btns .pl-go { flex: 1; max-width: 220px; }
  .au-quiz-go { flex: 1 0 100%; }
}
.pl-later { padding: 10px 12px; } /* większe pole dotyku */

/* Ulubione: zamiast wyszarzonego czerwonego serca — osobna grafika pustego zielonego serca (heartSrc w views.js) */
.fb-fav:not(.on) img, .wc-fav:not(.on) img, .wd-fav img { filter: none; }
.wd-fav:not(.on) img { opacity: 0.9; }
:root:not([data-theme="dark"]) .fb-fav.on, :root:not([data-theme="dark"]) .wc-fav.on { color: #c2264f; }

/* ---------- „Ucz się / Dokończ naukę” (.cta-go): złoty „play” z wirującą obwódką, liczba w złotej odznace, połysk, iskierki, pulsujący pierścień ---------- */
.cta-go > span { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.cta-go em { font-style: normal; white-space: nowrap; }
.cta-play { position: relative; flex: 0 0 auto; width: 42px; height: 42px; background: url("assets/ui/btn/cta.png") center / contain no-repeat; filter: drop-shadow(0 3px 2px rgba(10, 80, 10, 0.35)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cta-play::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px dashed rgba(255, 255, 255, 0.85); }
.cta-num { flex: 0 0 auto; min-width: 38px; height: 38px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 999px; font: 800 21px/1 var(--display); color: #0c4a1c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); background: linear-gradient(180deg, #fff3a6 0%, #ffd23a 55%, #f2b400 100%); border: 2.5px solid #fff; box-shadow: 0 3px 0 #c98f00, 0 6px 10px -4px rgba(120, 80, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.cta-gloss { position: absolute; z-index: 1; left: 18px; right: 18px; top: 4px; height: 40%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); pointer-events: none; transition: opacity 0.2s ease; }
.cta-sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-sparks i { position: absolute; width: 10px; height: 10px; background: #fffbe0; opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cta-sparks i:nth-child(1) { left: 13%; top: 20%; }
.cta-sparks i:nth-child(2) { left: 34%; bottom: 12%; width: 7px; height: 7px; }
.cta-sparks i:nth-child(3) { right: 26%; top: 14%; }
.cta-sparks i:nth-child(4) { right: 7%; bottom: 18%; width: 8px; height: 8px; }
:root[data-theme="dark"] .cta-num { border-color: #201d2a; }
@media (max-width: 360px) { .hero .ph-cta.cta-go { font-size: 21px; } .cta-play { width: 36px; height: 36px; } .cta-go > span { gap: 9px; } }
@media (prefers-reduced-motion: no-preference) {
  .cta-play::after { animation: cta-spin 7s linear infinite; }
  .cta-go:not(:hover) .cta-play { animation: bfx-play 2.8s ease-in-out infinite; }
  .cta-go:hover .cta-play { transform: scale(1.14) rotate(-8deg); }
  .cta-num { animation: cta-pop 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s infinite; }
  .cta-sparks i { animation: cta-twinkle 2.6s ease-in-out infinite; }
  .cta-sparks i:nth-child(2) { animation-delay: 0.7s; }
  .cta-sparks i:nth-child(3) { animation-delay: 1.3s; }
  .cta-sparks i:nth-child(4) { animation-delay: 1.9s; }
  .cta-go:hover .cta-gloss { opacity: 0.75; }
  :root:not([data-theme="dark"]) .hero .ph-cta.cta-go:not(:hover):not(:active) { animation: cta-ring 2.4s ease-out infinite; }
}
@keyframes cta-spin { to { transform: rotate(360deg); } }
@keyframes cta-pop { 0%, 80%, 100% { transform: none; } 86% { transform: scale(1.25) rotate(-6deg); } 92% { transform: scale(0.94); } }
@keyframes cta-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes cta-ring {
  0% { box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55), 0 0 0 0 rgba(150, 242, 85, 0.75); }
  70%, 100% { box-shadow: 0 6px 0 #1f9a0c, 0 18px 26px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55), 0 0 0 16px rgba(150, 242, 85, 0); }
}

/* podsumowanie: podtytuł z trafnością pod nagłówkiem (sessionVerdict w views.js) */
.sx-sub { position: relative; margin: -4px 16px 10px; text-align: center; font: 700 14px/1.35 Nunito, sans-serif; color: #2f6b37; animation: hf-up 0.5s ease-out 0.35s backwards; }
.sx-sub b { color: #0c4a1c; font-family: var(--display); font-size: 16px; }
:root[data-theme="dark"] .sx-sub { color: #9fc7a4; } :root[data-theme="dark"] .sx-sub b { color: #e3f5e1; }

/* Gramatyka: zablokowane moduły — spokojna podpowiedź z paskiem postępu zamiast czerwonego „Wymaga…”, reszta zwinięta pod przyciskiem */
.gr-req-hint { display: inline-flex; align-items: center; gap: 5px; color: #4a7a50; font-weight: 700; }
.gr-req-ic { width: 15px; height: 15px; object-fit: contain; }
.gr-req-bar { display: block; width: 100%; max-width: 200px; height: 7px; margin-top: 5px; border-radius: 99px; background: rgba(35, 168, 15, 0.14); overflow: hidden; }
.gr-req-bar em { display: block; width: var(--w); min-width: 6px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd23a, #f2b400); }
.gr-more { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 8px; padding: 14px 16px; border-radius: 22px; border: 2.5px dashed #8fd97a; background: rgba(255, 255, 255, 0.7); color: #0c4a1c; text-align: left; cursor: pointer; font: inherit; transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease; }
.gr-more:hover { background: #fff; transform: translateY(-2px); }
.gr-more:active { transform: translateY(2px); }
.gr-more-ic { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.gr-more span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gr-more b { font: 800 16px var(--display); }
.gr-more small { font: 600 12.5px Nunito, sans-serif; color: #4a7a50; }
.gr-more-arr { font: 800 24px/1 var(--display); color: #2fbf12; font-style: normal; transform: rotate(90deg); transition: transform 0.25s ease; }
.gr-more-arr.up { transform: rotate(-90deg); }
:root[data-theme="dark"] .gr-req-hint, :root[data-theme="dark"] .gr-more small { color: #9fc7a4; }
:root[data-theme="dark"] .gr-more { background: rgba(255, 255, 255, 0.05); border-color: #3c6a42; color: #e3f5e1; }

/* AI: strzałka w wierszu „Zadania od AI” (nagłówek jak na innych zakładkach) */
.ph-go { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ph-task:hover .ph-go { transform: translateX(4px); }
/* pasek statusu: „umiem” jako okrągła ikona z laurem (jak wiersz „Wyuczone”) */
.hero .statusbar .pill-stat .stat-img.stat-rvc { border-radius: 50%; border: 2px solid #fff; background: #fff; box-shadow: 0 2px 3px rgba(20, 90, 10, 0.3); filter: none; }

/* AI: papuga jest już w nagłówku — w powitaniu tylko tekst i podpowiedzi */
.ai-hello > img { display: none; }

/* ---------- panel dewelopera: 4 zakładki, edytor słówek (dev-edit.js), grafiki aplikacji (dev-art.js) ---------- */
.segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-tabs .seg { white-space: nowrap; padding: 10px 4px; }
@media (max-width: 420px) { .dv-tabs .seg { font-size: 12.5px; } .dv-tabs .seg span { display: block; font-size: 18px; } }
.ed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ed-bulk { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ed-list { padding: 4px 12px; }
.ed-row { border-bottom: 1px solid rgba(35, 168, 15, 0.14); }
.ed-row:last-child { border-bottom: 0; }
.ed-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ed-img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; }
.ed-img.empty { display: grid; place-items: center; background: #eef8e8; color: #4a8a4f; font: 800 15px var(--display); }
.ed-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-t b { font: 700 17px var(--display); color: #0c4a1c; }
.ed-t small { font-size: 13px; color: #4a7a50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ed-tag { font-style: normal; font: 800 11px Nunito, sans-serif; padding: 2px 8px; border-radius: 99px; background: #fff1d6; color: #8a5a00; }
.ed-tag.media { background: #eef1f7; color: #5b6580; }
.ed-tag.soft { background: #eef8e8; color: #3f7a46; }
.ed-tag.fixed { background: #dff7e3; color: #17751a; }
.ed-arr { font: 800 22px/1 var(--display); color: #2fbf12; font-style: normal; transition: transform 0.2s ease; }
.ed-row.open .ed-arr { transform: rotate(90deg); }
.ed-row > .dv-review { margin: 0 0 8px 56px; }
.ed-form { margin: 0 0 14px; padding: 12px; border-radius: 16px; background: #f4fbef; border: 1.5px solid #cfeec3; }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ed-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-field.wide { grid-column: 1 / -1; }
.ed-field > span { font: 800 12px Nunito, sans-serif; color: #3f7a46; }
.ed-field em { font-style: normal; color: #b07800; }
.ed-in { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 12px; border: 1.5px solid #cfe6c6; background: #fff; font: 600 15px Nunito, sans-serif; color: #0c4a1c; resize: vertical; }
.ed-in:focus { outline: none; border-color: #3bdc1e; box-shadow: 0 0 0 3px rgba(59, 220, 30, 0.2); }
.ed-listen, .ed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ed-listen .dv-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ed-grid { grid-template-columns: minmax(0, 1fr); } }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.art-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.9); border: 2px solid #cfeec3; box-shadow: 0 4px 0 #b5dca5; min-width: 0; }
.art-card.has-new { border-color: #3bdc1e; box-shadow: 0 4px 0 #23a80f; }
.art-imgs { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 96px; border-radius: 14px; background: repeating-conic-gradient(#eef6ea 0 25%, #ffffff 0 50%) 0 0 / 16px 16px; padding: 6px; }
.art-img { width: 84px; height: 84px; object-fit: contain; }
.art-card.has-new .art-img { width: 64px; height: 64px; }
.art-img.new { outline: 2px dashed #3bdc1e; outline-offset: 2px; border-radius: 8px; }
.art-img.empty { display: grid; place-items: center; font: 700 11px Nunito, sans-serif; color: #8aa58c; }
.art-to { font-style: normal; font-weight: 800; color: #2fbf12; }
.art-name { font: 700 15px var(--display); color: #0c4a1c; overflow-wrap: anywhere; }
.art-file { font-size: 11px; color: #6f9a74; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-err { font-style: normal; font-size: 12px; color: #c92a2a; }
.art-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.art-acts .dv-btn { height: 34px; padding: 0 10px; font-size: 13px; }
.art-hint { font-size: 13px; }
.dv-btn.on { border-color: #3bdc1e; background: #eef8e8; }
:root[data-theme="dark"] .ed-t b, :root[data-theme="dark"] .art-name { color: #e3f5e1; }
:root[data-theme="dark"] .ed-t small, :root[data-theme="dark"] .ed-field > span { color: #9fc7a4; }
:root[data-theme="dark"] .ed-form, :root[data-theme="dark"] .art-card { background: #201d2a; border-color: #2f4a33; box-shadow: none; }
:root[data-theme="dark"] .ed-in { background: #16141f; border-color: #2f4a33; color: #e3f5e1; }
:root[data-theme="dark"] .art-imgs { background: repeating-conic-gradient(#24222f 0 25%, #1b1926 0 50%) 0 0 / 16px 16px; }
/* panel: ➕ nowe słówko, ikona przy słówku w edytorze */
.ed-add-open { margin: 0 0 12px; border-style: solid; border-color: #3bdc1e; }
.ed-add { margin: 0 0 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ed-add-head { display: flex; align-items: center; justify-content: space-between; }
.ed-add-head b { font: 800 18px var(--display); color: #0c4a1c; }
.ed-add .ed-actions { margin-top: 0; }
.ed-log { margin: 0; padding: 10px 12px; border-radius: 12px; background: #f4fbef; font: 600 13px/1.5 Nunito, sans-serif; color: #2f6b37; }
.ed-media { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #cfe6c6; flex-wrap: wrap; }
.ed-media .ed-actions { margin-top: 0; }
.ed-img.big { width: 72px; height: 72px; border-radius: 16px; }
.ed-img.big.empty { font: 700 11px Nunito, sans-serif; }
.ed-tag.new { background: #2fbf12; color: #fff; }
:root[data-theme="dark"] .ed-add-head b { color: #e3f5e1; }
:root[data-theme="dark"] .ed-log { background: #16141f; color: #9fc7a4; }

/* ---------- podpowiedzi słówek w zadaniach (wordtip.js): najedź / dotknij słowa ---------- */
.wt { cursor: help; border-radius: 6px; transition: background 0.15s ease; text-decoration: none; }
.wt:hover, .wt.on, .wt:focus-visible { background: rgba(59, 220, 30, 0.16); outline: none; }
.wt-new { text-decoration: underline dotted #3bdc1e; text-decoration-thickness: 2.5px; text-underline-offset: 5px; }
.wt-out { text-decoration: underline dotted #f2b400; text-decoration-thickness: 2.5px; text-underline-offset: 5px; }
.wt-pop { position: absolute; z-index: 10050; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; background: #fff; border: 2.5px solid #3bdc1e; box-shadow: 0 5px 0 #23a80f, 0 18px 30px -12px rgba(20, 90, 10, 0.45); font: 600 14px/1.4 Nunito, sans-serif; color: #0c4a1c; text-align: left; animation: wt-in 0.18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.wt-pop[hidden] { display: none; }
.wt-pop::before { content: ''; position: absolute; top: -9px; left: calc(var(--ax, 50%) - 8px); width: 14px; height: 14px; background: #fff; border-left: 2.5px solid #3bdc1e; border-top: 2.5px solid #3bdc1e; transform: rotate(45deg); }
.wt-pop.up::before { top: auto; bottom: -9px; transform: rotate(225deg); }
@keyframes wt-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
.wt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-head b { font: 800 19px var(--display); color: #0c4a1c; }
.wt-pron { font: 700 13px Nunito, sans-serif; color: #2fbf12; }
.wt-say { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #eef8e8; color: #17751a; cursor: pointer; }
.wt-say svg { width: 18px; height: 18px; }
.wt-form { margin-top: 2px; font: 700 12px Nunito, sans-serif; color: #8a5a00; }
.wt-pl { margin-top: 4px; font: 800 16px Nunito, sans-serif; color: #17751a; }
.wt-mean { margin: 6px 0 0; font-size: 13px; color: #3f7a46; }
.wt-mean.bad { color: #c92a2a; }
.wt-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wt-st { font: 800 13px Nunito, sans-serif; color: #17751a; }
.wt-st.soft { font-weight: 700; color: #8a5a00; }
.wt-btn { padding: 8px 14px; border: 0; border-radius: 999px; background: #eef8e8; color: #17751a; font: 800 14px Nunito, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #b5dca5; }
.wt-btn.add { color: #fff; text-shadow: 0 1px 0 #1c7a0b; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); box-shadow: 0 3px 0 #1f9a0c; }
.wt-btn:active { transform: translateY(2px); box-shadow: none; }
.wt-btn:disabled { opacity: 0.6; }
:root[data-theme="dark"] .wt-pop, :root[data-theme="dark"] .wt-pop::before { background: #201d2a; }
:root[data-theme="dark"] .wt-pop, :root[data-theme="dark"] .wt-head b { color: #e3f5e1; }
:root[data-theme="dark"] .wt-pl { color: #8fe36a; } :root[data-theme="dark"] .wt-mean { color: #9fc7a4; }

/* ---------- konto: ekran powitalny, rejestracja, logowanie (account.js) ---------- */
.acc-screen { position: relative; max-width: 440px; margin: 0 auto; padding: 18px 4px 40px; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.acc-screen.welcome { min-height: calc(100vh - 60px); justify-content: center; }
.acc-back { position: absolute; left: 0; top: 10px; }
.acc-hero { display: flex; justify-content: center; margin: 8px 0 4px; }
.acc-parrot { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(20, 90, 10, 0.3)); animation: fx-float 3.2s ease-in-out infinite; }
.acc-parrot.big { width: min(240px, 62vw); height: auto; }
.acc-title { margin: 6px 0 6px; font: 800 36px/1.1 var(--display); color: #0c4a1c; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.9); }
.acc-screen.welcome .acc-title { font-size: 46px; }
.acc-sub { margin: 0 8px 20px; font: 600 15.5px/1.45 Nunito, sans-serif; color: #3f7a46; }
.acc-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.acc-field { display: flex; flex-direction: column; gap: 6px; }
.acc-field > span:first-child { font: 800 13px Nunito, sans-serif; color: #2f6b37; }
.acc-field small { font: 600 12px Nunito, sans-serif; color: #6f9a74; }
.acc-field input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 16px; border: 2.5px solid #cfe6c6; background: #fff; font: 700 16px Nunito, sans-serif; color: #0c4a1c; box-shadow: 0 3px 0 #e2f2da; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.acc-field input:focus { outline: none; border-color: #3bdc1e; box-shadow: 0 3px 0 #b5ec9f, 0 0 0 4px rgba(59, 220, 30, 0.18); }
.acc-pw { position: relative; display: block; }
.acc-pw input { padding-right: 52px; }
.acc-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #6f9a74; cursor: pointer; }
.acc-eye svg { width: 22px; height: 22px; }
.acc-eye.on { color: #17751a; background: #eef8e8; }
.acc-err { margin: 0; padding: 10px 14px; border-radius: 14px; background: #ffe9e6; color: #b3261e; font: 700 14px/1.35 Nunito, sans-serif; }
.acc-err.shake { animation: acc-shake 0.4s ease; }
@keyframes acc-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.acc-go { position: relative; overflow: hidden; height: 58px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 800 20px var(--display); text-shadow: 0 2px 0 #1c7a0b; background: linear-gradient(180deg, #96f255 0%, #36c817 55%, #2fbf12 100%); box-shadow: 0 6px 0 #1f9a0c, 0 16px 22px -10px rgba(20, 110, 10, 0.6), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.15s ease; margin-top: 4px; }
.acc-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 #1f9a0c, 0 20px 26px -10px rgba(20, 110, 10, 0.65), inset 0 2.5px 0 rgba(255, 255, 255, 0.55); }
.acc-go:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #1f9a0c; }
.acc-go:disabled { opacity: 0.7; cursor: default; }
.acc-go.small { height: 46px; padding: 0 22px; font-size: 17px; margin-top: 0; }
.acc-ghost { height: 54px; margin-top: 14px; border: 2.5px solid #3bdc1e; border-radius: 999px; background: #fff; color: #17751a; font: 800 18px var(--display); cursor: pointer; box-shadow: 0 5px 0 #b5ec9f; transition: transform 0.15s ease; }
.acc-ghost:active { transform: translateY(4px); box-shadow: 0 1px 0 #b5ec9f; }
.acc-link { margin-top: 14px; border: 0; background: none; color: #2f6b37; font: 800 15px Nunito, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
.acc-link.inline { margin: 0; padding: 4px; color: #17751a; }
.acc-switch { margin: 16px 0 0; font: 600 15px Nunito, sans-serif; color: #3f7a46; }
.acc-note { margin: 20px 4px 0; font: 600 12.5px/1.45 Nunito, sans-serif; color: #6f9a74; }
/* karta „Konto” w profilu */
.acc-card { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.acc-row { display: flex; align-items: center; gap: 12px; }
.acc-art { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.acc-av { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: var(--av, #e3f6d8); border: 3px solid #fff; box-shadow: 0 3px 0 #b5dca5; overflow: hidden; display: grid; place-items: center; }
.acc-av img { width: 100%; height: 100%; object-fit: cover; }
.acc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.acc-who b { font: 800 19px var(--display); color: #0c4a1c; }
.acc-who small { font: 600 13.5px/1.35 Nunito, sans-serif; color: #4a7a50; overflow-wrap: anywhere; }
.acc-sync { margin: 0; font: 700 13px Nunito, sans-serif; }
.acc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-btns .acc-link { margin: 0; }
.acc-form.inset { padding: 12px; border-radius: 16px; background: #f4fbef; border: 1.5px solid #cfeec3; }
.acc-form.inset.danger { background: #fff4f2; border-color: #ffd0c9; }
.acc-warn { margin: 0; font: 700 13px/1.4 Nunito, sans-serif; color: #b3261e; }
.acc-danger { height: 46px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ff7a6b, #e5484d); color: #fff; font: 800 16px var(--display); box-shadow: 0 4px 0 #a52a3c; cursor: pointer; }
/* panel: zakładka „Konta” */
.segmented.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .segmented.five .seg { font-size: 11.5px; padding: 8px 2px; } .segmented.five .seg span { display: block; font-size: 18px; } }
.accu-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(35, 168, 15, 0.14); }
.accu-row:last-child { border-bottom: 0; }
.accu-av { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #96f255, #2fbf12); color: #fff; font: 800 20px var(--display); text-shadow: 0 1px 0 #1c7a0b; }
.accu-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accu-t b { font: 800 17px var(--display); color: #0c4a1c; }
.accu-t small { font: 600 12.5px/1.35 Nunito, sans-serif; color: #4a7a50; overflow-wrap: anywhere; }
.accu-temp { margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: #fff6d6; color: #6b4a00; font: 700 13px/1.4 Nunito, sans-serif; }
.accu-temp b { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: 0.04em; user-select: all; }
.accu-acts { display: flex; flex-direction: column; gap: 6px; }
:root[data-theme="dark"] .acc-title, :root[data-theme="dark"] .acc-who b, :root[data-theme="dark"] .accu-t b { color: #e3f5e1; text-shadow: none; }
:root[data-theme="dark"] .acc-sub, :root[data-theme="dark"] .acc-switch, :root[data-theme="dark"] .acc-who small, :root[data-theme="dark"] .accu-t small { color: #9fc7a4; }
:root[data-theme="dark"] .acc-field input, :root[data-theme="dark"] .acc-ghost { background: #16141f; border-color: #2f4a33; color: #e3f5e1; box-shadow: none; }
:root[data-theme="dark"] .acc-form.inset { background: #16141f; border-color: #2f4a33; }
/* konto: link do polityki prywatności na ekranie powitalnym, wiersz zgody na AI w karcie „Konto” */
.acc-privacy { margin-top: 6px; font: 700 13px Nunito, sans-serif; color: #557259; text-align: center; }
.acc-ai { margin: 0; font: 600 13px/1.5 Nunito, sans-serif; color: #4a7a50; }
.acc-ai a, .acc-note a { color: #17751a; font-weight: 800; }
:root[data-theme="dark"] .acc-privacy, :root[data-theme="dark"] .acc-ai { color: #9fc7a4; }