:root {
  --detail-blue: #135ca8;
  --detail-blue-dark: #073a72;
  --detail-ink: #172a40;
  --detail-muted: #66788d;
  --detail-border: #dce6f0;
  --detail-soft: #f3f7fb;
  --detail-width: 1180px;
}

body.course-detail-page {
  margin: 0;
  background: var(--detail-soft);
  color: var(--detail-ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}

.course-detail-page *,
.course-detail-page *::before,
.course-detail-page *::after { box-sizing: border-box; }
.course-detail-page a { color: inherit; text-decoration: none; }
.course-detail-page #container.course-detail-shell { width: 100%; max-width: none; margin: 0; overflow: visible; background: var(--detail-soft); }
.course-detail-width { width: min(var(--detail-width), calc(100% - 48px)); margin-inline: auto; }

.course-detail-breadcrumb { border-bottom: 1px solid var(--detail-border); background: #fff; color: var(--detail-muted); font-size: 14px; }
.course-detail-breadcrumb > div { min-height: 58px; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.course-detail-breadcrumb a,
.course-detail-breadcrumb span[aria-hidden="true"] { flex: 0 0 auto; white-space: nowrap; }
.course-detail-breadcrumb span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-detail-breadcrumb a:hover { color: var(--detail-blue); }

.course-detail-hero {
  padding-block: 54px 60px;
  color: #fff;
  background: radial-gradient(circle at 82% 18%, rgba(122, 195, 255, 0.25), transparent 28%), linear-gradient(120deg, #052d59 0%, #0a5ca8 58%, #287fbd 100%);
}
.course-detail-hero__inner { display: grid; grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.45fr); gap: 54px; align-items: center; }
.course-detail-cover { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; background: #dce8f3; box-shadow: 0 24px 48px rgba(0, 22, 48, 0.24); }
.course-detail-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.course-detail-label { margin: 0 0 8px; color: #bfe1ff; font-size: 12px; font-weight: 800; letter-spacing: 0.17em; }
.course-detail-category { display: inline-flex; margin-bottom: 14px; padding: 4px 11px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 3px; color: #fff; font-size: 13px; font-weight: 700; }
.course-detail-summary h1 { margin: 0; color: #fff; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.28; }
.course-detail-lead { max-width: 760px; margin: 18px 0 22px; color: #e0effc; font-size: 16px; }
.course-detail-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.course-detail-facts div { min-width: 150px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; background: rgba(255, 255, 255, 0.09); }
.course-detail-facts dt,
.course-detail-facts dd { margin: 0; }
.course-detail-facts dt { color: #bfe1ff; font-size: 12px; font-weight: 700; }
.course-detail-facts dd { color: #fff; font-size: 15px; font-weight: 700; }
.course-detail-note { margin: 16px 0 0; color: #dcecff; font-size: 14px; }
.course-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.course-detail-actions a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 3px; font-weight: 750; transition: 0.2s ease; }
.course-detail-consult { border-color: #fff !important; background: #fff; color: var(--detail-blue-dark) !important; }
.course-detail-actions a:hover { transform: translateY(-2px); }

.course-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; align-items: start; padding-block: 54px 76px; }
.course-detail-article { min-width: 0; overflow: hidden; border: 1px solid var(--detail-border); border-radius: 7px; background: #fff; box-shadow: 0 12px 32px rgba(24, 62, 98, 0.06); }
.course-detail-section { padding: 38px 42px 44px; }
.course-detail-section + .course-detail-section { border-top: 1px solid var(--detail-border); }
.course-detail-section .course-detail-label,
.course-detail-related .course-detail-label { color: var(--detail-blue); }
.course-detail-section h2,
.course-detail-related h2 { margin: 0 0 24px; color: var(--detail-ink); font-size: 26px; line-height: 1.35; }
.course-detail-section h2::after,
.course-detail-related h2::after { content: ""; width: 42px; height: 3px; display: block; margin-top: 12px; background: var(--detail-blue); }
.course-detail-introduction { color: #425970; font-size: 16px; white-space: pre-line; }
.course-detail-empty { margin: 0; color: var(--detail-muted); }
.course-detail-outline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.course-detail-outline li { min-width: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 18px; align-items: start; padding: 17px 0; border-bottom: 1px solid #e7edf3; }
.course-detail-outline li:first-child { padding-top: 2px; }
.course-detail-outline li:last-child { padding-bottom: 0; border-bottom: 0; }
.course-detail-outline li > span { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: #eaf3fb; color: var(--detail-blue); font-size: 13px; font-weight: 800; }
.course-detail-outline p { min-width: 0; margin: 2px 0 0; overflow-wrap: anywhere; color: #40566c; }

.course-detail-related { position: sticky; top: 20px; padding: 28px 26px; border: 1px solid var(--detail-border); border-radius: 7px; background: #fff; box-shadow: 0 12px 32px rgba(24, 62, 98, 0.06); }
.course-detail-related h2 { margin-bottom: 12px; font-size: 22px; }
.course-detail-related ol { margin: 0; padding: 0; list-style: none; }
.course-detail-related li + li { border-top: 1px solid #e5ecf3; }
.course-detail-related li a { position: relative; display: block; padding: 17px 24px 17px 0; }
.course-detail-related strong,
.course-detail-related span { display: block; }
.course-detail-related strong { color: #253d55; font-size: 15px; line-height: 1.55; }
.course-detail-related span { margin-top: 5px; color: var(--detail-muted); font-size: 12px; }
.course-detail-related b { position: absolute; top: 22px; right: 2px; color: var(--detail-blue); }
.course-detail-related li a:hover strong { color: var(--detail-blue); }
.course-detail-related__all { min-height: 42px; display: flex; align-items: center; justify-content: center; margin-top: 18px; border: 1px solid var(--detail-blue); border-radius: 3px; color: var(--detail-blue) !important; font-weight: 750; }
.course-detail-related__all:hover { background: var(--detail-blue); color: #fff !important; }
.course-detail-page a:focus-visible { outline: 3px solid rgba(19, 92, 168, 0.3); outline-offset: 3px; }

@media (max-width: 920px) {
  .course-detail-hero__inner { grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr); gap: 32px; }
  .course-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .course-detail-related { position: static; }
}

@media (max-width: 680px) {
  .course-detail-width { width: min(100% - 28px, var(--detail-width)); }
  .course-detail-breadcrumb > div { min-height: 50px; }
  .course-detail-hero { padding-block: 24px 36px; }
  .course-detail-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .course-detail-cover { width: 100%; }
  .course-detail-summary h1 { font-size: 30px; }
  .course-detail-lead { font-size: 15px; }
  .course-detail-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .course-detail-facts div { min-width: 0; }
  .course-detail-actions { display: grid; grid-template-columns: 1fr; }
  .course-detail-layout { gap: 20px; padding-block: 24px 42px; }
  .course-detail-section,
  .course-detail-related { padding: 26px 22px 30px; }
  .course-detail-section h2 { font-size: 23px; }
  .course-detail-outline li { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
}

@media (max-width: 420px) {
  .course-detail-facts { grid-template-columns: 1fr; }
}