:root{
  --teal-ink:#0E3B36;
  --teal-deep:#0A2C28;
  --teal-mid:#175A52;
  --gold:#D9A62E;
  --gold-soft:#F2E3B8;
  --red-uk:#B3402E;
  --paper:#FAFAF7;
  --line:#DCE3DF;
  --text:#22312E;
  --text-soft:#5B6B67;
  --radius:14px;
  --font-display:'Libre Caslon Text', Georgia, serif;
  --font-body:'Work Sans', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--paper);line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Header */
header{background:var(--teal-ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;height:68px}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:.02em;text-decoration:none}
.logo em{font-style:normal;color:var(--gold)}
.nav-links{display:flex;gap:24px;list-style:none;margin-left:auto}
.nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;color:#E4ECEA;padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;margin-left:auto}

/* Buttons */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 20px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,color .15s;font-family:var(--font-body)}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--teal-deep)}
.btn-gold:hover{background:#E7B845}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline{border-color:var(--teal-ink);color:var(--teal-ink);background:transparent}
.btn-outline:hover{background:var(--teal-ink);color:#fff}

/* Hero */
.hero{background:radial-gradient(1200px 500px at 80% -10%, rgba(217,166,46,.14), transparent 60%),linear-gradient(175deg, var(--teal-ink) 0%, var(--teal-deep) 100%);color:#fff;position:relative;overflow:hidden}
.hero-inner{max-width:1180px;margin:0 auto;padding:64px 24px 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.15;margin-bottom:18px;max-width:20ch}
.hero h1 .accent{color:var(--gold);font-style:italic}
.hero p.lead{font-size:1.1rem;color:#CFE0DC;max-width:52ch;margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:.85rem;color:#9DB8B3}

/* Sections */
section{padding:64px 24px}
.wrap{max-width:1180px;margin:0 auto}
.section-head{max-width:640px;margin-bottom:40px}
.section-head h2{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.1rem);color:var(--teal-ink);margin-bottom:10px}
.section-head p{color:var(--text-soft)}

/* Test cards */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.test-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .18s,box-shadow .18s}
.test-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(14,59,54,.12)}
.test-card .meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.pill-cat{background:var(--gold-soft);color:var(--teal-ink)}
.pill-lvl{background:#E3ECEA;color:var(--teal-mid)}
.test-card h3{font-family:var(--font-display);font-size:1.12rem;color:var(--teal-ink)}
.test-card p{font-size:.93rem;color:var(--text-soft);flex:1}
.test-card .go{font-weight:600;color:var(--teal-mid);font-size:.92rem}

/* Quiz player */
.quiz-shell{max-width:720px;margin:48px auto;padding:0 24px}
.quiz-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:0 12px 40px rgba(14,59,54,.08)}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;font-size:.85rem;color:var(--text-soft);font-weight:600}
.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:26px}
.progress b{display:block;height:100%;background:linear-gradient(90deg,var(--teal-mid),var(--gold));width:0;transition:width .3s}
.q-text{font-family:var(--font-display);font-size:1.3rem;line-height:1.45;margin-bottom:22px}
.q-text code{font-family:inherit;background:var(--gold-soft);padding:0 6px;border-radius:4px}
.opts{display:grid;gap:12px}
.opt{text-align:left;font-family:var(--font-body);font-size:1rem;font-weight:500;padding:14px 18px;border-radius:10px;border:2px solid var(--line);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover:not(:disabled){border-color:var(--teal-mid)}
.opt:disabled{cursor:default}
.opt.correct{border-color:#2E7D32;background:#E8F3E9}
.opt.wrong{border-color:var(--red-uk);background:#FBEAE7}
.explain{margin-top:18px;padding:14px 16px;border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:0 8px 8px 0;font-size:.95rem;display:none}
.quiz-actions{margin-top:24px;display:flex;justify-content:flex-end}
.quiz-actions .btn[hidden]{display:none}

/* Result */
.result{text-align:center;padding:12px 0}
.result .score{font-family:var(--font-display);font-size:3.4rem;color:var(--teal-ink);line-height:1}
.result .score small{font-size:1.4rem;color:var(--text-soft)}
.result h2{font-family:var(--font-display);color:var(--teal-ink);margin:14px 0 6px}
.result p{color:var(--text-soft);max-width:44ch;margin:0 auto 24px}
.result .level-badge{display:inline-block;background:var(--teal-ink);color:var(--gold);font-family:var(--font-display);font-size:1.3rem;padding:8px 24px;border-radius:999px;margin-bottom:16px}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Article */
.article{max-width:760px;margin:0 auto;padding:56px 24px}
.article h1{font-family:var(--font-display);color:var(--teal-ink);font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:8px}
.article .art-meta{color:var(--text-soft);font-size:.9rem;margin-bottom:28px}
.article h2{font-family:var(--font-display);color:var(--teal-ink);font-size:1.4rem;margin:34px 0 12px}
.article p{margin-bottom:14px}
.article ul,.article ol{margin:0 0 14px 22px}
.article li{margin-bottom:6px}
.example{border:1px solid var(--line);border-left:4px solid var(--teal-mid);background:#fff;border-radius:0 8px 8px 0;padding:14px 18px;margin:14px 0}
.example b{color:var(--teal-ink)}
.example i{color:var(--text-soft);font-size:.92rem}
.warn{border-left-color:var(--red-uk)}
.cta-box{margin-top:36px;background:linear-gradient(90deg,var(--teal-ink),var(--teal-mid));color:#fff;border-radius:var(--radius);padding:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cta-box p{margin:0;color:#CFE0DC}
.cta-box .btn{margin-left:auto}

/* Footer */
footer{background:var(--teal-deep);color:#AFC8C3;padding:44px 24px 28px;margin-top:48px}
.foot-bottom{max-width:1180px;margin:0 auto;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-bottom a{color:var(--gold);text-decoration:none}

@media (max-width:900px){.test-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .nav-links{display:none}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--teal-deep);padding:20px 24px;gap:4px}
  .nav.open .nav-links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .menu-toggle{display:block}
  .test-grid{grid-template-columns:1fr}
  .quiz-box{padding:22px}
  .cta-box .btn{margin-left:0}
}

/* Fiszki */
.flip-scene{perspective:1200px;margin:10px 0 6px}
.flip-card{
  position:relative;width:100%;min-height:260px;border:0;background:none;
  cursor:pointer;transform-style:preserve-3d;transition:transform .5s;
  font-family:var(--font-body);text-align:center;padding:0;
}
.flip-card.is-flipped{transform:rotateY(180deg)}
.flip-card .face{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius);padding:28px;
}
.flip-card .front{
  background:linear-gradient(160deg,var(--teal-ink),var(--teal-mid));color:#fff;
  font-family:var(--font-display);font-size:2rem;
}
.flip-card .front em{font-style:normal;font-family:var(--font-body);font-size:.8rem;color:#9DB8B3;position:absolute;bottom:16px}
.flip-card .back{
  background:#fff;border:2px solid var(--gold);color:var(--teal-ink);
  transform:rotateY(180deg);font-family:var(--font-display);font-size:1.4rem;
}
.flip-card .face small{
  font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  color:var(--gold);position:absolute;top:16px;left:20px;
}
.flip-card .fx{font-family:var(--font-body);font-size:.95rem;color:var(--text-soft);font-style:italic}
.flip-card .fnote{
  font-family:var(--font-body);font-size:.85rem;color:var(--red-uk);
  background:#FBEAE7;border-radius:8px;padding:6px 12px;margin-top:4px;
}
.flash-actions{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){
  .flip-card{transition:none}
  .flip-card.is-flipped{transform:none}
  .flip-card.is-flipped .front{visibility:hidden}
  .flip-card.is-flipped .back{transform:none}
}
@media (max-width:640px){.flip-card{min-height:300px}.flip-card .front{font-size:1.6rem}}

/* Test poziomujący — diagnoza */
.quiz-shell-wide{max-width:840px}
.pl-title{font-family:var(--font-display);color:var(--teal-ink);font-size:1.8rem;margin-bottom:10px;text-align:center}
.pl-sub{color:var(--text-soft);text-align:center;max-width:56ch;margin:0 auto 24px}
.pl-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.pl-part{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px}
.pl-part b{font-family:var(--font-display);font-size:1.3rem;color:var(--gold)}
.pl-part small{color:var(--text-soft)}
.pl-warn{font-size:.85rem;color:var(--red-uk);background:#FBEAE7;border-radius:8px;padding:10px 14px;margin-bottom:16px}
.pl-section-badge{display:inline-block;background:var(--teal-ink);color:var(--gold);font-weight:600;font-size:.85rem;padding:6px 16px;border-radius:999px;margin-bottom:12px}
.pl-intro{color:var(--text-soft);font-size:.95rem;margin-bottom:14px}
.pl-reading{border:1px solid var(--line);border-left:4px solid var(--teal-mid);background:var(--paper);border-radius:0 10px 10px 0;padding:16px 18px;margin-bottom:18px;font-size:.98rem;line-height:1.7}
.pl-audio{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:1rem;background:var(--teal-ink);color:#fff;border:0;border-radius:999px;padding:12px 24px;cursor:pointer;margin-bottom:18px;transition:background .15s}
.pl-audio:hover{background:var(--teal-mid)}
.opt.picked{border-color:var(--teal-mid);background:#E3ECEA}

/* Raport */
.pl-report-head{text-align:center;margin-bottom:26px}
.pl-report-label{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.pl-level{font-family:var(--font-display);font-size:4.2rem;line-height:1.1;color:var(--teal-ink)}
.pl-score-note{font-size:.88rem;color:var(--text-soft)}
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.pl-block{border:1px solid var(--line);border-radius:12px;padding:20px}
.pl-block h3{font-family:var(--font-display);color:var(--teal-ink);font-size:1.05rem;margin-bottom:14px}
.skill{margin-bottom:14px}
.skill:last-child{margin-bottom:0}
.skill-top{display:flex;justify-content:space-between;font-size:.92rem;font-weight:600;margin-bottom:5px}
.skill-top b{color:var(--teal-ink)}
.bar{height:9px;background:var(--line);border-radius:999px;overflow:hidden}
.bar b{display:block;height:100%;background:linear-gradient(90deg,var(--teal-mid),var(--gold));border-radius:999px}
.pl-words{font-family:var(--font-display);font-size:2.2rem;color:var(--teal-ink)}
.pl-words small{font-size:1rem;color:var(--text-soft);font-family:var(--font-body)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:.85rem;font-weight:600;background:#FBEAE7;color:var(--red-uk);border-radius:999px;padding:6px 14px}
.chip-ok{background:#E8F3E9;color:#2E7D32}
.plan{background:var(--paper)}
.plan-week{padding:12px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.plan-week:last-child{border-bottom:0}
.plan-links{display:block;margin-top:4px;font-size:.88rem}
.plan-links a{color:var(--teal-mid);font-weight:600;text-decoration:none}
.plan-links a:hover{text-decoration:underline}
.pl-disclaimer{text-align:center;font-size:.8rem;color:var(--text-soft);margin-top:18px}
@media (max-width:640px){
  .pl-parts{grid-template-columns:repeat(2,1fr)}
  .pl-grid{grid-template-columns:1fr}
  .pl-level{font-size:3.2rem}
}

/* Udostępnianie wyniku */
.share-block{margin-top:18px}
.share-preview{
  white-space:pre-wrap;font-size:.88rem;line-height:1.7;
  background:var(--paper);border:1px dashed var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:14px;color:var(--text-soft);
}
.share-actions{display:flex;gap:10px;flex-wrap:wrap}
.share-links{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.share-links a{font-size:.9rem;font-weight:600;color:var(--teal-mid);text-decoration:none}
.share-links a:hover{text-decoration:underline}
.share-copied{margin-top:10px;font-size:.88rem;font-weight:600;color:#2E7D32}

/* Rozwijane menu */
.has-sub{position:relative}
.sub{
  display:none;position:absolute;top:100%;left:-10px;z-index:60;
  background:var(--teal-deep);min-width:430px;padding:14px 8px;
  border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(0,0,0,.35);
  list-style:none;column-count:2;column-gap:0;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub li{break-inside:avoid}
.sub a{display:block;padding:8px 18px;border-bottom:0!important;font-size:.92rem}
.sub a:hover{color:var(--gold)}
.sub-all{column-span:all;border-top:1px solid rgba(255,255,255,.12);margin-top:8px;padding-top:6px}
.sub-all a{color:var(--gold);font-weight:600}
@media (max-width:640px){
  .sub{position:static;display:block;min-width:0;box-shadow:none;column-count:1;padding:0 0 6px 16px;border-radius:0}
  .sub a{padding:8px 0}
}

/* Wymowa na fiszkach */
.say{
  position:absolute;top:14px;right:16px;font-size:1.25rem;cursor:pointer;
  opacity:.85;transition:transform .12s,opacity .12s;user-select:none;
}
.say:hover{opacity:1;transform:scale(1.12)}

/* Postęp talii na liście */
.deck-progress{font-size:.82rem;font-weight:600;color:var(--teal-mid);margin-top:2px}
.pl-last{text-align:center;font-size:.92rem;background:var(--gold-soft);border-radius:8px;padding:10px 14px;margin-bottom:16px}

/* Pytania pisemne w diagnozie */
.write-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.write-input{
  flex:1;min-width:220px;font-family:var(--font-body);font-size:1.05rem;
  padding:12px 16px;border:2px solid var(--line);border-radius:10px;background:#fff;
}
.write-input:focus{outline:none;border-color:var(--teal-mid)}
.write-input:disabled{background:var(--paper);color:var(--text-soft)}

/* Wybór trybu nauki fiszek */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.mode-card{
  text-align:left;font-family:var(--font-body);background:#fff;
  border:2px solid var(--line);border-radius:12px;padding:20px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s;
}
.mode-card:hover{border-color:var(--teal-mid);transform:translateY(-2px)}
.mode-card b{font-size:1.05rem;color:var(--teal-ink)}
.mode-card span{font-size:.9rem;color:var(--text-soft);line-height:1.5}
.mode-leitner{border-color:var(--gold);background:linear-gradient(180deg,#fff, var(--gold-soft))}

/* Pudełka Leitnera */
.lt-boxes{display:flex;gap:10px;justify-content:center;margin:18px 0;flex-wrap:wrap}
.lt-box{
  min-width:64px;text-align:center;border:2px solid var(--line);border-radius:10px;
  padding:10px 8px 8px;background:#fff;
}
.lt-box b{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--teal-ink)}
.lt-box span{font-size:.72rem;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.06em}
.lt-box-top{border-color:var(--gold);background:var(--gold-soft)}
.lt-box-new b{color:var(--teal-mid)}
.lt-badge{
  text-align:center;font-size:.85rem;font-weight:700;color:var(--teal-mid);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;
}
@media (max-width:640px){.mode-grid{grid-template-columns:1fr}}

/* Baner Powtórek dnia */
.day-banner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--teal-ink),var(--teal-mid));color:#fff;
  border-radius:var(--radius);padding:18px 24px;margin-bottom:26px;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.day-banner:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,59,54,.25)}
.day-banner b{font-family:var(--font-display);font-size:1.1rem;color:var(--gold)}
.day-banner span{color:#CFE0DC;font-size:.92rem;flex:1;min-width:200px}
.day-banner em{font-style:normal;font-weight:700;color:var(--gold)}
.lt-decksrc{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-soft)}