:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --panel: #ffffff;
  --ink: #17211c;
  --muted: #617067;
  --line: #d7ded9;
  --accent: #ce5a28;
  --accent-dark: #9d3e1a;
  --ok: #177245;
  --bad: #b3261e;
  --soft: #eef3ef;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 0 18px;
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background: var(--accent-dark);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

button.secondary {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
}

button.secondary:hover {
  background: var(--soft);
}

.app-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.topbar,
.test-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(30px, 4vw, 46px);
}

h2 {
  font-size: clamp(26px, 3vw, 38px);
}

.progress {
  width: min(320px, 100%);
  color: var(--muted);
  font-size: 14px;
}

.progress-track {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe4df;
}

.progress-bar {
  width: 50%;
  height: 100%;
  background: var(--accent);
  transition: width 180ms ease;
}

.workspace {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgb(23 33 28 / 10%);
  padding: clamp(18px, 3vw, 34px);
}

.login-view {
  min-height: calc(100vh - 56px);
  display: grid;
  place-items: center;
}

.login-panel {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 18px 50px rgb(23 33 28 / 10%);
}

.login-copy {
  color: var(--muted);
  line-height: 1.5;
}

.login-panel label {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: var(--ink);
  font-weight: 700;
}

.login-panel input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  font: inherit;
}

.login-panel button {
  width: 100%;
  margin-top: 20px;
}

.login-error {
  min-height: 22px;
  margin: 10px 0 0;
  color: var(--bad);
  font-weight: 700;
}

.login-hint {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.user-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.language-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.language-control select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 0 10px;
  font: inherit;
}

.user-panel button {
  min-height: 36px;
  padding: 0 12px;
}

.slide-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: clamp(24px, 5vw, 54px);
  align-items: center;
  min-height: 520px;
}

.ppt-slide-panel {
  min-height: 520px;
}

.ppt-slide-frame {
  margin: 0;
}

.ppt-slide-frame img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgb(23 33 28 / 10%);
}

.ppt-slide-frame figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.training-outline {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  padding: clamp(18px, 3vw, 28px);
  text-align: left;
}

.training-outline h2 {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: clamp(22px, 3vw, 32px);
}

.training-outline ul {
  margin: 0;
  padding-left: 0;
}

.training-outline .chapter-list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.training-outline li {
  padding-left: 4px;
}

.training-outline strong {
  color: var(--text);
}

.training-outline .article-list {
  margin-top: 6px;
  padding-left: 24px;
  list-style: disc;
}

.slide-infographic {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff url("assets/odpovednosti-subjektu.png") center / cover no-repeat;
  overflow: hidden;
  padding: 0;
}

.slide-infographic h2 {
  position: absolute;
  left: 2.8%;
  top: 1.5%;
  width: 94.5%;
  margin: 0;
  background: rgba(255, 255, 255, 0.98);
  color: #111827;
  font-size: clamp(18px, 3.1vw, 42px);
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}

.infographic-grid {
  position: absolute;
  inset: 0;
}

.infographic-card {
  position: absolute;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.infographic-card.role-1 {
  left: 1.1%;
  top: 9.6%;
  width: 31.2%;
  height: 39.8%;
}

.infographic-card.role-2 {
  left: 34.2%;
  top: 9.6%;
  width: 30.9%;
  height: 39.8%;
}

.infographic-card.role-6 {
  left: 66.7%;
  top: 9.6%;
  width: 31.8%;
  height: 39.8%;
}

.infographic-card.role-3 {
  left: 1.1%;
  top: 52.6%;
  width: 31.2%;
  height: 39.8%;
}

.infographic-card.role-4 {
  left: 34.2%;
  top: 52.6%;
  width: 30.9%;
  height: 39.8%;
}

.infographic-card.role-5 {
  left: 66.7%;
  top: 52.6%;
  width: 31.8%;
  height: 39.8%;
}

.infographic-card header {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 1.2%;
  width: 58%;
  min-height: 18%;
  background: rgba(255, 255, 255, 0.98);
  z-index: 2;
}

.infographic-number {
  display: inline-grid;
  width: clamp(30px, 4vw, 48px);
  height: clamp(30px, 4vw, 48px);
  place-items: center;
  border-radius: 9px;
  background: var(--brand);
  color: #ffffff;
  font-size: clamp(18px, 2.5vw, 30px);
  font-weight: 900;
}

.infographic-card h3 {
  margin: 0;
  background: rgba(255, 255, 255, 0.98);
  font-size: clamp(15px, 2vw, 27px);
  line-height: 1.1;
  text-transform: uppercase;
}

.infographic-bubble {
  position: absolute;
  left: 0;
  top: 20%;
  width: 45%;
  max-height: 78%;
  border: 1px solid rgba(230, 230, 230, 0.95);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  overflow: auto;
  padding: 2.8% 3.3%;
  z-index: 2;
}

.infographic-card ul {
  display: grid;
  gap: 0.55em;
  margin: 0;
  padding-left: 1.1em;
  color: #1f2a24;
  font-size: clamp(10px, 1.05vw, 15px);
  line-height: 1.35;
}

.infographic-card.role-2 .infographic-bubble {
  width: 52%;
}

.infographic-card.role-4 .infographic-bubble,
.infographic-card.role-5 .infographic-bubble {
  width: 48%;
}

.infographic-card.role-6 .infographic-bubble {
  width: 45%;
}

.infographic-card.purple {
  border-top-color: #5e2b97;
}

.infographic-card.purple .infographic-number {
  background: #5e2b97;
}

.infographic-card.yellow {
  border-top-color: #f2a900;
}

.infographic-card.yellow .infographic-number {
  background: #f2a900;
}

.infographic-card.green {
  border-top-color: #16823a;
}

.infographic-card.green .infographic-number {
  background: #16823a;
}

.infographic-card.blue {
  border-top-color: #1f5fae;
}

.infographic-card.blue .infographic-number {
  background: #1f5fae;
}

.infographic-card.red {
  border-top-color: #d81919;
}

.infographic-card.red .infographic-number {
  background: #d81919;
}

.lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}

.bullet-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.bullet-list li {
  border-left: 4px solid var(--accent);
  padding: 10px 0 10px 16px;
  color: #25352c;
  line-height: 1.45;
}

.slide-visual {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfa;
  text-align: center;
}

.slide-visual img {
  display: block;
  width: min(100%, 300px);
  max-height: 390px;
  margin: 0 auto;
  object-fit: contain;
}

.slide-visual figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.counter {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 700;
}

.question-panel {
  min-height: 350px;
}

fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}

legend {
  margin-bottom: 22px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
}

.answer-options {
  display: grid;
  gap: 12px;
}

.question-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  gap: 14px;
  align-items: start;
  margin: 0 0 22px;
}

.question-image {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfa;
  text-align: center;
}

.question-image img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
}

.question-image.image-missing img {
  display: none;
}

.question-image figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.answer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
}

.answer:hover {
  border-color: #c48a6f;
  background: #fff7f2;
}

.answer input {
  margin-top: 3px;
}

.answer small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.correct-answer-note {
  margin-top: 16px;
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 8px;
  background: #eef8ef;
  color: #1f5f25;
  padding: 12px 14px;
  font-weight: 700;
}

.result-view {
  text-align: center;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(23 33 28 / 58%);
}

.modal-panel {
  width: min(560px, 100%);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 24px 80px rgb(23 33 28 / 24%);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.score {
  margin: 18px 0 26px;
  font-size: clamp(38px, 7vw, 72px);
  font-weight: 900;
  color: var(--accent-dark);
}

.result-details {
  display: grid;
  gap: 12px;
  width: min(760px, 100%);
  margin: 0 auto 28px;
  text-align: left;
}

.result-row {
  border: 1px solid var(--line);
  border-left-width: 6px;
  border-radius: 8px;
  padding: 14px 16px;
  background: #ffffff;
}

.result-row.correct {
  border-left-color: var(--ok);
}

.result-row.wrong {
  border-left-color: var(--bad);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 780px) {
  .topbar,
  .test-header {
    align-items: stretch;
    flex-direction: column;
  }

  .slide-panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .actions {
    justify-content: stretch;
  }

  .actions button {
    flex: 1;
  }

  .infographic-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }
}