/* Academy course page — follows LMS section canon (page «Обучение») */

/* Full-bleed chrome like LMS — never constrain hero/toolbar width */
.pa-app--lms-course .pa-content {
  max-width: none;
}
.pa-app--lms-course [data-pa-section-chrome] {
  width: 100%;
  max-width: none;
  margin: 0;
}

/*
 * Hero cover layers — height locked by portal-overrides (--pa-hero-h).
 * Course cover via <img>, brand gradient killed.
 */
.pa-page-hero--course {
  position: relative;
  overflow: hidden;
  background: #1a2332 !important;
  background-image: none !important;
}

.pa-page-hero__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
  pointer-events: none;
  border: 0;
}

.pa-page-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Light scrim — cover must read as COURSE art, not brand blue */
  background: linear-gradient(135deg, rgba(12, 26, 46, 0.28) 0%, rgba(12, 26, 46, 0.4) 100%);
}

.pa-page-hero--course > .pa-page-hero__top,
.pa-page-hero--course > .pa-page-hero__title,
.pa-page-hero--course > .pa-page-hero__sub,
.pa-page-hero--course > .pa-page-hero__meta,
.pa-page-hero--course > .pa-page-hero__actions,
.pa-page-hero--course > .pa-page-hero__row {
  position: relative;
  z-index: 2;
}

/* Top row: section/object tiles (or Total Academy fallback) + help `?` */
.pa-page-hero--course .pa-page-hero__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.pa-page-hero--course .pa-page-hero__eyebrow[hidden],
.pa-page-hero--course .pa-page-hero__tiles[hidden] {
  display: none !important;
}
.pa-page-hero--course .pa-page-hero__tiles {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.pa-page-hero--course .pa-page-hero__tile {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  max-width: 9.5rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-page-hero--course .pa-page-hero__tile--object {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600;
}

/* Meta row: description only (ellipsis) — tiles live on top row */
.pa-page-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.pa-page-hero--course .pa-page-hero__meta .pa-page-hero__sub {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}
.pa-page-hero--course > .pa-page-hero__actions {
  justify-content: flex-end;
}

/* Single progress bar (about / drawer) — never pair with a ring */
.pa-course-about-prog {
  display: block;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.pa-course-about-prog--drawer {
  margin: 0;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.pa-course-about-prog__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pa-course-about-prog__text strong {
  font-size: 0.875rem;
  color: #0c1a2e;
}
.pa-course-about-prog--drawer .pa-course-about-prog__text strong,
.pa-course-about-prog--drawer .pa-course-about-prog__text span {
  color: rgba(255, 255, 255, 0.95);
}
.pa-course-about-prog__text span {
  font-size: 0.75rem;
  color: #64748b;
}
.pa-course-about-prog__track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 2px;
}
.pa-course-about-prog--drawer .pa-course-about-prog__track {
  background: rgba(255, 255, 255, 0.22);
}
.pa-course-about-prog__track > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1a6eb5, #10b981);
  border-radius: 999px;
}
.pa-course-info-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pa-course-info-tile {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 0.72rem;
  font-weight: 700;
}
.pa-course-info-tile--object {
  background: #ecfdf5;
  color: #047857;
}

/* Program panel head — bar + counter (not plain %) */
.pa-course-panel-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-width: 0;
  width: 33%;
  max-width: 50%;
}
.pa-course-panel-prog__track {
  flex: 1 1 auto;
  min-width: 72px;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.pa-course-panel-prog__track > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1a6eb5, #10b981);
  border-radius: 999px;
}
.pa-course-panel-prog__count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.pa-course-info-desc {
  margin: 0 0 14px;
  line-height: 1.5;
  color: #374151;
  font-size: 0.875rem;
}
.pa-course-info-rating {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #ffedd5;
}
.pa-course-info-rating--empty {
  font-size: 0.8125rem;
  color: #94a3b8;
  background: #f8fafc;
  border-color: #e2e8f0;
}
.pa-course-info-rating__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pa-course-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.pa-course-author__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}
.pa-course-author__main {
  min-width: 0;
}
.pa-course-author__name {
  display: block;
  font-size: 0.9rem;
  color: #0c1a2e;
}
.pa-course-author__role {
  margin-top: 2px;
  font-size: 0.75rem;
  color: #64748b;
}
.pa-course-author__rating {
  margin-top: 4px;
}

/* Fold control — same slot / visual language as view-toggle */
.pa-course-fold-slot,
.pa-panel-head__actions > .pa-view-toggle:has(#pa-course-fold) {
  flex-shrink: 0;
}
#pa-course-fold.pa-view-toggle__btn {
  white-space: nowrap;
  font-weight: 600;
}
#pa-course-fold[hidden] {
  display: none !important;
}

.pa-dp {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 0 48px;
}

.pa-dp-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff8e8;
  border: 1px solid #f0d9a0;
  color: #7a5b14;
  font-size: 0.8125rem;
}

.pa-dp-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pa-dp-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-tm-blue, #1a6eb5);
}

.pa-dp-title {
  margin: 4px 0 6px;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--pa-tm-dark, #0c1a2e);
}

.pa-dp-sub {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
}

.pa-dp-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pa-dp-course-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.pa-dp-course-pick select {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
}

.pa-dp-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a6eb5;
  text-decoration: none;
}

.pa-dp-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.pa-dp-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.pa-dp-tab__code {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #64748b;
}

.pa-dp-tab__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0c1a2e;
}

.pa-dp-tab--active {
  border-color: #1a6eb5;
  background: #f0f7fc;
  box-shadow: 0 0 0 3px rgba(26, 110, 181, 0.12);
}

.pa-dp-tab--active .pa-dp-tab__code { color: #1a6eb5; }

.pa-dp-variant-desc {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.45;
}

.pa-dp-stage-wrap { display: flex; justify-content: center; }

.pa-dp-stage {
  width: 100%;
  max-width: 400px;
  min-height: 720px;
  background: #eef1f4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 26, 46, 0.12);
  position: relative;
}

.pa-dp-stage[data-variant="c"],
.pa-dp-stage[data-variant="m"][data-layout="web"] {
  max-width: 980px;
}

.pa-dp-loading {
  padding: 48px 20px;
  text-align: center;
  color: #64748b;
}

/* ——— Course shell ——— */
.pa-mapp {
  display: flex;
  flex-direction: column;
  min-height: 720px;
  background: #eef1f4;
  color: #1f2a37;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pa-mapp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
  background: #fff;
}

.pa-mapp__bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pa-mapp__icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #394452;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.pa-mapp__icon-btn:hover { background: #f1f5f9; }

.pa-mapp__icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pa-mapp__hero {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 4px 16px 14px;
  background: #fff;
}

.pa-mapp__cover {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #dbeafe;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.pa-mapp__hero-main { flex: 1; min-width: 0; }

.pa-mapp__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
}

.pa-mapp__progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pa-mapp__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.pa-mapp__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #f97316;
}

.pa-mapp__pct {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  min-width: 2.4rem;
  text-align: right;
}

.pa-mapp__tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.pa-mapp__tab {
  flex: 0 0 auto;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.pa-mapp__tab--active {
  color: #111827;
  border-bottom-color: #f97316;
}

.pa-mapp__scroll {
  flex: 1;
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pa-mapp__panel { display: none; }
.pa-mapp__panel--active { display: block; }

.pa-mapp__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}

.pa-mapp__layout {
  display: block;
}

.pa-mapp__col-aside {
  display: none;
}

.pa-mapp__about {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  position: sticky;
  top: 12px;
}

.pa-mapp__about-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
}

.pa-mapp__about-text {
  margin: 0 0 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
}

.pa-mapp__about .pa-dp-info-cover,
.pa-mapp__about .pa-course-info-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #dbeafe;
}

/* Production program = single column like LMS «Обучение» (about → ? drawer) */
.pa-course-stage .pa-mapp__layout {
  display: block;
}
.pa-course-stage .pa-mapp__col-aside {
  display: none !important;
}

@media (min-width: 900px) {
  .pa-dp-stage[data-layout="web"] .pa-mapp__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
    gap: 16px;
    align-items: start;
  }
  .pa-dp-stage[data-layout="web"] .pa-mapp__col-aside {
    display: block;
  }
  .pa-dp-stage[data-layout="web"] .pa-mapp__fab {
    display: none;
  }
}

.pa-mapp__card--path {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.pa-mapp__sec {
  margin: 0;
  border: 1px solid #9eb4cc;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 12px rgba(12, 26, 46, 0.1);
}

.pa-mapp__sec + .pa-mapp__sec {
  margin-top: 16px;
  border-top: 1px solid #9eb4cc;
}

/* Path: chevron | text | number flush right */
.pa-mapp__sec-head {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 14px;
  border: 0;
  border-bottom: 3px solid #fb923c;
  background: #0c1a2e;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.pa-mapp__sec:first-child .pa-mapp__sec-head {
  border-radius: 0;
}

.pa-mapp__sec-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pa-mapp__sec-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(226, 238, 255, 0.78);
}

.pa-mapp__chev {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  transition: transform 0.15s ease;
  margin-left: 0;
}

.pa-mapp__sec--open .pa-mapp__chev {
  transform: rotate(90deg);
  color: #fff;
}

.pa-mapp__sec-head strong {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.pa-mapp__sec-body {
  display: none;
  padding: 0;
  background: #fff;
}

.pa-mapp__sec--open .pa-mapp__sec-body { display: block; }

.pa-mapp__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 48px 32px;
  gap: 8px;
  align-items: stretch;
  padding: 10px 10px 10px 14px;
  border-top: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
  min-height: 64px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  background: #fff;
}

.pa-mapp__item:hover {
  background: #f8fafc;
}

.pa-mapp__item-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.pa-mapp__item-ring {
  display: none;
}

.pa-mapp__sec-trail {
  width: 32px;
  height: 32px;
}

/* Continuous vertical rail — shared column for section + lesson numbers */
.pa-mapp__rail {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 48px;
  align-self: stretch;
  z-index: 1;
  justify-self: end;
  margin-left: auto;
}

.pa-mapp__rail--lesson {
  width: 48px;
  justify-content: flex-end;
}

.pa-mapp__rail--sec {
  width: 48px;
  justify-content: flex-end;
  justify-self: end;
}

.pa-mapp__rail-line {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d1d5db;
  transform: none;
  z-index: 0;
}

.pa-mapp__rail--sec .pa-mapp__rail-line {
  right: 20px;
}

.pa-mapp__rail-node {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  line-height: 0;
  margin-right: 0;
}

.pa-mapp__rail--sec .pa-mapp__rail-node {
  background: #0c1a2e;
}

.pa-mapp__rail--sec .pa-ring__track {
  stroke: rgba(255, 255, 255, 0.28);
}

.pa-mapp__rail--sec .pa-ring__val {
  stroke: #fb923c;
}

.pa-mapp__rail--sec .pa-ring__label {
  color: #fff;
}

.pa-mapp__rail--sec .pa-ring--done {
  background: #10b981;
  color: #fff;
}

.pa-mapp__more-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  justify-self: end;
  width: 32px;
}

/* Cap the path: first node starts mid-row, last node ends mid-row */
.pa-mapp__card--path > .pa-mapp__sec:first-child > .pa-mapp__sec-head .pa-mapp__rail-line {
  top: 50%;
}

.pa-mapp__card--path > .pa-mapp__sec:last-child:not(.pa-mapp__sec--open) > .pa-mapp__sec-head .pa-mapp__rail-line,
.pa-mapp__card--path > .pa-mapp__sec:last-child.pa-mapp__sec--open .pa-mapp__item:last-child .pa-mapp__rail-line {
  bottom: 50%;
}

.pa-mapp__item > a:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.pa-mapp__item-main {
  align-self: center;
  min-width: 0;
}

.pa-mapp__more {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pa-mapp__more:hover,
.pa-mapp__more-wrap.is-open .pa-mapp__more {
  background: #f1f5f9;
  color: #0c1a2e;
}

.pa-mapp__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.pa-mapp__menu-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0c1a2e;
  cursor: pointer;
}

.pa-mapp__menu-item:hover {
  background: #f8fafc;
}

.pa-mapp--chrome {
  background: transparent;
  min-height: 0;
}

.pa-mapp--chrome .pa-mapp__layout {
  padding: 0;
}

.pa-mapp--chrome .pa-mapp__card--path {
  background: transparent;
}

.pa-course-grades {
  max-width: none;
  width: 100%;
  margin: 0;
}

.pa-course-stage {
  width: 100%;
  max-width: none;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  position: relative;
}

.pa-course-stage[data-layout="mobile"] {
  max-width: none;
}

.pa-mapp__continue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #1a6eb5;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(26, 110, 181, 0.25);
}

.pa-mapp__continue span {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.9;
}

.pa-mapp__continue:hover {
  background: #155a96;
  color: #fff;
}

/* Circular progress rings */
.pa-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pa-ring svg {
  display: block;
  transform: rotate(-90deg);
}

.pa-ring__track {
  fill: none;
  stroke: #e5e7eb;
}

.pa-ring__val {
  fill: none;
  stroke: #f97316;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.pa-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #374151;
  line-height: 1;
}

.pa-ring--done {
  background: #10b981;
  border-radius: 999px;
  color: #fff;
}

.pa-ring__check {
  width: 55%;
  height: 55%;
  stroke: #fff;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none !important;
}

/* Right drawer for course info */
.pa-dp-drawer {
  position: fixed;
  inset: 0;
  z-index: 2400;
  pointer-events: none;
}

.pa-dp-drawer.is-open {
  pointer-events: auto;
}

.pa-dp-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 26, 46, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pa-dp-drawer.is-open .pa-dp-drawer__backdrop {
  opacity: 1;
}

.pa-dp-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  /* Screenshot standard: wide strip, square corners */
  width: 85vw;
  max-width: 480px;
  height: 100%;
  background: #fff;
  box-shadow: -16px 0 48px rgba(12, 26, 46, 0.22);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  opacity: 1;
}

.pa-dp-drawer.is-open .pa-dp-drawer__panel {
  transform: translateX(0);
}

.pa-dp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.pa-dp-drawer__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0c1a2e;
}

/* Course drawer banner — COURSE COVER replaces brand */
.pa-course-drawer__banner {
  position: relative;
  flex-shrink: 0;
  padding: 16px 14px 18px;
  min-height: 148px;
  box-sizing: border-box;
  color: #fff;
  overflow: hidden;
  background: #1a2332 !important;
}
.pa-course-drawer__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pa-course-cover, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pa-course-drawer__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 26, 46, 0.22) 0%, rgba(12, 26, 46, 0.55) 100%);
  pointer-events: none;
}
.pa-course-drawer__banner-top,
.pa-course-drawer__progress {
  position: relative;
  z-index: 2;
}
.pa-course-drawer__banner-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pa-course-drawer__banner-top h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  flex: 1;
  min-width: 0;
}
.pa-course-drawer__close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.pa-course-drawer__progress {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.pa-dp-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 18px 16px 28px;
  -webkit-overflow-scrolling: touch;
}

body.pa-dp-drawer-open {
  overflow: hidden !important;
}

.pa-mapp__mod {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.pa-mapp__mod svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pa-mapp__item-main { min-width: 0; }

.pa-mapp__item-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: #111827;
  line-height: 1.3;
  display: block;
  text-decoration: none;
}

.pa-mapp__item-sub {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: #9ca3af;
}

.pa-mapp__done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 600;
}

.pa-mapp__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.pa-mapp__mark:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.pa-mapp__ext {
  color: #9ca3af;
  padding-top: 6px;
}

.pa-mapp__empty {
  padding: 28px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

.pa-mapp__fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: #e5e7eb;
  color: #374151;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pa-mapp__fab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* Info dialog */
.pa-dp-info-box {
  width: min(480px, 94vw) !important;
  border-radius: 20px !important;
  padding: 22px 22px 16px !important;
}

.pa-dp-info-body { font-size: 0.9rem; color: #334155; line-height: 1.5; }

.pa-dp-info-cover {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 12px;
}

.pa-dp-info-meta {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.pa-dp-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.8125rem;
}

.pa-dp-info-row span { color: #64748b; }
.pa-dp-info-row strong { color: #0c1a2e; text-align: right; }

.pa-dp-stars { color: #f97316; letter-spacing: 1px; }

.pa-section-help__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  border: 0;
  background: #1a6eb5;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

/* ——— Shared alt variants (A/C/D) lightweight ——— */
.pa-proto { display: flex; flex-direction: column; min-height: 720px; background: #f4f7fa; }
.pa-proto-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: #fff; border-bottom: 1px solid #e8eef4;
}
.pa-proto-back { font-size: 0.8125rem; font-weight: 600; color: #1a6eb5; text-decoration: none; }
.pa-proto-body { flex: 1; padding: 14px; overflow: auto; }
.pa-proto-title { margin: 0 0 4px; font-size: 1.2rem; font-weight: 700; color: #0c1a2e; }
.pa-proto-meta { margin: 0 0 14px; font-size: 0.78rem; color: #64748b; }
.pa-proto-progress {
  margin-bottom: 14px; padding: 12px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 14px;
}
.pa-proto-progress__row {
  display: flex; justify-content: space-between; font-size: 0.78rem;
  font-weight: 600; margin-bottom: 8px;
}
.pa-proto-progress__track { height: 8px; background: #e8eef4; border-radius: 999px; overflow: hidden; }
.pa-proto-progress__fill { display: block; height: 100%; background: #1a6eb5; border-radius: 999px; }
.pa-proto-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; margin-bottom: 16px; border-radius: 14px;
  background: #1a6eb5; color: #fff; font-weight: 700; text-decoration: none;
}
.pa-proto-sec {
  margin-bottom: 12px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; overflow: hidden;
}
.pa-proto-sec__head {
  display: flex; justify-content: space-between; width: 100%;
  padding: 12px 14px; border: 0; background: #fff; cursor: pointer; text-align: left;
}
.pa-proto-sec__list { display: none; list-style: none; margin: 0; padding: 0 8px 8px; }
.pa-proto-sec--open .pa-proto-sec__list { display: flex; flex-direction: column; gap: 6px; }
.pa-proto-lesson {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 12px; text-decoration: none; color: inherit;
}
.pa-proto-lesson--current { background: #eef6fc; }
.pa-proto-dot {
  width: 22px; height: 22px; border-radius: 999px; border: 2px solid #cbd5e1; flex-shrink: 0;
}
.pa-proto-lesson--done .pa-proto-dot { background: #10b981; border-color: #10b981; }
.pa-proto-lesson__body { flex: 1; min-width: 0; }
.pa-proto-lesson__body strong { display: block; font-size: 0.84rem; }
.pa-proto-lesson__body span { display: block; font-size: 0.72rem; color: #64748b; }

.pa-proto-c { display: grid; grid-template-columns: 1fr; min-height: 720px; background: #f4f7fa; }
.pa-proto-c-tabs { display: flex; background: #fff; border-bottom: 1px solid #e2e8f0; }
.pa-proto-c-tab {
  flex: 1; padding: 12px; border: 0; background: transparent; font-weight: 700;
  color: #64748b; cursor: pointer; border-bottom: 2px solid transparent;
}
.pa-proto-c-tab--active { color: #1a6eb5; border-bottom-color: #1a6eb5; }
.pa-proto-c-panel { display: none; padding: 14px; overflow: auto; }
.pa-proto-c-panel--active { display: block; }
.pa-proto-c-about {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px;
}
@media (min-width: 900px) {
  .pa-proto-c { grid-template-columns: 38% 1fr; }
  .pa-proto-c-tabs { display: none; }
  .pa-proto-c-panel { display: block !important; }
  .pa-proto-c-outline { border-right: 1px solid #e2e8f0; background: #fff; }
}

.pa-proto-path { list-style: none; margin: 0; padding: 8px 0; position: relative; }
.pa-proto-path::before {
  content: ''; position: absolute; left: 19px; top: 18px; bottom: 24px;
  width: 2px; background: #d7e3ef;
}
.pa-proto-path__item {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; margin-bottom: 12px;
}
.pa-proto-path__node {
  width: 40px; height: 40px; border-radius: 999px; border: 2px solid #cbd5e1;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; z-index: 1; color: #64748b;
}
.pa-proto-path__item--done .pa-proto-path__node {
  background: #10b981; border-color: #10b981; color: #fff;
}
.pa-proto-path__item--current .pa-proto-path__node {
  border-color: #1a6eb5; color: #1a6eb5; box-shadow: 0 0 0 4px rgba(26,110,181,.15);
}
.pa-proto-path__card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 12px 14px; text-decoration: none; color: inherit; display: block;
}
.pa-proto-path__more { margin: 0 0 8px 50px; font-size: 0.75rem; color: #64748b; }

@media (max-width: 520px) {
  .pa-dp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-dp-stage,
  .pa-dp-stage[data-variant="c"],
  .pa-dp-stage[data-variant="m"][data-layout="web"] { max-width: 100%; }
}


/* ——— Production course stage (same width as LMS chrome) ——— */
.pa-course-stage-wrap {
  display: block;
  width: 100%;
}
.pa-course-stage {
  width: 100%;
  max-width: none;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  position: relative;
}
.pa-course-stage[data-layout="mobile"] {
  max-width: none;
}
.pa-course-grades {
  max-width: none;
  width: 100%;
}
.pa-course-loading {
  padding: 48px 20px;
  text-align: center;
  color: #64748b;
}
.pa-course-info-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #dbeafe;
}
.pa-course-info-meta { margin: 14px 0; }
.pa-course-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.8125rem;
}
.pa-course-info-row span { color: #64748b; }
.pa-course-info-row strong { color: #0c1a2e; text-align: right; }
.pa-course-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f97316;
  letter-spacing: 0;
  font-weight: 600;
  white-space: nowrap;
}
.pa-course-star {
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1;
}
.pa-course-star.is-on {
  color: #f97316;
}
.pa-course-stars__score {
  margin-left: 4px;
  font-size: 0.8125rem;
  color: #0c1a2e;
}
.pa-course-stars__count {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}
body.pa-course-drawer-open { overflow: hidden; }

.pa-course-drawer { /* alias uses pa-dp-drawer markup classes below */ }