@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --course-bg:#081628;
  --course-bg-deep:#060f1e;
  --course-panel:#0a1c32;
  --course-gold:#c9a84c;
  --course-gold-light:#e8c97a;
  --course-line:rgba(201,168,76,.22);
  --course-text:#f0ebe0;
  --course-dim:rgba(240,235,224,.68);
  --course-danger:#ffb4a8;
  --course-ok:#9ed8b5;
}

* { box-sizing:border-box; }
html { background:var(--course-bg-deep); scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  padding-top:72px;
  background:linear-gradient(160deg,#0d1e38,var(--course-bg) 45%,var(--course-bg-deep));
  color:var(--course-text);
  font-family:Montserrat,sans-serif;
}
a { color:inherit; }

.course-header {
  height:72px;
  border-bottom:1px solid var(--course-line);
  background:rgba(8,22,40,.95);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 48px;
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
}
.course-brand { align-items:center; display:flex; gap:14px; text-decoration:none; }
.course-brand img { display:block; width:auto; height:40px; }
.course-brand-divider {
  background:linear-gradient(to bottom,transparent,var(--course-line),transparent);
  display:block;
  height:32px;
  width:1px;
}
.course-brand-copy { display:flex; flex-direction:column; }
.course-brand-copy strong {
  color:var(--course-gold-light);
  font-size:14px;
  font-weight:700;
  letter-spacing:3.5px;
  line-height:1;
  text-transform:uppercase;
}
.course-brand-copy small {
  color:rgba(201,168,76,.5);
  font-size:8px;
  font-weight:600;
  letter-spacing:2.8px;
  line-height:1;
  margin-top:5px;
  text-transform:uppercase;
}
.course-nav { display:flex; align-items:center; }
.course-nav a {
  display:block;
  height:72px;
  line-height:72px;
  border-bottom:1px solid transparent;
  padding:0 20px;
  color:rgba(240,235,224,.6);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:2.5px;
  text-decoration:none;
  text-transform:uppercase;
  transition:all .3s;
  white-space:nowrap;
}
.course-nav a:hover,.course-nav a.active { color:var(--course-gold-light); border-color:var(--course-gold); }
.course-menu-button {
  display:none;
  border:1px solid var(--course-line);
  background:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.course-menu-button span { background:var(--course-gold); display:block; height:1.5px; width:22px; }

.course-wrap { width:min(1240px,92%); margin:0 auto; }
.course-context-nav {
  align-items:center;
  border-bottom:1px solid var(--course-line);
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin:0 0 30px;
  padding:0 0 16px;
}
.course-context-nav a,
.course-context-current {
  color:var(--course-gold-light);
  font-size:9px;
  font-weight:700;
  letter-spacing:2px;
  line-height:1.5;
  text-decoration:none;
  text-transform:uppercase;
}
.course-context-nav a {
  transition:color .2s ease;
}
.course-context-nav a:hover {
  color:var(--course-text);
}
.course-context-current {
  color:var(--course-dim);
}
.course-hero { padding:78px 0 64px; border-bottom:1px solid var(--course-line); }
.course-eyebrow {
  color:var(--course-gold);
  font-size:9px;
  font-weight:700;
  letter-spacing:4px;
  margin-bottom:18px;
  text-transform:uppercase;
}
.course-hero h1,.course-title {
  color:var(--course-gold-light);
  font-size:clamp(36px,6vw,74px);
  letter-spacing:3px;
  line-height:1.08;
  margin:0 0 22px;
  overflow-wrap:normal;
  text-transform:uppercase;
  word-break:normal;
}
.course-lead { color:var(--course-dim); font-size:16px; line-height:1.9; max-width:880px; }
.course-section { padding:60px 0; }
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.course-card,.course-panel {
  border:1px solid var(--course-line);
  background:rgba(8,22,40,.82);
}
.course-card { display:flex; flex-direction:column; min-height:100%; }
.course-card-media { aspect-ratio:16/9; border-bottom:1px solid var(--course-line); background:var(--course-panel); overflow:hidden; }
.course-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.course-card-body { padding:26px; display:flex; flex:1; flex-direction:column; }
.course-card h2 { font-size:19px; line-height:1.4; margin:0 0 12px; }
.course-card p,.course-panel p,.course-card-description { color:var(--course-dim); line-height:1.8; }
.course-card-description { margin-bottom:24px; }
.course-card-description > :first-child { margin-top:0; }
.course-card-description > :last-child { margin-bottom:0; }
.course-card-description p { margin:0 0 1em; }
.course-card-description h2,
.course-card-description h3,
.course-card-description h4 { color:var(--course-text); font-size:16px; line-height:1.5; margin:1em 0 .5em; }
.course-card-description ul,
.course-card-description ol { margin:0 0 1em; padding-left:1.35em; }
.course-card-description blockquote { border-left:2px solid var(--course-gold); margin:1em 0; padding-left:14px; }
.course-card-description a { color:var(--course-gold2); }
.course-card .course-button { margin-top:auto; align-self:flex-start; }
.course-panel { padding:34px; margin-bottom:24px; }
.course-panel h2,.course-panel h3 { color:var(--course-gold-light); margin:0 0 16px; }
.course-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.course-meta { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.course-chip { border:1px solid var(--course-line); color:var(--course-gold-light); font-size:8px; font-weight:700; letter-spacing:2px; padding:8px 10px; text-transform:uppercase; }
.course-button {
  display:inline-block;
  border:0;
  background:linear-gradient(135deg,var(--course-gold-light),var(--course-gold));
  color:var(--course-bg);
  cursor:pointer;
  font-family:inherit;
  font-size:9px;
  font-weight:700;
  letter-spacing:2px;
  padding:14px 24px;
  text-decoration:none;
  text-transform:uppercase;
}
.course-button.secondary { border:1px solid var(--course-line); background:transparent; color:var(--course-gold-light); }
.course-button:disabled { cursor:not-allowed; opacity:.45; }

.course-form { display:grid; gap:18px; }
.course-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.course-field { display:grid; gap:8px; }
.course-field.full { grid-column:1/-1; }
.course-field label { color:var(--course-gold); font-size:8px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }
.course-field input {
  width:100%;
  border:1px solid var(--course-line);
  background:rgba(6,15,30,.82);
  color:var(--course-text);
  font:inherit;
  padding:15px;
}
.course-error { color:var(--course-danger); line-height:1.7; }
.course-ok { color:var(--course-ok); }

.course-progress-track { height:8px; background:rgba(240,235,224,.08); overflow:hidden; }
.course-progress-bar { height:100%; background:var(--course-gold); }
.lesson-list { display:grid; gap:10px; }
.lesson-row { display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:18px; border:1px solid var(--course-line); padding:16px; text-decoration:none; }
.lesson-number { color:var(--course-gold); font-size:10px; font-weight:700; letter-spacing:2px; }
.lesson-row strong { display:block; margin-bottom:6px; }
.lesson-row small { color:var(--course-dim); }

.lesson-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start; }
.lesson-stage { border:1px solid var(--course-line); background:#030914; padding:18px; }
.lesson-video { width:100%; max-height:70vh; display:block; background:#000; }
.protected-player {
  background:#000;
  overflow:hidden;
  position:relative;
  user-select:none;
  -webkit-user-select:none;
}
.protected-player video::-webkit-media-controls { display:none !important; }
.protected-player video::-webkit-media-controls-enclosure { display:none !important; }
.protected-watermark {
  background:rgba(3,9,20,.46);
  border:1px solid rgba(232,201,122,.2);
  color:rgba(240,235,224,.55);
  font-size:8px;
  font-weight:600;
  letter-spacing:1.5px;
  max-width:45%;
  overflow:hidden;
  padding:6px 9px;
  pointer-events:none;
  position:absolute;
  right:12px;
  text-overflow:ellipsis;
  text-transform:uppercase;
  top:12px;
  white-space:nowrap;
  z-index:3;
}
.protected-player-lock {
  align-items:center;
  background:rgba(3,9,20,.76);
  color:var(--course-gold-light);
  display:flex;
  font-size:10px;
  font-weight:700;
  inset:0 0 50px;
  justify-content:center;
  letter-spacing:2px;
  padding:24px;
  pointer-events:none;
  position:absolute;
  text-align:center;
  text-transform:uppercase;
  transition:opacity .2s;
  z-index:2;
}
.protected-player:not(.is-locked) .protected-player-lock {
  opacity:0;
  visibility:hidden;
}
.protected-player-controls {
  align-items:center;
  background:#06101f;
  border-top:1px solid var(--course-line);
  display:grid;
  gap:10px;
  grid-template-columns:auto minmax(100px,1fr) auto auto auto;
  min-height:50px;
  padding:8px 10px;
}
.protected-player-controls button {
  border:1px solid var(--course-line);
  background:transparent;
  color:var(--course-gold-light);
  cursor:pointer;
  font:inherit;
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  min-height:32px;
  padding:7px 9px;
  text-transform:uppercase;
}
.protected-player-controls button:disabled {
  cursor:not-allowed;
  opacity:.38;
}
.protected-player-controls input[type="range"] {
  accent-color:var(--course-gold);
  min-width:90px;
  width:100%;
}
.protected-player-controls span {
  color:var(--course-dim);
  font-size:10px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lesson-podcast {
  background:#06101f;
  border:1px solid var(--course-line);
  margin-top:22px;
  padding:24px;
}
.lesson-podcast h2 {
  color:var(--course-gold-light);
  font-size:22px;
  margin:8px 0 10px;
}
.lesson-podcast > p {
  color:var(--course-dim);
  font-size:13px;
  line-height:1.75;
  margin:0 0 18px;
}
.podcast-player {
  align-items:center;
  background:#030914;
  border:1px solid var(--course-line);
  display:grid;
  gap:10px;
  grid-template-columns:auto minmax(100px,1fr) auto auto;
  padding:10px;
  user-select:none;
  -webkit-user-select:none;
}
.podcast-player audio { display:none; }
.podcast-player button {
  background:transparent;
  border:1px solid var(--course-line);
  color:var(--course-gold-light);
  cursor:pointer;
  font:inherit;
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  min-height:34px;
  padding:8px 10px;
  text-transform:uppercase;
}
.podcast-player input[type="range"] {
  accent-color:var(--course-gold);
  min-width:90px;
  width:100%;
}
.podcast-player span {
  color:var(--course-dim);
  font-size:10px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.podcast-completion {
  align-items:center;
  border-top:1px solid var(--course-line);
  display:grid;
  gap:8px;
  grid-template-columns:1fr auto;
  margin-top:14px;
  padding-top:14px;
}
.podcast-completion span {
  color:var(--course-gold);
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.podcast-completion strong {
  color:var(--course-gold-light);
  font-size:18px;
}
.podcast-completion small {
  color:var(--course-dim);
  grid-column:1 / -1;
}
.lesson-body { color:var(--course-dim); line-height:1.9; }
.protected-player + .lesson-body,
.lesson-podcast + .lesson-body {
  border-top:1px solid var(--course-line);
  margin-top:22px;
  padding-top:22px;
}
.lesson-body > :first-child { margin-top:0; }
.lesson-body > :last-child { margin-bottom:0; }
.lesson-body p { margin:0 0 1.25em; }
.lesson-body h2,
.lesson-body h3,
.lesson-body h4 {
  color:var(--course-gold-light);
  line-height:1.25;
  margin:1.35em 0 .6em;
}
.lesson-body h2 { font-size:clamp(24px,3vw,34px); }
.lesson-body h3 { font-size:clamp(20px,2.4vw,28px); }
.lesson-body h4 { font-size:clamp(17px,2vw,22px); }
.lesson-body ul,
.lesson-body ol { margin:0 0 1.4em; padding-left:1.5em; }
.lesson-body li { margin:.45em 0; padding-left:.25em; }
.lesson-body blockquote {
  border-left:3px solid var(--course-gold);
  color:var(--course-gold-light);
  margin:1.5em 0;
  padding:.35em 0 .35em 1.25em;
}
.lesson-body a {
  color:var(--course-gold-light);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.lesson-body hr { border:0; border-top:1px solid var(--course-line); margin:2em 0; }
.presence-panel { position:sticky; top:100px; }
.presence-camera {
  aspect-ratio:4/3;
  background:#030914;
  border:1px solid var(--course-line);
  overflow:hidden;
  position:relative;
}
.presence-camera video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.presence-status { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--course-dim); font-size:13px; }
.presence-dot { width:10px; height:10px; border-radius:50%; background:#9a675e; box-shadow:0 0 0 4px rgba(154,103,94,.15); }
.presence-dot.present { background:#72c693; box-shadow:0 0 0 4px rgba(114,198,147,.15); }
.presence-dot.warning { background:var(--course-gold-light); }
.presence-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--course-line); border:1px solid var(--course-line); margin-top:16px; }
.presence-stat { background:var(--course-bg); padding:15px; }
.presence-stat span { color:var(--course-gold); display:block; font-size:8px; letter-spacing:2px; margin-bottom:8px; text-transform:uppercase; }
.presence-stat strong { font-size:20px; }
.presence-note { color:var(--course-dim); font-size:12px; line-height:1.7; }
.presence-privacy {
  align-items:flex-start;
  color:var(--course-dim);
  display:flex;
  font-size:11px;
  gap:10px;
  line-height:1.6;
  margin:18px 0;
}
.presence-privacy input { accent-color:var(--course-gold); margin-top:3px; }
.presence-privacy a { color:var(--course-gold-light); }
.presence-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(3,9,20,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.presence-overlay.open { display:flex; }
.presence-dialog { width:min(520px,100%); border:1px solid var(--course-gold); background:var(--course-bg); padding:34px; text-align:center; }
.presence-dialog h2 { color:var(--course-gold-light); margin:0 0 14px; }
.presence-dialog p { color:var(--course-dim); line-height:1.8; }

@media (max-width:700px) {
  .protected-player-controls {
    grid-template-columns:auto minmax(80px,1fr) auto;
  }
  .protected-player-controls #playerMute,
  .protected-player-controls #playerFullscreen {
    display:none;
  }
  .lesson-podcast { padding:18px; }
  .podcast-player {
    grid-template-columns:auto minmax(70px,1fr) auto;
  }
  .podcast-player [data-podcast-mute] { display:none; }
}

.course-hero.compact { padding:52px 0 42px; }
.course-alert { border:1px solid var(--course-line); padding:16px 18px; margin:0 0 22px; }
.course-alert.error { border-color:rgba(190,105,91,.55); color:var(--course-danger); }
.course-chips { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.test-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start; }
.test-questions { display:grid; gap:18px; }
.test-question { border:1px solid var(--course-line); margin:0; padding:22px; }
.test-question legend {
  color:var(--course-text);
  font-size:16px;
  font-weight:700;
  line-height:1.55;
  padding:0 8px;
}
.test-question legend span {
  color:var(--course-gold);
  font-size:9px;
  letter-spacing:2px;
  margin-right:12px;
}
.test-option {
  align-items:flex-start;
  border-top:1px solid rgba(201,168,76,.12);
  color:var(--course-dim);
  cursor:pointer;
  display:flex;
  gap:12px;
  line-height:1.6;
  padding:13px 4px;
}
.test-option:first-of-type { margin-top:12px; }
.test-option input { accent-color:var(--course-gold); margin-top:5px; }
.test-timer { border:1px solid var(--course-line); margin-bottom:18px; padding:16px; }
.test-timer span { color:var(--course-gold); display:block; font-size:8px; letter-spacing:2px; margin-bottom:6px; text-transform:uppercase; }
.test-timer strong { color:var(--course-gold-light); font-size:28px; }
.test-result { text-align:center; }
.test-result h2 { font-size:46px; }
.test-result.passed { border-color:rgba(114,198,147,.55); }
.test-result.failed { border-color:rgba(190,105,91,.55); }

.course-access-panel { margin-top:40px; }
.course-access-panel h2 { margin:10px 0 12px; }
.course-access-panel p { max-width:760px; margin:0; }
.course-access-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

.course-footer {
  align-items:center;
  background:rgba(6,15,30,.98);
  border-top:1px solid var(--course-line);
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
  padding:28px 48px;
  text-align:center;
}
.course-footer-brand {
  color:rgba(201,168,76,.7);
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:5px;
  text-transform:uppercase;
}
.course-footer-sub {
  color:rgba(201,168,76,.35);
  display:block;
  font-size:7px;
  letter-spacing:3px;
  margin-top:5px;
  text-transform:uppercase;
}
.course-footer-registry {
  border-top:1px solid rgba(201,168,76,.14);
  color:rgba(240,235,224,.55);
  font-size:9px;
  letter-spacing:.5px;
  line-height:1.8;
  max-width:920px;
  padding-top:14px;
  text-align:center;
  width:100%;
}
.course-footer-registry span { display:block; }

@media (max-width:1180px) {
  .course-menu-button { display:flex; }
  .course-nav {
    align-items:stretch;
    background:rgba(8,22,40,.99);
    border-bottom:1px solid var(--course-line);
    backdrop-filter:blur(12px);
    display:none;
    flex-direction:column;
    left:0;
    position:fixed;
    right:0;
    top:72px;
  }
  .course-nav.open { display:flex; }
  .course-nav a {
    height:auto;
    line-height:normal;
    padding:18px 28px;
    font-size:10px;
    letter-spacing:3px;
  }
  .course-nav a:hover,.course-nav a.active {
    background:rgba(201,168,76,.07);
    padding-left:36px;
  }
}
@media (max-width:980px) {
  .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lesson-layout,.test-layout { grid-template-columns:1fr; }
  .presence-panel { position:static; }
}
@media (max-width:760px) {
  body { padding-top:72px; }
  .course-header { height:72px; padding:0 20px; }
  .course-hero { padding:50px 0 42px; }
  .course-context-nav { align-items:flex-start; flex-direction:column; }
  .course-grid,.course-form-grid { grid-template-columns:1fr; }
  .course-field.full { grid-column:auto; }
  .course-panel-header { align-items:stretch; flex-direction:column; }
  .course-panel-header .course-button { text-align:center; width:100%; }
  .lesson-row { grid-template-columns:44px 1fr; }
  .lesson-row .course-button { grid-column:1/-1; text-align:center; }
  .course-footer { padding:24px 20px; }
}