:root {
  color-scheme: light;
  --bg: #f3f4f2;
  --bg-soft: #e9ecea;
  --surface: #ffffff;
  --surface-2: #e8ebe9;
  --line: #d1d6d3;
  --line-soft: #e1e4e2;
  --text: #191b1c;
  --soft: #62696d;
  --accent: #c53d34;
  --accent-soft: #a8332c;
  --success: #267b52;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.kicker { margin: 0 0 14px; color: var(--accent-soft); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.student-login { min-height: 100dvh; padding: 24px clamp(20px, 4vw, 54px) 54px; background: radial-gradient(circle at 12% 80%, rgba(225,95,82,.13), transparent 31%), var(--bg); }
.login-brand, .course-brand { display: flex; align-items: center; gap: 12px; }
.login-brand > .brand-mark, .course-brand > .brand-mark { width: 40px; height: 40px; display: block; flex: 0 0 40px; }
.login-brand > .brand-mark img, .course-brand > .brand-mark img { width: 100%; height: 100%; }
.login-brand div, .course-brand div { display: grid; gap: 2px; }
.login-brand strong, .course-brand strong { font-size: 13px; }
.login-brand small, .course-brand small { color: var(--soft); font-size: 10px; }
.login-layout { min-height: calc(100dvh - 118px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .55fr); gap: clamp(50px, 10vw, 160px); align-items: center; width: min(1280px, 100%); margin: auto; }
.login-story h1 { max-width: 790px; margin: 0; font-size: clamp(56px, 7.5vw, 116px); letter-spacing: -.075em; line-height: .89; }
.login-story > p:not(.kicker) { max-width: 600px; margin: 28px 0 0; color: var(--soft); font-size: clamp(17px, 2vw, 23px); line-height: 1.55; }
.login-proof { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 42px; }
.login-proof span { border: 1px solid var(--line); border-radius: 999px; color: var(--soft); padding: 9px 12px; font-size: 11px; }
.login-card { border: 1px solid var(--line); border-radius: 24px; background: var(--surface); padding: clamp(28px, 4vw, 48px); box-shadow: 0 32px 100px rgba(34,44,40,.12); }
.login-card h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.055em; }
.login-card > p:not(.kicker):not(.login-help) { margin: 15px 0 0; color: var(--soft); font-size: 13px; line-height: 1.6; }
.login-card form { display: grid; gap: 9px; margin-top: 28px; }
.login-card label { margin-top: 7px; color: var(--text); font-size: 11px; font-weight: 700; }
.login-card input { min-height: 52px; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 0 14px; }
.login-card input:focus { border-color: var(--accent); outline: 3px solid rgba(225,95,82,.17); }
.primary-button, .preview-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--accent); color: #fff8f6; padding: 0 20px; font-weight: 700; letter-spacing: -.015em; cursor: pointer; }
.primary-button { margin-top: 12px; }
.primary-button:hover { background: #ad352d; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.preview-button { width: 100%; margin-top: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); }
.form-status { min-height: 18px; margin: 5px 0 0; color: #ad352d; font-size: 11px; }
.login-help { margin: 18px 0 0; border-top: 1px solid var(--line); color: var(--soft); padding-top: 16px; font-size: 10px; line-height: 1.55; }

.course-header { position: sticky; top: 0; z-index: 30; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(243,244,242,.92); padding: 12px clamp(18px, 3vw, 40px); backdrop-filter: blur(18px); }
.student-actions { display: flex; align-items: center; gap: 18px; }
.student-identity { display: grid; gap: 2px; text-align: right; }
.student-identity span { font-size: 12px; font-weight: 700; }
.student-identity small { color: var(--soft); font-family: ui-monospace, Menlo, monospace; font-size: 9px; }
.text-button { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); padding: 9px 13px; cursor: pointer; font-size: 10px; font-weight: 700; }
.text-button:hover { background: var(--surface-2); }

.course-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); }
.course-sidebar { position: sticky; top: 72px; align-self: start; height: calc(100dvh - 72px); display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg-soft); padding: 28px 20px; }
.progress-card { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 17px; }
.progress-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.progress-card span { color: var(--soft); font-size: 10px; }
.progress-card strong { color: var(--accent-soft); font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
.progress-track { height: 5px; overflow: hidden; margin: 14px 0 9px; border-radius: 999px; background: var(--surface-2); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 320ms ease; }
.progress-card small { color: var(--soft); font-size: 9px; }
.topic-nav { display: grid; gap: 4px; margin-top: 25px; }
.topic-button { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 0; border-radius: 11px; background: transparent; color: var(--soft); padding: 11px 10px; text-align: left; cursor: pointer; }
.topic-button > span:first-child { font-family: ui-monospace, Menlo, monospace; font-size: 9px; }
.topic-button b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topic-button small { font-size: 8px; }
.topic-button:hover, .topic-button.is-active { background: var(--surface-2); color: var(--text); }
.topic-button.is-active > span:first-child { color: var(--accent-soft); }
.copyright-note { display: flex; gap: 9px; margin-top: auto; border-top: 1px solid var(--line); color: var(--soft); padding: 18px 4px 2px; }
.copyright-note > span { color: var(--accent-soft); }
.copyright-note p { margin: 0; font-size: 9px; line-height: 1.5; }

.course-main { min-width: 0; padding: clamp(40px, 5vw, 78px); }
.course-intro, .lesson-stage, .topic-lessons, .support-strip { width: min(1120px, 100%); margin-inline: auto; }
.course-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .55fr); gap: 54px; align-items: end; margin-bottom: 60px; }
.course-intro h1 { max-width: 800px; margin: 0; font-size: clamp(44px, 5.6vw, 78px); letter-spacing: -.068em; line-height: .94; }
.course-intro > p { margin: 0; color: var(--soft); font-size: 13px; line-height: 1.65; }
.lesson-stage { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: clamp(18px, 3vw, 30px); }
.lesson-heading { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.lesson-path { margin: 0 0 8px; color: var(--accent-soft); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lesson-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.055em; line-height: 1.03; }
.lesson-duration { flex: none; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); padding: 8px 10px; font-family: ui-monospace, Menlo, monospace; font-size: 9px; }
.protected-player { --text: #f1f2ef; --soft: #aeb3b8; --line: #32353b; --accent-soft: #f08a80; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #32353b; border-radius: 14px; background: #08090a; user-select: none; -webkit-user-select: none; }
.player-content, .player-content iframe, .player-content video { width: 100%; height: 100%; }
.player-content iframe, .player-content video { display: block; border: 0; background: #050506; object-fit: contain; }
.player-placeholder { height: 100%; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--soft); text-align: center; padding: 24px; }
.player-placeholder > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-soft); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.player-placeholder strong { color: var(--text); font-size: 15px; }
.player-placeholder small { max-width: 360px; font-size: 10px; line-height: 1.5; }
.player-placeholder.is-error > span { color: var(--soft); }
.player-brand-watermark { position: absolute; top: 11px; right: 11px; z-index: 4; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(8,9,10,.48); color: rgba(255,255,255,.82); padding: 6px 8px; pointer-events: none; backdrop-filter: blur(5px); box-shadow: 0 5px 20px rgba(0,0,0,.2); }
.player-brand-watermark img { width: 20px; height: 20px; opacity: .9; }
.player-brand-watermark > span { display: grid; gap: 1px; }
.player-brand-watermark strong { font-size: 8px; letter-spacing: .08em; line-height: 1; }
.player-brand-watermark small { color: rgba(255,255,255,.6); font-family: ui-monospace, Menlo, monospace; font-size: 6px; letter-spacing: .08em; line-height: 1; }
.student-watermark { position: absolute; z-index: 4; top: auto; right: auto; bottom: auto; left: auto; width: max-content; max-width: min(72%, 460px); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(8,9,10,.28); color: rgba(255,255,255,.7); padding: 4px 7px; font-family: ui-monospace, Menlo, monospace; font-size: clamp(6px, .65vw, 8px); line-height: 1.2; opacity: .68; pointer-events: none; text-shadow: 0 1px 1px rgba(0,0,0,.55); backdrop-filter: blur(2px); transition: top 620ms ease, right 620ms ease, bottom 620ms ease, left 620ms ease, transform 620ms ease, opacity 220ms ease; }
.student-watermark > span { display: block; overflow-wrap: anywhere; }
.student-watermark > span { font-weight: 600; }
.student-watermark[data-position="top-left"] { top: 8%; left: 4%; transform: none; }
.student-watermark[data-position="middle-left"] { top: 48%; left: 3%; transform: translateY(-50%); }
.student-watermark[data-position="bottom-left"] { bottom: 7%; left: 4%; transform: none; }
.student-watermark[data-position="bottom-right"] { right: 4%; bottom: 7%; transform: none; }
.privacy-shield { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: #08090a; color: var(--soft); font-size: 11px; }
.protected-player.is-obscured .privacy-shield { display: grid; }
.lesson-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; padding-top: 22px; }
.lesson-footer p { max-width: 740px; margin: 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.complete-button { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); padding: 0 15px; cursor: pointer; font-size: 10px; }
.complete-button span { color: var(--soft); }
.complete-button.is-complete { border-color: rgba(38,123,82,.45); color: #1e7048; }
.complete-button.is-complete span { color: var(--success); }
.complete-button:disabled { opacity: .55; cursor: wait; }

.topic-lessons { margin-top: 90px; }
.topic-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 44px; align-items: end; margin-bottom: 28px; }
.topic-heading h2 { margin: 0; font-size: clamp(34px, 4.5vw, 58px); letter-spacing: -.06em; }
.topic-heading > p { margin: 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.lesson-list { border-top: 1px solid var(--line); }
.lesson-row { width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 19px 5px; text-align: left; cursor: pointer; }
.lesson-row:hover, .lesson-row.is-active { background: linear-gradient(90deg, rgba(225,95,82,.08), transparent 70%); }
.lesson-row-number { color: var(--soft); font-family: ui-monospace, Menlo, monospace; font-size: 9px; }
.lesson-row b { font-size: 13px; }
.lesson-row > small { color: var(--soft); font-size: 9px; }
.lesson-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 9px; }
.lesson-row.is-complete .lesson-check { border-color: rgba(38,123,82,.5); color: var(--success); }
.support-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 90px; border-top: 1px solid var(--line); padding: 28px 0; }
.support-strip span { color: var(--accent-soft); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.support-strip p { margin: 0; color: var(--soft); font-size: 11px; line-height: 1.55; }
.support-strip a { border-bottom: 1px solid var(--line); padding-bottom: 3px; font-size: 10px; }
.print-block { display: none; }

@media (max-width: 960px) {
  .login-layout { grid-template-columns: 1fr; gap: 56px; padding-top: 70px; }
  .login-card { width: min(100%, 620px); }
  .course-layout { grid-template-columns: 1fr; }
  .course-sidebar { position: sticky; top: 72px; z-index: 20; height: auto; display: block; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .progress-card, .copyright-note { display: none; }
  .topic-nav { display: flex; width: max-content; margin: 0; }
  .topic-button { width: 190px; }
}

@media (max-width: 700px) {
  .student-login { padding-inline: 16px; }
  .login-layout { min-height: auto; padding: 76px 0 30px; }
  .login-story h1 { font-size: clamp(52px, 17vw, 76px); }
  .course-header { min-height: 64px; padding-inline: 14px; }
  .course-brand small, .student-identity { display: none; }
  .course-sidebar { top: 64px; }
  .course-main { padding: 38px 14px 60px; }
  .course-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; }
  .course-intro h1 { font-size: clamp(43px, 13vw, 62px); }
  .lesson-stage { padding: 14px; }
  .lesson-heading { gap: 12px; }
  .lesson-heading h2 { font-size: 28px; }
  .lesson-duration { display: none; }
  .player-brand-watermark { top: 7px; right: 7px; gap: 5px; border-radius: 6px; padding: 4px 6px; }
  .player-brand-watermark img { width: 16px; height: 16px; }
  .player-brand-watermark strong { font-size: 7px; }
  .player-brand-watermark small { font-size: 5px; }
  .student-watermark { max-width: 80%; border-radius: 5px; padding: 3px 5px; font-size: 6px; opacity: .64; }
  .lesson-footer { grid-template-columns: 1fr; gap: 18px; }
  .complete-button { justify-self: stretch; justify-content: center; }
  .topic-lessons { margin-top: 66px; }
  .topic-heading { grid-template-columns: 1fr; gap: 12px; }
  .lesson-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .lesson-row > small { display: none; }
  .support-strip { grid-template-columns: 1fr; gap: 10px; margin-top: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .student-watermark, .progress-track span { transition: none; }
}

@media print {
  .student-login, .course-app { display: none !important; }
  .print-block { min-height: 100vh; display: grid; place-items: center; color: #111; padding: 40px; font: 700 18px system-ui; text-align: center; }
}