/* Nowoczesny ciemny motyw oparty o Bootstrap 5.3 color modes */

:root,
[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-bg: #020617;        /* slate-950 */
  --bs-body-color: #e5e7eb;     /* slate-200 */
  --bs-body-color-rgb: 229, 231, 235;
  --bs-body-bg-rgb: 2, 6, 23;

  --bs-primary: #0ea5e9;        /* sky-500 */
  --bs-primary-rgb: 14, 165, 233;
  --bs-secondary: #64748b;      /* slate-500 */
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #22c55e;        /* green-500 */
  --bs-success-rgb: 34, 197, 94;
  --bs-danger: #ef4444;         /* red-500 */
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: #eab308;        /* yellow-500 */
  --bs-warning-rgb: 234, 179, 8;

  --bs-body-secondary-color: rgba(148, 163, 184, 0.9);
  --bs-body-secondary-bg: #020617;
  --bs-body-tertiary-bg: #020617;

  --bs-border-color: rgba(15, 23, 42, 0.9);
  --bs-border-color-translucent: rgba(148, 163, 184, 0.35);

  --bs-card-bg: #020617;
  --bs-card-border-color: rgba(30, 64, 175, 0.35);
  --bs-card-cap-bg: #020617;

  --bs-navbar-color: #e5e7eb;
  --bs-navbar-brand-color: #e5e7eb;
  --bs-navbar-brand-hover-color: #f9fafb;
  --bs-navbar-bg: #020617;

  --bs-link-color: #0ea5e9;
  --bs-link-hover-color: #38bdf8;

  --bs-primary-bg-subtle: #082f49;
  --bs-primary-border-subtle: #0b739f;
  --bs-success-bg-subtle: #022c22;
  --bs-success-border-subtle: #15803d;
  --bs-danger-bg-subtle: #450a0a;
  --bs-danger-border-subtle: #b91c1c;
  --bs-warning-bg-subtle: #422006;
  --bs-warning-border-subtle: #b45309;

  --bs-success-text-emphasis: #4ade80;
  --bs-danger-text-emphasis: #f87171;
}

body {
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #020617 100%);
}

.navbar {
  background: linear-gradient(to right, #020617, #020617) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
}

.card {
  border-radius: 1rem;
  border: 1px solid rgba(30, 64, 175, 0.35);
  background: radial-gradient(circle at top, rgba(56,189,248,0.08) 0, #020617 55%);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
}

.card-header {
  border-bottom-color: rgba(15, 23, 42, 0.9);
}

.btn-primary {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 14px 35px rgba(8, 47, 73, 0.85);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.8), 0 18px 45px rgba(8, 47, 73, 1);
}

.answer-option {
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out;
  border: 1px solid rgba(30, 64, 175, 0.6) !important;
  user-select: none;
  background: rgba(15, 23, 42, 0.85);
}

.answer-option:hover {
  background: radial-gradient(circle at left, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.95));
  border-color: #0ea5e9 !important;
  transform: translateY(-1px);
}

.answer-option.selected {
  background: radial-gradient(circle at left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.98));
  border-color: #0ea5e9 !important;
}

.answer-option input[type="radio"],
.answer-option input[type="checkbox"] {
  accent-color: #0ea5e9;
}

.progress {
  background: rgba(15, 23, 42, 0.9);
}

.progress-bar {
  background-image: linear-gradient(90deg, #0ea5e9, #38bdf8, #22c55e);
}

.tracking-widest { letter-spacing: .35em; }

.accordion-button {
  background-color: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
}

.accordion-button:not(.collapsed) {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.98));
  color: #f9fafb;
}

.accordion-button:focus {
  box-shadow: 0 0 0 .15rem rgba(56, 189, 248, 0.35);
}

.quiz-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #0ea5e9, #0369a1);
  box-shadow: 0 16px 40px rgba(8, 47, 73, 0.95);
  font-size: 1.7rem;
}

.quiz-logo::after { content: "🖥️"; }

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(51, 65, 85, 0.9);
  color: #e5e7eb;
}

.table thead { background: rgba(15, 23, 42, 0.95); }

.table-hover tbody tr:hover { background: rgba(15, 23, 42, 0.9); }

@media (max-width: 576px) {
  .container { padding-inline: 1rem; }
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .navbar, .btn, form { display: none !important; }
}