@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --brand: #157a6e;
  --brand-dark: #0c443c;
  --brand-soft: #ecf5f3;
  --accent: #499f68;
  --warm: #b4654a;
  --blue: #157a6e;
  --blue-dark: #0c443c;
  --blue-soft: #ecf5f3;
  --navy: #0c443c;
  --text: #33413d;
  --muted: #5d6a65;
  --line: #dcded7;
  --paper: #f8f6f1;
  --soft: #f6f5f0;
  --shadow: 0 14px 36px rgba(12, 68, 60, 0.1);
}

body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: linear-gradient(155deg, #f8f6f1, #ecf5f3);
}

h1,
h2,
h3,
.brand strong,
.timer,
.btn {
  font-family: "Poppins", "Segoe UI", sans-serif;
}

.topbar {
  height: 72px;
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--brand-dark);
  color: white;
  box-shadow: 0 8px 24px rgba(5, 36, 32, 0.16);
}

.brand strong,
.brand span {
  color: white;
}

.brand span {
  opacity: 0.72;
}

.brand-mark {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}

.timer {
  background: white;
  color: var(--brand-dark);
}

.risk-pill {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.start-page {
  min-height: calc(100vh - 72px);
}

.start-card {
  border-color: var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(12, 68, 60, 0.14);
}

.start-info {
  position: relative;
  overflow: hidden;
  background: var(--brand-dark);
}

.start-info::after {
  content: "?";
  position: absolute;
  right: -4px;
  bottom: -55px;
  color: rgba(255, 255, 255, 0.05);
  font-family: "Poppins", sans-serif;
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.start-info > * {
  position: relative;
  z-index: 1;
}

.exam-fact {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
}

.exam-choice,
.question-card,
.sidebar,
.integrity-panel,
.submit-screen > div,
.result-card {
  border-color: var(--line);
}

.exam-choice.active,
.qnav.active,
.btn {
  border-color: var(--brand);
  background: var(--brand);
}

.exam-choice.active {
  box-shadow: 0 0 0 3px rgba(21, 122, 110, 0.13);
}

.exam-choice.active strong,
.exam-choice.active span {
  color: white;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(73, 159, 104, 0.18);
}

.sidebar-note,
.tag {
  border-color: #cfe1dd;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.question-card {
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.option:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

@media (max-width: 720px) {
  .topbar {
    height: auto;
    min-height: 68px;
  }

  .risk-pill {
    display: none;
  }
}