:root{
  --bg:#f6f7fb; --surface:#ffffff; --surface-2:#f3f5fa;
  --text:#141820; --muted:#5f6a7d;
  --primary:#1f3a8a; --primary-soft:#e8eefc;
  --ring:rgba(37,99,235,.35);

  --success:#166534; --success-soft:#dcf8e8; --success-border:#9fdfbf;
  --error:#991b1b; --error-soft:#ffe0e0; --error-border:#ffb3b3;

  --stroke:#e7eaf2; --stroke-2:#e2e6ef;
  --elev:0 10px 24px rgba(9,15,25,.08);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
}

/* DARK */
html[data-theme="dark"]{
  --bg:#0f1115; --surface:#151821; --surface-2:#1b2030;
  --text:#e6e8ef; --muted:#9aa3b2;
  --primary:#3e63c5; --primary-soft:#6d8ce6;
  --ring:rgba(37,99,235,.35);

  --success:#2d8a4a; --success-soft:#1e3626; --success-border:#3aa763;
  --error:#9b2a2a; --error-soft:#2a1717; --error-border:#b23a3a;

  --stroke:#20263a; --stroke-2:#21273a;
  --elev:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(37,99,235,.10) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg,#ffffff 0%, #f7f9fe 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(37,99,235,.08) 0%, rgba(0,0,0,0) 100%),
    radial-gradient(40% 40% at 80% 20%, rgba(98,106,255,.06) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg,#0e1014 0%,var(--bg) 100%);
}

/* EMBED */
.embedded .hero, .embedded .site-footer{ display:none !important; }
.embedded .quiz-header{ margin-top:12px }

.container{max-width:1120px;margin:0 auto;padding:0 20px}

.hero{border-bottom:1px solid var(--stroke)}
.hero-inner{display:flex;align-items:center;justify-content:center;gap:20px;padding:28px 0;text-align:center}
.hero-text h1{font-size:2rem;font-weight:800;letter-spacing:.2px;color:var(--text);}

.quiz-header{display:flex; align-items:center; gap:12px; margin:20px 0}
.header-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.lang-toggle{display:flex; gap:6px}

.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-weight:800;background:var(--surface-2);border:1px solid var(--stroke); color:var(--text)}
.timer{background:var(--primary);color:#ffffff;border:none}

.btn{
  -webkit-tap-highlight-color:transparent;
  appearance:none;border:none;cursor:pointer;
  font-weight:800; letter-spacing:.2px;
  padding:12px 18px; border-radius:14px; transition:.18s;
}
.btn.primary{background:linear-gradient(180deg,var(--primary), rgba(29,78,216,.85)); color:#ffffff; box-shadow:0 6px 18px rgba(37,99,235,.22)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff; color:var(--text); border:1px solid var(--stroke); box-shadow:0 4px 10px rgba(10,15,25,.05)}
.btn.ghost:hover{background:#eef2ff; border-color:#c7d2fe}
.btn.icon{padding:10px 12px; border-radius:12px; font-size:1.1rem}
.btn.block{width:100%}

/* Ghost w DARK: lepszy kontrast */
html[data-theme="dark"] .btn.ghost{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--stroke-2);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
html[data-theme="dark"] .btn.ghost:hover{
  background:#1f2536; border-color:#32405f;
}

:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:14px}

.categories-list{display:flex; flex-direction:column; gap:16px; margin:22px 0 40px}
.cat-item{
  position:relative; min-width:0;
  display:flex; gap:18px; align-items:center;
  background:linear-gradient(180deg,#ffffff,#f7f9fe);
  border:1px solid var(--stroke); border-radius:18px; padding:14px;
  box-shadow:var(--elev); transition:transform .18s,border-color .18s,box-shadow .18s,filter .18s;
  cursor:pointer;
}
html[data-theme="dark"] .cat-item{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.cat-item:hover{ transform:translateY(-2px); border-color:#c7d2fe; box-shadow:0 10px 24px rgba(9,15,25,.10); filter:saturate(1.05)}
.cat-thumb{ width:122px; height:82px; border-radius:14px; overflow:hidden; flex:0 0 122px; background:#e9edf7 center/cover no-repeat; border:1px solid var(--stroke) }
.cat-info{display:flex; flex-direction:column; gap:6px; min-width:0}
.cat-title{font-size:1.14rem; font-weight:900; letter-spacing:.1px}
.cat-desc{font-size:.98rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cat-cta{margin-left:auto; display:flex; align-items:center; gap:12px; flex-shrink:0}
.cat-cta .btn{padding:10px 14px; white-space:nowrap}
.cat-cta .chev{font-weight:900; color:#8c95a8}
.cat-item:hover .chev{color:#555e70}

@media (max-width: 560px){
  .cat-item{
    display:grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "thumb info"
      "cta   cta";
    align-items:center;
  }
  .cat-thumb{ grid-area: thumb; width:96px; height:72px; }
  .cat-info{ grid-area: info; }
  .cat-cta{ grid-area: cta; margin-left:0; }
  .cat-cta .btn{ width:100%; }
}

.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.mode-card{
  text-align:center; padding:24px 18px; border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f7f9fe);
  border:1px solid var(--stroke); box-shadow:var(--elev);
  cursor:pointer; transition:.18s;
}
html[data-theme="dark"] .mode-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.mode-card:hover{ transform:translateY(-2px); border-color:#c7d2fe; box-shadow:0 10px 24px rgba(9,15,25,.10)}
.mode-card .icon{display:grid;place-items:center;width:64px;height:64px;margin:2px auto 10px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);box-shadow:none;}
.mode-card div:last-child{font-weight:900}

.quiz-card{
  background:linear-gradient(180deg,#ffffff,#f7f9fe);
  border:1px solid var(--stroke); border-radius:18px; box-shadow:var(--elev);
  padding:20px; margin-bottom:14px;
}
html[data-theme="dark"] .quiz-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.quiz-card h2{font-size:1.28rem; line-height:1.35;}

.context-title{ margin: 4px 0 8px; font-weight: 900; color: var(--muted); display:flex; align-items:center; gap:8px }
.context-title.small{ margin-top: 10px }
.context-title span{
  color: var(--text); background: #fff; border: 1px solid var(--stroke);
  padding: 6px 10px; border-radius: 999px; font-weight: 800;
}
html[data-theme="dark"] .context-title span{
  background: rgba(255,255,255,.03); border-color: var(--stroke-2);
}

/* PROGRESS – NAD treścią, poziomy */
.progress-bar{ margin:6px 0 14px }
.progress-bar.learn,
.progress-bar.exam{
  display:grid; grid-template-rows:42px; grid-auto-flow:column;
  gap:10px; overflow-x:auto; padding:8px 0;
}
.progress-bar .cell{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900; border:1px solid var(--stroke); color:#566079; background:#ffffff; user-select:none;
}
.progress-bar.learn .cell.gray{background:#eef2fb;color:#6b7488}
.progress-bar.learn .cell.green{background:#d4f6e1; color:#0f3a21; border-color:#9fdfbf}
.progress-bar.learn .cell.red{background:#ffd0d0; color:#6a1414; border-color:#ffb3b3}
.progress-bar.learn .cell.current{outline:3px solid var(--ring); background:#eef2ff;color:#1f2937}
.progress-bar.exam .cell.completed{background:linear-gradient(180deg,#93c5fd,#2563eb); color:#0f172a; border-color:#60a5fa}
.progress-bar.exam .cell.current{outline:3px solid var(--ring); background:#fffbe6; color:#2a2e38}
html[data-theme="dark"] .progress-bar .cell{background:#0f131c; color:#b8c0cf; border-color:#26314a}
html[data-theme="dark"] .progress-bar.learn .cell.green{background:#173924; color:#d8ffe9; border-color:#2f7c46}
html[data-theme="dark"] .progress-bar.learn .cell.red{background:#2a1717; color:#ffd7d7; border-color:#7a2020}

/* Odpowiedzi */
.answers{margin-top:6px}
.answer-btn{
  display:block;width:100%;
  padding:16px 18px; margin:12px 0;
  border-radius:14px; border:1px solid var(--stroke);
  background:#fff; color:#141820; text-align:left; transition:.18s;
  font-size:1.16rem; line-height:1.45;
}
.answer-btn:hover{box-shadow:0 6px 18px rgba(9,15,25,.06)}
.answer-btn.selected{background:var(--primary-soft); color:#111827; border-color:#93c5fd}
.answer-btn.correct{background:var(--success-soft); color:#0f3a21; border:1px solid var(--success-border)}
.answer-btn.wrong{background:var(--error-soft); color:#6a1414; border:1px solid var(--error-border)}
html[data-theme="dark"] .answer-btn{background:#0f131c; border-color:#26314a; color:#e6e8ef}
html[data-theme="dark"] .answer-btn:hover{border-color:#334064; box-shadow:0 6px 18px rgba(0,0,0,.35)}
html[data-theme="dark"] .answer-btn.selected{background:var(--primary); color:#151821; border-color:#caa116}
html[data-theme="dark"] .answer-btn.correct{background:#21583a; border-color:#2f7c46; color:#e8fff0}
html[data-theme="dark"] .answer-btn.wrong{background:#612323; border-color:#7a2020; color:#ffecec}

/* Intro egzaminu */
.intro{text-align:left;margin:18px 0}
.intro .intro-head{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.22rem; margin-bottom:8px}
.intro-list{list-style:none; padding:0; margin:8px 0 14px 0; display:flex; flex-direction:column; gap:10px}
.intro-list li{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px dashed var(--stroke); border-radius:12px; padding:12px 14px}
html[data-theme="dark"] .intro-list li{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); border-color:var(--stroke-2)}
.intro .goodluck{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eef2ff; border:1px solid #c7d2fe; font-weight:800}

/* Podsumowanie / Przegląd */
.summary{text-align:center;margin:24px 0}
.summary-controls,.review-controls{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:16px 0 6px}
.summary-controls .btn,.review-controls .btn{padding:14px 20px; font-size:1.02rem}
.review-list{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.review-item{background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:16px}
.review-item h3{font-size:1.02rem;margin-bottom:10px}
.correct-answer,.wrong-answer{display:block;padding:8px 10px;border-radius:10px;margin:6px 0}
.correct-answer{background:var(--success-soft); color:#0f3a21; border:1px solid var(--success-border)}
.wrong-answer{background:var(--error-soft); color:#6a1414; border:1px solid var(--error-border)}
html[data-theme="dark"] .review-item{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); border-color:var(--stroke-2)}

.site-footer{margin-top:52px;padding:22px 0;text-align:center;font-size:.95rem;color:#5c6678;border-top:1px solid var(--stroke)}
html[data-theme="dark"] .site-footer{color:#7f889b}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}
@media (max-width: 980px){ .cat-thumb{width:110px;height:76px;flex-basis:110px} }
@media (max-width: 860px){ .cat-thumb{width:96px;height:72px;flex-basis:96px} .mode-grid{grid-template-columns:1fr} }

/* --- NOWE: responsywne obrazki pod pytaniem --- */
.q-media{
  margin: 10px 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  place-items: center; /* wyśrodkowanie */
}
.question-figure{ margin:0 }
.question-media{
  display:block;
  width: 100%;
  max-width: 520px;   /* czytelne, ale nieduże */
  height: auto;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: #fff;
  object-fit: contain;
}
html[data-theme="dark"] .question-media{
  border-color: var(--stroke-2);
  background: rgba(255,255,255,.03);
}



/* === 22nd‑century WOW UI refresh === */

/* Fluid type + improved readability */
:root{
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-3d: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  --glass: rgba(255,255,255,.52);
  --glass-border: rgba(255,255,255,.55);
  --glass-dark: rgba(17,22,32,.42);
  --glass-dark-border: rgba(255,255,255,.08);
  --accent-1: #8b5cf6;
  --accent-2: #06b6d4;
  --accent-3: #22c55e;
  --accent-4: #f59e0b;
}

/* Screen-reader only utility */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Animated background layers */
.fx{position:fixed;inset:-10vmax;z-index:-1;pointer-events:none}
.fx-aurora{
  background: radial-gradient(42vmax 42vmax at 15% 10%, rgba(139,92,246,.18), transparent 55%),
              radial-gradient(55vmax 55vmax at 85% 15%, rgba(6,182,212,.14), transparent 60%),
              radial-gradient(50vmax 50vmax at 50% 90%, rgba(34,197,94,.12), transparent 62%);
  filter: blur(20px) saturate(120%);
  animation: auroraMove 28s ease-in-out infinite alternate;
}
.fx-grid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity:.4;
  mix-blend-mode: overlay;
}
.fx-glow{
  background: radial-gradient(40vmax 40vmax at 50% 10%, rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode: soft-light;
  animation: glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse{ 0%{opacity:.25} 50%{opacity:.45} 100%{opacity:.25} }
@keyframes auroraMove{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-3%,0) scale(1.05); }
}

/* Hero upgrade: gradient headline with subtle 3D */
.hero-inner{ position:relative; padding:48px 0 }
.hero-text h1{font-size:2rem;font-weight:800;letter-spacing:.2px;color:var(--text);}

/* Glassy cards + magnetic hover */
.cat-item, .mode-card, .quiz-card, .review-item{
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
html[data-theme="light"] .cat-item, html[data-theme="light"] .mode-card, html[data-theme="light"] .quiz-card, html[data-theme="light"] .review-item{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,249,254,.60));
  border-color: rgba(99,116,161,.18);
}
html[data-theme="dark"] .cat-item, html[data-theme="dark"] .mode-card, html[data-theme="dark"] .quiz-card, html[data-theme="dark"] .review-item{
  background: linear-gradient(180deg, rgba(28,31,43,.72), rgba(21,24,33,.66));
  border-color: var(--glass-dark-border);
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
.cat-item:hover, .mode-card:hover, .quiz-card:hover{ transform: translateY(-4px) scale(1.01) }

/* Neon focus & buttons with sheen */
:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.55), 0 0 1px 6px rgba(99,102,241,.2) }
.btn.primary{
  position:relative; overflow:hidden;
}
.btn.primary::after{
  content:""; position:absolute; inset:-1px; background: linear-gradient(110deg,
  rgba(255,255,255,.25) 0%,
  rgba(255,255,255,0) 35%,
  rgba(255,255,255,.18) 60%,
  rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  animation: sheen 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{ 0%{transform:translateX(-120%)} 50%{transform:translateX(0%)} 100%{transform:translateX(120%)} }

/* Mode cards: circular gradient halo around icon */
.mode-card .icon{display:grid;place-items:center;width:64px;height:64px;margin:2px auto 10px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);box-shadow:none;}
.mode-card div:last-child{ font-size:1.02rem; letter-spacing:.25px }

/* Progress bar: pill style + glow for current */
.progress-bar .cell{
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(240,244,255,.8));
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(15,20,35,.06);
}
.progress-bar .cell.current{
  outline:none;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}

/* Answers: lift + ripple */
.answer-btn{
  position:relative; overflow:hidden;
  transform: translateZ(0);
}
.answer-btn:active{ transform: scale(.995) }
.answer-btn::before{
  content:""; position:absolute; width:0; height:0; border-radius:50%;
  left:var(--x,50%); top:var(--y,50%);
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 65%);
  transition: width .45s ease, height .45s ease, opacity .6s ease;
  opacity:0;
}
.answer-btn:active::before{ width:420px; height:420px; opacity:1 }

/* Media under question: add soft frame glow */
.question-media{
  box-shadow: 0 8px 26px rgba(10,20,40,.10);
}
html[data-theme="dark"] .question-media{
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

/* Timer as glassy chip with pulse on low time */
.timer{
  position:relative; letter-spacing:.6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.timer.low::after{
  content:""; position:absolute; inset:-3px; border-radius:999px;
  border:2px solid rgba(239,68,68,.55);
  animation: timerPulse 1.2s ease-in-out infinite;
}
@keyframes timerPulse{ 0%{opacity:.6} 50%{opacity:0} 100%{opacity:.6} }

/* Footer: subtle blur backing */
.site-footer{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* === Tone down: disable flashy FX layers === */
.fx{ display:none !important; }

.cat-desc{ display:none; }