:root {
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --blue:#1E40AF;
  --blue2:#2563EB;
  --green:#16a34a;
  --red:#dc2626;
  --warn:#fef3c7;
}

* { box-sizing:border-box }
html { font-size:16px }
body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:#f8fafc;
  color:var(--text);
  line-height:1.45;
}

.container { max-width:980px; margin:24px auto; padding:0 16px }
.header.card { padding:12px 16px }

/* --- logo + naslov pod njim, centrirano --- */
.brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.brand img {
  height:72px;
  max-width:360px;
  object-fit:contain;
}

.title {
  text-align:center;
}
.title h1 {
  margin:0;
  font-size:clamp(22px,3.2vw,30px);
  color:var(--blue);   /* naslov v modri */
}
.sub {
  margin:2px 0 0;
  color:var(--blue2);  /* opis v svetlejši modri */
  font-size:clamp(12px,2.5vw,14px);
}

.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin:16px 0;
  box-shadow:0 6px 18px rgba(2,6,23,.04);
}
.hidden { display:none }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.space { justify-content:space-between }

label { display:block; margin:6px 0 8px }
input[type=text] {
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
}
.btn {
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  cursor:pointer;
  min-height:44px;
}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.primary {
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  border:0;
  color:#fff;
  font-weight:700;
}

.notice {
  background:var(--warn);
  border:1px solid #fde68a;
  border-radius:10px;
  padding:8px 12px;
  margin-bottom:8px;
  font-size:14px;
}

.choices { display:grid; gap:10px; margin:12px 0 }
.choice {
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  text-align:left;
  min-height:48px;
}
.choice.correct { background:rgba(22,163,74,.08); border-color:#22c55e }
.choice.wrong { background:rgba(220,38,38,.08); border-color:#ef4444 }
.choice.timeout { background:#fee2e2; border-color:#fecaca }

.highlight { font-size:clamp(16px,2.8vw,18px) }
.badge {
  margin:8px 0;
  padding:8px 12px;
  border-radius:999px;
  display:inline-block;
  background:#eef6ff;
  border:1px solid #bfdbfe;
  color:#0b1324;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:clamp(12px,2.8vw,14px);
}
th,td {
  border-bottom:1px solid var(--border);
  padding:10px;
  text-align:left;
}

#timer { font-variant-numeric:tabular-nums; font-weight:700; color:#2563EB }
#progress { font-weight:600 }

.explain {
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  border:1px dashed var(--border);
  background:#f1f5f9;
}
.banner {
  margin:8px 0;
  padding:10px;
  border-radius:10px;
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#7f1d1d;
}
.card.timeout {
  border-color:#fecaca;
  box-shadow:0 0 0 3px rgba(254,202,202,.35);
}

.muted { color:#64748b }
.tiny { font-size:12px }

@media (max-width:640px) {
  .container { margin:16px auto; padding:0 12px }
  .card { padding:14px; border-radius:14px }
  .choices { gap:8px }
  .choice { padding:12px; border-radius:12px }
  .row.space { gap:8px }
  #timer { font-size:16px }
}