/* =========================================================
   FENIKS EKG UI v4
   Czytelność + responsive desktop / tablet / mobile
   ========================================================= */

:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --text:#101828;
  --text-soft:#344054;
  --muted:#667085;
  --line:#e4e7ec;
  --line-strong:#cfd6e1;
  --blue:#1769e0;
  --blue-dark:#0f56bd;
  --blue-soft:#edf4ff;
  --red:#c52b3d;
  --red-dark:#9f2030;
  --red-soft:#fff1f3;
  --green:#17834f;
  --green-soft:#ecfdf3;
  --shadow-sm:0 3px 14px rgba(16,24,40,.055);
  --shadow-md:0 14px 40px rgba(16,24,40,.085);
  --shadow-lg:0 28px 72px rgba(16,24,40,.12);
  --container:1220px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  font-size:16px;
}

body{
  margin:0;
  min-width:320px;
  color:var(--text);
  background:
    radial-gradient(circle at 15% -10%,rgba(23,105,224,.07),transparent 32%),
    radial-gradient(circle at 100% 0,rgba(197,43,61,.04),transparent 28%),
    var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
button,select,input{font:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
[hidden]{display:none!important}

.container{
  width:min(var(--container),calc(100% - 24px));
  margin-inline:auto;
}

/* HEADER */

.app-header{
  position:sticky;
  top:0;
  z-index:50;
  padding-top:env(safe-area-inset-top);
  background:rgba(244,247,251,.94);
  border-bottom:1px solid rgba(228,231,236,.92);
  backdrop-filter:blur(18px);
}

.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  min-width:0;
  display:flex;
  align-items:center;
  text-decoration:none;
  color:inherit;
}

.brand-wordmark{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}

.brand-wordmark strong{
  color:#0d1b35;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.brand-wordmark small{
  color:var(--red);
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
}

.site-return{
  min-height:46px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:#fff;
  color:#344054;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  transition:.18s ease;
}

.site-return:hover{
  border-color:#aeb8c7;
  background:#f9fafb;
  transform:translateY(-1px);
}

/* HOME */

.main-home{padding:30px 0 56px}

.hero-panel{
  position:relative;
  overflow:hidden;
  display:grid;
  gap:28px;
  padding:34px 24px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow-md);
}

.hero-panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(var(--red),#e76776);
}

.eyebrow,
.section-kicker{
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.hero-panel h1{
  margin:16px 0 15px;
  color:#0d1b35;
  font-size:clamp(38px,8.5vw,54px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.hero-panel h1 span{
  display:block;
  color:var(--red);
}

.hero-lead{
  max-width:760px;
  margin:0;
  color:#536070;
  font-size:17px;
  line-height:1.7;
}

.stats-grid{
  margin-top:26px;
  display:grid;
  gap:12px;
}

.stat-box{
  padding:16px 17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
}

.stat-box strong{
  display:block;
  color:#0d1b35;
  font-size:28px;
  line-height:1.05;
}

.stat-box span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:14px;
}

.hero-visual{display:none}

.section-intro{margin:42px 0 20px}

.section-intro h2{
  margin:6px 0 0;
  color:#0d1b35;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-.03em;
}

.section-intro p{
  margin:11px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}

.mode-grid{display:grid;gap:18px}

.mode-card{
  position:relative;
  overflow:hidden;
  padding:25px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.mode-head{
  display:flex;
  align-items:center;
  gap:13px;
}

.mode-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  flex:0 0 50px;
  border-radius:15px;
  color:#fff;
  font-size:24px;
  font-weight:900;
}

.mode-icon-quiz{background:linear-gradient(145deg,var(--blue),#3a86f0)}
.mode-icon-learn{background:linear-gradient(145deg,var(--red),#e44b5e)}

.mode-tag{
  display:grid;
  gap:2px;
}

.mode-tag span{
  color:#98a2b3;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}

.mode-tag strong{
  color:#0d1b35;
  font-size:18px;
}

.mode-card h3{
  margin:23px 0 10px;
  color:#0d1b35;
  font-size:26px;
  line-height:1.2;
}

.mode-description{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.67;
}

.feature-list{
  display:grid;
  gap:10px;
  margin:22px 0 26px;
  padding:0;
  list-style:none;
  color:#475467;
  font-size:15px;
}

.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
}

.feature-list li span{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 22px;
  border-radius:7px;
  background:var(--green-soft);
  color:var(--green);
  font-size:12px;
  font-weight:900;
}

.mode-form{display:grid;gap:15px}
.form-grid{display:grid;gap:13px}

.field{
  display:grid;
  gap:7px;
}

.field>span{
  color:#475467;
  font-size:14px;
  font-weight:800;
}

select{
  width:100%;
  min-width:0;
  height:52px;
  padding:0 14px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:#fff;
  color:#344054;
  font-size:16px;
  font-weight:650;
}

.cta{
  width:100%;
  min-height:54px;
  padding:0 18px;
  border:0;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  font-size:16px;
  font-weight:850;
  cursor:pointer;
}

.cta-quiz{background:linear-gradient(135deg,var(--blue),#2b7cec)}
.cta-learn{background:linear-gradient(135deg,var(--red),#df4658)}

.cta-arrow{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.15);
  font-size:19px;
}

.trust-grid{
  margin-top:20px;
  display:grid;
  gap:11px;
}

.trust-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.trust-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--red);
  font-size:12px;
  font-weight:900;
}

.trust-card strong{
  display:block;
  font-size:15px;
}

.trust-card span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
}

/* QUIZ + NAUKA */

.quiz-shell,
.learn-shell{padding:22px 0 46px}

.quiz-topline{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.back-link{
  color:var(--blue);
  text-decoration:none;
  font-size:15px;
  font-weight:800;
}

.question-counter{
  color:#475467;
  font-size:15px;
  text-align:right;
}

.progress-track{
  height:8px;
  overflow:hidden;
  margin-bottom:16px;
  border-radius:999px;
  background:#e8eef8;
}

.progress-value{
  height:100%;
  background:linear-gradient(90deg,var(--blue),#55a1ff);
}

.progress-track-learn{background:#f8dfe3}
.progress-value-learn{background:linear-gradient(90deg,var(--red),#eb6c7b)}

.quiz-card,
.learn-card{
  padding:20px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.quiz-heading,
.learn-heading{
  display:grid;
  gap:11px;
  margin-bottom:17px;
}

.quiz-heading h1,
.learn-heading h1{
  margin:5px 0 0;
  color:#0d1b35;
  font-size:27px;
  line-height:1.25;
  letter-spacing:-.025em;
}

.difficulty-pill{
  justify-self:start;
  padding:8px 11px;
  border-radius:999px;
  background:#f2f4f7;
  color:#475467;
  font-size:13px;
  font-weight:850;
}

.ecg-frame{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

.ecg-image{
  width:100%;
  min-width:680px;
  height:auto;
}

.answers-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:18px;
  position:relative;
  z-index:2;
}

.answer-card{
  width:100%;
  min-height:68px;
  padding:14px 15px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  color:#344054;
  text-align:left;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  z-index:3;
  transition:.15s ease;
}

.answer-card:hover{
  border-color:#8db3ec;
  background:#fbfdff;
}

.answer-card:disabled{
  cursor:default;
  opacity:1;
}

.answer-letter{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:11px;
  background:#f2f4f7;
  color:#475467;
  font-size:14px;
  font-weight:900;
}

.answer-text{
  min-width:0;
  font-size:16px;
  font-weight:750;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.answer-card.correct{
  border-color:#76c89e;
  background:var(--green-soft);
  color:#17623e;
}

.answer-card.wrong{
  border-color:#ea919d;
  background:var(--red-soft);
  color:#982536;
}

.feedback-panel,
.explanation-card{
  margin-top:18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-soft);
}

.explanation-card{
  border-color:#f0d0d6;
  background:#fff8f9;
}

.feedback-title{
  margin-bottom:8px;
  font-size:21px;
  font-weight:900;
}

.feedback-title-ok{color:var(--green)}
.feedback-title-bad{color:var(--red)}

.feedback-correct{
  color:#475467;
  font-size:16px;
  line-height:1.55;
}

.explanation-content,
.explanation-card{
  color:#344054;
  font-size:16px;
  line-height:1.72;
}

.explanation-content{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.explain-title{
  margin:21px 0 8px;
  color:var(--red);
  font-size:13px;
  font-weight:900;
  letter-spacing:.09em;
}

.explain-title:first-child{margin-top:0}

.explain-bullet{
  margin:7px 0;
  padding-left:2px;
}

.explanation-content p,
.explanation-card p{
  margin:.55rem 0;
}

.text-gap{height:7px}

.annotated-panel{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.annotation-note{
  margin:11px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.quiz-actions,
.learn-actions{
  display:grid;
  gap:11px;
  margin-top:18px;
}

.btn{
  min-height:52px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:15px;
  font-weight:850;
  cursor:pointer;
}

.btn-primary{background:var(--blue);color:#fff}
.btn-secondary{background:#eef3f9;color:#344054}
.btn-learn{background:var(--red);color:#fff}

.image-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:14px;
}

.toggle-btn{
  min-height:48px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:11px;
  background:#fff;
  color:#475467;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.toggle-btn.active{
  border-color:var(--red);
  background:var(--red);
  color:#fff;
}

/* RESULT */

.result-shell{
  min-height:calc(100vh - 76px);
  display:grid;
  place-items:center;
  padding:32px 0;
}

.result-card{
  width:min(100%,580px);
  padding:34px 26px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  text-align:center;
  box-shadow:var(--shadow-md);
}

.result-card h1{
  margin:8px 0 22px;
  font-size:34px;
}

.result-score{
  font-size:24px;
}

.result-score strong{
  font-size:72px;
}

.result-percent{
  margin:12px 0 20px;
  color:var(--red);
  font-size:32px;
  font-weight:900;
}

/* TABLET */

@media(min-width:640px){
  .container{width:min(var(--container),calc(100% - 36px))}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:170px minmax(0,1fr)}
  .trust-grid{grid-template-columns:repeat(3,1fr)}
  .quiz-card,.learn-card{padding:28px}
  .quiz-heading,.learn-heading{grid-template-columns:1fr auto;align-items:start}
  .difficulty-pill{justify-self:end}
  .answers-grid{grid-template-columns:1fr 1fr}
  .quiz-actions,.learn-actions{display:flex;justify-content:flex-end}
  .btn{min-width:190px}
}

/* DESKTOP */

@media(min-width:980px){
  .header-inner{min-height:82px}
  .brand-wordmark strong{font-size:22px}
  .brand-wordmark small{font-size:15px}
  .site-return{font-size:15px}

  .main-home{padding:46px 0 62px}

  .hero-panel{
    min-height:365px;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:46px;
    padding:50px 52px;
    border-radius:30px;
    box-shadow:var(--shadow-lg);
  }

  .hero-panel h1{font-size:60px}
  .hero-lead{font-size:18px}

  .hero-visual{
    display:grid;
    place-items:center;
    color:var(--red);
  }

  .mode-grid{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }

  .mode-card{
    padding:32px;
    border-radius:24px;
    box-shadow:var(--shadow-md);
  }

  .mode-description{font-size:16px}
  .feature-list{font-size:15px}

  .quiz-shell,
  .learn-shell{
    padding-top:30px;
    padding-bottom:58px;
  }

  .quiz-card,
  .learn-card{
    padding:34px;
    border-radius:24px;
    box-shadow:var(--shadow-md);
  }

  .quiz-heading h1,
  .learn-heading h1{
    font-size:32px;
  }

  .ecg-frame{overflow:hidden}
  .ecg-image{min-width:0;width:100%}

  .answer-card{
    min-height:76px;
    padding:16px 18px;
  }

  .answer-letter{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:15px;
  }

  .answer-text{
    font-size:17px;
  }

  .feedback-panel,
  .explanation-card{
    padding:24px;
  }

  .feedback-title{
    font-size:23px;
  }

  .feedback-correct,
  .explanation-content,
  .explanation-card{
    font-size:17px;
  }

  .explain-title{
    font-size:14px;
  }

  .annotation-note{
    font-size:15px;
  }
}

/* MOBILE */

@media(max-width:520px){
  .header-inner{min-height:70px}
  .brand-wordmark{display:grid;gap:2px}
  .brand-wordmark strong{font-size:17px}
  .brand-wordmark small{font-size:12px}
  .site-return{
    min-height:44px;
    padding:0 11px;
    font-size:12px;
  }

  .hero-panel h1{font-size:38px}
  .hero-lead{font-size:16px}
  .section-intro h2{font-size:29px}

  .mode-card h3{font-size:24px}
  .mode-description{font-size:16px}
  .feature-list{font-size:15px}

  .quiz-heading h1,
  .learn-heading h1{
    font-size:24px;
  }

  .answer-text{
    font-size:16px;
  }

  .feedback-correct,
  .explanation-content,
  .explanation-card{
    font-size:16px;
  }

  .btn{
    font-size:15px;
  }

  select{
    font-size:16px; /* iOS: brak automatycznego zoomu */
  }
}

@media(max-width:360px){
  .container{width:calc(100% - 18px)}
  .hero-panel{padding:26px 18px}
  .hero-panel h1{font-size:34px}
  .mode-card,.quiz-card,.learn-card{padding:18px}
  .site-return span:last-child{max-width:125px;overflow:hidden;text-overflow:ellipsis}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}