.course-hero { background: radial-gradient(circle at 82% 20%, rgba(41,128,185,.22), transparent 35%), var(--bg-primary); }
.course-hero__grid, .course-sales-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.course-hero h1 { max-width:760px; margin-bottom:1.5rem; }
.course-hero__lead { font-size:1.2rem; max-width:650px; }
.course-hero__meta { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:2rem 0; color:var(--gold-mid); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; }
.course-cover { background:var(--orange); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-lg); transform:rotate(2deg); }
.course-cover img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.course-cover__fallback { aspect-ratio:4/5; padding:3rem; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; background:linear-gradient(145deg,var(--orange),var(--blue)); }
.course-cover__fallback span { font-size:1.5rem; } .course-cover__fallback strong { font:700 clamp(2.5rem,6vw,5rem)/.95 var(--font-heading); }
.course-benefits { display:grid; gap:1.25rem; margin-top:2rem; }.course-benefits div { border-top:1px solid var(--border-light); padding-top:1rem; display:grid; gap:.25rem; }.course-benefits strong { color:var(--text-white); }.course-benefits span { color:var(--text-muted); }
.course-price-card, .auth-card, .dashboard-course, .quiz-result { border:1px solid var(--border-light); background:var(--bg-card); padding:clamp(1.5rem,4vw,2.75rem); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }.course-price { font:700 clamp(2.8rem,5vw,4.5rem)/1 var(--font-heading); color:var(--text-white); margin:1rem 0; }.course-price-card small { display:block; margin-top:1rem; color:var(--text-subtle); }.btn--block { width:100%; justify-content:center; }
.course-modules { display:grid; gap:.75rem; }.course-module { border:1px solid var(--border-light); background:var(--bg-card); border-radius:var(--radius-sm); }.course-module summary { cursor:pointer; list-style:none; display:grid; grid-template-columns:3rem 1fr auto; gap:1rem; align-items:center; padding:1.25rem 1.5rem; color:var(--text-white); font-weight:600; }.course-module summary::-webkit-details-marker { display:none; }.course-module__number { color:var(--orange-mid); font-family:var(--font-heading); font-size:1.5rem; }.course-module summary em { color:var(--text-subtle); font-style:normal; font-size:.8rem; font-weight:400; }.course-module ol { border-top:1px solid var(--border-subtle); padding:1rem 1.5rem 1rem 5.5rem; display:grid; gap:.65rem; list-style:decimal; }.course-module li { color:var(--text-muted); padding-left:.5rem; }.course-module li span { color:var(--gold-mid); margin-right:.5rem; }
.auth-section { min-height:70vh; display:grid; place-items:center; background:radial-gradient(circle at 50% 0,rgba(232,98,46,.12),transparent 45%); }.auth-card { width:min(100%,520px); }.auth-card h1 { margin-bottom:.75rem; }.auth-card form { display:grid; gap:1rem; margin-top:1.75rem; }.auth-card label { display:grid; gap:.4rem; color:var(--text-muted); font-size:.85rem; }.auth-card input { width:100%; padding:.8rem 1rem; color:var(--text-white); background:var(--bg-secondary); border:1px solid var(--border-light); border-radius:var(--radius-sm); }.form-alert { background:rgba(232,98,46,.12); border:1px solid var(--border-orange); color:var(--orange-light); padding:.8rem 1rem; margin-top:1rem; border-radius:var(--radius-sm); }.auth-switch { margin-top:1.5rem; text-align:center; font-size:.9rem; }.checkout-summary { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; margin-top:1.5rem; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }.checkout-summary span { color:var(--gold-mid); font-weight:600; }
.agreement-box { max-height:320px; overflow-y:auto; white-space:pre-wrap; background:var(--bg-secondary); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:1.25rem; margin-top:1rem; font-size:.9rem; line-height:1.6; color:var(--text-muted); }
.agreement-consent { display:flex !important; flex-direction:row !important; align-items:flex-start; gap:.6rem; font-size:.85rem; }
.agreement-consent input { width:auto !important; margin-top:.2rem; }
.dashboard-hero { padding-bottom:3rem; }.dashboard-top { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }.dashboard-courses { display:grid; gap:1.5rem; max-width:900px; }.dashboard-course__top { display:flex; justify-content:space-between; gap:1rem; }.dashboard-course__top h3 { margin-top:.25rem; }.dashboard-course__top strong { color:var(--gold-mid); font:700 2rem var(--font-heading); }.course-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--orange-mid); }.progress-bar { height:7px; background:var(--bg-tertiary); border-radius:99px; overflow:hidden; margin:1.25rem 0 .75rem; }.progress-bar span { display:block; height:100%; background:var(--brand-gradient); border-radius:inherit; }.dashboard-course__stats { display:flex; justify-content:space-between; gap:1rem; color:var(--text-subtle); font-size:.85rem; }.dashboard-course__actions { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; }.completion-label { color:var(--gold-mid); font-size:.85rem; }.empty-state { max-width:650px; border-top:1px solid var(--border-light); padding-top:2rem; }
.learning-shell { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:calc(100vh - 80px); }.learning-sidebar { background:var(--bg-primary); border-right:1px solid var(--border-subtle); padding:1.5rem 1rem; position:sticky; top:0; height:100vh; overflow:auto; }.learning-sidebar__back { display:block; margin-bottom:2rem; color:var(--text-muted); font-size:.85rem; }.learning-progress { padding:1rem; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); margin-bottom:1.5rem; }.learning-progress span { font-size:.75rem; color:var(--text-subtle); }.learning-progress strong { float:right; color:var(--gold-mid); }.sidebar-module { margin:1.25rem .75rem .4rem; color:var(--orange-mid); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }.sidebar-module span { display:block; color:var(--text-subtle); margin-bottom:.2rem; }.sidebar-lesson { display:flex; gap:.65rem; padding:.55rem .75rem; color:var(--text-muted); font-size:.8rem; line-height:1.35; border-left:2px solid transparent; }.sidebar-lesson small { color:var(--text-subtle); }.sidebar-lesson:hover, .sidebar-lesson.is-active { color:var(--text-white); background:var(--bg-card); border-left-color:var(--orange); }.sidebar-lesson.is-complete small { color:var(--gold-mid); }.sidebar-quiz { display:block; margin:1.5rem .75rem; color:var(--gold-mid); font-weight:600; }.lesson-main { max-width:900px; width:100%; padding:clamp(2rem,6vw,6rem) clamp(1.25rem,6vw,6rem); }.lesson-heading { border-bottom:1px solid var(--border-light); padding-bottom:2rem; margin-bottom:2rem; }.lesson-heading h1 { max-width:760px; margin-bottom:.5rem; }.lesson-heading p { color:var(--text-subtle); }.lesson-content { color:var(--text-muted); font-size:1.05rem; }.lesson-content p { margin-bottom:1rem; }.lesson-complete { display:flex; align-items:center; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border-light); color:var(--text-subtle); font-size:.85rem; }.lesson-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; }.lesson-nav a { color:var(--gold-mid); font-weight:600; }
.quiz-header { padding-bottom:3rem; }.quiz-form { display:grid; gap:1.5rem; }.quiz-question { border:1px solid var(--border-light); padding:1.5rem; border-radius:var(--radius-sm); display:grid; gap:.75rem; }.quiz-question legend { color:var(--text-white); font-weight:600; line-height:1.5; padding:0; }.quiz-question legend span { color:var(--orange-mid); margin-right:.75rem; }.quiz-question label { display:flex; align-items:flex-start; gap:.65rem; color:var(--text-muted); padding:.6rem; border-radius:var(--radius-sm); }.quiz-question label:hover { background:var(--bg-card); }.quiz-question input { margin-top:.3rem; accent-color:var(--orange); }.quiz-question b { color:var(--gold-mid); }.quiz-result { text-align:center; }.quiz-result h2 { font-size:5rem; color:var(--gold-mid); margin:1rem 0; }
.admin-grid { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:2rem; align-items:start; }.admin-grid h2 { margin-bottom:1rem; }.admin-grid form { display:grid; gap:1rem; margin-top:1.5rem; }.admin-grid label { display:grid; gap:.4rem; color:var(--text-muted); font-size:.85rem; }.admin-grid input[type=number] { padding:.7rem; color:var(--text-white); background:var(--bg-secondary); border:1px solid var(--border-light); border-radius:var(--radius-sm); }.admin-check { display:flex !important; grid-template-columns:auto 1fr; align-items:center; }.admin-note { color:var(--text-subtle); font-size:.8rem; margin-top:1.25rem; }.admin-table { border:1px solid var(--border-light); border-radius:var(--radius-sm); overflow:auto; }.admin-row { display:grid; grid-template-columns:1.3fr 1fr .7fr 1fr; gap:1rem; padding:.9rem 1rem; border-bottom:1px solid var(--border-subtle); color:var(--text-muted); font-size:.8rem; min-width:640px; }.admin-row:last-child { border-bottom:0; }.admin-head { color:var(--gold-mid); text-transform:uppercase; letter-spacing:.08em; font-size:.65rem; }.admin-row small { display:block; color:var(--text-subtle); }.admin-subhead { margin-top:2.5rem; }
@media (max-width:760px) { .course-hero__grid, .course-sales-grid { grid-template-columns:1fr; }.course-cover { max-width:420px; margin:auto; }.course-module summary { grid-template-columns:2rem 1fr; padding:1rem; }.course-module summary em { grid-column:2; }.course-module ol { padding-left:2.5rem; }.dashboard-top, .dashboard-course__stats, .dashboard-course__actions { align-items:flex-start; flex-direction:column; }.learning-shell { display:block; }.learning-sidebar { position:static; height:auto; max-height:55vh; }.lesson-main { padding-top:2.5rem; }.lesson-complete { align-items:flex-start; flex-direction:column; } }
@media (max-width:900px) { .admin-grid { grid-template-columns:1fr; } }
