.contact-est-year {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: #0f2a45;
  letter-spacing: -0.03em;
}

.contact-est-tagline {
  margin: 4px 0 20px;
  font-size: 1.05rem;
  color: #5a7a99;
  font-style: italic;
  line-height: 1.4;
}

.contact-est-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.contact-est-facts li {
  font-size: 0.97rem;
  color: #23425f;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

.contact-est-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.contact-form h3,
.contact-info h3 {
  margin: 0 0 12px;
  font-size: 1.45rem;
  color: #0f2a45;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b9c7d5;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
}

.contact-submit-btn {
  background: linear-gradient(135deg, #1f4f7a, #123455);
  color: #ffffff;
  border: 2px solid #1a2f43;
  border-radius: 999px;
  font-weight: 700;
  padding: 11px 26px;
}

.contact-submit-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.contact-status {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-size: 0.96rem;
  color: #23425f;
}

.contact-status.is-error {
  color: #b42318;
}

.contact-status.is-success {
  color: #1f7a3f;
}

.contact-info p {
  margin: 0 0 8px;
  color: #23425f;
  line-height: 1.45;
}

.contact-quick-links {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-link-btn {
  border: 2px solid #1f2c39;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f88d1, #1d5ca6);
  color: #ffffff;
  font-weight: 700;
  padding: 9px 18px;
}

.contact-link-btn--whatsapp {
  border-color: #0b5f39;
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.contact-link-btn--telegram {
  border-color: #0e4d87;
  background: linear-gradient(135deg, #2aabee, #1b73c8);
}

.contact-link-btn--gmail {
  border-color: #9b1c1c;
  background: linear-gradient(135deg, #ff6b6b 0%, #ea4335 48%, #b5161b 100%);
}

/* ── Partners strip ───────────────────────────────────── */
.partners-strip {
  width: 100%;
  max-width: 1240px;
  margin-top: 18px;
  padding: 0;
  background: linear-gradient(160deg, #f0f6ff 0%, #e8f2fb 50%, #f4f8ff 100%);
  border: 1.5px solid #bcd5ed;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(15,42,69,.11), 0 2px 8px rgba(15,42,69,.06);
  position: relative;
}

/* Top accent bar — full gradient */
.partners-strip::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    #0d2340 0%, #1a5f99 20%, #2196c4 40%,
    #4dbde8 55%, #2196c4 70%, #1a5f99 85%, #0d2340 100%);
}

/* Bottom inner glow line */
.partners-strip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,111,168,.25), transparent);
  pointer-events: none;
}

.partners-strip-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #1a6fa8;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 22px 0 20px;
  padding: 0 28px;
}

.partners-strip-label::before,
.partners-strip-label::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1a6fa8);
}

.partners-strip-label::after {
  background: linear-gradient(90deg, #1a6fa8, transparent);
}

.partners-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 28px 28px;
}

/* anchor version (clickable) */
a.partner-item {
  text-decoration: none;
}

.partner-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 2px solid #cde1f3;
  border-radius: 20px;
  padding: 20px 24px 20px 20px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  cursor: pointer;
  min-width: 240px;
  box-shadow: 0 4px 18px rgba(15,42,69,.07);
  position: relative;
}

.partner-item:hover {
  border-color: #1a6fa8;
  box-shadow: 0 12px 36px rgba(26,111,168,.20);
  transform: translateY(-4px);
}

/* Arrow indicator for clickable (anchor) partner items */
a.partner-item::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.85rem;
  color: #1a6fa8;
  opacity: 0.35;
  transition: opacity .2s, transform .2s;
  line-height: 1;
}

a.partner-item:hover::after {
  opacity: 0.9;
  transform: translate(2px, -2px);
}

.partner-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  background: #f4f8fd;
  border: 1.5px solid #d0e6f5;
  padding: 5px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(15,42,69,.10);
}

.partner-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(140deg, #0e2a45 0%, #1a6fa8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(15,42,69,.20);
}

.partner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.partner-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0d2340;
  line-height: 1.3;
  max-width: 240px;
}

.partner-type {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a6fa8;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.partners-loading {
  width: 100%;
  text-align: center;
  padding: 18px 0 22px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a6fa8;
  letter-spacing: 0.04em;
  opacity: 0.7;
  user-select: none;
  pointer-events: none;
}

.partners-edit-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 0.78rem;
  padding: 4px 12px;
  background: rgba(255,255,255,0.85);
  border: 1px solid #c0d5e8;
  border-radius: 10px;
  color: #5a7a99;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.partners-edit-btn:hover {
  background: #fff;
  border-color: #1a6fa8;
  color: #0d2340;
  box-shadow: 0 2px 8px rgba(26,111,168,.15);
}

/* Partners admin modal */
.partners-admin-card {
  max-width: 560px;
  width: 100%;
}

.partners-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
}

.partners-admin-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  background: #f4f8fc;
  border: 1px solid #dce8f2;
  border-radius: 11px;
  padding: 10px 12px;
}

.partners-admin-logo-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #c9d4e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.4rem;
}

.partners-admin-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.partners-admin-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.partners-admin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ── END Partners strip ───────────────────────────────── */

.card {
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card ul {
  margin: 0 0 18px;
  padding-left: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.card h3,
.card li,
.card .btn {
  transition: transform 0.22s ease;
  transform-origin: center center;
}

.card li::before {
  content: "- ";
}

.card:hover h3,
.card:hover li {
  transform: scale(1.04);
}

.card:hover .btn {
  transform: scale(1.06);
}

.course-layout {
  display: flex;
  gap: 24px;
  padding: 28px 8%;
}

.sidebar {
  width: 250px;
  background: white;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar li:hover {
  background: #eef6ff;
}

.sidebar li.done {
  background: #dff4e8;
  color: #1a7f52;
  text-decoration: line-through;
}

.course-content {
  flex: 1;
  padding: 24px 28px 40px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.progress {
  background: #ddd;
  height: 10px;
  border-radius: 5px;
  margin-top: 20px;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: #1DA1F2;
  border-radius: 5px;
}

.overview-card {
  background: linear-gradient(135deg, #eef7ff, #f8fbff);
  border: 1px solid #d9eaff;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 22px;
}

.overview-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.overview-text {
  margin: 0 0 14px;
  color: #44596f;
  line-height: 1.55;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.meta-badge {
  background: white;
  border: 1px solid #cfe2f8;
  color: #1f4f7a;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

.focus-list {
  margin: 0;
  padding-left: 18px;
  color: #2a3c4f;
}

.course-video {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #0d1d2d;
}

.lessons-page {
  padding: 30px 8% 60px;
}

.lessons-header {
  text-align: center;
  margin-bottom: 24px;
}

.lessons-header h1 {
  margin: 0 0 8px;
  font-size: 2.2rem;
}

.lessons-header p {
  margin: 0 auto;
  max-width: 760px;
  color: #33485d;
  font-size: 1.08rem;
}

.lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.lesson-card {
  background: #ffffff;
  border: 1px solid #cfd7e3;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 10px 24px rgba(15, 32, 52, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lesson-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 32, 52, 0.16);
}

.lc-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.lesson-cover {
  height: 210px;
  display: flex;
  overflow: hidden;
}

/* D1 Side-Stripe cover layout */
.lc-stripe {
  width: 54px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset -4px 0 12px rgba(0,0,0,.18);
  position: relative;
}
.lc-stripe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.lc-num {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}
.lc-ico {
  width: 18px;
  height: 18px;
  display: block;
  color: rgba(255,255,255,.80);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.20));
  position: relative;
  z-index: 1;
}
.lc-panel {
  flex: 1;
  min-height: 195px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  position: relative;
}
.lc-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.lc-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

/* Level panels, text & content — fixed colours (no theme switching) */
.lc-a1 .lc-panel { background: linear-gradient(135deg,#4d1d00 0%,#3a1500 100%); }
.lc-a1 .lc-eyebrow { color: #F59E0B; }
.lc-a1 .lc-title   { color: #FDE68A; }
.lc-a1 .lesson-content { background: linear-gradient(160deg,#3a1500,#2a0f00); }

.lc-a2 .lc-panel { background: linear-gradient(135deg,#182540 0%,#111d38 100%); }
.lc-a2 .lc-eyebrow { color: #60A5FA; }
.lc-a2 .lc-title   { color: #BFDBFE; }
.lc-a2 .lesson-content { background: linear-gradient(160deg,#111d38,#0c1528); }

.lc-b1 .lc-panel { background: linear-gradient(135deg,#042f2e 0%,#021a19 100%); }
.lc-b1 .lc-eyebrow { color: #2DD4BF; }
.lc-b1 .lc-title   { color: #CCFBF1; }
.lc-b1 .lesson-content { background: linear-gradient(160deg,#042f2e,#021510); }

.lc-b2 .lc-panel { background: linear-gradient(135deg,#250a4e 0%,#1a073d 100%); }
.lc-b2 .lc-eyebrow { color: #A78BFA; }
.lc-b2 .lc-title   { color: #DDD6FE; }
.lc-b2 .lesson-content { background: linear-gradient(160deg,#1a073d,#10042a); }

/* Dark card border looks right against both light and dark page backgrounds */
.lesson-card.lc-a1,.lesson-card.lc-a2,.lesson-card.lc-b1,.lesson-card.lc-b2 {
  border-color: rgba(255,255,255,.10);
}

/* Level-specific button colours */
.lc-a1 .lesson-watch-btn {
  background: linear-gradient(180deg,#FCD34D 0%,#F97316 55%,#EA580C 100%);
  border-color: #C2500A;
  box-shadow: 0 12px 22px rgba(234,88,12,.30), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(92,30,8,.35);
}
.lc-a1 .lesson-watch-btn:hover {
  box-shadow: 0 16px 30px rgba(234,88,12,.40), inset 0 1px 0 rgba(255,255,255,.55);
}

.lc-a2 .lesson-watch-btn {
  background: linear-gradient(180deg,#60A5FA 0%,#2563EB 55%,#1D4ED8 100%);
  border-color: #1D4ED8;
  box-shadow: 0 12px 22px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.45);
}
.lc-a2 .lesson-watch-btn:hover {
  box-shadow: 0 16px 30px rgba(37,99,235,.40), inset 0 1px 0 rgba(255,255,255,.55);
}

.lc-b1 .lesson-watch-btn {
  background: linear-gradient(180deg,#2DD4BF 0%,#0D9488 55%,#0F766E 100%);
  border-color: #0F766E;
  box-shadow: 0 12px 22px rgba(13,148,136,.30), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(4,40,40,.35);
}
.lc-b1 .lesson-watch-btn:hover {
  box-shadow: 0 16px 30px rgba(13,148,136,.40), inset 0 1px 0 rgba(255,255,255,.55);
}

.lc-b2 .lesson-watch-btn {
  background: linear-gradient(180deg,#A78BFA 0%,#7C3AED 55%,#6D28D9 100%);
  border-color: #6D28D9;
  box-shadow: 0 12px 22px rgba(124,58,237,.30), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(40,8,90,.35);
}
.lc-b2 .lesson-watch-btn:hover {
  box-shadow: 0 16px 30px rgba(124,58,237,.40), inset 0 1px 0 rgba(255,255,255,.55);
}

.lesson-content {
  padding: 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f9fbff 0%, #f1f5fb 100%);
}

.lesson-content h3 {
  margin: 0 0 12px;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.1px;
  font-family: "Playfair Display", "Times New Roman", serif;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
  transform-origin: center;
}

.lesson-completed-badge {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 12px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid #7ed19a;
  background: linear-gradient(180deg, #d7f9e1 0%, #baf4c9 100%);
  color: #0f5b2f;
  font-weight: 700;
  font-size: 0.98rem;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 14px rgba(24, 122, 66, 0.15);
}

/* Per-course lesson-completed badge colours */
body.lp-a1 .lesson-completed-badge {
  border: 1px solid rgba(234, 88, 12, 0.5);
  background: rgba(234, 88, 12, 0.15);
  color: #fdba74;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(234,88,12,.18);
}
body.lp-a2 .lesson-completed-badge {
  border: 1px solid rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(37,99,235,.18);
}
body.lp-b1 .lesson-completed-badge {
  border: 1px solid rgba(13, 148, 136, 0.5);
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(13,148,136,.18);
}
body.lp-b2 .lesson-completed-badge {
  border: 1px solid rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(124,58,237,.18);
}

.lesson-card:hover .lesson-content h3 {
  transform: scale(1.03);
}

.lesson-watch-btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #0f66b5;
  background: linear-gradient(180deg, #47c0ff 0%, #1f7ed8 55%, #0f6ec6 100%);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 800;
  font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  padding: 10px 18px;
  width: calc(100% - 28px);
  max-width: 240px;
  min-width: 190px;
  box-shadow: 0 12px 22px rgba(18, 120, 208, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  margin: 0;
  text-shadow: 0 1px 0 rgba(8, 49, 92, 0.35);
  letter-spacing: 0.2px;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lesson-watch-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 16px 30px rgba(18, 120, 208, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.lesson-watch-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 10px 18px rgba(18, 120, 208, 0.28), inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

.lesson-watch-btn:focus-visible {
  outline: 3px solid rgba(18, 120, 208, 0.35);
  outline-offset: 3px;
}

.lesson-unlock-timer {
  background: #eef3fa;
  border-color: #b9c9da;
  color: #1b3a5a;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-weight: 700;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.is-locked-lesson-card {
  opacity: 0.78;
  position: relative;
}

.is-locked-lesson-card::before {
  content: "\1F512";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #244261;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 2;
  border: 1px solid #cad5e1;
}

.is-locked-lesson-btn {
  background: #9aa9bb;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  border-color: #8999ac;
}

.is-locked-lesson-btn:hover {
  transform: none;
  filter: none;
}

.lesson-lock-note {
  margin: 10px 0 0;
  color: #4c6075;
  font-size: 0.95rem;
  font-weight: 700;
}

.lessons-access-note {
  margin-top: 12px;
  border: 1px solid #c7d7ea;
  background: #eff6ff;
  color: #1b3d66;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 600;
}

.lesson-view-page {
  padding: 26px 8% 56px;
}

.lesson-player-card {
  background: #ffffff;
  border-radius: 26px;
  padding: 24px;
  border: 1px solid #d4dce5;
}

.lesson-player-title {
  margin: 0 0 16px;
  font-size: 2.15rem;
  color: #0f2a45;
}

.lesson-video-shell {
  background: #1b3d66;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.lesson-video-shell video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: #02264a;
}

.lesson-video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #02264a;
}

.lesson-video-embed > div {
  width: 100%;
  height: 100%;
}

.lesson-video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Deterrent, not a lock - see the comment above where this gets its text
   (lesson-page.js). Sits on top of both the YouTube iframe and the native
   <video> (whichever is active), transparent to clicks so it never gets in
   the way of the cover/play button or the video's own controls under it.
   No light/dark theme split needed - it's always drawn over video content
   (dark backdrop either way), not tied to the page's own theme toggle.
   Anchored top-right, not bottom-right: .lesson-video-controls (the
   play/seek/mute/CC/quality/fullscreen bar) is also right-aligned along
   the bottom edge with the same 12px inset, so a bottom-right watermark
   landed directly on top of the last couple of buttons there (visually
   hiding them - pointer-events: none let clicks still reach through, but
   nobody could see there was anything to click, reported by the user as
   "no way to change quality or captions"). Top-right keeps the two UI
   layers out of each other's way regardless of how many buttons the
   control bar ends up needing. */
.lesson-video-watermark {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

/* Sits directly over the YouTube iframe (transparent, full-cover) so a
   click/right-click lands here instead of reaching YouTube's own player
   chrome - the iframe is cross-origin, so this is the only way our JS can
   intercept those events at all (see the comment at the top of
   video-controls.js for why). Tapping/clicking anywhere on it outside the
   control bar toggles play/pause, same as most video players. Sits above
   the iframe (z-index 0/auto) but below the control bar and the cover. */
.lesson-video-blocker {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.lesson-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  /* Was a fade-to-transparent gradient (0.72 -> 0 opacity going up) - the
     top of that fade is where YouTube's own bottom-right branding badge
     (a small logo it still paints for the first few seconds of playback,
     independent of playerVars.controls - not something the IFrame API can
     suppress) bled through visibly, reported by the user on the live site.
     Solid background across the whole bar removes that leak regardless of
     exactly where in the strip the badge lands, instead of chasing pixel
     positions we can't fully control. */
  background: rgba(0, 0, 0, 0.78);
}

.lvc-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
}

.lvc-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.lvc-btn svg {
  width: 18px;
  height: 18px;
}

.lvc-time {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lvc-time-sep {
  margin: 0 3px;
  opacity: 0.6;
}

.lvc-seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.lvc-seek-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.lvc-seek-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 2px;
  background: #ff0000; /* same red as the existing cover play button */
}

.lvc-seek-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff0000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.lvc-volume {
  flex: 0 0 auto;
  width: 70px;
  accent-color: #ff0000;
}

.lvc-cc-wrap,
.lvc-quality-wrap {
  position: relative;
  flex: 0 0 auto;
}

.lvc-cc-btn,
.lvc-quality-btn {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Dimmed until captions are actually turned on - same "off by default,
   red when active" language as .lvc-quality-item.is-active below, so the
   button itself communicates state without extra text. */
.lvc-cc-btn {
  opacity: 0.6;
}

.lvc-cc-btn.is-active {
  opacity: 1;
  color: #ff0000;
}

.lvc-quality-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  min-width: 84px;
  /* .lesson-video-shell clips overflow (rounded corners on the player), so
     on short mobile shells a 6-item list (Auto + 5 resolutions) can run
     past its top edge and get silently cut off - capped + scrollable
     keeps "Auto" (the most-wanted, listed first) always reachable without
     scrolling instead. */
  max-height: 120px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 10px;
  background: rgba(20, 20, 20, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.lvc-quality-item {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.lvc-quality-item:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lvc-quality-item.is-active {
  color: #ff0000;
  font-weight: 700;
}

@media (max-width: 640px) {
  /* Hardware volume rocker controls playback volume on most mobile
     browsers anyway - the slider mostly just takes up scarce width there. */
  .lvc-volume {
    display: none;
  }
  .lesson-video-controls {
    gap: 8px;
    padding: 6px 8px;
  }
  .lvc-btn {
    width: 30px;
    height: 30px;
  }
}

/* iOS Safari has no Fullscreen API for an arbitrary element (only a real
   <video> tag can go native-fullscreen there) - the fullscreen button
   falls back to this fixed-position "pretend fullscreen" on iOS instead of
   silently doing nothing. Desktop and Android Chrome use the real
   Fullscreen API and never get this class (see video-controls.js). */
.lesson-video-shell.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  border-radius: 0;
  display: flex;
  align-items: center;
}

.lesson-video-shell.is-pseudo-fullscreen video,
.lesson-video-shell.is-pseudo-fullscreen .lesson-video-embed,
.lesson-video-shell.is-pseudo-fullscreen .lesson-video-blocker,
.lesson-video-shell.is-pseudo-fullscreen .lesson-video-cover {
  aspect-ratio: auto;
  height: 100%;
}

body.lesson-video-pseudo-fullscreen-active {
  overflow: hidden;
}

.lesson-video-cover {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3; /* above .lesson-video-blocker/.lesson-video-controls while shown */
  background-image: var(--lesson-cover-image, none);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lesson-video-cover.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
}

.lesson-video-cover:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}

.lesson-video-cover-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-video-cover-play {
  width: 88px;
  height: 58px;
  border-radius: 14px;
  background: #ff0000;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.32);
}

.lesson-video-cover-play::before {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #ffffff;
}


.lesson-player-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lesson-player-actions:has(.lesson-nav-btn-presentation[hidden]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-nav-btn.is-loading {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.presentation-page {
  padding: 26px 8% 56px;
  user-select: none;
  -webkit-user-select: none;
}

.presentation-card {
  background: #ffffff;
  border-radius: 26px;
  padding: 24px;
  border: 1px solid #d4dce5;
}

.presentation-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

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

.presentation-title {
  margin: 0;
  font-size: 2.05rem;
  color: #0f2a45;
}

.presentation-note {
  margin: 0 0 12px;
  color: #35536f;
  font-weight: 700;
}

.presentation-frame-shell {
  position: relative; /* anchors .presentation-loading over the iframe */
  border-radius: 18px;
  border: 1px solid #cfdae7;
  background: #f4f8fc;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 60vh;
}

#presentation-frame {
  width: 100%;
  height: 78vh;
  border: 0;
  display: block;
  background: #f4f8fc;
}

/* Loading animation shown over the iframe while a PDF is fetching/rendering
   (js/modules/presentation-loading.js drives show/hide) - replaces what used
   to just be an empty box. Cosmo (the site's owl mascot, see ai-assistant.js)
   hovers in place with squash/stretch on the body (no wing-flap this
   revision - see the OWL_LOADING_SVG comment in presentation-loading.js for
   why), the classic animation principle that was missing from the first
   version and made it feel "weak"/static despite technically being an
   animation. Fade timing
   (opacity, 450ms, spring-ish overshoot easing) matches the Cosmo chat
   panel's own open animation (js/ai-assistant.js #sam-panel) for a
   consistent, app-like feel across the site rather than a generic loader.
   Dark theme adds a small twinkling night sky (.pl-stars below) on top of
   the shared blob/sticker background, matching the site's own day/night
   visual language elsewhere (the header's sunrise vs. navy starfield
   backgrounds) rather than the exact same look regardless of theme. */
.presentation-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: inherit;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 2;
}

.presentation-loading.is-hidden {
  opacity: 0;
}

/* ── Ambient blobs + floating school-icon stickers behind the scene. Two
   attempts at a literal "room" (floor+window, then +bunting/clock/plant)
   both landed badly with real user feedback ("пусто"/"ужасно") - a small
   flat-CSS clock face and a lollipop-shaped plant don't read clearly at
   this size, and stacking them made the scene busier without looking
   better. Dropped that whole direction and reused the site's OWN existing,
   already-proven loading pattern instead (see .lessons-loading-overlay /
   .lessons-loading-float in mentor-admin.css, used on the lessons list
   page): soft blurred color blobs drifting slowly + a handful of large
   drifting emoji, same keyframe shapes (translate+scale for blobs,
   translate+rotate+scale for floats), just resized for this smaller area.
   Reusing an already-shipped, already-liked pattern beats inventing a
   fourth new idiom. ── */
.pl-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.3;
  pointer-events: none;
  animation: plBlobDrift 9s ease-in-out infinite;
}

.pl-blob--1 {
  width: 180px;
  height: 180px;
  background: #1278d0;
  top: 12%;
  left: 8%;
}

.pl-blob--2 {
  width: 150px;
  height: 150px;
  background: #f2c14e;
  bottom: 10%;
  right: 10%;
  animation-delay: -4.5s;
  animation-direction: reverse;
}

@keyframes plBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -14px) scale(1.15); }
}

/* Tiny twinkling stars - dark theme only (see the [data-theme="dark"] block
   below, which turns these on). Five fixed positions is plenty for a small
   area; a randomised generator would be over-engineering for five dots. */
.pl-stars {
  display: none;
}

.pl-stars span {
  position: absolute;
  color: #f59e0b;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  animation: plStarTwinkle 3s ease-in-out infinite;
}

.pl-stars span::before {
  content: "✦";
}

.pl-stars span:nth-child(1) { top: 22%; left: 28%; animation-delay: 0s; font-size: 8px; }
.pl-stars span:nth-child(2) { top: 30%; left: 70%; animation-delay: 0.8s; font-size: 11px; }
.pl-stars span:nth-child(3) { top: 62%; left: 20%; animation-delay: 1.6s; font-size: 7px; }
.pl-stars span:nth-child(4) { top: 68%; left: 76%; animation-delay: 0.4s; font-size: 9px; }
.pl-stars span:nth-child(5) { top: 15%; left: 52%; animation-delay: 2.2s; font-size: 8px; }

@keyframes plStarTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1) rotate(90deg); }
}

/* Floating school-themed stickers - literally the same idea as
   .lessons-loading-float (mentor-admin.css), just four of them instead of
   three and sized down for this smaller card. Real emoji, not a CSS
   approximation - at this size a hand-drawn plant/clock blob reads as a
   blurry mistake, an emoji reads instantly. */
.pl-float {
  position: absolute;
  pointer-events: none;
  opacity: 0.8;
  filter: drop-shadow(0 6px 10px rgba(31, 79, 122, 0.2));
  line-height: 1;
  animation: plFloatDrift 15s ease-in-out infinite;
}

.pl-float--1 {
  top: 10%;
  left: 12%;
  font-size: 34px;
  animation-duration: 16s;
}

.pl-float--2 {
  top: 14%;
  right: 14%;
  font-size: 28px;
  animation-duration: 13s;
  animation-delay: -4s;
}

.pl-float--3 {
  bottom: 20%;
  left: 8%;
  font-size: 26px;
  animation-duration: 18s;
  animation-delay: -8s;
}

.pl-float--4 {
  bottom: 24%;
  right: 10%;
  font-size: 30px;
  animation-duration: 14s;
  animation-delay: -2s;
}

@keyframes plFloatDrift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg) scale(1); }
  50% { transform: translate(10px, -14px) rotate(6deg) scale(1.08); }
}

/* ── The scene: Cosmo "teaching" at a chalkboard, instead of a small icon
   floating in an otherwise empty box - reported as feeling lost/too small
   in all that dark space. Board is themed the same in light/dark (a real
   chalkboard doesn't change color with the UI theme); the day/night
   difference stays in the background behind it (.pl-stars above). ── */
.pl-scene {
  position: relative;
  width: min(300px, 78%);
  z-index: 1;
}

.pl-board {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  background: #1f4d3d;
  border-radius: 14px;
  border: 9px solid #8b5e3c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), inset 0 0 22px rgba(0, 0, 0, 0.28);
}

.pl-board-chalk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Chalk strokes "write" themselves (dashoffset reveal) then get "erased"
   (fade + reset) and rewrite - reads as Cosmo actively explaining
   something, not a one-shot decoration. Staggered delays make the three
   lines + checkmark appear one after another, like notes being written
   in order, rather than all at once. */
.pl-chalk-line,
.pl-chalk-check {
  animation: plChalkWrite 4.5s ease-in-out infinite;
}

.pl-chalk-2 {
  animation-delay: 0.6s;
}

.pl-chalk-3 {
  animation-delay: 1.2s;
}

.pl-chalk-check {
  animation-delay: 1.9s;
}

@keyframes plChalkWrite {
  0% { stroke-dashoffset: 220; opacity: 0; }
  6% { opacity: 0.9; }
  32%, 78% { stroke-dashoffset: 0; opacity: 0.9; }
  94%, 100% { stroke-dashoffset: 220; opacity: 0; }
}

/* The owl itself, now standing at the board's corner rather than floating
   alone in empty space - bigger, and overlapping the board slightly like a
   teacher standing right up against it. Float still carries squash/stretch
   (classic animation principle: compress at the bottom of the bounce,
   stretch at the peak, like a bird pushing off/settling) instead of a flat
   up-down slide. */
.pl-owl-wrap {
  position: absolute;
  left: -20px;
  bottom: -16px;
  width: 104px;
  height: 104px;
  z-index: 2;
  animation: plOwlFloat 1.8s ease-in-out infinite;
}

.pl-owl-wrap svg {
  width: 100%;
  height: 100%;
}

@keyframes plOwlFloat {
  0%, 100% { transform: translateY(0) scaleY(0.94) scaleX(1.05); }
  50% { transform: translateY(-10px) scaleY(1.05) scaleX(0.97); }
}

/* transform-box:view-box (not fill-box) + a literal pixel origin, same
   reasoning as .owl-tassel/.owl-eye in ai-assistant.js: each piece here is
   wrapped individually rather than in one shared group (this trace's
   z-order made a single wrapper unsafe), so fill-box would pivot every
   piece around its own bbox - the tassel's cord+ball visibly tore apart
   mid-swing when tested that way. These coordinates are specific to
   OWL_LOADING_SVG's current viewBox/path data - update them together if
   the asset is ever regenerated. */
.pl-tassel {
  transform-box: view-box;
  transform-origin: 730px 175px;
  animation: plTassel 0.9s ease-in-out infinite;
  animation-delay: 0.1s;
}

@keyframes plTassel {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

/* Wings: a raster crop of the owl's own rendered artwork sitting in a
   clipped <g> at the exact spot it was cut from, not a traced vector
   shape - see the long comment on OWL_SVG in ai-assistant.js for why
   (this trace fuses the wings into the body silhouette) and how (pixel-
   identical at rest since it IS that artwork; rotating it away reveals
   the original vector wing still sitting in resting pose underneath,
   reading as depth/shadow rather than a gap). Faster flap here (0.9s)
   than ai-assistant.js's 2.8s idle flutter - this loader already runs a
   quick float bounce (plOwlFloat, 1.8s) and a slower wing flap read as
   sluggish/disconnected from it in practice. */
.pl-wing {
  transform-box: view-box;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.pl-wing-l {
  transform-origin: 194px 575px;
  animation-name: plWingFlapL;
}

.pl-wing-r {
  transform-origin: 710px 575px;
  animation-name: plWingFlapR;
  /* Wings not perfectly in phase - a real bird's beats aren't a mirrored
     metronome either; this tiny offset is what stops it reading as a rigid
     single rigid-body rotation. */
  animation-delay: 0.03s;
}

@keyframes plWingFlapL {
  0%, 100% { transform: rotate(10deg); }
  40% { transform: rotate(-34deg); }
  60% { transform: rotate(-30deg); }
}

@keyframes plWingFlapR {
  0%, 100% { transform: rotate(-10deg); }
  40% { transform: rotate(34deg); }
  60% { transform: rotate(30deg); }
}

.pl-eye {
  transform-box: view-box;
  transform-origin: 450px 440px;
  animation: plOwlBlink 3.6s ease-in-out infinite;
}

@keyframes plOwlBlink {
  0%, 85%, 100% { transform: scaleY(1); }
  90% { transform: scaleY(0.1); }
  94% { transform: scaleY(1); }
}

.pl-dots {
  display: flex;
  gap: 6px;
}

.pl-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  opacity: 0.35;
  animation: plDotPulse 1.2s ease-in-out infinite;
}

.pl-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.pl-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes plDotPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.pl-text {
  margin: 0;
  font-size: 0.9rem;
  color: #5b6b82;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .pl-owl-wrap,
  .pl-wing,
  .pl-tassel,
  .pl-eye,
  .pl-dots span,
  .pl-blob,
  .pl-stars span,
  .pl-float,
  .pl-chalk-line,
  .pl-chalk-check {
    animation: none !important;
  }

  /* The chalk strokes' resting state (mid-animation dashoffset) would
     otherwise stay invisible forever with animation off - show them fully
     drawn and settled instead of blank. */
  .pl-chalk-line,
  .pl-chalk-check {
    stroke-dashoffset: 0 !important;
    opacity: 0.9 !important;
  }

  .presentation-loading {
    transition: opacity 0.2s linear;
  }
}

.presentation-fullscreen header.level-header {
  display: none;
}

.presentation-page.is-fullscreen {
  padding: 0;
}

.presentation-page.is-fullscreen .presentation-card {
  border-radius: 0;
  border: 0;
  padding: 14px 14px 10px;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.presentation-page.is-fullscreen .presentation-topbar {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding-bottom: 10px;
  z-index: 5;
}

.presentation-page.is-fullscreen .presentation-frame-shell {
  flex: 1;
  min-height: 0;
  border-radius: 14px;
}

.presentation-page.is-fullscreen #presentation-frame {
  height: 100%;
}

@supports (height: 100dvh) {
  .presentation-frame-shell {
    min-height: 60dvh;
  }

  #presentation-frame {
    height: 78dvh;
  }

  .presentation-page.is-fullscreen .presentation-card {
    min-height: 100dvh;
  }
}

@supports (height: 100svh) {
  .presentation-frame-shell {
    min-height: 60svh;
  }

  #presentation-frame {
    height: 78svh;
  }

  .presentation-page.is-fullscreen .presentation-card {
    min-height: 100svh;
  }
}

.presentation-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.presentation-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(16, 39, 64, 0.12);
}

.presentation-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.presentation-controls-bottom {
  margin-top: 16px;
}

.presentation-page-indicator {
  font-weight: 700;
  color: #0f2a45;
  min-width: 72px;
  text-align: center;
}

.presentation-slide {
  background: #ffffff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 24px rgba(16, 39, 64, 0.12);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presentation-slide canvas,
.presentation-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #ffffff;
}

.presentation-slide-skeleton {
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef3f9 0%, #f7faff 45%, #eef3f9 100%);
  color: #5f738a;
  font-weight: 700;
  text-align: center;
  padding: 40px 12px;
  animation: presentationPulse 1.6s ease-in-out infinite;
}

.presentation-slide.is-loading .presentation-slide-skeleton {
  display: none;
}

@keyframes presentationPulse {
  0% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
  }
}

.lesson-nav-btn {
  border: 1px solid #bfcbd8;
  border-radius: 999px;
  background: #f1f5f9;
  color: #143154;
  font-weight: 700;
  padding: 14px 22px;
  font-size: 1.02rem;
}

.lesson-player-actions .lesson-nav-btn {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 20px rgba(16, 39, 64, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.lesson-player-actions .lesson-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(16, 39, 64, 0.14);
  filter: saturate(1.05);
}

.lesson-nav-btn-back {
  justify-content: center;
  border-radius: 22px;
  border-color: #0284c7;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: #ffffff;
}

.lesson-nav-btn-presentation {
  border-radius: 24px;
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
}

.lesson-nav-btn-homework {
  border-radius: 22px;
  border-color: #d97706;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
}

.lesson-nav-btn-primary {
  border-color: #1f3d5e;
  background: linear-gradient(135deg, #1f4f7a, #133454);
  color: #ffffff;
}

.lesson-nav-btn-tasks {
  grid-column: 1 / -1;
  min-height: 72px;
  border-radius: 26px;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  box-shadow: 0 14px 28px rgba(19, 52, 84, 0.24);
}

.lesson-nav-btn-finish {
  border-color: rgba(16, 185, 129, 0.8);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.32);
}

.lesson-nav-btn-finish:hover {
  box-shadow: 0 20px 40px rgba(22, 163, 74, 0.42);
}

.tasks-page {
  padding: 26px 8% 56px;
}

.tasks-card {
  max-width: 980px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #d4dce5;
  border-radius: 22px;
  padding: 24px;
}

  .tasks-card h1 {
    margin: 0 0 10px;
    color: #0f2a45;
  }

.tasks-card p {
  margin: 0 0 14px;
  color: #2f4760;
}

.tasks-list {
  margin: 0 0 18px;
  padding-left: 22px;
  color: #1f3b57;
}

  .tasks-list li {
    margin-bottom: 8px;
  }

  .tasks-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .homework-ready-card {
    max-width: 980px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 26px;
    padding: 22px 24px 24px;
    border: 1px solid #cbd8e7;
    box-shadow: 0 18px 40px rgba(16, 39, 64, 0.12);
  }

  .homework-ready-card h1 {
    margin: 0 0 10px;
    color: #0f2a45;
  }

  .homework-ready-card p {
    margin: 0 0 16px;
    color: #2f4760;
  }

  .homework-ready-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

.admin-page {
  padding: 30px 8% 56px;
}

.admin-guard {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid #d2a6a2;
  background: #fef3f2;
  color: #8d2f22;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 1.05rem;
  font-weight: 700;
}

.admin-head {
  max-width: 1280px;
  margin: 0 auto 14px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid #cfdae6;
  background: linear-gradient(180deg, #f6f7f9 0%, #eceff3 100%);
  text-align: center;
}

.admin-head h1 {
  margin: 0 0 4px;
  color: #0f2a45;
  font-size: 1.75rem;
}

.admin-head p {
  margin: 0;
  color: #3a546f;
}

.admin-search-wrap {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}

.admin-username-search {
  width: min(520px, 100%);
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #c8d5e4;
  border-radius: 10px;
  font-size: 0.98rem;
  background: #ffffff;
  color: #16395d;
  outline: none;
}

.admin-username-search:focus {
  border-color: #2fa7ff;
  box-shadow: 0 0 0 3px rgba(47, 167, 255, 0.18);
}

.admin-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 100%);
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #c8d5e4;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 50, 90, 0.16);
  z-index: 40;
  text-align: left;
}

.admin-search-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #eef3f9;
}

.admin-search-suggestion-item:last-child {
  border-bottom: none;
}

.admin-search-suggestion-item:hover,
.admin-search-suggestion-item.is-active {
  background: #eef5ff;
}

.admin-search-suggestion-main {
  min-width: 0;
  overflow: hidden;
}

.admin-search-suggestion-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #16395d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-search-suggestion-username {
  font-size: 0.78rem;
  color: #4a7aa8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-search-suggestion-phone {
  font-size: 0.8rem;
  color: #6a8aab;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-search-suggestion-empty {
  padding: 12px 14px;
  font-size: 0.85rem;
  color: #7a92ab;
  text-align: center;
}

.admin-search-result {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #d8e2ec;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  text-align: left;
}

.admin-search-result-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.9rem;
  color: #7a92ab;
  padding: 6px 0;
}

.admin-requests-search {
  margin: 10px 0 6px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-requests-search input {
  width: min(520px, 100%);
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #c8d5e4;
  border-radius: 10px;
  font-size: 0.98rem;
  background: #ffffff;
  color: #16395d;
  outline: none;
}

.admin-requests-search input:focus {
  border-color: #2fa7ff;
  box-shadow: 0 0 0 3px rgba(47, 167, 255, 0.18);
}

.admin-requests-search-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
}

.admin-head-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-create-user-btn {
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.02rem;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
  min-width: 190px;
  box-shadow: 0 6px 14px rgba(18, 52, 84, 0.16);
}

.admin-search-btn {
  background: linear-gradient(180deg, #214e78 0%, #0f375c 100%);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1.05rem;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
  min-width: 190px;
  box-shadow: 0 8px 18px rgba(10, 40, 70, 0.22);
}

.admin-view-progress-btn {
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 1.1rem;
  border: 1px solid transparent;
  width: fit-content;
}

.admin-view-requests-btn {
  position: relative;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 1.1rem;
  border: 1px solid transparent;
  width: fit-content;
}

.admin-manage-btn {
  position: relative;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 1.1rem;
  border: 1px solid transparent;
  width: fit-content;
}

.admin-requests-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e02424;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #ffffff;
}

.admin-manage-action-btn {
  position: relative;
}

.admin-dashboard-panel {
  max-width: 1280px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #ffffff;
  border: 1px solid #cfdae6;
  border-radius: 18px;
  overflow: hidden;
}

.admin-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.3rem;
  background: var(--admin-stat-icon-bg, rgba(47, 167, 255, 0.12));
  flex-shrink: 0;
}

.admin-stat-card-manage {
  --admin-stat-accent: linear-gradient(180deg, #16a34a, #2e7d55);
  --admin-stat-icon-bg: rgba(22, 163, 74, 0.12);
}

.admin-stat-card-progress {
  --admin-stat-accent: linear-gradient(180deg, #f0b429, #d97706);
  --admin-stat-icon-bg: rgba(240, 180, 41, 0.16);
}

.admin-stat-card-health {
  --admin-stat-accent: linear-gradient(180deg, #34d399, #16a34a);
  --admin-stat-icon-bg: rgba(52, 211, 153, 0.14);
}

.admin-dashboard-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 24px 22px;
  border-right: 1px solid #e1e9f2;
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
  --admin-stat-icon-bg: rgba(47, 167, 255, 0.12);
}

.admin-dashboard-stat p {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 800;
  color: #16395d;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.admin-dashboard-stat h3 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #6a7f95;
}

.admin-dashboard-actions {
  display: flex;
  flex-direction: column;
}

.admin-dashboard-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #e9eff5;
  transition: background 0.16s ease;
}

.admin-dashboard-row:last-child {
  border-bottom: none;
}

.admin-dashboard-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--admin-stat-accent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.admin-dashboard-row:hover {
  background: #f6f9fc;
}

.admin-dashboard-row:hover::before {
  opacity: 1;
}

.admin-dashboard-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-stat-card-title {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #6a7f95;
  margin: 0 0 3px;
}

.admin-stat-card-hint {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.24;
  color: #173d63;
  font-weight: 800;
}

.admin-dashboard-row .admin-view-progress-btn,
.admin-dashboard-row .admin-manage-btn,
.admin-dashboard-row .admin-site-health-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(18, 52, 84, 0.14);
}

.admin-table-card {
  max-width: 1280px;
  margin: 0 auto 16px;
  background: #ffffff;
  border: 1px solid #cfdae6;
  border-radius: 16px;
  padding: 16px;
}

.admin-table-card h2 {
  margin: 0 0 12px;
  color: #143456;
  font-size: 1.25rem;
}