:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel-2: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #334155;
  --primary: #38bdf8;
  --primary-dark: #0284c7;
  --ok: #22c55e;
  --bad: #ef4444;
  --warn: #f59e0b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #1e293b, var(--bg));
  color: var(--text);
  min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: rgba(15, 23, 42, .88); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
.brand a { color: white; font-weight: 800; letter-spacing: .2px; }
nav { display: flex; align-items: center; gap: 16px; }
.container { width: min(1180px, calc(100% - 32px)); margin: 28px auto; }
.card {
  background: rgba(17, 24, 39, .92);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  margin-bottom: 20px;
}
.hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
h1, h2 { margin-top: 0; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { margin: 0; }
.metric .label { display: block; color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.metric strong { font-size: 2.1rem; }
.metric.soft { background: var(--panel-2); border-radius: 16px; padding: 18px; }
button, .button {
  border: 0; border-radius: 14px; padding: 12px 18px; cursor: pointer;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
button.primary, .primary { background: var(--primary); color: #082f49; }
button.primary:hover, .primary:hover { background: #7dd3fc; text-decoration: none; }
button.big { font-size: 1.1rem; padding: 16px 24px; }
button.full { width: 100%; margin-top: 16px; }
.link-button { background: transparent; color: var(--primary); padding: 0; }
.inline-form { display: inline; margin: 0; }
.login-card { max-width: 420px; margin: 70px auto; }
label { display: block; margin: 12px 0 6px; color: var(--muted); }
input[type="text"], input[type="password"] {
  width: 100%; border: 1px solid var(--border); background: #0b1220; color: var(--text);
  border-radius: 12px; padding: 12px 14px; outline: none;
}
input:focus { border-color: var(--primary); }
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; }
.alert.error { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.45); }
.alert.success { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.45); }
.warning-card { border-color: rgba(245,158,11,.6); }
.section-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 700; }
tr.ok td { background: rgba(34,197,94,.06); }
tr.bad td { background: rgba(239,68,68,.06); }
.progress-line { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); margin-bottom: 12px; }
.progress { height: 10px; background: #020617; border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.progress div { height: 100%; background: var(--primary); border-radius: 999px; }
.test-card h1 { font-size: 1.55rem; }
.answer-option {
  display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px;
  background: #0b1220; border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; margin: 12px 0; color: var(--text); cursor: pointer;
}
.answer-option:hover { border-color: var(--primary); }
.answer-option input { display: none; }
.answer-option input:checked + .letter { background: var(--primary); color: #082f49; }
.letter {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--panel-2); font-weight: 800;
}
.actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.result-card { text-align: center; }
.result-card .score { font-size: 4rem; font-weight: 900; margin: 10px 0; }
.result-card.passed { border-color: rgba(34,197,94,.65); }
.result-card.failed { border-color: rgba(239,68,68,.65); }
.options-review { display: grid; gap: 10px; margin: 18px 0; }
.review-option { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #0b1220; border: 1px solid var(--border); }
.review-option.correct { border-color: rgba(34,197,94,.8); background: rgba(34,197,94,.09); }
.question-text { font-size: 1.15rem; }
.danger-zone { border-color: rgba(239,68,68,.35); }
.reset-form { display: flex; gap: 12px; align-items: center; }
button.danger { background: var(--bad); color: white; }
@media (max-width: 800px) {
  .hero, .section-header, .progress-line, .reset-form { flex-direction: column; align-items: stretch; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { flex-direction: column; gap: 12px; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .container { width: min(100% - 18px, 1180px); }
  .card { padding: 18px; }
}