/* ============================================================
   ZMatematykuj — design system
   Oryginalny charakter: indigo + bursztyn, zeszyt w kratkę,
   przyciski „wciskane" jak klocki. Struktura flow: Duolingo-style.
   ============================================================ */

/* ===== CZCIONKI ZASTĘPCZE O TYCH SAMYCH WYMIARACH =====
   Czcionki Google dochodzą chwilę po tekście. Zanim dojdą, tekst rysuje się czcionką systemową
   (Arial / Liberation Sans / Roboto), rozciągniętą tu do szerokości i wysokości docelowej czcionki —
   osobno dla zwykłej i pogrubionej, bo grube Nunito czy Space Grotesk mają inne proporcje.
   Dzięki temu podmiana czcionki nie zmienia łamania linii i strona nie przeskakuje.
   size-adjust zmierzone na polskim tekście (z ogonkami), ascent/descent z metryk czcionek. */
@font-face { font-family: 'Inter Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Roboto'), local('Helvetica');
  size-adjust: 105.0%; ascent-override: 92.26%; descent-override: 23.00%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Helvetica Bold');
  size-adjust: 102.2%; ascent-override: 94.79%; descent-override: 23.63%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Roboto'), local('Helvetica');
  size-adjust: 104.0%; ascent-override: 94.62%; descent-override: 28.08%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Helvetica Bold');
  size-adjust: 99.4%; ascent-override: 98.99%; descent-override: 29.38%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Roboto'), local('Helvetica');
  size-adjust: 101.4%; ascent-override: 99.70%; descent-override: 34.81%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-weight: 600 650; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Helvetica Bold');
  size-adjust: 96.0%; ascent-override: 105.31%; descent-override: 36.77%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-weight: 700 750; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Helvetica Bold');
  size-adjust: 97.9%; ascent-override: 103.27%; descent-override: 36.06%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-weight: 800 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Helvetica Bold');
  size-adjust: 102.4%; ascent-override: 98.73%; descent-override: 34.47%; line-gap-override: 0%; }
:root {
  --primary: #4338CA;
  --primary-ink: #3730A3;
  --primary-deep: #312E81;
  --primary-tint: #EEF0FC;
  --accent: #D97706;
  --accent-bright: #F59E0B;
  --accent-tint: #FCF3E3;
  --success: #15803D;
  --success-tint: #E9F7EE;
  --danger: #DC2626;
  --danger-tint: #FDECEC;
  --bg: #FAF9F5;
  --bg-elevated: #FFFFFF;
  --bg-soft: #F3F1EA;
  --text: #191925;
  --text-secondary: #54545F;
  --text-muted: #9B9BA6;
  --border: #E6E4DC;
  --border-strong: #D4D2C8;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(25,25,37,.05), 0 8px 24px -8px rgba(25,25,37,.1);
  --shadow-lift: 0 2px 4px rgba(25,25,37,.06), 0 20px 44px -16px rgba(67,56,202,.22);
}
[data-theme="dark"] {
  --primary: #8B85F0;
  --primary-ink: #A5A0F5;
  --primary-deep: #232454;
  --primary-tint: rgba(139,133,240,.1);
  --accent: #FBBF24;
  --accent-bright: #FCD34D;
  --accent-tint: rgba(251,191,36,.1);
  --bg: #0E0F1A;
  --bg-elevated: #161828;
  --bg-soft: #11121F;
  --text: #F2F1EC;
  --text-secondary: #A7A8B8;
  --text-muted: #64667A;
  --border: #262941;
  --border-strong: #363A55;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.4);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 20px 44px -16px rgba(0,0,0,.55);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: -0.015em; }
button { font-family: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== SCROLL REVEAL ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: 68px;
  background: rgba(250,249,245,.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}
[data-theme="dark"] .navbar { background: rgba(14,15,26,.88); }
.nav-container {
  max-width: 1200px; margin: 0 auto; height: 100%;
  padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.45rem; font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: .55rem; text-decoration: none;
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 var(--accent-bright);
  flex-shrink: 0;
}
[data-theme="dark"] .logo-mark { box-shadow: 3px 3px 0 rgba(251,191,36,.5); color: #191925; }
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links > a {
  text-decoration: none; color: var(--text-secondary); font-weight: 500;
  font-size: .9rem; padding: .5rem .95rem; border-radius: 9px; transition: all .2s;
}
.nav-links > a:hover { color: var(--primary); background: var(--primary-tint); }
.nav-cta {
  background: var(--primary) !important; color: #fff !important;
  padding: .58rem 1.2rem !important; border-radius: 10px !important; font-weight: 600 !important;
  box-shadow: 0 4px 0 var(--primary-ink);
  transition: all .15s !important;
}
/* wciskanie jak .btn-primary (hero): najechanie −2px, kliknięcie do końca */
.nav-cta:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-ink); background: var(--primary) !important; }
.nav-cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--primary-ink); }
[data-theme="dark"] .nav-cta { color: #191925 !important; box-shadow: 0 4px 0 rgba(0,0,0,.45); }
[data-theme="dark"] .nav-cta:hover { box-shadow: 0 2px 0 rgba(0,0,0,.45); }
[data-theme="dark"] .nav-cta:active { box-shadow: 0 0 0 rgba(0,0,0,.45); }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin-left: .5rem; transition: all .2s;
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.hamburger {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  background: none; border: 1px solid var(--border); font-size: 1.15rem;
  color: var(--text); cursor: pointer; align-items: center; justify-content: center;
}

/* znak nieskończoności (energia Premium) — ZM_INF_HTML w app.js */
.zm-inf { display: inline-block; width: 1.1em; height: .55em; vertical-align: .02em; overflow: visible; }

/* ===== PRZYCISKI — „klocki" z wciskanym spodem ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.9rem;
  border-radius: 12px; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 600; font-size: .98rem;
  text-decoration: none; border: none; cursor: pointer; transition: all .15s;
  user-select: none;
}
.btn:active { transform: translateY(3px); }
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 0 var(--primary-ink);
}
.btn-primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-ink); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--primary-ink); }
[data-theme="dark"] .btn-primary { color: #191925; box-shadow: 0 4px 0 rgba(0,0,0,.45); }
[data-theme="dark"] .btn-primary:hover { box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.btn-accent {
  background: var(--accent-bright); color: #422006;
  box-shadow: 0 4px 0 #B45309;
}
.btn-accent:hover { transform: translateY(2px); box-shadow: 0 2px 0 #B45309; }
.btn-accent:active { transform: translateY(4px); box-shadow: 0 0 0 #B45309; }
.btn-secondary {
  background: var(--bg-elevated); color: var(--text); border: 1.5px solid var(--border-strong);
  box-shadow: 0 3px 0 var(--border-strong);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border-strong); }
.btn-ghost {
  background: transparent; color: var(--text-muted); border: 1.5px solid transparent;
  box-shadow: none;
}
.btn-ghost:hover { color: var(--primary); background: var(--primary-tint); }
/* Duolingo-style: wielki, wersalikami */
.btn-duo {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  border-radius: 14px;
}
.btn-xl { padding: 1.1rem 2.6rem; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn[hidden] { display: none; }
.btn:disabled, .btn.disabled {
  background: var(--bg-soft); color: var(--text-muted);
  box-shadow: 0 4px 0 var(--border); cursor: not-allowed; border: none;
  transform: none !important;
}
[data-theme="dark"] .btn:disabled { box-shadow: 0 4px 0 rgba(255,255,255,.06); }

/* ===== PASEK POSTĘPU ===== */
.pbar {
  height: 14px; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--border); overflow: hidden; position: relative;
}
.pbar-fill {
  height: 100%; border-radius: 10px 0 0 10px;
  background: repeating-linear-gradient(-45deg, var(--primary), var(--primary) 8px, var(--primary-ink) 8px, var(--primary-ink) 16px);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.pbar-fill.full { border-radius: 10px; }
.pbar-fill::after {
  content: ''; position: absolute; top: 2px; left: 6px; right: 6px; height: 3px;
  border-radius: 3px; background: rgba(255,255,255,.35);
}

/* ===== FOOTER ===== */
footer { background: var(--bg-elevated); border-top: 1px solid var(--border); padding: 3.5rem 1.5rem 0; overflow: hidden; }
.footer-grid {
  max-width: 1200px; margin: 0 auto 2.5rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
}
footer h4 { font-size: .8rem; margin-bottom: 1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
footer a { display: block; color: var(--text-secondary); text-decoration: none; margin-bottom: .55rem; font-size: .9rem; transition: color .2s; }
footer a:hover { color: var(--primary); }
footer .logo { margin-bottom: 1rem; font-size: 1.35rem; width: fit-content; }
footer .footer-about { color: var(--text-secondary); font-size: .9rem; margin-top: .5rem; max-width: 300px; }
.footer-wordmark {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 9rem); line-height: .9; text-align: center;
  color: transparent; -webkit-text-stroke: 1.5px var(--border-strong);
  user-select: none; pointer-events: none; white-space: nowrap;
  margin-top: 1rem; transform: translateY(18%);
}
footer .copyright {
  text-align: center; color: var(--text-muted); font-size: .83rem;
  padding: 1.5rem 0; border-top: 1px solid var(--border);
  max-width: 1200px; margin: 0 auto; position: relative; background: var(--bg-elevated);
}

/* ============================================================
   LEARN — ekran lekcji (ABCD 2×2, pasek postępu, serca)
   ============================================================ */
.lesson { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.lesson-topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.lesson-topbar.scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 16px -10px rgba(25,25,37,.18); }
[data-theme="dark"] .lesson-topbar.scrolled { box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); }
.lesson-top {
  max-width: 880px; width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 1.1rem; padding: .85rem 1.5rem;
}
.lesson-top .pbar { height: 12px; }
.lesson-exit {
  width: 38px; height: 38px; border-radius: 10px; border: none; background: none;
  color: var(--text-muted); font-size: 1.08rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.lesson-exit:hover { color: var(--danger); background: var(--danger-tint); }
.lesson-top .pbar { flex: 1; }
.lesson-hearts {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .95rem; color: var(--danger);
}
.lesson-hearts i { font-size: 1.02rem; }
@keyframes heartShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.lesson-body {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto;
  padding: 1.4rem 1.5rem 1.8rem; display: flex; flex-direction: column;
}
/* tutor „mówiący" zadanie — nad ramką pytania */
.q-speaker { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; padding-left: .35rem; }
.tutor {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--primary); display: block;
  transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--accent-bright);
}
[data-theme="dark"] .tutor { background: var(--primary-deep); border: 1.5px solid var(--primary); }
.q-speaker-name {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .95rem; color: var(--text-secondary);
}
.q-speaker-name span { color: var(--primary); }
.lesson-qrow { display: flex; align-items: flex-start; gap: .95rem; margin-bottom: 1.5rem; }
.lesson-bubble {
  position: relative;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong);
  flex: 1; min-width: 0;
  border-radius: 4px 17px 17px 17px; box-shadow: var(--shadow-card);
}
/* ogonek dymka — wskazuje na tutora */
.lesson-bubble::before {
  content: ''; position: absolute; top: -8px; left: 22px;
  width: 14px; height: 14px; background: var(--bg-elevated);
  border-left: 1.5px solid var(--border-strong); border-top: 1.5px solid var(--border-strong);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.ans-card {
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong);
  border-radius: 13px; padding: .9rem 1.05rem; min-height: 60px; cursor: pointer;
  display: flex; align-items: center; gap: .8rem; color: var(--text);
  box-shadow: 0 3px 0 var(--border-strong);
  transition: all .15s; text-align: left; width: 100%;
}
.ans-card:hover:not(:disabled) { border-color: var(--primary); }
.ans-card .ans-key {
  width: 29px; height: 29px; border-radius: 8px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  transition: all .15s;
}
.ans-card.selected { border-color: var(--primary); background: var(--primary-tint); box-shadow: 0 3px 0 var(--primary); }
.ans-card.selected .ans-key { background: var(--primary); border-color: var(--primary); color: #fff; }
.ans-card.wrong { animation: heartShake .4s ease; }
.ans-card:disabled { cursor: default; }
.ans-card.dimmed { opacity: .55; }
/* ===== GÓRNY PASEK: czego się uczymy + postęp ===== */
.lesson-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.lesson-top .lesson-progress .pbar { flex: none; }
.lesson-context {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .75rem; font-weight: 600;
  color: var(--text-muted); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lesson-context b { color: var(--text-secondary); font-weight: 700; }
.lesson-context .lc-sep { margin: 0 .4rem; }
@media (max-width: 560px) {
  .lesson-context .lc-topic, .lesson-context .lc-sep { display: none; }
}

/* ===== EKRAN KOŃCOWY: karta wyniku (liczby | do poprawy) ===== */
/* podsumowanie z błędami (rozdział i temat) — jasnoindygo, spokojniejsze */
.end-trophy.is-summary,
.end-trophy.is-topic { background: var(--primary-tint); color: var(--primary); border: 2px solid var(--primary); box-shadow: 6px 6px 0 var(--primary); }
/* temat bez błędów — kolory jak „Rozdział ukończony!" (bursztyn + indygo cień) i delikatna złota poświata */
.end-trophy.is-crown-gold {
  background: var(--accent-bright); color: #422006;
  box-shadow: 6px 6px 0 var(--primary), 0 0 0 8px rgba(245,158,11,.16), 0 0 40px rgba(245,158,11,.4);
}
/* dwa kwadraty z wynikiem pod tytułem */
.end-tiles { display: flex; gap: .8rem; justify-content: center; margin-bottom: 1.4rem; }
.end-tile {
  width: 132px; padding: 1rem .6rem .85rem; border-radius: 16px; text-align: center; border: 2px solid;
}
.end-tile b { display: block; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 2.6rem; line-height: 1; }
.end-tile span { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.end-left { font-size: .84rem; color: var(--text-muted); font-weight: 600; margin: -.5rem 0 1.2rem; }
.end-left[hidden] { display: none; }
.end-fix { margin-bottom: 1.3rem; }
.end-fix[hidden] { display: none; }
.end-fix-h { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: .55rem; }
.end-fix-h small { font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 500; color: var(--text-muted); margin-left: .3rem; }
.end-fix .ec-fix { justify-content: center; }
.ec-fix { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-height: 32px; }
.ec-chip {
  min-width: 34px; height: 32px; padding: 0 .55rem; border-radius: 9px; cursor: pointer;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .85rem;
  border: 1.5px solid var(--danger); background: var(--bg-elevated); transition: transform .12s, box-shadow .12s;
}
.ec-chip.seen { border-color: var(--accent-bright); color: var(--accent); box-shadow: 0 3px 0 var(--accent-bright); }
.ec-chip:hover { transform: translateY(1px); }
.ec-chip:active { transform: translateY(3px); box-shadow: none; }
.ec-more { font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.ec-next { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem 1rem; background: var(--primary-tint); border-radius: 14px; margin-bottom: 1.5rem; text-align: left; }
.ec-next[hidden] { display: none; }
.ec-next-ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--accent-bright); }
.ec-next.is-topic .ec-next-ic { color: var(--accent-bright); }
[data-theme="dark"] .ec-next-ic { color: #191925; }
.ec-next small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.ec-next b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .92rem; }
.ec-next-n { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.end-actions { display: flex; flex-direction: column; gap: .6rem; width: 100%; }

/* dolny pasek lekcji */
.lesson-foot {
  border-top: 1.5px solid var(--border); background: var(--bg-elevated);
  padding: 1rem 1.5rem;
}
/* przyciski na ekranie lekcji — mniejsze niż na stronie głównej */
.lesson-foot .btn, .feedback .btn { padding: .85rem 1.8rem; font-size: .95rem; border-radius: 13px; }
.lesson-foot-inner {
  max-width: 880px; margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem;
}
/* pasek informacji zwrotnej — zastępuje stopkę, stoi w układzie pod rozwiązaniem */
.feedback {
  display: none;
  border-top: 2px solid var(--border);
  background: var(--bg-elevated);
  padding: 1.1rem 1.5rem;
}
.feedback.show { display: block; animation: fbSlideUp .3s cubic-bezier(.4,0,.2,1); }
@keyframes fbSlideUp { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.feedback.fb-info { background: var(--accent-tint); border-top-color: var(--accent-bright); }
.feedback .fb-title-extra { font-weight: 600; }
/* telefon/tablet: dymek ściągi chowa się, gdy widać pasek z wynikiem */
.feedback-inner {
  max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 1rem;
}
.feedback .fb-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  background: var(--bg-elevated); box-shadow: var(--shadow-card);
}
.feedback .fb-body { flex: 1; }
.feedback .fb-title { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: 1.08rem; }
.feedback .fb-expl { font-size: .87rem; color: var(--text-secondary); margin-top: .15rem; line-height: 1.5; }
.feedback .fb-expl b { color: var(--text); }
.feedback .fb-expl:empty { display: none; }

/* ===== KARTA ROZWIĄZANIA — w stylu kafelków strony („klocek" z wciskanym spodem) ===== */
.solution {
  margin-top: 1.5rem; margin-bottom: 1.4rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong); border-radius: 16px;
  box-shadow: 0 3px 0 var(--border-strong);
  overflow: hidden;
  animation: fadeUp .45s ease both;
  scroll-margin-top: 90px; /* miejsce na przyklejony górny pasek */
}
.solution[hidden] { display: none; }
/* nagłówek: mini-tutor + tytuł + licznik kroków */
.sol-head {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1.15rem;
  background: var(--primary-tint); border-bottom: 1.5px solid var(--border);
}
.sol-avatar {
  width: 31px; height: 31px; border-radius: 9px; flex-shrink: 0;
  background: var(--primary); color: #fff; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--accent-bright);
}
[data-theme="dark"] .sol-avatar { color: #191925; }
.sol-title { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .96rem; color: var(--primary); }
.sol-inner { padding: 1.05rem 1.15rem 1.2rem; }
/* kroki — oddzielone przerywaną linią, numer jak litera odpowiedzi */
.sol-steps { list-style: none; position: relative; }
.sol-step {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px dashed var(--border-strong);
}
.sol-step:first-child { padding-top: .1rem; }
.sol-num {
  width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0;
  border: 1.5px solid var(--primary); background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .76rem;
}
.sol-body { flex: 1; min-width: 0; }
.sol-t { line-height: 1.45; padding-top: .15rem; }
.sol-m {
  font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 500; font-size: 1.03rem;   /* opis kroku: zwykła grubość (nagłówek .sol-t jest grubszy) */
  color: var(--text); line-height: 1.55; overflow-wrap: anywhere;
}
/* ekran końcowy lekcji */
.lesson-end {
  flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.5rem; max-width: 600px; margin: 0 auto; width: 100%;
}
.lesson-end.show { display: flex; animation: fadeUp .5s ease; }
.end-trophy {
  width: 96px; height: 96px; border-radius: 28px; margin-bottom: 1.45rem;
  background: var(--accent-bright); color: #422006; font-size: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-5deg); box-shadow: 6px 6px 0 var(--primary);
  animation: trophyPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes trophyPop { from { transform: scale(.4) rotate(-16deg); opacity: 0; } to { transform: scale(1) rotate(-5deg); opacity: 1; } }
.lesson-end h2 { font-size: 1.85rem; font-weight: 700; }
.lesson-end p { color: var(--text-secondary); margin-bottom: 1.8rem; }
.lesson-end p[hidden] { display: none; }
.lesson-end h2 { margin-bottom: 1.3rem; }
.lesson-end p { margin-top: -.8rem; }
/* modal utraty serc */
.hearts-modal {
  position: fixed; inset: 0; z-index: 600; display: none;
  background: rgba(14,15,26,.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 1.5rem;
}
.hearts-modal.show { display: flex; animation: fadeUp .3s ease; }
.hearts-box {
  background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 2.5rem 2.2rem;
  max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
}
.hearts-box h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.hearts-box p { color: var(--text-secondary); font-size: .93rem; margin-bottom: 1.6rem; }
.hearts-box .btn { width: 100%; }
.hearts-box .hb-later { margin-top: .9rem; }

/* ============================================================
   PATH — ścieżka nauki (drzewko lekcji)
   ============================================================ */
/* ścieżka */
.path-wrap { display: flex; flex-direction: column; align-items: center; padding-bottom: 2rem; position: relative; }
.pnode-row { display: flex; justify-content: center; width: 100%; margin-bottom: 2.2rem; position: relative; }
.pnode {
  width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  position: relative; transition: transform .15s;
  background: var(--bg-soft); color: var(--text-muted);
  box-shadow: 0 6px 0 var(--border-strong);
}
.pnode i { transform: translateY(-2px); }
.pnode.locked { cursor: not-allowed; }
.pnode.done {
  background: var(--accent-bright); color: #422006;
  box-shadow: 0 6px 0 #B45309;
}
.pnode.done:hover { transform: translateY(2px); box-shadow: 0 4px 0 #B45309; }
.pnode.current {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 0 var(--primary-ink);
}
.pnode.current:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--primary-ink); }
.pnode.current::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid var(--primary); opacity: .35;
  animation: nodePulse 1.8s ease-out infinite;
}
@keyframes nodePulse {
  0% { transform: scale(.92); opacity: .5; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.pnode:active:not(.locked) { transform: translateY(5px); box-shadow: 0 1px 0 var(--border-strong); }
/* dymek START nad bieżącym węzłem */
.start-bubble {
  position: absolute; top: -52px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 2px solid var(--primary); color: var(--primary);
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem 1.1rem; border-radius: 12px; white-space: nowrap;
  box-shadow: var(--shadow-card); z-index: 3;
  animation: bubbleFloat 2s ease-in-out infinite;
}
.start-bubble::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px; background: var(--bg-elevated);
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
}
@keyframes bubbleFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
.pnode-label {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
}

/* ============================================================
   PATH — rozdziały tematu
   ============================================================ */

/* ===== oś tematu: przystanki-rozdziały ===== */
.chapters { position: relative; }
.chap { position: relative; margin-bottom: 1.4rem; }
/* linia osi: od odznaki rozdziału do odznaki następnego */
.chap-card { width: 100%; text-align: left; font-family: inherit; color: var(--text);
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 18px;
  padding: .9rem 1.1rem .9rem 1rem; box-shadow: 0 4px 0 var(--border);
}
button.chap-card { cursor: pointer; transition: border-color .2s, transform .1s, box-shadow .1s; }
button.chap-card:hover { border-color: var(--ok); }
button.chap-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }

.chap-badge {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: 1.15rem;
  background: var(--ok); color: var(--ok-ink); box-shadow: 0 3px 0 var(--ok-deep);
}
.chap:not(.goal) .chap-badge { background: var(--primary); color: #fff; box-shadow: 3px 3px 0 var(--accent-bright); }
[data-theme="dark"] .chap:not(.goal) .chap-badge { color: #191925; }
.goal.is-locked .chap-badge { font-size: .95rem; border: 1.5px solid var(--accent-bright); box-shadow: none; }

.chap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chap-k { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.is-current .chap-k { color: var(--accent); }
.chap-t { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.is-locked .chap-t { color: var(--text-secondary); }

/* napis stanu rozdziału */
.chap-st { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-top: .45rem; font-size: .74rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.chap-st i { font-size: .6rem; }
.chap-side { display: flex; flex-shrink: 0; margin-left: auto; text-align: right; }
.chap-side b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.3rem; line-height: 1; }
.chap-side b small { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.is-locked .chap-side b { color: var(--text-muted); }
.chap-chev { color: var(--text-muted); font-size: .85rem; flex-shrink: 0; transition: transform .2s; }
.chap-card.open .chap-chev { transform: rotate(180deg); }

/* nagłówek rozdziału przykleja się u góry, dopóki przewijasz jego zadania */
.chap-card { position: sticky; top: 80px; z-index: 5; }
/* pasek tła nad przyklejonym nagłówkiem, żeby zadania nie prześwitywały między nim a menu */
.is-current .chap-card { border: 2px solid var(--primary); box-shadow: 0 4px 0 var(--primary), 0 -14px 0 0 var(--bg); }
.is-perfect .chap-card.open { border: 2px solid var(--ok); box-shadow: 0 4px 0 var(--ok-deep), 0 -14px 0 0 var(--bg); }
.has-errors .chap-card.open { border: 2px solid var(--ok); box-shadow: 0 4px 0 var(--ok-deep), 0 -14px 0 0 var(--bg); }
.is-current { --dummy: 0; }
.is-locked .chap-card { box-shadow: none; border-style: dashed; border-color: var(--border-strong); }
.is-locked .chap-card { background: var(--bg); position: relative; z-index: 1; }
/* cel tematu */
.goal.is-locked .chap-badge { color: var(--accent); border-color: var(--accent-bright); background: var(--accent-tint); }
.goal .topic-done { position: relative; z-index: 1; }
.chap.goal.is-summary, .chap.goal.is-mastered { margin-top: .6rem; }

.chap-card.just-done { animation: chDonePulse 1.6s ease; }
.ch-nodes .pnode-row { transform: translateX(var(--x, 0)); width: auto; }
.ch-nodes .pnode.done { color: var(--ok-ink); }
.ch-nodes .pnode.done:hover { box-shadow: 0 4px 0 var(--ok-deep); }
/* ✓ i ✕ na kropkach: grube, zaokrąglone, z lekkim cieniem */
.pnode-ico { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round;
  transform: translateY(-2px); filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); position: relative; z-index: 1; }
.pnode.wrong .pnode-ico { width: 34px; height: 34px; stroke-width: 4; }
[data-theme="dark"] .pnode-ico { filter: none; }
.ch-nodes .pnode { position: relative; z-index: 1; }
.ch-nodes { padding: 2.2rem 0 1rem; }
.ch-nodes[hidden] { display: none; }
@keyframes chDonePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  30% { box-shadow: 0 0 0 8px rgba(245,158,11,.35); border-color: var(--accent-bright); }
}
.pnode.wrong { color: #fff; box-shadow: 0 6px 0 #991B1B; }
.pnode.wrong:hover { transform: translateY(2px); box-shadow: 0 4px 0 #991B1B; }
/* ===== MONETY 3D (jak w Duolingo) =====
   Płaska „twarz" monety (--face) + gruby rant pod spodem (--lip) tego samego kształtu.
   Wciśnięcie: twarz zjeżdża w dół o grubość rantu, a rant maleje tak samo szybko —
   dół monety stoi w miejscu, więc wygląda to jak wciśnięcie od góry. */
.ch-nodes .pnode {
  --lip: 9px; --face: var(--bg-soft); --edge: var(--border-strong);
  width: 78px; height: 64px; font-size: 1.2rem;
  background: var(--face); box-shadow: 0 var(--lip) 0 var(--edge);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.ch-nodes .pnode.done    { --face: var(--ok);      --edge: var(--ok-deep); }
.ch-nodes .pnode.current { --face: var(--primary); --edge: var(--primary-deep); width: 86px; height: 70px; font-size: 1.5rem; }
.ch-nodes .pnode.locked  { --face: #E5E3DB; --edge: #C9C6BB; color: #ADAAA0; font-size: 1.15rem; }
[data-theme="dark"] .ch-nodes .pnode.current { --edge: #5B54D6; }
[data-theme="dark"] .ch-nodes .pnode.locked  { --face: #262941; --edge: #1A1C2E; color: #4E5170; }
.ch-nodes .pnode.done, .ch-nodes .pnode.wrong, .ch-nodes .pnode.current, .ch-nodes .pnode.locked {
  background: var(--face); box-shadow: 0 var(--lip) 0 var(--edge);
}
/* bez pulsowania wokół bieżącej monety */
.ch-nodes .pnode.current::after { display: none; }
/* bieżąca moneta: dymek nad nią i trochę więcej miejsca w wierszu */
.ch-nodes .pnode-row.has-bubble { margin-top: 3.6rem; margin-bottom: 3rem; }
.ch-nodes .pnode.current .start-bubble { top: -56px; }
/* najechanie: moneta delikatnie się wciska (dół zostaje w miejscu) */
.ch-nodes .pnode:not(.locked):hover { transform: translateY(2px); filter: brightness(1.04); box-shadow: 0 calc(var(--lip) - 2px) 0 var(--edge);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.ch-nodes .pnode:not(.locked):hover .pnode-label { transform: translateX(-50%) translateY(-2px); transition: transform .22s ease; }
/* wciśnięcie od góry */
.ch-nodes .pnode:not(.locked):active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--edge);
  transition: transform .06s ease-out, box-shadow .06s ease-out; }
/* podpis pod monetą nie zjeżdża razem z nią */
.ch-nodes .pnode .pnode-label { transition: transform .08s ease-out; }
.ch-nodes .pnode:not(.locked):active .pnode-label { transform: translateX(-50%) translateY(calc(-1 * var(--lip))); transition: transform .06s ease-out; }
/* ikony płaskie, bez cienia — jak na monetach Duolingo */
.ch-nodes .pnode .pnode-ico { filter: none; transform: none; }
.ch-nodes .pnode-ico { width: 34px; height: 34px; stroke-width: 3.6; }
.ch-nodes .pnode.wrong .pnode-ico { width: 29px; height: 29px; stroke-width: 3.8; }
.ch-nodes .pnode-row { margin-bottom: 2.7rem; }
.ch-nodes .pnode-label { font-size: .74rem; }
.ch-nodes .start-bubble { top: -50px; }
.pnode.just-done { animation: nodeJustDone 1.1s cubic-bezier(.34,1.56,.64,1); }
@keyframes nodeJustDone {
  0% { transform: scale(1); background: var(--primary); }
  40% { transform: scale(.8); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.topic-done {
  text-align: center; padding: 1.6rem 1rem 2.4rem; color: var(--text-secondary);
}
.topic-done .end-trophy { margin: 0 auto 1rem; }
.topic-done h3 { font-size: 1.3rem; color: var(--text); margin-bottom: .3rem; }
.topic-done p { max-width: 460px; margin: 0 auto; }
.topic-done-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .35rem;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem 1.25rem; box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.mobile-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links > a { padding: .75rem 1rem; font-size: 1rem; }
  .nav-cta { text-align: center; margin-top: .35rem; }
  .theme-toggle { margin: .5rem 0 0; align-self: flex-start; }
  .answer-grid { grid-template-columns: 1fr; }
  .lesson-foot-inner .btn { width: 100%; }
  .feedback-inner { flex-wrap: wrap; }
  .feedback-inner .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .chap-card { gap: .7rem; padding: .8rem .85rem .8rem .75rem; }
  .chap-badge { width: 40px; height: 40px; font-size: 1rem; }
  .chap-t { font-size: 1rem; }
  .chap-side b { font-size: 1.1rem; }
  .ch-nodes .pnode-row { transform: translateX(calc(var(--x, 0) * .72)); }
  .pnode { width: 66px; height: 66px; font-size: 1.3rem; }
  .ch-nodes .pnode { width: 70px; height: 58px; --lip: 8px; }
  .ch-nodes .pnode.current { width: 78px; height: 64px; }
  .ch-nodes .pnode-ico { width: 30px; height: 30px; }
  .ch-nodes .pnode.wrong .pnode-ico { width: 26px; height: 26px; }
  .ch-nodes .pnode-row { margin-bottom: 2.5rem; }
  .end-trophy { width: 76px; height: 76px; font-size: 2rem; margin-bottom: 1rem; }
  .lesson-end h2 { font-size: 1.5rem; }
  /* telefon: krótki werdykt w pasku, odpowiedź i tak jest w siatce i w wyniku */
  .feedback { padding: .9rem 1rem; }
  .feedback .fb-icon { width: 40px; height: 40px; font-size: 1.02rem; }
  .feedback .fb-title-extra { display: none; }
  .sol-head, .sol-inner { padding-left: 1rem; padding-right: 1rem; }
  .sol-title-extra { display: none; }
  .sol-m { font-size: .99rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   LEKCJA — odświeżenie (wrzesień 2026)
   przyklejony dolny pasek · podpowiedź · seria z rzędu · teoria w dymku
   ============================================================ */

/* --- dolny pasek zawsze na dole ekranu; treść dostaje od dołu tyle miejsca, ile pasek (--dock-h ustawia JS) --- */
.lesson { padding-bottom: var(--dock-h, 96px); }
.lesson-foot, .feedback { position: fixed; left: 0; right: 0; bottom: 0; }
.lesson-foot { z-index: 70; box-shadow: 0 -8px 24px -18px rgba(25,25,37,.35); }
.feedback { z-index: 75; box-shadow: 0 -8px 24px -18px rgba(25,25,37,.35); }
.feedback.fb-ok .fb-icon, .feedback.fb-bad .fb-icon, .feedback.fb-info .fb-icon { background: var(--bg-elevated); }
.feedback.fb-info .fb-icon { color: var(--accent); }
.feedback.fb-info .fb-title { color: var(--accent); }
.solution { scroll-margin-bottom: calc(var(--dock-h, 96px) + 16px); }

/* --- telefon --- */
@media (max-width: 768px) {
  /* stopka: podpowiedź jako sama ikonka obok szerokiego „Sprawdź" — niższy pasek, więcej miejsca na zadanie */
  .lesson-foot { padding: .8rem 1rem; }
  .lesson-foot-inner { flex-direction: row; }
  .lesson-foot-inner #btnReveal { width: auto; flex: 0 0 auto; padding-left: 1.05rem; padding-right: 1.05rem; }
  .lesson-foot-inner #btnReveal span { display: none; }
  .lesson-foot-inner #btnCheck { flex: 1; }
}
@media (max-width: 560px) {
  .feedback .fb-expl { font-size: .84rem; }
}

/* --- TEORIA: ten sam dymek co pytanie, ale tekst do czytania —
   czcionka tekstu strony (Inter) zamiast nagłówkowej, wzory w rozmiarze tekstu, przykład w jasnej ramce --- */
/* zadania i teoria: dymek identyczny — ta sama czcionka (Inter), rozmiar, grubość, odstępy i marginesy */
.lesson-bubble, .lesson-bubble.is-theory { line-height: 1.65;
  padding: 1rem 1.25rem; color: var(--text);
}
.lesson-bubble.is-theory .katex { font-size: 1.1em; }
.lesson-bubble .center { display: block; text-align: center; margin: .55rem 0; overflow-x: auto; overflow-y: hidden; padding: .15rem 0; }
.lesson-bubble .center.big { margin: .8rem 0; }
.lesson-bubble .center.big .katex { font-size: 1.3em; }
.lesson-bubble .example {
  display: block; margin-top: 1rem;                 /* przykład bez osobnego tła — wyróżnia go tylko napis „Przykład:” */
}
.lesson-bubble .example-label {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--primary);   /* fiolet strony (w trybie ciemnym jaśniejszy) */
}
.lesson-bubble .example-label i { font-size: .8rem; }
.lesson-bubble .example-content { display: block; }
/* przy teorii nie ma odpowiedzi, podpowiedzi ani info o klawiszach */
body.is-theory .answer-grid { display: none; }
/* na karcie teorii nie ma podpowiedzi — „Dalej" na całą szerokość po prawej */
body.is-theory #btnReveal { display: none; }
body.is-theory .lesson-foot-inner { justify-content: flex-end; }
/* ścieżka: moneta teorii */
.ch-nodes .pnode.th-node i { font-size: 1.35rem; }
@media (max-width: 560px) {
  .lesson-bubble .center:not(.big) .katex { font-size: .95em; }
}

/* rozwiązanie bliżej odpowiedzi */
.lesson-body .solution { margin-top: 1rem; }
.sol-inner { padding-bottom: .9rem; }
.sol-step:last-child { border-bottom: none; padding-bottom: 0; }

/* wzory (KaTeX) w odpowiedziach, krokach rozwiązania, pasku wyniku i ściądze */
.sol-m .katex { font-size: 1.1em; }
.sol-t .katex { font-size: 1.1em; }   /* wzory w nagłówku kroku jak w opisie */
.feedback .katex { font-size: 1.05em; }
/* wzór nie łamie się w środku — cały przechodzi do następnej linijki */
.lesson-bubble .katex, .ans-card .katex, .sol-m .katex, .feedback .katex { display: inline-block; white-space: nowrap; }
.ans-txt { line-height: 1.35; padding: .15rem 0; }
.sol-m { overflow-x: auto; }
.feedback .katex { font-size: 1.1em; }

/* odpowiedzi ABCD: dokładnie ta sama czcionka co pytanie (Inter 500, ten sam rozmiar) i ta sama skala wzorów */
.lesson-bubble .katex, .ans-card .katex { font-size: 1.1em; }
#btnReveal[hidden] { display: none; }

/* przyciski w pasku wyniku: „Zobacz/Ukryj odpowiedź" po lewej od „Dalej" */
.fb-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
#btnSolToggle[hidden] { display: none; }
@media (max-width: 768px) {
  .feedback-inner .fb-actions { width: 100%; }
  .feedback-inner .fb-actions .btn { width: auto; }
  .feedback-inner #btnSolToggle { flex: 0 0 auto; padding-left: 1.05rem; padding-right: 1.05rem; }
  .feedback-inner #btnSolToggle span { display: none; }
  .feedback-inner #btnNext { flex: 1; }
}
.feedback #btnSolToggle { background: var(--bg-elevated); color: var(--primary); box-shadow: 0 3px 0 var(--border-strong); }

/* ===== CZCIONKA TREŚCI ZADAŃ: Nunito =====
   pytanie, odpowiedzi ABCD, teoria i opisy kroków — ta sama czcionka, rozmiar i grubość;
   zaokrąglona i przyjazna (klimat Duolingo). Nagłówki, przyciski i reszta strony bez zmian. */
.lesson-bubble, .lesson-bubble.is-theory, .ans-card, .sol-t {
  font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 500;   /* treść do czytania: 500 (było 600) — jedna wartość na wszystkich urządzeniach */
}
.lesson-bubble, .lesson-bubble.is-theory, .ans-card { font-size: 1.12rem; }
.lesson-bubble b, .lesson-bubble strong { font-weight: 800; }
.sol-t { font-size: 1.03rem; color: var(--text); font-weight: 700; }   /* nagłówek kroku: ten sam rozmiar co opis (.sol-m), różni się tylko grubością */
@media (max-width: 768px) { .lesson-bubble, .lesson-bubble.is-theory, .ans-card { font-size: 1.07rem; } }

/* ===== ANIMACJE PYTANIA I ODPOWIEDZI ===== */
@keyframes qSlideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes qFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes qOutUp   { to { opacity: 0; transform: translateY(-30px); } }
@keyframes qOutDown { to { opacity: 0; transform: translateY(30px); } }
/* wejście nowego pytania / teorii */
.lesson-body.q-enter .q-speaker,
.lesson-body.q-enter .lesson-qrow { animation: qSlideIn .45s cubic-bezier(.22,1,.36,1) both; }
.lesson-body.q-enter .answer-grid { animation: qFadeDown .4s ease .2s both; }
/* wyjście po „Dalej" */
.lesson-body.q-leave-up > *   { animation: qOutUp .3s cubic-bezier(.22,1,.36,1) forwards; }
.lesson-body.q-leave-down > * { animation: qOutDown .3s cubic-bezier(.22,1,.36,1) forwards; }
/* kafelki: uniesienie po najechaniu, wciśnięcie przy kliknięciu */

/* ============================================================
   KOLORY „DOBRZE / ŹLE" PRZYJAZNE DALTONISTOM
   Zieleń (#1FBD59) = dobrze, głęboka czerwień (#C81E1E) = źle — różnica jasności pomaga
   daltonistom je odróżnić. Do tego ikony ✓ / ✗ — nie tylko kolor.
   Serca i przycisk wyjścia zostają czerwone (to nie jest informacja „źle").
   ============================================================ */
:root {
  --right: #1FBD59; --right-deep: #169A47; --right-tint: #DCFCE7; --right-ink: #167A3B;
  --right-fill: #1FBD59; --right-on: #ffffff;
  --wrong: #C81E1E; --wrong-deep: #991B1B; --wrong-tint: #FDECEC; --wrong-ink: #B91C1C;
  --wrong-fill: #C81E1E; --wrong-on: #ffffff;
  /* monety na ścieżce */
  --ok: #22C55E; --ok-deep: #16A34A; --ok-ink: #ffffff;
}
/* kafelki odpowiedzi */
.ans-card.correct { border-color: var(--right); background: var(--right-tint); color: var(--right-ink); box-shadow: 0 3px 0 var(--right); }
.ans-card.correct .ans-key { background: var(--right-fill); border-color: var(--right-fill); color: var(--right-on); }
.ans-card.wrong { border-color: var(--wrong); background: var(--wrong-tint); color: var(--wrong-ink); box-shadow: 0 3px 0 var(--wrong); }
.ans-card.wrong .ans-key { background: var(--wrong-fill); border-color: var(--wrong-fill); color: var(--wrong-on); }
.ans-card .ans-key i { font-size: .82rem; }
/* dolny pasek wyniku */
.feedback.fb-ok  { background: var(--right-tint); border-top-color: var(--right); }
.feedback.fb-bad { background: var(--wrong-tint); border-top-color: var(--wrong); }
.feedback.fb-ok .fb-icon, .feedback.fb-ok .fb-title { color: var(--right-ink); }
.feedback.fb-bad .fb-icon, .feedback.fb-bad .fb-title { color: var(--wrong-ink); }
/* ścieżka: monety z błędem */
.pnode.wrong { background: var(--wrong); }
.ch-nodes .pnode.wrong { --face: var(--wrong); --edge: var(--wrong-deep); }
/* etykiety rozdziałów */
.chap-st.done { background: var(--right-tint); color: var(--right-ink); }
/* podsumowanie: dobrze / źle i numery do poprawy */
.end-tile.ok  { color: var(--right-ink); border-color: var(--right); background: var(--right-tint); box-shadow: 0 4px 0 var(--right); }
.end-tile.bad { color: var(--wrong-ink); border-color: var(--wrong); background: var(--wrong-tint); box-shadow: 0 4px 0 var(--wrong); }
.ec-chip { border-color: var(--wrong); color: var(--wrong-ink); box-shadow: 0 3px 0 var(--wrong); }

/* kolory poziomów: --lc (kolor), --lc-deep (rant), --lt (tło), --lc-shadow (cień odznaki) */
.st-lv-amber  { --lc: var(--accent-bright); --lc-deep: #B45309; --lt: var(--accent-tint); --lc-on: #422006; --lc-shadow: var(--primary); }
.st-lv-indigo { --lc: var(--primary); --lc-deep: var(--primary-deep); --lt: var(--primary-tint); --lc-on: #fff; --lc-shadow: var(--accent-bright); }
.st-lv-green  { --lc: #10B981; --lc-deep: #047857; --lt: #E7F8F1; --lc-on: #fff; --lc-shadow: var(--accent-bright); }
[data-theme="dark"] .st-lv-indigo { --lc-on: #191925; --lc-deep: #5B54D6; }
[data-theme="dark"] .st-lv-green  { --lc: #34D399; --lc-deep: #059669; --lt: rgba(52,211,153,.12); --lc-on: #052E16; }
[data-theme="dark"] .st-lv-amber  { --lc-deep: #D97706; }
/* ============================================================
   STRONA GŁÓWNA — ZMatematykuj
   hero z tutorem i monetami · sekcje na przemian z ilustracjami · klikalne zadanie jak w lekcji
   ============================================================ */
.lp-page { background: var(--bg); }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.02rem; }
.lp-float { animation: lpFloat 4.4s ease-in-out infinite; animation-delay: var(--f, 0s); }
@keyframes lpFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* --- klocki: monety i kafelki z symbolami --- */
.lp-coin {
  --face: var(--primary); --edge: var(--primary-deep); --ink: #fff;
  position: absolute; width: 66px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  background: var(--face); color: var(--ink); box-shadow: 0 6px 0 var(--edge);
}
.lp-coin.ok { --face: var(--ok); --edge: var(--ok-deep); --ink: var(--ok-ink); }
.lp-coin.star { --face: var(--accent-bright); --edge: #B45309; --ink: #422006; }
.lp-sym {
  --face: var(--bg-elevated); --edge: var(--border-strong); --ink: var(--primary);
  position: absolute; width: 60px; height: 60px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: 1.6rem;
  background: var(--face); color: var(--ink); box-shadow: 0 6px 0 var(--edge); border: 1.5px solid var(--edge);
}
.lp-sym.amber { --face: var(--accent-bright); --edge: #B45309; --ink: #422006; }
.lp-sym.green { --face: #10B981; --edge: #047857; --ink: #fff; }
.lp-sym.white { rotate: -8deg; }
.lp-sym.amber { rotate: 8deg; }
.lp-sym.green { rotate: -6deg; }

/* --- hero --- */
.lp-hero { padding: 8rem 0 3rem; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; min-height: 480px; }
.lp-hero-text h1 { color: var(--text);
}
.lp-hl { color: var(--primary); }
.lp-lead { font-size: 1.17rem; line-height: 1.6; color: var(--text-secondary); margin: 1.4rem 0 2rem; max-width: 31rem; }
.lp-hero-btns { display: flex; gap: .8rem; flex-wrap: wrap; }
.lp-note { margin-top: 1.4rem; font-size: .9rem; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
.lp-note i { color: var(--ok); }

.lp-hero-art { position: relative; height: 440px; }
.lp-blob { position: absolute; inset: 8% 10%; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; background: var(--primary-tint); }
.lp-tutor-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-58%, -42%); }
.lp-tutor {
  width: 190px; height: 190px; padding: 26px; border-radius: 50px; background: var(--primary);
  box-shadow: 12px 12px 0 var(--accent-bright); rotate: -6deg;
}
[data-theme="dark"] .lp-tutor { background: var(--primary-deep); border: 2px solid var(--primary); }
.lp-say {
  position: absolute; left: 150px; top: -58px; white-space: nowrap;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 18px 18px 18px 4px;
  padding: .7rem 1rem; font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--border-strong);
}
.lp-ans {
  position: absolute; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .55rem;
  border-radius: 14px; border: 1.5px solid var(--right); background: var(--right-tint); color: var(--right-ink);
  box-shadow: 0 4px 0 var(--right); font-size: 1.05rem; rotate: 4deg;
  background-clip: padding-box;
}
[data-theme="light"] .lp-ans, :root:not([data-theme="dark"]) .lp-ans { background-color: #F0FDF4; }
.lp-ans b { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--right-fill); color: var(--right-on); font-size: .8rem; }

/* --- pasek liczb --- */
.lp-stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 2.4rem;
  padding: 1.2rem 1.5rem; border: 1.5px solid var(--border); border-radius: 18px; background: var(--bg-elevated);
  box-shadow: 0 4px 0 var(--border);
}
.lp-stat { display: flex; align-items: center; gap: .45rem; color: var(--text-secondary); font-size: .98rem; }
.lp-stat i { color: var(--primary); font-size: .95rem; margin-right: .15rem; }
.lp-stat b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.2rem; color: var(--text); }

/* --- sekcje na przemian --- */
.lp-sec { padding: 6rem 0; }
.lp-sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.lp-flip .lp-sec-text { order: 2; }
.lp-kicker {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent); margin-bottom: 1.1rem;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .82rem;
}
.lp-sec-text p { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.65; margin-top: 1.1rem; max-width: 30rem; }
.lp-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; color: var(--primary); text-decoration: none; }
.lp-link:hover i { transform: translateX(3px); }
.lp-link i { transition: transform .15s; }
.lp-sec-art { position: relative; display: flex; justify-content: center; align-items: center; }

/* karta ogólna */
.lp-card { background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 22px; box-shadow: 0 6px 0 var(--border-strong), var(--shadow-card); }
.lp-card-h { display: flex; align-items: center; gap: .6rem; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; color: var(--primary); margin-bottom: 1rem; }
.lp-card-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; rotate: -6deg; }
[data-theme="dark"] .lp-card-ic { color: #191925; }
.lp-sol { width: 360px; padding: 1.3rem 1.4rem .9rem; rotate: -2deg; }
.lp-theory {
  position: absolute; right: 2%; bottom: 4%; padding: .9rem 1.2rem 1rem; font-size: 1.35rem; rotate: 4deg;
  background: var(--accent-tint); border-color: var(--accent-bright); box-shadow: 0 6px 0 var(--accent-bright);
}
.lp-theory-k { display: block; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .75rem; font-weight: 700; color: var(--accent); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .08em; }

/* seria */
.lp-streak { width: 300px; padding: 1.8rem 1.4rem 1.4rem; text-align: center; rotate: -3deg; }
.lp-flame { width: 70px; height: 70px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; background: #F97316; box-shadow: 0 6px 0 #C2410C; }
.lp-streak-n { display: block; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 3rem; line-height: 1; margin-top: .8rem; color: #F97316; }
.lp-streak-l { display: block; color: var(--text-secondary); font-weight: 600; margin-top: .2rem; }
.lp-week { display: flex; gap: .3rem; justify-content: center; margin-top: 1.2rem; }
.lp-week span { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; background: var(--bg-soft); color: var(--text-muted); }
.lp-week .on { background: #FDBA74; color: #7C2D12; }
.lp-week .today { background: transparent; border: 2px dashed #F97316; color: #F97316; }

/* poziomy */
.lp-levels { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 380px; }
.lp-lv {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 18px; text-decoration: none; color: var(--text);
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); box-shadow: 0 5px 0 var(--border-strong);
  rotate: var(--r); transition: rotate .2s, transform .15s, box-shadow .15s, border-color .15s;
}
.lp-lv:nth-child(2) { margin-left: 2.2rem; }
@media (hover: hover) { .lp-lv:hover { rotate: 0deg; transform: translateY(-2px); border-color: var(--lc); box-shadow: 0 7px 0 var(--border-strong); } }
.lp-lv:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border-strong); }
.lp-lv-ic { width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--lc); color: var(--lc-on); box-shadow: 4px 4px 0 var(--lc-shadow); rotate: -6deg; }
.lp-lv-t { flex: 1; display: flex; flex-direction: column; }
.lp-lv-t b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.08rem; }
.lp-lv-t small { color: var(--text-muted); font-size: .85rem; }
.lp-lv-go { color: var(--text-muted); }

/* CTA */
.lp-cta {
  position: relative; text-align: center; margin: 2rem 0 6rem; padding: 4rem 2rem 3.4rem; border-radius: 30px;
  background: var(--primary); color: #fff; box-shadow: 0 7px 0 var(--primary-deep);
}
[data-theme="dark"] .lp-cta { background: var(--primary-deep); border: 1.5px solid var(--primary); box-shadow: 0 7px 0 #000; }
.lp-cta h2 { line-height: 1.1; }
.lp-cta p { color: rgba(255,255,255,.75); margin: .7rem 0 1.8rem; font-size: 1.05rem; }
.lp-cta-tutor {
  position: absolute; left: 50%; top: -46px; width: 80px; height: 80px; margin-left: -40px; padding: 11px; border-radius: 22px;
  background: var(--primary); border: 4px solid var(--bg); box-shadow: 5px 5px 0 var(--accent-bright); rotate: -6deg;
}
[data-theme="dark"] .lp-cta-tutor { background: var(--primary-deep); }
.lp-cta-c1 { left: 7%; top: 26%; }
.lp-cta-c2 { right: 8%; bottom: 22%; }

/* --- tablet / telefon --- */
@media (max-width: 960px) {
  .lp-hero { padding: 6rem 0 2rem; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 1rem; min-height: 0; text-align: center; }
  .lp-lead { margin-left: auto; margin-right: auto; }
  .lp-hero-btns, .lp-note { justify-content: center; }
  .lp-hero-art { height: 380px; max-width: 460px; width: 100%; margin: 0 auto; }
  .lp-sec { padding: 4rem 0; }
  .lp-sec-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .lp-flip .lp-sec-text { order: 0; }
  .lp-sec-text { text-align: center; }
  .lp-sec-text p { margin-left: auto; margin-right: auto; }
  .lp-levels { margin: 0 auto; }
}
@media (max-width: 600px) {
  .lp-wrap { padding: 0 1rem; }
  .lp-lead { font-size: 1.02rem; }
  .lp-hero-btns { flex-direction: column; }
  .lp-hero-btns .btn { width: 100%; }
  .lp-hero-art { height: 330px; }
  .lp-tutor { width: 140px; height: 140px; padding: 19px; border-radius: 38px; box-shadow: 9px 9px 0 var(--accent-bright); }
  .lp-say { left: 96px; top: -58px; font-size: .95rem; }
  .lp-tutor-wrap { transform: translate(-62%, -36%); }
  .lp-coin { width: 52px; height: 47px; font-size: 1.15rem; box-shadow: 0 5px 0 var(--edge); }
  .lp-sym { width: 48px; height: 48px; font-size: 1.3rem; border-radius: 14px; }
  .lp-stats { gap: .5rem 1.4rem; }
  .lp-sol { width: 100%; max-width: 330px; }
  .lp-theory { right: -2%; bottom: -8%; font-size: 1.1rem; }
  .lp-cta { padding: 3.6rem 1.3rem 2.4rem; }
  .lp-cta .btn { width: 100%; }
  .lp-cta-c1, .lp-cta-c2 { display: none; }
  .lp-levels { max-width: 330px; }
  .lp-lv:nth-child(2) { margin-left: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-float { animation: none !important; }
}

/* ===== STRONA GŁÓWNA — nagłówki Nunito, tła ilustracji, telefon z lekcją ===== */
.lp-hero-text h1, .lp-sec-text h2, .lp-cta h2 { font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 900; letter-spacing: -.02em; }
.lp-hero-text h1 { font-size: 4rem; line-height: 1.05; }
.lp-sec-text h2 { font-size: 3rem; line-height: 1.08; color: var(--primary); }
[data-theme="dark"] .lp-sec-text h2 { color: var(--primary-ink); }
.lp-sec-text h2 span { color: inherit; }
.lp-cta h2 { font-size: 2.8rem; }

/* miękkie tło pod każdą ilustracją */
.lp-sec-art { min-height: 460px; }
.lp-stage {
  position: absolute; inset: 4% 8%; border-radius: 42% 58% 55% 45% / 50% 44% 56% 50%;
  background: var(--stage, var(--primary-tint)); z-index: 0;
}
.lp-art-indigo { --stage: var(--primary-tint); }
.lp-art-amber  { --stage: var(--accent-tint); }
.lp-art-orange { --stage: #FFEDD5; }
.lp-art-green  { --stage: #DCFCE7; }
[data-theme="dark"] .lp-art-orange { --stage: rgba(249,115,22,.1); }
[data-theme="dark"] .lp-art-green  { --stage: rgba(52,211,153,.09); }
.lp-art-amber .lp-stage { border-radius: 55% 45% 48% 52% / 46% 56% 44% 54%; }
.lp-art-green .lp-stage { border-radius: 50% 50% 42% 58% / 58% 46% 54% 42%; }
.lp-sec-art > *:not(.lp-stage) { z-index: 1; }
.lp-sec-art > .lp-card:not(.lp-theory), .lp-sec-art > .lp-levels, .lp-sec-art > .lp-phone { position: relative; }

/* telefon z lekcją */
.lp-phone {
  width: 290px; padding: 1.1rem .95rem 1rem; border-radius: 38px; rotate: -3deg;
  background: var(--bg-elevated); border: 9px solid #1E1B4B;
  box-shadow: 0 10px 0 #0F0D2E, var(--shadow-lift);
}
[data-theme="dark"] .lp-phone { border-color: #2E2B63; box-shadow: 0 10px 0 #05040F, var(--shadow-lift); }
.lp-ph-top { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; font-size: .8rem; color: var(--text-muted); }
.lp-ph-bar { flex: 1; height: 10px; border-radius: 10px; background: var(--bg-soft); overflow: hidden; }
[data-theme="dark"] .lp-ph-bar { background: var(--border); }
.lp-ph-bar i { display: block; width: 60%; height: 100%; border-radius: 10px; background: var(--ok); }
.lp-ph-heart { color: var(--wrong); font-weight: 700; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; }
.lp-ph-who { display: flex; align-items: center; gap: .5rem; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .82rem; color: var(--text-secondary); margin-bottom: .55rem; }
.lp-ph-who b { color: var(--primary); }
.lp-ph-tutor { width: 30px; height: 30px; padding: 3px; border-radius: 9px; background: var(--primary); box-shadow: 2px 2px 0 var(--accent-bright); rotate: -6deg; }
[data-theme="dark"] .lp-ph-tutor { background: var(--primary-deep); border: 1px solid var(--primary); }
.lp-ph-q {
  font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 700; font-size: 1rem; padding: .65rem .85rem; margin-bottom: .8rem;
  border: 1.5px solid var(--border-strong); border-radius: 4px 14px 14px 14px; background: var(--bg-elevated);
}
.lp-ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lp-ph-grid > span {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; min-height: 50px; border-radius: 11px;
  border: 1.5px solid var(--border-strong); box-shadow: 0 3px 0 var(--border-strong); font-size: .92rem; background: var(--bg-elevated);
}
.lp-ph-grid > span > b {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); font-size: .65rem; color: var(--text-muted); font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
}
.lp-ph-grid > .ok { border-color: var(--right); background: var(--right-tint); color: var(--right-ink); box-shadow: 0 3px 0 var(--right); }
.lp-ph-grid > .ok > b { background: var(--right-fill); border-color: var(--right-fill); color: var(--right-on); }
.lp-ph-fb {
  display: flex; align-items: center; justify-content: space-between; margin: 1rem -.95rem -1rem; padding: .85rem .95rem 1rem;
  background: var(--right-tint); border-top: 2px solid var(--right); border-radius: 0 0 29px 29px;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; color: var(--right-ink);
}
.lp-ph-fb em { font-style: normal; background: var(--ok); color: var(--ok-ink); padding: .5rem 1rem; border-radius: 11px; box-shadow: 0 3px 0 var(--ok-deep); font-size: .88rem; }

@media (max-width: 960px) {
  .lp-hero-text h1 { font-size: 3rem; }
  .lp-sec-text h2 { font-size: 2.4rem; }
  .lp-sec-art { min-height: 400px; }
}
@media (max-width: 600px) {
  .lp-hero-text h1 { font-size: 2.5rem; }
  .lp-sec-text h2 { font-size: 2.1rem; }
  .lp-cta h2 { font-size: 1.9rem; }
  .lp-stage { inset: 2% 0; }
  .lp-phone { width: 262px; }
  .lp-sec-art { min-height: 360px; }
}

/* ===== ŚCIEŻKA MIĘDZY SEKCJAMI (linia + monety, zapełnia się przy przewijaniu) ===== */
.lp-main { position: relative; }
.lp-main > section, .lp-main > div { position: relative; z-index: 1; }
.lp-road { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lp-road path { fill: none; stroke-width: 16; stroke-linecap: round; }
.lp-road-base { stroke: var(--border); }
.lp-road-fill { stroke: var(--ok); transition: stroke-dashoffset .12s linear; }
.lp-stop {
  --face: var(--bg-elevated); --edge: var(--border-strong);
  position: absolute; top: -18px; left: 50%; margin-left: -38px; z-index: 3;
  width: 76px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--face); box-shadow: 0 7px 0 var(--edge); border: 3px solid var(--edge);
  color: var(--text-muted); font-size: 1.5rem;
  transition: background .3s, box-shadow .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.lp-stop i { position: absolute; transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.lp-stop-b { opacity: 0; transform: scale(.4); }
.lp-stop.on { --face: var(--ok); --edge: var(--ok-deep); color: var(--ok-ink); transform: scale(1.04); }
.lp-stop.on .lp-stop-a { opacity: 0; transform: scale(.4); }
.lp-stop.on .lp-stop-b { opacity: 1; transform: none; }
.lp-sec-art { padding-top: 40px; }
@media (max-width: 960px) {
  .lp-road { display: none; }
  .lp-stop { width: 60px; height: 55px; margin-left: -30px; font-size: 1.2rem; top: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-road-fill, .lp-stop, .lp-stop i { transition: none; }
}

/* ============================================================
   START — powitanie jak w Duolingo
   tutor pyta · jedna odpowiedź na raz · pasek postępu u góry · „Dalej” na dole
   (górny pasek, pasek postępu i dolny przycisk to te same elementy co w lekcji)
   ============================================================ */
.ob .pbar-fill { border-radius: 10px; }
.ob-body { width: 100%; max-width: 620px; margin: 0 auto; padding: 1.6rem 1.5rem 2rem; }

/* odpowiedzi: szerokie wiersze-klocki (jak kafelki ABCD w lekcji) */
.ob-opts { display: flex; flex-direction: column; gap: .75rem; }
.ob-opt {
  display: flex; align-items: center; gap: .95rem; width: 100%; min-height: 70px; padding: .8rem 1.1rem .8rem .85rem;
  text-align: left; font-family: inherit; color: var(--text); cursor: pointer;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 16px;
  box-shadow: 0 4px 0 var(--border-strong); transition: transform .12s, box-shadow .12s, border-color .15s, background .15s;
}
@media (hover: hover) { .ob-opt:hover { border-color: var(--primary); box-shadow: 0 5px 0 var(--border-strong); } }
.ob-opt:active { box-shadow: 0 1px 0 var(--border-strong); }
.ob-ic {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  background: var(--lt, var(--primary-tint)); color: var(--lc, var(--primary));
}
.st-lv-amber .ob-ic { color: var(--accent); }
.ob-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-txt b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.ob-txt small { font-size: .82rem; color: var(--text-muted); margin-top: .1rem; }
.ob-side { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.ob-side .chap-st { margin-top: 0; }

/* dolny pasek: jeden przycisk po prawej (na telefonie na całą szerokość) */
.ob .lesson-foot-inner { justify-content: flex-end; }

/* wejście i wyjście kroku — te same ruchy co w lekcji */
.ob-body.q-enter .ob-opts { animation: qFadeDown .4s ease .15s both; }
.ob-body.q-leave-up > * { animation: qOutUp .28s cubic-bezier(.22,1,.36,1) forwards; }

@media (max-width: 640px) {
  .ob-body { padding: 1.1rem 1rem 1.5rem; }
  .ob-opt { min-height: 64px; gap: .8rem; }
  .ob-ic { width: 42px; height: 42px; font-size: 1rem; }
  .ob-txt small { display: none; }
}
.ob-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ob-grid .ob-opt {
  flex-direction: column; justify-content: flex-start; text-align: center;
}
.ob-grid .ob-txt { width: 100%; align-items: center; justify-content: center; }
.ob-grid .ob-txt small { display: none; }
.ob-grid .ob-side { justify-content: center; }
@media (max-width: 900px) { .ob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* pasek ukończenia tematu na kafelku (zamiast napisu stanu) */
.ob-prog { display: flex; align-items: center; width: 100%; }
.ob-bar { border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
[data-theme="dark"] .ob-bar { background: var(--border); }
.ob-bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }

/* procent ukończenia pod paskiem, na środku (bez liczby zadań) */
.ob-prog { flex-direction: column; gap: .35rem; }
.ob-bar { width: 100%; flex: none; }
.ob-pct { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .78rem; line-height: 1; }
.ob-grid .ob-ic { margin-bottom: 0; }
.ob-grid .ob-side { border-top: 0; }
.ob-bar { height: 7px; }
.ob-bar i { background: var(--primary); }
.ob-prog.full .ob-pct { color: var(--primary); }
@media (max-width: 760px) { .ob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* kafelki tematów — rozmiar pośrodku (4 × ok. 195 px) */
.ob.ob-wide .lesson-top, .ob.ob-wide .ob-body { max-width: 860px; }
@media (max-width: 860px) { .ob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* pytanie jako zwykły wyśrodkowany nagłówek (bez tutora i dymka) */
.ob-title {
  text-align: center; margin: .6rem 0 1.6rem;
  font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em;
}
.ob-body.q-enter .ob-title { animation: qSlideIn .45s cubic-bezier(.22,1,.36,1) both; }
@media (max-width: 640px) { .ob-title { font-size: 1.55rem; margin: .3rem 0 1.2rem; } }

/* ===== START — kafelki tematów (inspiracja: stara wersja „Wybierz temat nauki")
   stała szerokość, wyśrodkowane rzędy · duża ikona bez tła · pasek przy dole
   zaznaczony = cały kafelek wypełniony kolorem bazowym ===== */
.ob-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.ob-grid .ob-opt {
  width: 184px; min-height: 150px; padding: 1.15rem .9rem .85rem; gap: .35rem;
  border-color: var(--border); border-radius: 18px;
}
.ob-grid .ob-ic {
  width: auto; height: 44px; background: none; border-radius: 0; font-size: 1.85rem; margin: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.ob-grid .ob-txt { flex: none; }
.ob-grid .ob-txt b { font-size: 1rem; line-height: 1.2; }
.ob-grid .ob-side { width: 82%; margin-top: auto; padding-top: .5rem; }

/* zaznaczenie: pełny kolor (kafelki tematów i wiersze poziomów) */

@media (max-width: 640px) {
  .ob-grid { gap: .7rem; }
  .ob-grid .ob-opt { width: calc(50% - .35rem); min-height: 138px; padding: 1rem .6rem .75rem; }
  .ob-grid .ob-ic { height: 40px; font-size: 1.6rem; }
  .ob-grid .ob-txt b { font-size: .93rem; }
}

/* kafelki tematów: bez obracania ikony — cały kafelek podnosi się i dostaje fioletową ramkę i tło */
@media (hover: hover) {
  .ob-grid .ob-opt:hover .ob-ic { transform: none; }
}
/* procent ciemniejszy, żeby był czytelny */
.ob-pct { color: var(--text-secondary); }

/* hover kafelków tematów jak kafelki ABCD w lekcji: fioletowa ramka i nazwa, lekkie uniesienie, bez tła */
@media (hover: hover) {
  .ob-grid .ob-opt:not(.selected):hover {
    background: var(--bg-elevated); border-color: var(--primary);
  }
  .ob-grid .ob-opt:not(.selected):hover .ob-bar { background: var(--bg-soft); }
  [data-theme="dark"] .ob-grid .ob-opt:not(.selected):hover .ob-bar { background: var(--border); }
}

/* zaznaczenie jak odpowiedź ABCD w lekcji: jasnofioletowe tło, fioletowa ramka, tekst i cień — bez wypełniania całego kafelka */
.ob-opt.selected,
[data-theme="dark"] .ob-opt.selected { border-color: var(--primary);
}
@media (hover: hover) { .ob-opt.selected:hover { border-color: var(--primary); } }
.ob-opt.selected .ob-txt small,
[data-theme="dark"] .ob-opt.selected .ob-txt small { color: var(--text-muted); }
.ob-opt.selected .ob-pct, [data-theme="dark"] .ob-opt.selected .ob-pct { color: var(--primary); }
/* ikona: w wierszach poziomów wypełniony kwadrat (jak litera ABCD), w kafelkach tematów fioletowa ikona */
.ob-opt.selected .ob-ic { background: var(--primary); color: #fff; }
[data-theme="dark"] .ob-opt.selected .ob-ic { color: #191925; }
.ob-grid .ob-opt.selected .ob-ic, [data-theme="dark"] .ob-grid .ob-opt.selected .ob-ic { background: none; color: var(--primary); }
.ob-opt.selected .ob-bar, [data-theme="dark"] .ob-opt.selected .ob-bar { background: var(--bg-elevated); }
/* tryb ciemny: tor paska po zaznaczeniu zostaje taki sam jak przed (nie zlewa się z kafelkiem) */
[data-theme="dark"] .ob-opt.selected .ob-bar { background: var(--border); }
.ob-opt.selected .ob-bar i, [data-theme="dark"] .ob-opt.selected .ob-bar i { background: var(--primary); }
.ob-levels .ob-txt small { display: block; }
.ob-levels .ob-side { width: auto; flex-direction: column; gap: .4rem; padding-top: .7rem; }
/* telefon: poziomy znów jako wiersze (ikona z lewej), żeby nie przewijać */
@media (max-width: 640px) {
  .ob-grid.ob-levels { flex-direction: column; flex-wrap: nowrap; }
  .ob-levels .ob-opt { flex-direction: row; text-align: left; }
  .ob-levels .ob-ic { width: 40px; }
  .ob-levels .ob-txt { flex: 1; align-items: flex-start; }
  .ob-levels .ob-txt small { display: none; }
  .ob-levels .ob-side { margin-top: 0; padding-top: 0; flex-direction: row; }
}
@media (max-width: 640px) { .ob-grid.ob-levels .ob-txt { width: auto; flex: 1 1 auto; min-width: 0; } .ob-grid.ob-levels .ob-side { flex-shrink: 0; } }

/* poziomy: mniejsze karty, ten sam styl i kolor ikon co kafelki tematów, bez dopisków */
.ob-grid.ob-levels { gap: .9rem; }
.ob-levels .ob-txt small { font-size: .8rem; }
.ob-levels .ob-opt { width: 226px; }
@media (max-width: 760px) { .ob-levels .ob-opt { width: calc(33.333% - .6rem); } }
@media (max-width: 640px) {
  .ob-grid.ob-levels .ob-opt { width: 100%; gap: .75rem; }
  .ob-grid.ob-levels .ob-ic { width: 40px; }
}

/* poziomy: wyższe karty (bardziej „kafelek” niż pasek) */
.ob-levels .ob-opt { min-height: 206px; padding: 1.8rem 1rem 1.6rem; gap: .55rem; justify-content: center; }
.ob-levels .ob-ic { height: 62px; font-size: 2.5rem; margin-bottom: .35rem; }
.ob-levels .ob-txt b { font-size: 1.08rem; }
@media (max-width: 640px) {
  .ob-grid.ob-levels .ob-opt { min-height: 72px; padding: .85rem .9rem; justify-content: flex-start; }
  .ob-grid.ob-levels .ob-ic { height: 40px; font-size: 1.5rem; margin-bottom: 0; }
  .ob-grid.ob-levels .ob-txt b { font-size: 1rem; }
}

/* ===== START — elementy ze strony głównej: napis-pigułka, wyróżnione słowo, miękka plama, pływające monety ===== */
.ob-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: .4rem 0 1.6rem; }
.ob-head .ob-title { margin: 0; }
[data-theme="dark"] .ob-title .lp-hl { color: var(--primary-ink); }
.ob-body.q-enter .ob-head { animation: qSlideIn .45s cubic-bezier(.22,1,.36,1) both; }
.ob-area { position: relative; }
.ob-area .ob-opts { position: relative; z-index: 1; }
.ob-stage { position: absolute; inset: -30px -40px; z-index: 0; pointer-events: none; display: none; }
/* tytuł zawsze nad plamą tła i trochę wyżej od kart (ogonek „ę” nie chowa się pod plamą) */
.ob-head { position: relative; z-index: 2; }
.ob-step1 .ob-head { margin-bottom: 2.4rem; }
@media (max-width: 640px) { .ob-step1 .ob-head { margin-bottom: 1.2rem; } }
/* dwa małe klocki przy plamie (mniejsze niż na stronie głównej) */

/* tematy: delikatna kratka jak w zeszycie za kafelkami (znika ku brzegom) */
.ob-paper { display: none; }
.ob-wide:not(.ob-step1) .ob-stage { display: block; inset: -40px -70px; animation: fadeUp .5s ease both; }
.ob-wide:not(.ob-step1) .ob-paper {
  display: block; position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent) 1px, transparent 1px);
  background-size: 26px 26px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
}
[data-theme="dark"] .ob-wide:not(.ob-step1) .ob-paper {
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent) 1px, transparent 1px);
}
@media (max-width: 640px) { .ob-wide:not(.ob-step1) .ob-stage { display: block !important; inset: -20px -16px; } }
/* zaznaczony kafelek nieprzezroczysty (w trybie ciemnym tło jest półprzezroczyste i prześwitywała kratka) */
.ob-opt.selected, [data-theme="dark"] .ob-opt.selected { background: linear-gradient(var(--primary-tint), var(--primary-tint)), var(--bg-elevated); }

/* podpis poziomu (do czego się przygotowujesz) — może zająć dwie linijki; widoczny też na telefonie */
.ob-levels .ob-txt small { line-height: 1.35; margin-top: .2rem; max-width: 190px; }
@media (max-width: 640px) {
  .ob-grid.ob-levels .ob-txt small { display: block; max-width: none; font-size: .8rem; margin-top: .1rem; }
}

/* górny pasek i dolny przycisk dokładnie tam, gdzie w lekcji (ta sama szerokość 880 px, ten sam rozmiar przycisku) */
.ob .lesson-top, .ob.ob-wide .lesson-top { max-width: 880px; }
.ob .lesson-foot-inner, .ob.ob-wide .lesson-foot-inner { max-width: 880px; }
.ob .lesson-foot .btn { min-width: 0; }
.ob-ghost { visibility: hidden; }
@media (min-width: 769px) { .ob .lesson-foot .btn { min-width: 140px; min-height: 46px; } }

/* miejsce na pasek przewijania zawsze zarezerwowane — górny pasek i przyciski nie przesuwają się
   między ekranami, na których da się przewijać (tematy, lekcja z rozwiązaniem) i tymi, na których nie */
html { scrollbar-gutter: stable; }

/* ===== START — zapowiedź nowego tematu (po „Zaczynamy") =====
   ekran zasłania się tłem strony, tutor wskakuje (jak na stronie głównej), dymek „pisze",
   pod spodem temat i pasek ładowania; potem przejście do pierwszego zadania */
.ob-intro {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: var(--bg); opacity: 0; transition: opacity .3s ease; cursor: pointer;
}
.ob-intro[hidden] { display: none; }
.ob-intro.show { opacity: 1; }
.ob-intro-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ob-intro-who { position: relative; }
.ob-intro-tutor {
  transform: rotate(-6deg) scale(.3); opacity: 0;
}
.ob-intro.show .ob-intro-tutor { animation: obPop .6s .1s cubic-bezier(.34,1.56,.64,1) forwards, obBob 2.4s .8s ease-in-out infinite; }
@keyframes obPop { to { transform: rotate(-6deg) scale(1); opacity: 1; } }
@keyframes obBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* mruganie i „mówienie” */
.ob-intro .ob-eye { transform-box: fill-box; transform-origin: center; animation: obBlink 2.6s 1s infinite; }
@keyframes obBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.ob-intro-say { left: 104px; bottom: 112px; white-space: nowrap;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong);
  opacity: 0; transform: translateY(8px) scale(.9);
}
.ob-intro.show .ob-intro-say { animation: obSay .35s .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes obSay { to { opacity: 1; transform: none; } }
.ob-intro-topic {
  display: flex; align-items: center; opacity: 0;
  font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 900; letter-spacing: -.02em; color: var(--text);
}
.ob-intro-topic i { color: var(--primary); }
.ob-intro.show .ob-intro-topic { animation: qSlideIn .45s .55s cubic-bezier(.22,1,.36,1) both; }
.ob-intro-load { border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
[data-theme="dark"] .ob-intro-load { background: var(--border); }
.ob-intro-load i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); }
@keyframes obLoad { to { width: 100%; } }
[data-theme="dark"] .ob-intro-tutor { background: var(--primary-deep); border: 2px solid var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .ob-intro *, .ob-intro .ob-eye, .ob-intro .ob-mouth { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ob-intro-tutor { transform: rotate(-6deg) !important; }
  .ob-intro-load i { width: 100%; }
}

/* zapowiedź — wariant „tutor mówi”: mniejsza, bez liczby zadań */
.ob-intro-who { display: flex; align-items: flex-end; gap: .7rem; margin-bottom: 1.1rem; }
.ob-intro-tutor { width: 84px; height: 84px; padding: 11px; border-radius: 24px; box-shadow: 5px 5px 0 var(--accent-bright); }
.ob-intro-say {
  position: static; order: 2; margin-bottom: 58px; min-height: 0; min-width: 0;
  padding: .5rem .85rem; border-radius: 14px 14px 14px 4px; box-shadow: 0 3px 0 var(--border-strong);
  transform-origin: bottom left;
}
.ob-intro-topic { font-size: 1.5rem; gap: .5rem; }
.ob-intro-topic i { font-size: 1.2rem; }
.ob-intro-load { width: 170px; height: 8px; margin-top: 1.1rem; }
@media (max-width: 640px) {
  .ob-intro-tutor { width: 72px; height: 72px; padding: 9px; border-radius: 21px; box-shadow: 4px 4px 0 var(--accent-bright); }
  .ob-intro-say { left: auto; bottom: auto; translate: none; margin-bottom: 48px; transform-origin: bottom left; }
  .ob-intro-topic { font-size: 1.35rem; }
  .ob-intro-load { width: 150px; }
}

/* zapowiedź: tutor bez uśmiechu — usta „mówią” tylko w trakcie pisania; tekst pisany z kursorem */
.ob-intro .ob-mouth { animation: none; transform-box: fill-box; transform-origin: center; }
.ob-intro.talking .ob-mouth { animation: obTalk2 .19s ease-in-out infinite alternate; }
@keyframes obTalk2 { to { transform: scaleY(2.4); } }
.ob-intro-say { display: grid; }
.ob-type-ghost, .ob-type { grid-area: 1 / 1; }
.ob-type-ghost { visibility: hidden; padding-right: 3px; }
.ob-type { white-space: nowrap; }
.ob-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px;
  background: var(--primary); animation: obCaret .8s steps(1) infinite;
}
.ob-intro.typed .ob-caret { animation: obCaret .8s steps(1) 2 forwards; }
@keyframes obCaret { 50% { opacity: 0; } }
/* pasek ładowania rusza po napisaniu tekstu */
@media (prefers-reduced-motion: reduce) { .ob-caret { display: none; } }
.ob-type { justify-self: start; text-align: left; }
.ob-intro.show .ob-intro-load i { animation: obLoad 1.2s 1s cubic-bezier(.45,0,.2,1) forwards; }
/* po napisaniu tekstu kursor znika */
.ob-intro.typed .ob-caret { display: none; }
/* tekst w dymku zapowiedzi — ta sama czcionka i wygląd co treść zadań w lekcji (.lesson-bubble) */
.ob-intro-say { font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 500; font-size: 1.12rem; line-height: 1.65; color: var(--text); letter-spacing: normal; }
@media (max-width: 768px) { .ob-intro-say { font-size: 1.07rem; } }

/* ============================================================
   ŚCIEŻKA — droga między monetami, bieżąca moneta, tutor, prawa kolumna
   (proste elementy, bez przekrzywień; te same tokeny co strona główna)
   ============================================================ */
/* droga: linia od środka do środka monet, rysowana w path.html (drawRoad) */
.ch-road { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.ch-road path { fill: none; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.ch-road-base { stroke: var(--border); }
.ch-road-fill { stroke: var(--ok); opacity: .55; }
[data-theme="dark"] .ch-road-fill { opacity: .45; }
/* podpis pod monetą: zawsze ten sam delikatnie szary kolor, w „pigułce" w kolorze tła — linia chowa się pod nim */
.ch-nodes .pnode-label {
  bottom: -35px; padding: .1rem .55rem; border-radius: 999px; line-height: 1.45;
  background: var(--bg); color: var(--text-secondary);
}

/* stan rozdziału („Ukończono") obok licznika */
.chap-side { flex-direction: row; align-items: center; gap: .75rem; }
.chap-side .chap-st { margin-top: 0; align-self: center; }
.chap-side b { white-space: nowrap; }
.is-locked .chap-side b small { font-size: .78rem; }
@media (max-width: 560px) {
  .chap-side { flex-direction: column-reverse; align-items: flex-end; gap: .35rem; }
  .chap-side .chap-st { font-size: .68rem; padding: .18rem .5rem; }
}

/* numer rozdziału prosto (bez przekrzywienia), jak na makiecie */
.chap:not(.goal) .chap-badge { transform: none; }

/* ============================================================
   ŚCIEŻKA — UKŁAD: górny pasek · ścieżka na środku · prawa kolumna (path.html)
   prawa: konto, misje, do poprawy, tematy z paskiem postępu, Plus
   telefon/tablet: jedna kolumna + dolny pasek zakładek
   ============================================================ */
.pv-page { background: var(--bg); }
.pv-tabs, .pv-strip { display: none; }

/* --- górny pasek: logo, statystyki, tryb ciemny --- */
.pv-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 64px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(1.5rem, calc((100% - 1180px) / 2 + 1.5rem));
  border-bottom: 1.5px solid var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px);
}
/* statystyki w górnym pasku — patrz „GÓRNY PASEK ŚCIEŻKI” na końcu pliku */
.pv-theme { width: 38px; height: 38px; margin: 0; }
.pv-top-acc {
  display: none; width: 38px; height: 38px; border-radius: 12px; align-items: center; justify-content: center; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--bg-elevated); color: var(--primary); box-shadow: 0 3px 0 var(--border-strong);
}

/* --- dwie kolumny: ścieżka + prawa kolumna --- */
.pv-shell { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; min-height: 100vh; }
.pv-main { min-width: 0; padding: calc(64px + 1.5rem) 0 4rem; }
.pv-page .chap-card { top: calc(64px + 1rem); }
/* zablokowany rozdział nie jest przyklejany (position: relative) — bez przesunięcia */
.pv-page .is-locked .chap-card { top: 0; }
.pv-right {
  position: sticky; top: 64px; align-self: start; margin-top: 64px; box-sizing: border-box; min-width: 0;
  max-height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: none;
  padding: 1.25rem .3rem 1.25rem; display: flex; flex-direction: column; gap: .9rem;
}
.pv-right::-webkit-scrollbar { display: none; }

/* paski postępu, licznik na zakładce */
.pv-bar { height: 9px; margin-top: .6rem; border-radius: 5px; background: var(--bg-soft); overflow: hidden; }
[data-theme="dark"] .pv-bar { background: var(--border); }
.pv-bar i { display: block; height: 100%; border-radius: 5px; background: var(--primary); }
.pv-fix-go { color: var(--text-muted); font-size: .72rem; }

/* komunikat „Już wkrótce" */
.pv-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: .75rem 1.2rem; border-radius: 14px; background: var(--text); color: var(--bg); font-weight: 600; font-size: .9rem;
  box-shadow: var(--shadow-lift); transition: opacity .2s, transform .2s; white-space: nowrap;
}
.pv-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- telefon / tablet: jedna kolumna, dolne zakładki --- */
@media (max-width: 1024px) {
  .pv-top { height: 60px; padding: 0 1rem; }
  .pv-shell { display: block; padding: 0; }
  .pv-main { max-width: 640px; margin: 0 auto; padding: calc(60px + 1rem) 1rem calc(84px + 1.5rem); box-sizing: border-box; }
  .pv-strip { display: block; margin-bottom: 1.1rem; }
  .pv-strip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .pv-strip-row b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.05rem; }
  .pv-strip-row small { font-size: .78rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
  .pv-strip .pv-bar { margin-top: .45rem; height: 8px; }
  .pv-page .chap-card { top: calc(60px + .6rem); }
  .pv-page .is-locked .chap-card { top: 0; }
  .pv-right { display: none; }        /* telefon / tablet: temat, cel dnia i konto tylko na komputerze */
  .pv-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .4rem .5rem calc(.45rem + env(safe-area-inset-bottom)); background: var(--bg-elevated); border-top: 1.5px solid var(--border);
  }
  .pv-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 54px;
    border: none; border-radius: 12px; background: none; cursor: pointer; text-decoration: none;
    color: var(--text-secondary); font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; font-size: .7rem;
  }
  .pv-tab i { font-size: 1.15rem; }
  .pv-tab.active { background: var(--primary-tint); color: var(--primary); }
  .pv-toast { bottom: calc(84px + 1rem); }
}
@media (max-width: 560px) {
  .pv-logo-txt { display: none; }
}

/* ===== ENERGIA (zamiast serc) — kolor bazowy (niebiesko-fioletowy) ===== */
.lesson-energy, .lesson-energy i { color: var(--primary); }
.lp-ph-heart.lp-ph-energy, .lp-ph-energy i { color: var(--primary); }
/* okno „Skończyła ci się energia": ikona energii i stan „0/3" + postęp do następnego */
.en-count { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.en-count i { font-size: 2.2rem; color: var(--border-strong); }
.en-count b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 2rem; line-height: 1; color: var(--text-secondary); }
.hearts-box .en-next { margin-bottom: .55rem; color: var(--text-secondary); font-size: .95rem; }
.en-next b { color: var(--text); font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; }
.en-prog { height: 8px; max-width: 240px; margin: 0 auto 1rem; border-radius: 5px; background: var(--bg-soft); overflow: hidden; }
[data-theme="dark"] .en-prog { background: var(--border); }
.en-prog i { display: block; height: 100%; border-radius: 5px; background: var(--primary); transition: width .4s ease; }
.hearts-box .en-note { font-size: .82rem; color: var(--text-muted); margin-bottom: 1.4rem; }

/* ============================================================
   GÓRNY PASEK ŚCIEŻKI: zakładki + seria, energia, rozwiązane (path.html)
   ============================================================ */
.pv-top { gap: 1.25rem; }
.pv-logo { flex-shrink: 0; }

/* zakładki — jak linki w menu strony głównej, aktywna podświetlona */
.pv-nav { display: flex; align-items: center; gap: .25rem; margin-right: auto; margin-left: 1rem; }
.pv-nav-a {
  position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 10px;
  border: none; background: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  color: var(--text-secondary); font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 600; font-size: .92rem; transition: color .15s, background .15s;
}
.pv-nav-a i { font-size: .9rem; }
.pv-nav-a:hover { color: var(--primary); background: var(--primary-tint); }
.pv-nav-a.active { color: var(--primary); background: var(--primary-tint); }

/* statystyki: „klocki” jak przyciski na stronie */
.pv-stats { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.pv-pill {
  display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .8rem; box-sizing: border-box; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg-elevated); box-shadow: 0 3px 0 var(--border);
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; color: var(--text); white-space: nowrap;
}
.pv-pill i { font-size: .95rem; }
.pv-pill b { font-size: 1.02rem; font-weight: 700; line-height: 1; }
.pv-pill-l { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.pv-pill.st-streak i { color: #EA580C; }
.pv-pill.st-energy i { color: var(--primary); }
.pv-pill.st-solved i { color: var(--ok); }
[data-theme="dark"] .pv-pill.st-streak i { color: #FB923C; }
button.pv-pill { cursor: pointer; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; transition: border-color .15s, transform .1s, box-shadow .1s; }
button.pv-pill { color: var(--text); }
.pv-pill.st-energy.is-empty i, .pv-pill.st-energy.is-empty b { color: var(--text-muted); }
.pv-top .pv-theme, .pv-top .pv-top-acc { border: 1.5px solid var(--border); box-shadow: 0 3px 0 var(--border); border-radius: 12px; }
.pv-top .pv-top-acc { color: var(--primary); }

/* okienko energii */
/* okienka nad liczbami: po najechaniu (komputer) albo dotknięciu (telefon) */
.pv-hov { position: relative; }
.pv-pop {
  position: absolute; top: calc(100% + 10px); left: 50%; margin-left: -135px; z-index: 70; width: 270px; box-sizing: border-box; padding: 1rem 1.1rem;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 18px; box-shadow: 0 4px 0 var(--border-strong), var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none;
}
/* niewidzialny mostek, żeby okienko nie znikało, gdy myszka przechodzi z liczby na okienko */
.pv-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@media (hover: hover) { .pv-hov:hover .pv-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } }
.pv-hov:focus-within .pv-pop, .pv-hov.open .pv-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@media (hover: hover) { .pv-hov:hover .pv-pill { border-color: var(--border-strong); } }
.pv-pop-h { display: flex; align-items: center; gap: .5rem; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; }
.pv-pop-h i { color: var(--primary); }
#streakPop .pv-pop-h i, #streakPop .pv-pop-h span { color: #EA580C; }
[data-theme="dark"] #streakPop .pv-pop-h i, [data-theme="dark"] #streakPop .pv-pop-h span { color: #FB923C; }
#solvedPop .pv-pop-h i { color: var(--ok); }
#solvedPop .pv-pop-h span { color: var(--text); }
/* seria: 7 dni z kropkami */
.pv-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; margin: .8rem 0 .7rem; }
.pv-day { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.pv-dot {
  width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border: 2px solid var(--border); font-style: normal; font-size: .7rem;
}
[data-theme="dark"] .pv-dot { background: var(--border); border-color: var(--border-strong); }
.pv-day.on .pv-dot { background: #F97316; border-color: #EA580C; color: #fff; }
.pv-day.today:not(.on) .pv-dot { border-style: dashed; border-color: #F97316; background: transparent; }
.pv-day small { font-size: .68rem; font-weight: 600; color: var(--text-muted); }
.pv-day.today small { color: var(--text); font-weight: 700; }
/* rozwiązane: lista opis — liczba */
.pv-poplist { margin: .6rem 0 .1rem; }
.pv-poplist > div { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--border); font-size: .84rem; }
.pv-poplist > div:first-child { border-top: none; }
.pv-poplist dt { color: var(--text-secondary); }
.pv-poplist dd { margin: 0; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 700; color: var(--text); }
.pv-pop-h span { margin-left: auto; font-weight: 700; color: var(--primary); }
.pv-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .75rem 0 .6rem; }
.pv-cell { height: 10px; border-radius: 5px; background: var(--bg-soft); overflow: hidden; }
[data-theme="dark"] .pv-cell { background: var(--border); }
.pv-cell i { display: block; height: 100%; border-radius: 5px; background: var(--primary); opacity: .35; }
.pv-cell.on i { opacity: 1; }
.pv-pop-t[hidden] { display: none; }
.pv-pop-t { font-size: .86rem; color: var(--text-secondary); }
.pv-pop-t b { color: var(--text); font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; }
.pv-pop-n { margin-top: .35rem; font-size: .76rem; color: var(--text-muted); line-height: 1.45; }

/* ============================================================
   PRAWA KOLUMNA ŚCIEŻKI: osobne karty w stylu kart rozdziałów
   ============================================================ */
.pv-card {
  position: relative; box-sizing: border-box; padding: 1.1rem 1.15rem;
  background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 18px; box-shadow: 0 4px 0 var(--border);
}
.pv-card-btn { width: 100%; margin-top: 1rem; padding: .7rem 1rem; font-size: .8rem; box-sizing: border-box; }

/* 1. temat */
.pv-topic-row { display: flex; align-items: center; gap: .85rem; }
.pv-topic-ic {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 1.1rem; transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--accent-bright);
}
[data-theme="dark"] .pv-topic-ic { color: #191925; }
.pv-topic-t { display: flex; flex-direction: column; min-width: 0; }
.pv-topic-t b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.12rem; line-height: 1.2; }
.pv-topic-t small { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.pv-topic .pv-bar { margin-top: 1rem; height: 10px; }
.pv-topic .pv-bar i { transition: width .5s ease; }
.pv-topic-foot { margin-top: .5rem; text-align: center; }
.pv-topic-foot b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .95rem; color: var(--primary); }
.pv-mission-n { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.05rem; color: var(--text); }
.pv-mission-row { display: flex; align-items: flex-start; gap: .75rem; }
/* ikona na wysokości dwóch linijek: „Cel dnia” + tytuł (kropki pod spodem) */
.pv-mission-ic { margin-top: 0; }
.pv-mission-n { align-self: center; }
.pv-mission-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bright); color: #422006; font-size: .85rem; transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--primary);
}
.pv-mission-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-mission-t b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .92rem; line-height: 1.3; }
.pv-mission-k { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); line-height: 1.3; }
.pv-mission-t small[hidden] { display: none; }
.pv-mission-coins { display: flex; gap: .3rem; margin-top: .4rem; }
.pv-mcoin {
  width: 28px; height: 24px; margin-bottom: 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .66rem;
  background: var(--bg-soft); color: var(--text-muted); box-shadow: 0 3px 0 var(--border-strong);
}
[data-theme="dark"] .pv-mcoin { background: var(--border); }
.pv-mcoin.on { background: var(--ok); color: var(--ok-ink); box-shadow: 0 3px 0 var(--ok-deep); }
.pv-mcoin.next { background: var(--primary); color: #fff; box-shadow: 0 3px 0 var(--primary-ink); }
[data-theme="dark"] .pv-mcoin.next { color: #191925; }

/* 3. konto + pakiet */
.pv-acc-top { display: flex; align-items: center; gap: .8rem; }
.pv-avatar {
  width: 44px; height: 44px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: var(--primary-tint); color: var(--primary); border: 2px dashed var(--primary);
}
.pv-acc-txt { display: flex; flex-direction: column; min-width: 0; }
.pv-acc-txt b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.02rem; }
.pv-acc-txt small { font-size: .78rem; color: var(--text-secondary); line-height: 1.4; }
.pv-acc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }
.pv-acc .btn { width: 100%; padding: .65rem .5rem; font-size: .74rem; }
.pv-plan {
  display: flex; align-items: center; gap: .75rem; width: 100%; margin-top: 1rem; padding: .85rem 0 0;
  border: none; border-top: 1.5px solid var(--border); background: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--text);
}
.pv-plan-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent); font-size: .85rem;
}
.pv-plan-t { flex: 1; display: flex; flex-direction: column; }
.pv-plan-t b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .92rem; }
.pv-plan-t small { font-size: .76rem; color: var(--text-muted); }
.pv-plan:hover .pv-plan-t small { color: var(--primary); }

/* --- średnie ekrany: bez podpisów przy liczbach, żeby wszystko się zmieściło --- */
@media (max-width: 1240px) {
  .pv-pill-l { display: none; }
}
/* --- telefon / tablet: zakładki na dole, w górnym pasku same liczby --- */
@media (max-width: 1024px) {
  .pv-nav { display: none; }
  .pv-top { gap: .6rem; }
  .pv-logo { margin-right: auto; }
  .pv-stats { gap: .4rem; }
  .pv-pill { height: 36px; padding: 0 .6rem; gap: .3rem; }
  .pv-top .pv-theme, .pv-top .pv-top-acc { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .pv-pill { padding: 0 .5rem; }
}

/* telefon: okienka nad liczbami na całą szerokość ekranu, pod górnym paskiem */
@media (max-width: 560px) {
  .pv-hov { position: static; }
  .pv-pop { position: fixed; top: 68px; left: 16px; right: 16px; width: auto; margin-left: 0; }
  .pv-pop::before { display: none; }
}

/* ścieżka: zablokowany rozdział — kłódka zamiast numeru i informacja, kiedy się odblokuje */
.chap:not(.goal) .chap-badge.chap-lock {
  background: var(--bg-soft); color: var(--text-muted); border: 1.5px dashed var(--border-strong); box-shadow: none; transform: none; font-size: 1rem;
}
[data-theme="dark"] .chap:not(.goal) .chap-badge.chap-lock { background: var(--bg-elevated); color: var(--text-muted); }
.chap-unlock { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.chap-unlock i { font-size: .68rem; }

/* lekcja: „Zobacz odpowiedź" po użyciu jest nieaktywny (nie da się ukryć odpowiedzi) */
.feedback #btnSolToggle:disabled, #btnReveal:disabled {
  background: var(--bg-soft); color: var(--text-muted); box-shadow: 0 3px 0 var(--border); cursor: default; transform: none;
}
[data-theme="dark"] .feedback #btnSolToggle:disabled, [data-theme="dark"] #btnReveal:disabled { background: var(--bg-elevated); }

/* lekcja: kafelki ABCD stoją w miejscu — bez unoszenia po najechaniu i bez wciskania przy kliknięciu */
.ans-card:hover:not(:disabled), .ans-card:active:not(:disabled) { transform: none; box-shadow: 0 3px 0 var(--border-strong); }
.ans-card.selected:hover:not(:disabled), .ans-card.selected:active:not(:disabled) { box-shadow: 0 3px 0 var(--primary); }

/* lekcja: przełącznik trybu jasny / ciemny w górnym pasku — spokojny, jak przycisk wyjścia */
.lesson-theme {
  width: 38px; height: 38px; margin-left: -.35rem; border-radius: 10px; border: none; background: none; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1rem; transition: color .2s, background .2s;
}
.lesson-theme:hover { color: var(--primary); background: var(--primary-tint); }

/* ============================================================
   STRONA GŁÓWNA — TRYB CIEMNY (index.html)
   żywszy fiolet zamiast „wyblakłego”, jednolite tła pod ilustracjami (bez brązowych/oliwkowych plam),
   białe nagłówki z fioletowym wyróżnieniem, mocniejsza karta CTA
   ============================================================ */
[data-theme="dark"] .lp-page, [data-theme="dark"] .ob-page, [data-theme="dark"] .pv-page, [data-theme="dark"] .ln-page {
  /* jaśniejszy granat niż domyślny tryb ciemny (#0E0F1A) — mniej „czarno” */
  --bg: #1C1F33; --bg-elevated: #262A42; --bg-soft: #21253B;
  --border: #353A58; --border-strong: #454B6D;
  --text-secondary: #B3B5C6; --text-muted: #7A7D94;
  --lp-brand: #6C63F5;        /* nasycony fiolet — tło maskotki i przycisków */
  --lp-brand-edge: #3F38B8;   /* spód „klocka” */
  --lp-glow: rgba(124,116,245,.14);
}
/* maskotka: pełny fiolet z bursztynowym cieniem, jak w trybie jasnym */
[data-theme="dark"] .lp-page .lp-tutor,
[data-theme="dark"] .lp-page .lp-cta-tutor,
[data-theme="dark"] .lp-page .lp-ph-tutor { background: var(--lp-brand); border: none; }
[data-theme="dark"] .lp-page .lp-cta-tutor { border: 4px solid var(--bg); }
/* główne przyciski: nasycony fiolet z białym napisem */
[data-theme="dark"] .lp-page .btn-primary { background: var(--lp-brand); color: #fff; box-shadow: 0 4px 0 var(--lp-brand-edge); }
[data-theme="dark"] .lp-page .btn-primary:hover { box-shadow: 0 2px 0 var(--lp-brand-edge); }
[data-theme="dark"] .lp-page .nav-cta { background: var(--lp-brand) !important; color: #fff !important; box-shadow: 0 4px 0 var(--lp-brand-edge); }
[data-theme="dark"] .lp-page .nav-cta:hover { box-shadow: 0 2px 0 var(--lp-brand-edge); }
[data-theme="dark"] .lp-page .nav-cta:active { box-shadow: 0 0 0 var(--lp-brand-edge); }
/* tła pod ilustracjami: jedna, delikatna fioletowa poświata zamiast ciepłych plam */
[data-theme="dark"] .lp-page .lp-blob,
[data-theme="dark"] .lp-page .lp-stage { background: var(--lp-glow); }
/* nagłówki sekcji: białe, wyróżnienie fioletowe */
[data-theme="dark"] .lp-page .lp-sec-text h2 { color: var(--text); }
[data-theme="dark"] .lp-page .lp-sec-text h2 span { color: var(--primary-ink); }
/* CTA: głęboki fiolet z gradientem zamiast płaskiego granatu z ramką */
[data-theme="dark"] .lp-page .lp-cta {
  background: linear-gradient(135deg, #3E37B0 0%, #28236E 100%); border: none; box-shadow: 0 7px 0 #0B0A1F;
}
[data-theme="dark"] .lp-page .lp-cta p { color: rgba(255,255,255,.78); }
/* telefon: ramka w kolorze marki */
[data-theme="dark"] .lp-page .lp-phone { border-color: #34307A; }
[data-theme="dark"] .lp-page .navbar { background: rgba(28,31,51,.9); }
[data-theme="dark"] .lp-page .logo-mark { background: var(--lp-brand); color: #fff; }

/* ===== WYBÓR POZIOMU I TEMATU (start.html) — ten sam jaśniejszy tryb ciemny co strona główna ===== */
[data-theme="dark"] .ob-page { background: var(--bg); }
[data-theme="dark"] .ob-page .btn-primary { background: var(--lp-brand); color: #fff; box-shadow: 0 4px 0 var(--lp-brand-edge); }
[data-theme="dark"] .ob-page .btn-primary:hover { box-shadow: 0 2px 0 var(--lp-brand-edge); }
[data-theme="dark"] .ob-page .btn-primary:disabled { background: var(--bg-soft); color: var(--text-muted); box-shadow: 0 4px 0 var(--border); }
[data-theme="dark"] .ob-page .ob-intro-tutor { background: var(--lp-brand); border: none; }

/* ===== ŚCIEŻKA (path.html) — ten sam jaśniejszy tryb ciemny ===== */
[data-theme="dark"] .pv-page .btn-primary { background: var(--lp-brand); color: #fff; box-shadow: 0 4px 0 var(--lp-brand-edge); }
[data-theme="dark"] .pv-page .btn-primary:hover { box-shadow: 0 2px 0 var(--lp-brand-edge); }
[data-theme="dark"] .pv-page .logo-mark { background: var(--lp-brand); color: #fff; }
/* odznaki z numerem rozdziału i ikona tematu: nasycony fiolet z białym napisem */
[data-theme="dark"] .pv-page .chap:not(.goal) .chap-badge:not(.chap-lock),
[data-theme="dark"] .pv-page .pv-topic-ic { background: var(--lp-brand); color: #fff; }
/* bieżąca moneta na ścieżce: nasycony fiolet z białą gwiazdką */
[data-theme="dark"] .pv-page .ch-nodes .pnode.current { --face: var(--lp-brand); --edge: var(--lp-brand-edge); color: #fff; }

/* ===== TRYB CIEMNY: zieleń i czerwień głębsze, mniej „neonowe” (białe znaki ✓ / ✗ na monetach i kafelkach) ===== */
[data-theme="dark"] {
  --ok: #22C55E; --ok-deep: #15803D; --ok-ink: #ffffff;
  --right: #22C55E; --right-deep: #15803D; --right-tint: rgba(34,197,94,.14); --right-ink: #6EE7A0;
  --right-fill: #22C55E; --right-on: #ffffff;
  --wrong: #EF4444; --wrong-deep: #B91C1C; --wrong-tint: rgba(239,68,68,.14); --wrong-ink: #FCA5A5;
  --wrong-fill: #EF4444; --wrong-on: #ffffff;
  --success: #22C55E; --success-tint: rgba(34,197,94,.14);
  --danger: #EF4444; --danger-tint: rgba(239,68,68,.14);
}
[data-theme="dark"] .ch-nodes .pnode.wrong { color: #fff; }

/* ===== LEKCJA (learn.html) — ten sam jaśniejszy tryb ciemny ===== */
[data-theme="dark"] .ln-page { background: var(--bg); }
[data-theme="dark"] .ln-page .btn-primary { background: var(--lp-brand); color: #fff; box-shadow: 0 4px 0 var(--lp-brand-edge); }
[data-theme="dark"] .ln-page .btn-primary:hover { box-shadow: 0 2px 0 var(--lp-brand-edge); }
[data-theme="dark"] .ln-page .btn-primary:disabled { background: var(--bg-soft); color: var(--text-muted); box-shadow: 0 4px 0 var(--border); }
[data-theme="dark"] .ln-page .tutor { background: var(--lp-brand); border: none; }
[data-theme="dark"] .ln-page .ans-card.selected .ans-key { background: var(--lp-brand); border-color: var(--lp-brand); color: #fff; }
/* karta „Rozwiązanie krok po kroku" w trybie ciemnym: wyraźny fioletowy nagłówek, jaśniejszy tytuł, numery kroków w kolorze marki */
[data-theme="dark"] .ln-page .sol-head { background: rgba(108,99,245,.2); border-bottom-color: rgba(108,99,245,.35); }
[data-theme="dark"] .ln-page .sol-title { color: #C4C0FF; }
[data-theme="dark"] .ln-page .sol-avatar { background: var(--lp-brand); color: #fff; }
[data-theme="dark"] .ln-page .sol-num { border-color: #8F88FF; background: rgba(108,99,245,.18); color: #C4C0FF; }
[data-theme="dark"] .ln-page .solution { border-color: rgba(108,99,245,.35); box-shadow: 0 3px 0 rgba(108,99,245,.35); }

/* lekcja: treść odpowiedzi ABCD ma zawsze ten sam kolor — po najechaniu i po zaznaczeniu się nie zmienia
   (zmienia się tylko ramka, tło i kwadracik z literą) */
.ans-card:hover:not(:disabled), .ans-card.selected, .ans-card.selected:hover:not(:disabled) { color: var(--text); }

/* tryb ciemny: pasek wyniku (dobrze / źle / podgląd) jest nieprzezroczysty — przezroczysty kolor nakładamy na pełne tło strony,
   więc przewijane zadanie nie prześwituje spod paska */
[data-theme="dark"] .feedback.fb-ok  { background: linear-gradient(var(--right-tint), var(--right-tint)), var(--bg); }
[data-theme="dark"] .feedback.fb-bad { background: linear-gradient(var(--wrong-tint), var(--wrong-tint)), var(--bg); }
[data-theme="dark"] .feedback.fb-info { background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg); }

/* rozwiązanie krok po kroku: bez pionowego paska przewijania przy ułamkach
   (ułamki wystają kilka pikseli poza linijkę — dostają miejsce od dołu, a pion jest przycinany);
   poziome przewijanie zostaje tylko dla wzoru naprawdę szerszego niż ekran, z cienkim paskiem */
.sol-m { overflow-y: hidden; padding-top: .3rem; padding-bottom: .45rem; scrollbar-width: thin; }
.sol-t + .sol-m { padding-top: .3rem; }

/* ===== WYBÓR POZIOMU I TEMATU: kafelki zachowują się jak odpowiedzi ABCD w lekcji =====
   stoją w miejscu (bez unoszenia po najechaniu i bez wciskania), tekst ma zawsze ten sam kolor;
   po najechaniu i zaznaczeniu zmienia się tylko ramka, tło i ikona */
.ob-opt:hover, .ob-opt:active,
.ob-grid .ob-opt:not(.selected):hover, .ob-grid .ob-opt:not(.selected):active { transform: none; }
.ob-opt:hover:not(.selected), .ob-opt:active:not(.selected),
.ob-grid .ob-opt:not(.selected):hover, .ob-grid .ob-opt:not(.selected):active { box-shadow: 0 4px 0 var(--border-strong); color: var(--text); }
.ob-opt.selected, .ob-opt.selected:hover, .ob-opt.selected:active,
[data-theme="dark"] .ob-opt.selected { color: var(--text); box-shadow: 0 4px 0 var(--primary); transform: none; }

/* okienko serii: w pustym kółku wyblakły szary płomień, dziś (jeszcze bez nauki) — blady pomarańczowy */
.pv-day:not(.on) .pv-dot i { color: var(--text-muted); opacity: .7; }
.pv-day.today:not(.on) .pv-dot i { color: #F97316; opacity: .55; }

/* ============================================================
   TREŚĆ Z API: obrazki, ładowanie, błędy, Premium, zadanie otwarte
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* obrazek w treści: miejsce zarezerwowane z nazwy pliku (…_szer_wys.png), szkielet do czasu załadowania */
.zm-img {
  position: relative; display: block; width: 100%; margin: .75rem auto; border-radius: 10px; overflow: hidden;
  background: var(--bg-soft);
}
.zm-img img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.zm-img.is-loaded { background: none; }
.zm-img.is-loaded img { opacity: 1; }
.zm-img:not(.is-loaded):not([style*="aspect-ratio"]) { min-height: 140px; }
.zm-img:not(.is-loaded)::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--bg-elevated) 70%, transparent) 50%, transparent 80%);
  background-size: 200% 100%; animation: zmShimmer 1.2s linear infinite;
}
.zm-img.is-error::after { animation: none; background: none; content: '\f03e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1.6rem; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
@keyframes zmShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sol-m .zm-img { margin: .6rem auto; }   /* rysunek w kroku rozwiązania — wyśrodkowany, jak w treści zadania */


/* dymek w stanie ładowania / błędu / Premium */
.lesson-bubble.is-status { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.lesson-bubble.is-status b { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.1rem; }
.lesson-bubble.is-status > span:not(.ln-status-ic):not(.ln-skel) { color: var(--text-secondary); font-size: .95rem; line-height: 1.5; }
.ln-status-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--primary); font-size: 1.1rem; margin-bottom: .3rem; }
.ln-status-ic.is-premium { background: var(--accent-tint); color: var(--accent); }
.ln-skel { display: flex; flex-direction: column; gap: .6rem; width: 100%; padding: .2rem 0; }
.ln-skel i { display: block; height: 14px; border-radius: 7px; background: var(--bg-soft); animation: zmPulse 1.2s ease-in-out infinite; }
.ln-skel i:nth-child(1) { width: 85%; } .ln-skel i:nth-child(2) { width: 65%; } .ln-skel i:nth-child(3) { width: 40%; }
@keyframes zmPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .zm-img::after, .ln-skel i, .pv-skel span { animation: none !important; } }

/* zadanie otwarte (samoocena): bez kafelków ABCD */
body.is-text .answer-grid { display: none; }

/* rozwiązanie niedostępne (brak kroków / Premium) */
.sol-none .sol-num { font-size: .8rem; }
.sol-none .sol-t { font-weight: 600; color: var(--text-secondary); }

/* ścieżka: zadanie Premium bez dostępu — moneta z koroną */
.ch-nodes .pnode.locked.is-premium { cursor: pointer; color: var(--accent-bright); }
[data-theme="dark"] .ch-nodes .pnode.locked.is-premium { color: var(--accent); }

/* ścieżka: ładowanie i błąd */
.pv-loading { display: flex; flex-direction: column; gap: 1rem; }
.pv-loading p { text-align: center; color: var(--text-muted); font-weight: 600; font-size: .9rem; }
.pv-skel { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem; border: 1.5px solid var(--border); border-radius: 18px; background: var(--bg-elevated); box-shadow: 0 4px 0 var(--border); }
.pv-skel span { height: 12px; width: 30%; border-radius: 6px; background: var(--bg-soft); animation: zmPulse 1.2s ease-in-out infinite; }
.pv-skel span + span { height: 16px; width: 60%; }
.pv-error { text-align: center; padding: 2.5rem 1.5rem; border: 1.5px dashed var(--border-strong); border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.pv-error h3 { font-size: 1.2rem; }
.pv-error p { color: var(--text-secondary); font-size: .95rem; margin-bottom: .6rem; }
.pv-error-ic { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--primary); font-size: 1.35rem; }
body.is-text:not(.text-open) .lesson-foot-inner { justify-content: flex-end; }
/* zadanie otwarte na telefonie: „Nie wyszło” z podpisem (sama ikona byłaby niejasna), oba przyciski po równo */
@media (max-width: 768px) {
  body.is-text .lesson-foot-inner #btnReveal { flex: 1 1 0; }
  body.is-text .lesson-foot-inner #btnReveal span { display: inline; }
  body.is-text.text-open .lesson-foot-inner #btnCheck { flex: 1 1 0; }
}
.sol-m .center { display: block; text-align: center; }

/* ===== LEKCJA — zapowiedź nowego tematu (przeniesiona ze start.html) =====
   zasłona widoczna od pierwszej klatki (klasa ln-intro na <html> z krótkiego skryptu w <head>),
   pasek pokazuje prawdziwe ładowanie — szerokość ustawia JS, bez animacji z CSS */
.ln-page .ob-intro { display: none; }
html.ln-intro .ln-page .ob-intro { display: flex; opacity: 1; }
html.ln-intro .ln-page .ob-intro.is-leaving { opacity: 0; }
html.ln-intro body { overflow: hidden; }
.ln-page .ob-intro .ob-intro-load i { animation: none !important; width: 0; transition: width 1.8s cubic-bezier(.2,.7,.3,1); }
[data-theme="dark"] .ln-page .ob-intro-tutor { background: var(--lp-brand); border: none; }

/* lekcja: czekanie na treść — dymek ukryty, zanim przyjdzie treść albo (po 200 ms) szkielet */
.lesson-body.is-pending { visibility: hidden; }
/* treść w miejsce szkieletu: dymek stoi, dojeżdżają tylko odpowiedzi */
.lesson-body.q-fill .answer-grid { animation: qFadeDown .35s ease both; }
/* przejście do następnego rozdziału: ekran końcowy odjeżdża w górę */
.lesson-end.is-leaving { animation: qOutUp .3s ease forwards; }
/* pod zasłoną zapowiedzi zadanie jest ukryte (ładuje się, ale nie odgrywa animacji) — wjeżdża raz, gdy zasłona znika */
html.ln-intro:not(.ln-reveal) .lesson-body { visibility: hidden; }
.zm-nobr { white-space: nowrap; }   /* wzór + przylegający znak („$a<0$),”) nie rozdzielają się między liniami */
.sol-plain .sol-m { padding-top: 0; }   /* rozwiązanie bez kroków: sam tekst, bez numeru */
.solution.is-plain .sol-title-extra { display: none; }

/* ===== OKNO PREMIUM („To zadanie jest w Premium”) — ten sam wygląd co okno energii ===== */
.pm-box { display: flex; flex-direction: column; align-items: center; }
.pm-crown { width: 84px; height: 84px; border-radius: 24px; font-size: 2.2rem; margin-bottom: 1.3rem; }
.pm-box p { margin-bottom: .9rem; }
.pm-list { list-style: none; align-self: stretch; text-align: left; margin: 0 auto 1.5rem; max-width: 280px; display: flex; flex-direction: column; gap: .5rem; }
.pm-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--text); }
.pm-list i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; background: var(--accent-tint); color: var(--accent); }
.hearts-box .hb-later { align-self: stretch; }
/* ścieżka: następne w kolejce zadanie Premium — złota moneta z koroną i dymek „Premium” */
.start-bubble.is-premium { border-color: var(--accent-bright); color: var(--accent); }
.start-bubble.is-premium::after { border-color: var(--accent-bright); }
.ch-nodes .pnode.locked.is-premium.is-next { --face: var(--accent-bright); --edge: #B45309; color: #422006; width: 86px; height: 70px; font-size: 1.5rem; }
.ch-nodes .pnode.is-next .start-bubble { top: -56px; }
@media (max-width: 768px) { .sol-t { font-size: .99rem; } }   /* telefon: nagłówek kroku w rozmiarze opisu */

/* ===== WYRÓŻNIONY WZÓR: <span class="formula">$…$</span> (treść zadania, teoria, rozwiązanie) =====
   osobna linia, wyśrodkowany, na delikatnym fioletowym tle z ramką;
   za długi wzór przewija się w poziomie zamiast rozpychać dymek */
.lesson-bubble .formula, .sol-m .formula, .sol-t .formula {
  display: block; width: fit-content; max-width: 100%; box-sizing: border-box;      /* tyle miejsca, ile potrzebuje wzór */
  text-align: center; margin: .85rem auto; padding: .8rem 1.1rem;
  background: var(--primary-tint); border: 1.5px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.lesson-bubble .formula .katex, .sol-m .formula .katex, .sol-t .formula .katex { font-size: 1.12em; }
.formula .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; }   /* wzór w trybie display — bez dodatkowych marginesów KaTeX */
.lesson-bubble .formula:first-child { margin-top: .2rem; }
.lesson-bubble .formula:last-child { margin-bottom: .1rem; }
@media (max-width: 768px) {
  .lesson-bubble .formula, .sol-m .formula, .sol-t .formula { padding: .7rem .75rem; }
  .lesson-bubble .formula .katex, .sol-m .formula .katex, .sol-t .formula .katex { font-size: 1.02em; }
}

/* ===== DOSTĘP DO ZADAŃ: po zalogowaniu (kłódka) · Premium (korona) ===== */
/* ścieżka: zadanie „po zalogowaniu” — moneta z kłódką w kolorze bazowym, klik = okno logowania */
.ch-nodes .pnode.locked.is-login { cursor: pointer; color: var(--primary); }
.ch-nodes .pnode.locked.is-login.is-next { --face: var(--primary-tint); --edge: var(--primary); color: var(--primary); width: 86px; height: 70px; font-size: 1.5rem; }
[data-theme="dark"] .ch-nodes .pnode.locked.is-login.is-next { --face: rgba(108,99,245,.22); --edge: #5B54D6; color: #C4C0FF; }
.start-bubble.is-login { border-color: var(--primary); color: var(--primary); }
.start-bubble.is-login::after { border-color: var(--primary); }
/* okno blokady: drugi przycisk pod głównym */
.pm-box .btn { width: 100%; }
.pm-box .pm-second { margin-top: .6rem; }
.pm-box .end-trophy.is-summary { font-size: 2rem; }

/* ścieżka: karta konta (gość / zalogowany) */
.pv-acc-btns[hidden], .pv-plan[hidden] { display: none; }
.pv-acc-btns.pv-acc-one { grid-template-columns: 1fr; }
/* zalogowany: zwykła szara ikona osoby z ptaszkiem w zaokrąglonym kwadracie — tak samo dla darmowego i Premium */
.pv-avatar.is-logged {
  border: 1.5px solid var(--border-strong); border-radius: 13px; background: var(--bg-soft); color: var(--text-secondary);
  font-size: 1.35rem;
}
.pv-avatar.is-logged svg { display: block; }
[data-theme="dark"] .pv-page .pv-avatar.is-logged { background: var(--bg-soft); }
.pv-acc-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* zalogowany, darmowe konto: fioletowa ramka karty (Premium — zwykła ramka) */
.pv-card.pv-acc.is-free { border: 2px solid #CFCCF5; box-shadow: 0 4px 0 #CFCCF5; }
[data-theme="dark"] .pv-card.pv-acc.is-free { border-color: rgba(139,133,240,.45); box-shadow: 0 4px 0 rgba(139,133,240,.45); }
/* plan pod nazwą: „Darmowe konto” — fioletowa plakietka; „Premium” — złoty napis z koroną, bez tła */
.pv-acc-tier[hidden], .pv-acc-txt small[hidden] { display: none; }
.pv-acc-tier {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-top: .3rem; padding: .18rem .6rem; border-radius: 999px;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
  background: var(--primary-tint); color: var(--primary);
}
.pv-acc-tier.is-premium { padding: 0; background: none; color: var(--accent); font-size: .75rem; }
.pv-acc-tier svg { display: block; flex-shrink: 0; }

/* dolna zakładka „Konto”: ta sama szara ikona */
.pv-tab-ic { display: flex; font-size: 1.25rem; line-height: 1; }
.pv-tab-ic svg { display: block; }