:root {
  --color-background: #f7f5fb;
  --color-surface: #ffffff;
  --color-surface-soft: #efeaf9;

  --color-text: #241b3d;
  --color-text-soft: #6b6480;

  --color-primary: #5b3fa0;
  --color-primary-dark: #43307c;
  --color-primary-light: #ece5f9;

  --color-accent: #d99a3f;
  --color-accent-soft: #fbf1e0;

  --color-border: #e2dcf0;
  --color-error: #b64d4d;
  --color-error-soft: #fff1f1;

  --color-success: #168356;
  --color-success-soft: #e9f8ef;

  --color-info: #2f6fb0;
  --color-info-soft: #e9f2fb;

  --shadow-small: 0 10px 24px rgba(36, 27, 61, 0.08);
  --shadow-medium: 0 18px 45px rgba(36, 27, 61, 0.12);
  --shadow-large: 0 30px 80px rgba(36, 27, 61, 0.18);

  --radius-small: 12px;
  --radius-medium: 18px;
  --radius-large: 28px;
  --radius-extra-large: 38px;

  --transition: 0.25s ease;
}


/* ========================================
   ОСНОВНИ НАСТРОЙКИ
======================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(180, 160, 230, 0.28),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #faf9fd 0%,
      var(--color-background) 100%
    );

  color: var(--color-text);

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  line-height: 1.5;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}


/* ========================================
   ГОРНО МЕНЮ
======================================== */

.lesson-header {
  position: sticky;
  top: 0;
  z-index: 100;

  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 62px);

  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(260px, 430px)
    minmax(180px, 1fr);

  align-items: center;
  gap: 24px;

  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(226, 220, 240, 0.95);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lesson-logo {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--color-text);
  text-decoration: none;

  font-size: 1.08rem;
  font-weight: 800;
}

.lesson-logo img {
  width: 44px;
  height: 44px;

  object-fit: contain;

  border-radius: 12px;
}

.lesson-progress-wrapper {
  display: grid;
  gap: 7px;
}

.lesson-progress-info {
  display: flex;
  justify-content: space-between;
  gap: 18px;

  color: var(--color-text-soft);

  font-size: 0.8rem;
  font-weight: 700;
}

.lesson-progress-track {
  width: 100%;
  height: 8px;

  overflow: hidden;

  border-radius: 999px;
  background: #e9e4f4;
}

.lesson-progress-bar {
  width: 20%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--color-primary),
      #8a6fca
    );

  transition: width 0.35s ease;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.header-button,
.back-button {
  min-height: 42px;
  padding: 0 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 0.9rem;
  font-weight: 800;

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.header-button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.back-button {
  border: 1px solid transparent;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
}

.header-button:hover,
.back-button:hover {
  transform: translateY(-1px);
}

.header-button:hover {
  border-color: #c3b6e0;
  background: #f9f7fd;
}

.back-button:hover {
  background: var(--color-primary-dark);
}


/* ========================================
   ОСНОВНО СЪДЪРЖАНИЕ
======================================== */

main {
  width: min(1480px, 100%);
  margin: 0 auto;
}


/* ========================================
   HERO СЕКЦИЯ
======================================== */

.lesson-hero {
  padding:
    clamp(50px, 7vw, 96px)
    clamp(22px, 6vw, 88px)
    clamp(40px, 6vw, 70px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, 0.92fr);

  align-items: center;
  gap: clamp(36px, 6vw, 90px);
}

.lesson-hero-content {
  position: relative;
  z-index: 2;
}

.lesson-label,
.screen-label {
  margin: 0 0 12px;

  color: var(--color-primary);

  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lesson-hero h1 {
  max-width: 780px;
  margin: 0;

  font-size: clamp(2.6rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.lesson-hero h1 span {
  color: var(--color-primary);
}

.lesson-introduction {
  max-width: 700px;
  margin: 24px 0 0;

  color: var(--color-text-soft);

  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
}

.data-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  max-width: 700px;
  margin-top: 22px;
  padding: 14px 16px;

  border: 1px solid #f0dfae;
  border-radius: var(--radius-small);

  background: var(--color-accent-soft);

  color: #6e4d0e;

  font-size: 0.86rem;
  line-height: 1.55;
}

.data-disclaimer-icon {
  flex: 0 0 auto;
  font-size: 1rem;
}

.lesson-buttons {
  margin-top: 30px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.primary-button,
.secondary-button {
  min-height: 50px;
  padding: 0 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  font-weight: 800;

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.primary-button {
  border: 1px solid transparent;

  background: var(--color-primary);
  color: white;

  box-shadow:
    0 12px 28px
    rgba(91, 63, 160, 0.22);
}

.primary-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.primary-button:disabled {
  cursor: not-allowed;

  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

.secondary-button {
  border: 1px solid var(--color-border);

  background: var(--color-surface);
  color: var(--color-text);
}

.secondary-button:hover {
  border-color: #b6a6dd;
  background: #f9f7fd;
  transform: translateY(-2px);
}

.lesson-information {
  margin-top: 32px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.information-card {
  min-width: 135px;
  padding: 15px 17px;

  display: grid;
  gap: 2px;

  border: 1px solid var(--color-border);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.78);
}

.information-card strong {
  font-size: 1.2rem;
}

.information-card span {
  color: var(--color-text-soft);

  font-size: 0.8rem;
}


/* ========================================
   HERO ВИЗУАЛИЗАЦИЯ – ПРЕВЮ НА ДВАМА КЛИЕНТИ
======================================== */

.lesson-hero-visual {
  position: relative;

  min-height: 420px;

  display: grid;
  place-items: center;
}

.hero-client-stack {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(380px, 90vw);
}

.hero-client-preview {
  width: 100%;
  padding: 20px 22px;

  border-radius: var(--radius-large);

  background: var(--color-surface);

  box-shadow: var(--shadow-large);
}

.hero-client-preview-a {
  transform: rotate(-1.5deg);
}

.hero-client-preview-b {
  transform: rotate(1.5deg);
}

.hero-client-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px;

  border-radius: 999px;

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-client-preview-a .hero-client-tag {
  background: var(--color-error-soft);
  color: var(--color-error);
}

.hero-client-preview-b .hero-client-tag {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.hero-client-preview strong {
  display: block;
  font-size: 1.1rem;
}

.hero-client-preview p {
  margin: 6px 0 0;
  color: var(--color-text-soft);
  font-size: 0.86rem;
}

.hero-versus-badge {
  position: relative;
  z-index: 3;

  width: 46px;
  height: 46px;
  margin: -15px 0;

  display: grid;
  place-items: center;

  border: 4px solid var(--color-background);
  border-radius: 50%;

  background: var(--color-primary);
  color: white;

  font-size: 0.8rem;
  font-weight: 900;

  box-shadow: var(--shadow-medium);
}


/* ========================================
   РАБОТНА ЗОНА
======================================== */

.mission-workspace {
  margin:
    0
    clamp(16px, 4vw, 54px)
    90px;

  display: grid;
  grid-template-columns:
    280px
    minmax(0, 1fr);

  gap: 24px;
  align-items: start;
}

.mission-sidebar,
.mission-panel {
  border: 1px solid var(--color-border);

  background: var(--color-surface);

  box-shadow: var(--shadow-medium);
}

.mission-sidebar {
  position: sticky;
  top: 100px;

  padding: 14px;

  display: grid;
  gap: 8px;

  border-radius: 22px;
}

.mission-step {
  width: 100%;
  padding: 12px;

  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;

  border: 0;
  border-radius: 14px;

  background: transparent;
  color: var(--color-text-soft);

  text-align: left;

  transition:
    background var(--transition),
    transform var(--transition);
}

.mission-step:hover {
  background: #f8f6fc;
}

.mission-step.active {
  background: var(--color-surface-soft);
}

.step-number {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #ece7f8;
  color: var(--color-text);

  font-weight: 900;

  transition:
    background var(--transition),
    color var(--transition);
}

.mission-step.active .step-number,
.mission-step.completed .step-number {
  background: var(--color-primary);
  color: white;
}

.step-content {
  display: grid;
}

.step-content strong {
  color: var(--color-text);
}

.step-content small {
  margin-top: 2px;

  color: var(--color-text-soft);
}

.mission-panel {
  min-height: 650px;

  overflow: hidden;

  border-radius: var(--radius-large);
}

.mission-screen {
  display: none;

  padding:
    clamp(26px, 4vw, 56px);

  animation: screenAppears 0.35s ease;
}

.mission-screen.active {
  display: block;
}

@keyframes screenAppears {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.screen-heading {
  margin-bottom: 26px;
}

.screen-heading h2,
#teacher-dialog h2 {
  margin: 0;

  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.screen-heading > p:not(.screen-label) {
  max-width: 780px;
  margin: 10px 0 0;

  color: var(--color-text-soft);
}


/* ========================================
   ПРЕДУПРЕЖДЕНИЕ ЗА УЧЕБНИ ДАННИ
======================================== */

.inline-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 16px 0;
  padding: 12px 14px;

  border: 1px solid #f0dfae;
  border-radius: var(--radius-small);

  background: var(--color-accent-soft);
  color: #6e4d0e;

  font-size: 0.85rem;
  line-height: 1.55;
}


/* ========================================
   КЛИЕНТСКИ КАРТИ (СТЪПКА 1)
======================================== */

.client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.client-card {
  padding: 22px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);

  background: var(--color-surface);
}

.client-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.client-avatar {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  font-size: 1.3rem;
  font-weight: 900;
  color: white;
}

.client-avatar-a {
  background: linear-gradient(145deg, #e08a8a, #b64d4d);
}

.client-avatar-b {
  background: linear-gradient(145deg, #4fb889, #168356);
}

.client-avatar-c {
  background: linear-gradient(145deg, #6fa0d9, #2f6fb0);
}

.client-card h3 {
  margin: 0;
  font-size: 1.15rem;
}

.client-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--color-text-soft);
}

.client-card ul li strong {
  color: var(--color-text);
}


/* ========================================
   ЗАДАЧИ / ОТГОВОРИ – ОБЩИ КОМПОНЕНТИ
======================================== */

.task-card {
  padding: 24px;
  margin-bottom: 20px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);

  background: var(--color-surface);
}

.task-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.task-card > p:first-of-type {
  margin: 0 0 16px;
  color: var(--color-text-soft);
}

.task-hint {
  margin-top: 4px;
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

.no-grade-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 10px;

  border-radius: 999px;

  background: var(--color-info-soft);
  color: var(--color-info);

  font-size: 0.76rem;
  font-weight: 800;
}

.bonus-task-card {
  border: 1px dashed #c9b6ea;
  background: #faf8fe;
}

.bonus-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px 10px;

  border-radius: 999px;

  background: var(--color-primary-light);
  color: var(--color-primary-dark);

  font-size: 0.76rem;
  font-weight: 800;
}


/* Вариант / избор с radio-бутони */

.variant-choice {
  display: grid;
  gap: 10px;
}

.variant-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  background: white;

  cursor: pointer;

  transition:
    border-color var(--transition),
    background var(--transition);
}

.variant-option:hover {
  border-color: #b6a6dd;
}

.variant-option input {
  margin-top: 3px;
}

.variant-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}


/* Свободен текст */

.free-response {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.free-response label {
  font-weight: 800;
  color: var(--color-text);
}

.free-response textarea {
  width: 100%;
  min-height: 100px;
  padding: 13px 14px;
  resize: vertical;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  color: var(--color-text);

  outline: none;

  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.free-response textarea:focus,
.free-response textarea.recorded-answer {
  border-color: var(--color-primary);
}

.free-response textarea:focus {
  box-shadow: 0 0 0 4px rgba(91, 63, 160, 0.1);
}

.free-response small {
  justify-self: end;
  color: var(--color-text-soft);
}


/* Числени отговори */

.answer-grid {
  display: grid;
  gap: 14px;
}

.number-question label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--color-text);
}

.answer-input-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 9px;
  max-width: 320px;
}

.answer-input-wrapper input {
  width: 100%;
  padding: 13px 14px;

  border: 1px solid var(--color-border);
  border-radius: 12px;

  background: white;
  color: var(--color-text);

  outline: none;

  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.answer-input-wrapper input:focus {
  border-color: var(--color-primary);

  box-shadow: 0 0 0 4px rgba(91, 63, 160, 0.1);
}

.answer-input-wrapper span {
  color: var(--color-text-soft);
}

.correct-answer {
  border-color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.wrong-answer {
  border-color: var(--color-error) !important;
  background: var(--color-error-soft) !important;
}

.answer-feedback {
  margin-top: 16px;
  padding: 16px 18px;

  border-radius: 14px;

  font-weight: 700;
}

.answer-feedback[hidden] {
  display: none;
}

.answer-feedback.success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.answer-feedback.error {
  background: var(--color-error-soft);
  color: var(--color-error);
}

.answer-feedback.info {
  background: var(--color-info-soft);
  color: var(--color-info);
}


/* ========================================
   ИНФОГРАФИКА / ТАБЛИЦА (СТЪПКА 2)
======================================== */

.risk-data-table-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
}

.risk-data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.risk-data-table caption {
  text-align: left;
  margin-bottom: 10px;
  color: var(--color-text-soft);
  font-size: 0.82rem;
}

.risk-data-table th,
.risk-data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.risk-data-table thead th {
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-weight: 900;
  font-size: 0.85rem;
}

.risk-data-table tbody tr:hover {
  background: #faf8fe;
}


/* ========================================
   ФОРМУЛА (СТЪПКА 3)
======================================== */

.formula-box {
  padding: 20px 22px;
  margin-bottom: 22px;

  display: flex;
  align-items: center;
  gap: 16px;

  border-radius: var(--radius-medium);

  background: linear-gradient(135deg, #f1ecfb, #fbf1e0);
}

.formula-box-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 16px;
  background: white;

  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-primary);

  box-shadow: var(--shadow-small);
}

.formula-box p {
  margin: 0;
  color: var(--color-text);
}

.formula-box strong {
  font-family: "Courier New", monospace;
}


/* ========================================
   ЗАСТРАХОВАТЕЛНА КАРТА (СТЪПКА 4)
======================================== */

.insurance-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.insurance-client-card {
  padding: 22px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);

  background: var(--color-surface);
}

.insurance-client-card h3 {
  margin: 0 0 4px;
}

.insurance-risk-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 8px 12px;

  border-radius: 12px;
  background: var(--color-surface-soft);
}

.insurance-risk-readout strong {
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}

.insurance-risk-readout span {
  color: var(--color-text-soft);
  font-size: 0.8rem;
}

.insurance-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.insurance-field label {
  font-weight: 800;
  font-size: 0.88rem;
}

.insurance-field select,
.insurance-field input {
  padding: 12px 13px;

  border: 1px solid var(--color-border);
  border-radius: 12px;

  background: white;
  color: var(--color-text);

  outline: none;

  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.insurance-field select:focus,
.insurance-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(91, 63, 160, 0.1);
}

.ratio-check-panel {
  padding: 20px 22px;
  margin-bottom: 20px;

  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);

  background: var(--color-surface);
}

.ratio-check-panel h3 {
  margin: 0 0 6px;
}

.ratio-check-panel > p {
  margin: 0 0 14px;
  color: var(--color-text-soft);
}

.ratio-result {
  margin-top: 14px;
  padding: 14px 16px;

  border-radius: 12px;

  background: var(--color-info-soft);
  color: var(--color-info);

  font-weight: 700;
}

.ratio-result[hidden] {
  display: none;
}


/* ========================================
   КАРТА ЗА ИЗХОД (СТЪПКА 5)
======================================== */

.exit-mc-options {
  display: grid;
  gap: 10px;
}

.exit-note {
  margin-top: 14px;
  padding: 14px 16px;

  border-radius: 12px;

  background: var(--color-success-soft);
  color: var(--color-success);

  font-weight: 700;
}

.exit-note[hidden] {
  display: none;
}

.summary-card {
  padding: 24px;
  margin-top: 22px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);

  background: linear-gradient(135deg, #f3effc, white);
}

.summary-card h3 {
  margin: 0 0 14px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.summary-stat {
  padding: 15px;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  background: white;
  text-align: center;
}

.summary-stat strong {
  display: block;
  font-size: 1.4rem;
  color: var(--color-primary-dark);
}

.summary-stat span {
  color: var(--color-text-soft);
  font-size: 0.8rem;
}


/* ========================================
   БУТОНИ ПОД ЕКРАНИТЕ
======================================== */

.screen-actions {
  margin-top: 30px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.screen-actions-end {
  justify-content: flex-end;
}


/* ========================================
   УЧИТЕЛСКИ ПРОЗОРЕЦ
======================================== */

#teacher-dialog {
  position: relative;

  width: min(640px, calc(100vw - 30px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 32px;

  border: 0;
  border-radius: 24px;

  color: var(--color-text);

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.27);
}

#teacher-dialog::backdrop {
  background: rgba(30, 20, 50, 0.58);

  backdrop-filter: blur(5px);
}

#teacher-dialog > p:not(.screen-label) {
  color: var(--color-text-soft);
}

#teacher-dialog h4 {
  margin: 20px 0 8px;
  font-size: 1rem;
}

#teacher-dialog ul {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-soft);
}

#teacher-dialog table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

#teacher-dialog table th,
#teacher-dialog table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.dialog-close-button {
  position: absolute;
  top: 14px;
  right: 18px;

  border: 0;
  background: transparent;
  color: var(--color-text);

  font-size: 2rem;
}


/* ========================================
   ИЗВЕСТИЕ ДОЛУ ВДЯСНО
======================================== */

.notification {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;

  max-width: 360px;
  padding: 14px 18px;

  border-radius: 14px;

  background: #372a5c;
  color: white;

  box-shadow: var(--shadow-medium);

  opacity: 0;
  pointer-events: none;

  transform: translateY(16px);

  transition:
    opacity var(--transition),
    transform var(--transition);
}

.notification.show {
  opacity: 1;

  transform: translateY(0);
}



/* ========================================
   ТРИМА КЛИЕНТИ
======================================== */

.client-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-client-preview-c {
  transform: rotate(-1deg);
}

.hero-client-preview-c .hero-client-tag {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.client-avatar-small {
  width: 30px;
  height: 30px;

  display: inline-grid;

  border-radius: 9px;

  font-size: 0.9rem;
}


/* ========================================
   РАЗШИРЕНА УЧЕБНА БАЗА (СТЪПКА 2)
======================================== */

.risk-data-table-wide {
  min-width: 640px;
}

.risk-data-table-wide thead th {
  text-align: center;
}

.risk-data-table-wide thead tr:first-child th:first-child {
  text-align: left;
  vertical-align: bottom;
}

.risk-data-table-wide thead tr:first-child th[colspan] {
  border-left: 2px solid white;
}

.risk-data-table-wide td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.risk-data-table-wide tbody th,
.risk-data-table-wide tfoot th {
  font-weight: 900;
  white-space: nowrap;
}

.risk-data-table-wide tfoot th,
.risk-data-table-wide tfoot td {
  background: var(--color-primary-light);
  font-weight: 900;
  border-bottom: 0;
}

.table-reading-note {
  margin: 0 0 22px;
  padding: 14px 16px;

  border-left: 4px solid var(--color-accent);
  border-radius: 12px;

  background: var(--color-accent-soft);
  color: var(--color-text);

  font-size: 0.9rem;
}


/* ========================================
   КОНСТРУКТОР НА УСЛОВНА ВЕРОЯТНОСТ
======================================== */

.cp-builder {
  display: grid;
  gap: 12px;
}

.cp-step {
  padding: 14px 16px;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  background: white;

  transition: opacity var(--transition), background var(--transition);
}

.cp-step-locked {
  opacity: 0.45;
}

.cp-step-done {
  border-color: #bfe5cf;
  background: #f7fcf9;
}

.cp-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;

  font-weight: 800;
  color: var(--color-text);
}

.cp-step-number {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--color-primary-light);
  color: var(--color-primary-dark);

  font-size: 0.8rem;
  font-weight: 900;
}

.cp-step-done .cp-step-number {
  background: var(--color-success);
  color: white;
}

.cp-select {
  width: 100%;
  max-width: 420px;
  padding: 12px 13px;

  border: 1px solid var(--color-border);
  border-radius: 12px;

  background: white;
  color: var(--color-text);

  outline: none;
}

.cp-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(91, 63, 160, 0.1);
}

.cp-builder input:disabled,
.cp-select:disabled {
  cursor: not-allowed;
}

.cp-fraction {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-fraction-prefix {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 1.1rem;
}

.cp-fraction-body {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 130px;
}

.cp-fraction-body input {
  width: 100%;
  padding: 10px 12px;

  border: 1px solid var(--color-border);
  border-radius: 10px;

  background: white;
  color: var(--color-text);
  text-align: center;

  outline: none;
}

.cp-fraction-body input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(91, 63, 160, 0.1);
}

.cp-fraction-bar {
  width: 100%;
  height: 3px;

  border-radius: 3px;

  background: var(--color-text);
}

.cp-check-button {
  justify-self: start;
}

.cp-check-button[hidden],
.comparison-panel[hidden] {
  display: none;
}

.cp-builder .answer-feedback {
  margin-top: 0;
}

.client-builder {
  margin-top: 18px;
}

.client-builder h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.transfer-task-card {
  border: 1px dashed #c9b6ea;
  background: #faf8fe;
}


/* ========================================
   СРАВНЕНИЕ НА ОБЪРНАТОТО УСЛОВИЕ
======================================== */

.comparison-panel {
  padding: 20px 22px;
  margin-bottom: 20px;

  border-radius: var(--radius-medium);

  background: linear-gradient(135deg, #f1ecfb, #fbf1e0);
}

.comparison-panel h3 {
  margin: 0 0 14px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.comparison-item {
  display: grid;
  gap: 4px;
  padding: 16px;

  border-radius: 14px;

  background: white;
  text-align: center;
}

.comparison-notation {
  font-family: "Courier New", monospace;
  font-weight: 900;
  color: var(--color-primary-dark);
}

.comparison-fraction {
  font-size: 1.3rem;
  font-weight: 900;
}

.comparison-fraction mark {
  padding: 0 4px;
  border-radius: 6px;
  background: var(--color-accent-soft);
  color: #a3651a;
}

.comparison-item strong {
  font-size: 1.2rem;
}

.comparison-item small {
  color: var(--color-text-soft);
}


/* ========================================
   ЗАСТРАХОВАТЕЛНА КАРТА – ТРИМА КЛИЕНТИ
======================================== */

.insurance-card-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insurance-profile {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

@media (max-width: 1050px) {

  .client-grid-three,
  .insurance-card-grid-three,
  .comparison-grid {
    grid-template-columns: 1fr;
  }

}


/* ========================================
   АДАПТАЦИЯ ЗА ТАБЛЕТ
======================================== */

@media (max-width: 1050px) {

  .lesson-header {
    grid-template-columns:
      1fr
      auto;
  }

  .lesson-progress-wrapper {
    display: none;
  }

  .lesson-hero {
    grid-template-columns: 1fr;
  }

  .lesson-hero-content {
    text-align: center;
  }

  .lesson-introduction,
  .data-disclaimer {
    margin-left: auto;
    margin-right: auto;
  }

  .lesson-buttons,
  .lesson-information {
    justify-content: center;
  }

  .mission-workspace {
    grid-template-columns: 1fr;
  }

  .mission-sidebar {
    position: static;

    grid-template-columns:
      repeat(6, minmax(130px, 1fr));

    overflow-x: auto;
  }

  .mission-step {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .step-number {
    margin: 0 auto;
  }

  .step-content small {
    display: none;
  }

  .client-grid,
  .insurance-card-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

}


/* ========================================
   АДАПТАЦИЯ ЗА ТЕЛЕФОН
======================================== */

@media (max-width: 720px) {

  .lesson-header {
    min-height: 66px;
    padding: 10px 14px;
  }

  .lesson-logo span {
    display: none;
  }

  .lesson-logo img {
    width: 40px;
    height: 40px;
  }

  .header-actions {
    gap: 7px;
  }

  .header-button,
  .back-button {
    min-height: 39px;
    padding: 0 11px;

    font-size: 0.78rem;
  }

  .lesson-hero {
    padding-top: 40px;
  }

  .lesson-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
  }

  .lesson-buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .lesson-information {
    align-items: stretch;
    flex-direction: column;
  }

  .information-card {
    width: 100%;
  }

  .lesson-hero-visual {
    min-height: 320px;
  }

  .mission-workspace {
    margin-left: 12px;
    margin-right: 12px;
  }

  .mission-sidebar {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    overflow-x: visible;
  }

  .mission-sidebar {
    padding: 10px;
    gap: 6px;
  }

  .mission-step {
    padding: 10px 8px;

    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;

    text-align: left;
  }

  .step-number {
    width: 30px;
    height: 30px;
    margin: 0;

    font-size: 0.85rem;
  }

  .step-content strong {
    font-size: 0.82rem;
    line-height: 1.25;

    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .mission-screen {
    padding: 25px 18px;
  }

  .answer-input-wrapper {
    max-width: none;
  }

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

  .screen-actions-end {
    flex-direction: column;
  }

}


/* ========================================
   ПЕЧАТ
======================================== */

@media print {

  .lesson-header,
  .mission-sidebar,
  .screen-actions,
  .notification,
  #teacher-dialog {
    display: none !important;
  }

  .mission-screen {
    display: block !important;
  }

  .mission-workspace {
    grid-template-columns: 1fr;
  }

}


/* ========================================
   ЗА УЧИТЕЛЯ – КРАТКИ НАСОКИ
======================================== */

#teacher-dialog {
  max-height: calc(100dvh - 32px);
}

#teacher-dialog h3 {
  margin: 24px 0 10px;

  color: var(--color-primary-dark);

  font-size: 1.05rem;
}

.teacher-guide-facts {
  margin-top: 18px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teacher-guide-facts span {
  padding: 8px 14px;

  border-radius: 999px;

  background: var(--color-surface-soft);
  color: var(--color-text-soft);

  font-size: 0.9rem;
}

.teacher-guide-facts strong {
  color: var(--color-text);
}

#teacher-dialog > p.teacher-guide-note {
  margin: 18px 0 0;
  padding: 12px 16px;

  border-left: 4px solid var(--color-accent);
  border-radius: 12px;

  background: var(--color-accent-soft);
  color: var(--color-text);

  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}

#teacher-dialog ul.teacher-guide-list {
  display: grid;
  gap: 8px;

  font-size: 0.95rem;
  line-height: 1.5;
}

.teacher-guide-list strong {
  color: var(--color-text);
}

.teacher-guide-list li::marker {
  color: var(--color-primary);
}

@media (max-width: 720px) {

  #teacher-dialog {
    width: min(640px, calc(100vw - 24px));
    padding: 24px 18px 22px;

    border-radius: 20px;
  }

  #teacher-dialog h2 {
    padding-right: 36px;
  }

  #teacher-dialog h3 {
    margin-top: 20px;
  }

  #teacher-dialog ul.teacher-guide-list {
    font-size: 0.92rem;
  }

}