[hidden] { display: none !important; }
.student-course-workspace { padding: 32px; margin: 24px 0; border-radius: 24px; background: white; }
.student-course-workspace > button { margin: 8px; }
.student-course-workspace details { display: block; padding: 16px; }
.student-course-workspace details p { white-space: pre-wrap; }
.portal-page { min-height: 100vh; background: radial-gradient(circle at 82% 12%, rgb(201 162 75 / 16%), transparent 28%), var(--cream-100); }
.portal-header { display: flex; align-items: center; justify-content: space-between; width: min(1240px, calc(100% - 48px)); margin: 24px auto 0; }
.portal-back { padding: 10px 16px; border: 1px solid rgb(42 10 34 / 18%); border-radius: 999px; font-size: 13px; font-weight: 750; text-decoration: none; }
.portal-header-actions { display: flex; align-items: center; gap: 10px; }
.portal-signout { padding: 10px 16px; border: 0; border-radius: 999px; background: var(--plum-900); color: white; font-size: 12px; font-weight: 800; }
.portal-shell { width: min(1180px, calc(100% - 48px)); margin: 90px auto 0; }
.portal-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: end; }
.portal-intro h1 { max-width: 780px; font-size: clamp(52px, 7vw, 88px); }
.portal-intro > div:first-child > p:last-child { max-width: 680px; margin: 26px 0 0; color: var(--muted); font-size: 18px; }
.portal-assurance { display: grid; gap: 12px; padding: 24px 0 8px; border-top: 1px solid rgb(42 10 34 / 16%); }
.portal-assurance span { color: var(--muted); font-size: 13px; font-weight: 700; }
.portal-assurance span::before { content: "✓"; margin-right: 10px; color: var(--plum-600); }
.portal-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; margin-top: 72px; }
.portal-login, .portal-preview { min-height: 480px; border-radius: 24px; box-shadow: var(--shadow); }
.portal-login { padding: clamp(34px, 5vw, 58px); background: var(--white); border: 1px solid rgb(42 10 34 / 9%); }
.portal-step { margin: 0 0 28px; color: var(--plum-600); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.portal-login h2 { font-size: clamp(35px, 4vw, 52px); }
.portal-login > p:not(.portal-step, .portal-status) { margin: 22px 0 28px; color: var(--muted); }
.portal-login button { width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--plum-900); color: white; font-weight: 800; }
.portal-login button:disabled { opacity: .48; cursor: not-allowed; }
.portal-field { display: grid; gap: 7px; margin: 26px 0 16px; color: var(--muted); font-size: 12px; font-weight: 800; }
.portal-field select, .portal-field input { width: 100%; padding: 13px; border: 1px solid rgb(42 10 34 / 20%); border-radius: 12px; background: white; color: var(--plum-900); font: inherit; box-sizing: border-box; }
.portal-email-field { margin-top: 14px; }
.portal-login .portal-email-action { background: white; color: var(--plum-900); border: 1px solid rgb(42 10 34 / 24%); }
.portal-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.portal-or::before, .portal-or::after { content: ""; flex: 1; height: 1px; background: rgb(42 10 34 / 13%); }
.portal-email-note { margin: 12px 0 0 !important; color: var(--muted); font-size: 12px; }
.guardian-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.guardian-check input { width: 18px; height: 18px; margin: 1px 0 0; }
.portal-status { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--gold-500); background: var(--cream-100); color: var(--muted); font-size: 13px; }
.portal-help { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgb(42 10 34 / 12%); font-size: 13px; }
.portal-help a { color: var(--plum-600); font-weight: 800; }
.portal-preview { padding: clamp(34px, 5vw, 58px); background: var(--plum-900); color: var(--cream-100); }
.preview-top, .preview-course { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.preview-top { margin-bottom: 48px; font: 500 27px/1 var(--serif); }
.preview-badge { padding: 7px 10px; border: 1px solid rgb(226 197 131 / 34%); border-radius: 999px; color: var(--gold-300); font: 750 9px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.preview-course { padding: 22px 0; border-top: 1px solid rgb(251 246 237 / 14%); }
.preview-course > div { flex: 1; }
.preview-course strong, .preview-course small { display: block; }
.preview-course strong { font: 500 22px/1.2 var(--serif); }
.preview-course small { margin-top: 6px; color: rgb(251 246 237 / 58%); }
.preview-number { color: var(--gold-300); font-size: 10px; font-weight: 800; }
.preview-divider { height: 1px; margin: 26px 0; background: rgb(251 246 237 / 14%); }
.portal-preview > p { color: rgb(251 246 237 / 64%); font-size: 13px; }
.portal-footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 48px)); margin: 70px auto 28px; padding-top: 22px; border-top: 1px solid rgb(42 10 34 / 13%); color: var(--muted); font-size: 12px; }
.portal-footer nav { display: flex; gap: 20px; }
.learner-dashboard { margin-top: 54px; }
.customer-dashboard { margin-top: 54px; }
.customer-dashboard-header { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: end; }
.customer-dashboard-header h1 { font-size: clamp(48px, 7vw, 82px); }
.customer-dashboard-header p:last-child { max-width: 680px; margin-top: 18px; color: var(--muted); font-size: 17px; }
.customer-portal-nav { display: flex; gap: 8px; margin: 38px 0 20px; padding: 7px; overflow-x: auto; border: 1px solid rgb(42 10 34 / 10%); border-radius: 999px; background: white; }
.customer-portal-nav button { min-width: 120px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 800; }
.customer-portal-nav button.active { background: var(--plum-900); color: white; }
.customer-dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
.customer-program-card, .access-review-card { border: 1px solid rgb(42 10 34 / 10%); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.customer-program-card { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 470px; overflow: hidden; }
.customer-program-art { display: grid; place-items: center; min-height: 300px; background: radial-gradient(circle at 70% 25%, rgb(226 197 131 / 45%), transparent 28%), linear-gradient(145deg, #2a0a22, #71305e); color: var(--gold-300); }
.customer-program-art span { display: grid; place-items: center; width: 120px; height: 120px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; font: 500 42px/1 var(--serif); }
.customer-program-card > div:last-child { padding: clamp(30px, 5vw, 58px); }
.customer-program-card h2, .access-review-card h2 { font-size: clamp(30px, 4vw, 45px); }
.customer-program-card h2 + p { margin: 18px 0 34px; color: var(--muted); line-height: 1.65; }
.customer-progress { display: grid; grid-template-columns: 1fr auto; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 800; }
.customer-progress div { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: rgb(42 10 34 / 10%); }
.customer-progress i { display: block; width: 0; height: 100%; background: var(--gold-500); }
.customer-program-card button { width: 100%; min-height: 48px; margin-top: 30px; border: 0; border-radius: 999px; background: var(--plum-900); color: white; font-weight: 850; }
.customer-program-card button:disabled { opacity: .5; }
.access-review-card { padding: clamp(28px, 4vw, 42px); }
.access-review-list { display: grid; gap: 0; margin: 28px 0; list-style: none; }
.access-review-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid rgb(42 10 34 / 9%); }
.access-review-list li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eee6dc; color: var(--muted); font-size: 10px; font-weight: 850; }
.access-review-list li.verified > span { background: #dcecdf; color: #215b2c; }
.access-review-list li.pending > span { background: #f3e8c8; color: #755b14; }
.access-review-list strong, .access-review-list small { display: block; }
.access-review-list strong { font-size: 12px; }
.access-review-list small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.customer-support { padding: 20px; border-radius: 16px; background: var(--cream-100); }
.customer-support p { margin: 8px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.customer-support a { display: block; margin-top: 8px; color: var(--plum-600); font-size: 12px; font-weight: 850; }
.dashboard-welcome { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: end; }
.dashboard-welcome h1 { font-size: clamp(48px, 7vw, 82px); }
.dashboard-welcome p:last-child { max-width: 680px; margin-top: 18px; color: var(--muted); font-size: 17px; }
.dashboard-lock { display: grid; gap: 7px; padding: 22px; border: 1px solid rgb(42 10 34 / 12%); border-radius: 18px; background: rgb(255 255 255 / 70%); }
.dashboard-lock strong { color: var(--plum-600); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-lock span { color: var(--muted); font-size: 12px; }
.program-shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 44px 0 26px; }
.program-tile { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; min-height: 142px; padding: 24px; text-align: left; border: 1px solid rgb(42 10 34 / 12%); border-radius: 20px; background: white; color: var(--plum-900); box-shadow: 0 12px 34px rgb(42 10 34 / 6%); }
.program-tile.active { border-color: var(--gold-500); box-shadow: 0 16px 42px rgb(116 35 95 / 13%); }
.program-index { grid-row: 1 / span 3; color: var(--gold-500); font-size: 11px; font-weight: 850; }
.program-tile strong { font: 500 24px/1.15 var(--serif); }
.program-tile small { color: var(--muted); }
.program-open { align-self: end; color: var(--plum-600); font-size: 12px; font-weight: 800; }
.learning-workspace { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.6fr); min-height: 720px; overflow: hidden; border: 1px solid rgb(42 10 34 / 11%); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.learning-outline { max-height: 780px; overflow: auto; padding: 24px 16px 30px; border-right: 1px solid rgb(42 10 34 / 10%); background: #f8f1e8; }
.outline-progress { padding: 8px 8px 24px; color: var(--muted); font-size: 11px; font-weight: 800; }
.outline-progress > div { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: rgb(42 10 34 / 11%); }
.outline-progress i { display: block; height: 100%; background: var(--gold-500); }
.learner-module { padding: 18px 0; border-top: 1px solid rgb(42 10 34 / 10%); }
.learner-module-heading { display: grid; grid-template-columns: 27px 1fr; gap: 8px; margin: 0 8px 12px; }
.learner-module-heading strong { font-size: 12px; line-height: 1.35; }
.module-number { color: var(--gold-500); font-size: 9px; font-weight: 850; }
.learner-lesson { width: 100%; padding: 10px 12px 10px 43px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; font-size: 12px; line-height: 1.35; }
.learner-lesson:hover, .learner-lesson.active { background: white; color: var(--plum-900); }
.learner-lesson.active { font-weight: 800; box-shadow: 0 5px 16px rgb(42 10 34 / 6%); }
.lesson-workspace { padding: clamp(30px, 5vw, 64px); }
.lesson-kicker { display: flex; justify-content: space-between; gap: 20px; color: var(--plum-600); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.lesson-workspace h2 { max-width: 760px; margin-top: 22px; font-size: clamp(36px, 5vw, 58px); }
.lesson-summary { max-width: 760px; margin: 18px 0 30px; color: var(--muted); line-height: 1.7; }
.lesson-video-lock { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 300px; padding: 30px; border-radius: 20px; background: linear-gradient(135deg, #2a0a22, #562044); color: var(--cream-100); text-align: left; }
.lesson-video-lock video { width: 100%; max-height: 520px; border-radius: 12px; background: #11040e; }
.lesson-video-lock.video-ready { display: block; padding: 14px; }
.lesson-video-lock.video-ready > :not(video) { display: none; }
.video-play-symbol { display: grid; place-items: center; width: 58px; height: 58px; padding-left: 4px; border: 1px solid rgb(255 255 255 / 32%); border-radius: 50%; color: var(--gold-300); }
.lesson-video-lock strong, .lesson-video-lock span { display: block; }
.student-video { width: 100%; max-height: 70vh; background: #180f15; border-radius: 12px; }
.lesson-video-lock strong { font: 500 24px/1.2 var(--serif); }
.lesson-video-lock div span { max-width: 430px; margin-top: 7px; color: rgb(251 246 237 / 65%); font-size: 12px; }
.lesson-video-lock button { width: auto; margin-top: 18px; padding: 10px 16px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; background: var(--gold-500); color: var(--plum-900); font-weight: 850; }
.lesson-video-lock button:disabled { opacity: .55; }
.lesson-notes, .lesson-resources { margin-top: 24px; padding: 22px; border: 1px solid rgb(42 10 34 / 10%); border-radius: 16px; }
.lesson-notes h3, .lesson-resources h3 { font-size: 17px; }
.lesson-notes p, .lesson-resources p { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.lesson-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.lesson-actions button { min-height: 44px; border: 1px solid rgb(42 10 34 / 12%); border-radius: 999px; background: white; color: var(--muted); font-weight: 750; }
.lesson-actions button:disabled { opacity: .52; }
@media (max-width: 800px) { .portal-intro, .portal-grid { grid-template-columns: 1fr; } .portal-shell { margin-top: 64px; } .portal-intro { gap: 22px; } }
@media (max-width: 900px) { .dashboard-welcome, .customer-dashboard-header, .customer-dashboard-grid, .learning-workspace { grid-template-columns: 1fr; } .learning-outline { max-height: 420px; border-right: 0; border-bottom: 1px solid rgb(42 10 34 / 10%); } }
@media (max-width: 700px) { .program-shelf { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .customer-program-card { grid-template-columns: 1fr; } .customer-program-art { min-height: 190px; } }
@media (max-width: 520px) { .portal-header, .portal-shell, .portal-footer { width: min(100% - 28px, 1180px); } .portal-header .brand small { display: none; } .portal-header-actions { gap: 6px; } .portal-signout, .portal-back { padding: 9px 11px; } .portal-grid { margin-top: 48px; } .portal-login, .portal-preview { min-height: 0; border-radius: 18px; } .portal-help, .portal-footer { flex-direction: column; } .learner-dashboard, .customer-dashboard { margin-top: 30px; } .lesson-workspace { padding: 28px 20px; } .lesson-video-lock { min-height: 230px; flex-direction: column; text-align: center; } .lesson-actions { grid-template-columns: 1fr; } }