:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#38bdf8;
  --accent-2:#22c55e;
  --error:#ef4444;
  --border:#1f2937;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:linear-gradient(135deg,#0b1221,#0f172a 65%);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,sans-serif;
}

.container{
  max-width:780px;
  margin:40px auto;
  padding:0 16px;
}

.header{
  text-align:center;
  margin-bottom:24px;
}

.subtitle{color:var(--muted); margin-top:6px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.center{text-align:center}

.qr-wrap{margin-top:16px}
.qr{max-width:260px; width:100%; height:auto; border-radius:8px; border:1px solid var(--border)}

.progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#0b1221;
  border:1px solid var(--border);
  margin-bottom:8px;
  overflow:hidden;
}
.progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .25s ease;
}
.progress-text{color:var(--muted); margin:0 0 12px 0}

.question{
  margin-top:8px;
  margin-bottom:16px;
  font-size:1.25rem;
}

.answers{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.answer-text input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1221;
  color:var(--text);
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.answer-text input::placeholder{ color:var(--muted) }
.answer-text input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(56,189,248,.15);
}

.hint{
  color:var(--muted);
  font-size:.9rem;
  margin-top:8px;
}

.alert{
  padding:10px 12px;
  border-radius:8px;
  margin:8px 0 12px 0;
  font-size:.95rem;
}
.alert.error{ background:rgba(239,68,68,.15); border:1px solid #7f1d1d }
.alert.info{ background:rgba(34,197,94,.15); border:1px solid #064e3b }

.actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:#0b1221;
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .06s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{ border-color:var(--accent); background:rgba(56,189,248,.07) }
.btn:active{ transform:translateY(1px) }

.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color:transparent;
  color:#0b1221;
  font-weight:600;
}
.btn.ghost{
  background:transparent;
}

.footer{
  text-align:center;
  color:var(--muted);
  margin-top:18px;
}

/* A11y pro skrytý text */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
   white-space:nowrap;