:root{
  --bg:#f4f6f7;
  --navy:#004e66;
  --darkblue:#2c2e3d;
  --orange:#fc5709;
  --orange-light:#ff5f2e;
  --yellow:#fcbe35;
  --lightblue:#e1eef6;
  --text:#2c2e3d;
  --muted:#6a6a6a;
  --green:#3a8f5b;
  --red:#c4433a;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height:100vh;
}
.wrap{ max-width:820px; margin:0 auto; padding:32px 20px 80px; }
.ipcyb-logo{ max-height:48px; display:block; margin-bottom:16px; }
.activity-bar{
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: white; font-weight: 700; font-size: 1rem;
  padding: 10px 16px; border-radius: 8px; margin-bottom: 20px;
}
.error-text{ color:var(--red); font-size:.85rem; margin:6px 0 0; }
.score-summary{
  display:inline-block; background:var(--orange); color:white; font-weight:700;
  font-size:1.3rem; padding:10px 20px; border-radius:10px; margin-bottom:18px;
}
h1{ color:var(--navy); font-size:1.6rem; margin-bottom:6px;}
.muted{ color:var(--muted); }
.hidden{ display:none !important; }
.screen{ animation: fadein .25s ease; }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }

.field-block{ margin:24px 0; }
.field-block label{ display:block; font-weight:600; margin-bottom:6px; color:var(--navy);}
.field-block input[type=text]{
  width:100%; padding:12px 14px; font-size:16px; border:1px solid #ccc; border-radius:8px;
}
.btn{
  border:none; border-radius:8px; padding:14px 26px; font-size:16px; font-weight:600;
  cursor:pointer; transition:.15s;
}
.btn.primary{ background:var(--orange); color:white; }
.btn.primary:hover{ background:var(--orange-light); }
.btn:disabled{ opacity:.5; cursor:default; }

.quiz-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.timer{
  background:var(--navy); color:var(--yellow); font-weight:700; font-size:1.2rem;
  padding:8px 16px; border-radius:8px;
}
.timer.warning{ background:var(--red); color:white; }

.qcard{
  background:white; border:1px solid #e2e2e2; border-radius:12px; padding:20px 22px; margin-bottom:18px;
}
.qcard .qnum{
  display:inline-block; background:var(--lightblue); color:var(--navy); font-weight:700;
  border-radius:50%; width:28px; height:28px; text-align:center; line-height:28px; margin-bottom:8px; font-size:13px;
}
.qcard h3{ margin:4px 0 8px; color:var(--navy); }
.qcard .desc{ white-space:pre-line; color:#333; font-size:.95rem; margin-bottom:16px; }

.quiz-intro{
  color: var(--muted);
  font-size: .95rem;
  margin: 0 4px 16px;
}

.quiz-instructions{
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  padding: 0 4px;
  margin: 4px 0 22px;
}

.sliders{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.slider-item{ text-align:center; }
.slider-item .label{ font-weight:700; color:var(--navy); margin-bottom:6px; }
.slider-item input[type=range]{ width:100%; accent-color:var(--orange); }
.slider-item .level{ font-size:.82rem; color:var(--muted); margin-top:4px; }

.qcard.correct{ border-color:var(--green); background:#f2f9f4; }
.qcard.incorrect{ border-color:var(--red); background:#fdf3f2; }
.qcard .tip{
  margin-top:12px; padding:10px 14px; background:var(--lightblue); border-radius:8px; font-size:.88rem; color:#144;
}
.qcard .verdict{ font-weight:700; font-size:.85rem; margin-top:8px;}
.qcard .verdict.ok{ color:var(--green); }
.qcard .verdict.ko{ color:var(--red); }
.qcard .awaiting{ font-size:.85rem; color:var(--muted); margin-top:10px; font-style:italic; }