/* SkillifyEdu — main stylesheet. Brand palette sampled from skillify_logo.png */

/* ---------- Brand tokens (sampled from skillify_logo.png) ---------- */
:root {
  --navy: #1E3A5F;
  --navy-dark: #152B47;
  --slate: #5A7391;
  --slate-light: #8FA3BC;
  --slate-pale: #E6ECF3;
  --lime: #7DC242;
  --lime-dark: #6AAB35;
  --lime-pale: #EEF7E4;
  --bg: #F5F7FA;
  --white: #FFFFFF;
  --text: #1A2433;
  --muted: #6B7A8F;
  --border: #DCE3EC;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(30, 58, 95, .06);
  --shadow: 0 10px 30px rgba(30, 58, 95, .10);
  --shadow-lg: 0 20px 50px rgba(30, 58, 95, .16);
  --container: 1200px;
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.2; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--alt { background: var(--bg); }
.section__head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section__head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 14px; }
.section__head p { color: var(--muted); font-size: 1.05rem; }
.eyebrow { display: inline-block; font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-dark); background: var(--lime-pale); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; padding: 12px 26px; border-radius: 10px; transition: background .2s, color .2s, box-shadow .2s, transform .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--lime); color: var(--white); box-shadow: 0 8px 20px rgba(125, 194, 66, .35); }
.btn--primary:hover { background: var(--lime-dark); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-dark); }
.btn--outline { border: 2px solid var(--navy); color: var(--navy); padding: 10px 24px; }
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn--ghost { color: var(--navy); }
.btn--ghost:hover { color: var(--lime-dark); transform: none; }
.btn--sm { padding: 8px 16px; font-size: .85rem; }
.btn--lg { padding: 15px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- Navbar ---------- */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.navbar.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.navbar__logo img { height: 38px; width: auto; }
.navbar__menu { display: flex; align-items: center; gap: 32px; }
.navbar__links { display: flex; gap: 26px; }
.navbar__links a { font-weight: 500; font-size: .95rem; color: var(--navy); position: relative; padding: 6px 0; }
.navbar__links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--lime); transition: width .25s; }
.navbar__links a:hover::after, .navbar__links a.is-active::after { width: 100%; }
.navbar__auth { display: flex; align-items: center; gap: 10px; }
.navbar__user { font-size: .9rem; color: var(--muted); }
.navbar__user strong { color: var(--navy); }
.navbar__toggle { display: none; width: 44px; height: 44px; border-radius: 10px; color: var(--navy); align-items: center; justify-content: center; }
.navbar__toggle .icon { width: 26px; height: 26px; }

/* ---------- Messages ---------- */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 80px 0 110px; background: radial-gradient(circle at 85% 20%, rgba(125, 194, 66, .14), transparent 40%), radial-gradient(circle at 10% 90%, rgba(90, 115, 145, .14), transparent 45%), linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; margin-bottom: 22px; letter-spacing: -.02em; }
.hero h1 span { color: var(--lime); }
.hero__lead { font-size: 1.12rem; color: var(--muted); max-width: 540px; margin-bottom: 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 26px; }
.hero__trust li { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 500; color: var(--navy); }
.hero__trust .icon { color: var(--lime); }

.hero__visual { position: relative; }
.mock { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; position: relative; z-index: 1; }
.mock__video { aspect-ratio: 16 / 9; border-radius: var(--radius); background: linear-gradient(135deg, var(--navy) 0%, var(--slate) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mock__video::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(125, 194, 66, .25); right: -60px; top: -80px; }
.mock__video::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .08); left: -50px; bottom: -70px; }
.mock__play { width: 70px; height: 70px; border-radius: 50%; background: var(--lime); color: var(--white); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 0 0 12px rgba(125, 194, 66, .25); }
.mock__play svg { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 4px; }
.mock__live { position: absolute; top: 14px; left: 14px; z-index: 1; background: #D64545; color: var(--white); font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.mock__live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--white); animation: pulse 1.4s infinite; }
.mock__meta { padding: 18px 4px 4px; }
.mock__meta h4 { font-size: 1.05rem; margin-bottom: 4px; }
.mock__meta p { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.progress { height: 8px; background: var(--slate-pale); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, var(--lime), var(--lime-dark)); border-radius: inherit; }
.mock__progress-label { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: 8px; }

.float-card { position: absolute; z-index: 2; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; display: flex; align-items: center; gap: 12px; animation: float 5s ease-in-out infinite; }
.float-card strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: .95rem; line-height: 1.2; }
.float-card small { color: var(--muted); font-size: .75rem; }
.float-card__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.float-card--a { top: -24px; left: -30px; }
.float-card--a .float-card__icon { background: var(--lime-pale); color: var(--lime-dark); }
.float-card--b { bottom: 40px; right: -34px; animation-delay: 1.5s; }
.float-card--b .float-card__icon { background: #FFF6E0; color: #E0A526; }
.float-card--c { bottom: -28px; left: 30px; animation-delay: 3s; }
.float-card--c .float-card__icon { background: var(--slate-pale); color: var(--navy); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Stats ---------- */
.stats { margin-top: -56px; position: relative; z-index: 5; }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.stat { padding: 34px 20px; text-align: center; color: var(--white); position: relative; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 28%; height: 44%; width: 1px; background: rgba(255, 255, 255, .15); }
.stat__num { font-family: var(--font-head); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.1; }
.stat__num em { font-style: normal; color: var(--lime); }
.stat__label { font-size: .9rem; color: var(--slate-light); margin-top: 6px; }

/* ---------- Categories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; gap: 14px; }
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.cat-card__icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--slate-pale); color: var(--navy); transition: background .25s, color .25s; }
.cat-card__icon .icon { width: 28px; height: 28px; }
.cat-card:hover .cat-card__icon { background: var(--lime); color: var(--white); }
.cat-card h3 { font-size: 1.15rem; }
.cat-card p { font-size: .9rem; color: var(--muted); flex: 1; }
.cat-card__count { font-size: .85rem; font-weight: 600; color: var(--lime-dark); display: flex; align-items: center; gap: 6px; }
.cat-card--cta { background: linear-gradient(135deg, var(--navy), var(--slate)); border: 0; color: var(--white); justify-content: center; }
.cat-card--cta h3 { color: var(--white); }
.cat-card--cta p { color: var(--slate-pale); }
.cat-card--cta .cat-card__icon { background: rgba(255, 255, 255, .12); color: var(--lime); }
.cat-card--cta .cat-card__count { color: var(--lime); }

/* ---------- Courses ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.filter-btn { padding: 9px 20px; border-radius: 999px; font-weight: 500; font-size: .9rem; color: var(--navy); background: var(--white); border: 1px solid var(--border); transition: all .2s; }
.filter-btn:hover { border-color: var(--navy); }
.filter-btn.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.course-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.course-card[hidden] { display: none; }
.course-card__thumb { aspect-ratio: 16 / 9; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; color: rgba(255, 255, 255, .9); background: linear-gradient(135deg, var(--navy), var(--slate)); }
.course-card__thumb::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .08); right: -50px; bottom: -90px; }
.course-card__thumb .icon { width: 64px; height: 64px; stroke-width: 1.4; position: relative; z-index: 1; }
.course-card[data-category="finance"] .course-card__thumb { background: linear-gradient(135deg, #2C5470, #5A8A6E); }
.course-card[data-category="healthcare"] .course-card__thumb { background: linear-gradient(135deg, #3A6A86, #7DC242); }
.course-card[data-category="human-resources"] .course-card__thumb { background: linear-gradient(135deg, var(--slate), #8FA3BC); }
.course-card[data-category="self-development"] .course-card__thumb { background: linear-gradient(135deg, #6AAB35, #3E7B5A); }
.course-card[data-category="business"] .course-card__thumb { background: linear-gradient(135deg, var(--navy-dark), #3A5A80); }
.course-card[data-category="management"] .course-card__thumb { background: linear-gradient(135deg, #24496E, #5A7391); }
.badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 255, 255, .95); color: var(--navy); font-size: .75rem; font-weight: 600; padding: 4px 11px; border-radius: 6px; }
.badge--level { left: auto; right: 14px; background: var(--lime); color: var(--white); }
.course-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.course-card__title { font-size: 1.08rem; margin-bottom: 6px; }
.course-card__title a:hover { color: var(--lime-dark); }
.course-card__instructor { font-size: .87rem; color: var(--muted); margin-bottom: 12px; }
.course-card__rating { display: flex; align-items: center; gap: 6px; font-size: .87rem; margin-bottom: 14px; }
.course-card__rating strong { color: #C98A0B; }
.stars { color: #F2B01E; letter-spacing: 1px; }
.course-card__rating span:last-child { color: var(--muted); }
.course-card__meta { display: flex; gap: 18px; font-size: .84rem; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--border); margin-top: auto; }
.course-card__meta span { display: flex; align-items: center; gap: 6px; }
.course-card__meta .icon { width: 16px; height: 16px; color: var(--slate); }
.course-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.price { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--navy); }
.price del { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
.course-card__lock { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.course-card__lock .icon { width: 13px; height: 13px; }
.center-cta { text-align: center; margin-top: 48px; }

/* ---------- Live classes ---------- */
.live-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; align-items: start; }
.live-list { display: grid; gap: 18px; }
.live-card { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px 22px; transition: box-shadow .25s, border-color .25s; }
.live-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.live-date { width: 74px; text-align: center; background: var(--slate-pale); border-radius: 12px; padding: 10px 6px; }
.live-date strong { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--navy); line-height: 1; }
.live-date span { font-size: .78rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .05em; }
.live-card__tag { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--lime-dark); background: var(--lime-pale); padding: 3px 10px; border-radius: 6px; margin-bottom: 6px; }
.live-card__tag--doubt { color: var(--navy); background: var(--slate-pale); }
.live-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.live-card__info { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--muted); }
.live-card__info span { display: flex; align-items: center; gap: 6px; }
.live-card__info .icon { width: 15px; height: 15px; color: var(--slate); }
.live-card__actions { display: flex; flex-direction: column; gap: 8px; }

.doubt-panel { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); border-radius: var(--radius-lg); padding: 34px 30px; position: sticky; top: 100px; overflow: hidden; }
.doubt-panel::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(125, 194, 66, .18); top: -90px; right: -80px; }
.doubt-panel__icon { width: 58px; height: 58px; border-radius: 14px; background: var(--lime); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; }
.doubt-panel__icon .icon { width: 28px; height: 28px; }
.doubt-panel h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 12px; }
.doubt-panel p { color: var(--slate-light); font-size: .95rem; margin-bottom: 22px; }
.doubt-panel ul { display: grid; gap: 12px; margin-bottom: 28px; }
.doubt-panel li { display: flex; gap: 10px; font-size: .92rem; }
.doubt-panel li .icon { color: var(--lime); width: 18px; height: 18px; margin-top: 3px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.about-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-tile { border-radius: var(--radius-lg); padding: 28px 24px; color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; }
.about-tile strong { font-family: var(--font-head); font-size: 2rem; line-height: 1.1; }
.about-tile span { font-size: .9rem; opacity: .85; }
.about-tile--1 { background: var(--navy); }
.about-tile--2 { background: var(--lime); }
.about-tile--3 { background: var(--slate); }
.about-tile--2, .about-tile--4 { position: relative; top: 32px; }
.about-visual { padding-bottom: 32px; }
.about-tile--4 { background: linear-gradient(135deg, var(--navy-dark), var(--slate)); }
.about-content h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); margin-bottom: 18px; }
.about-content > p { color: var(--muted); margin-bottom: 16px; }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 34px; }
.about-features li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--navy); font-size: .95rem; }
.about-features .tick { width: 26px; height: 26px; border-radius: 8px; background: var(--lime-pale); color: var(--lime-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.about-features .tick .icon { width: 15px; height: 15px; stroke-width: 3; }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; position: relative; counter-reset: step; }
.process::before { content: ''; position: absolute; top: 36px; left: 7%; right: 7%; height: 2px; background: repeating-linear-gradient(90deg, var(--slate-light) 0 8px, transparent 8px 16px); }
.step { text-align: center; position: relative; }
.step__icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--navy); position: relative; transition: all .25s; box-shadow: var(--shadow-sm); }
.step__icon .icon { width: 28px; height: 28px; }
.step__icon::after { counter-increment: step; content: counter(step); position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--white); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); }
.step:hover .step__icon { background: var(--navy); color: var(--white); border-color: var(--navy); transform: scale(1.06); }
.step:last-child .step__icon { background: var(--lime); border-color: var(--lime); color: var(--white); }
.step:last-child .step__icon::after { background: var(--navy); }
.step h4 { font-size: .98rem; margin-bottom: 6px; }
.step p { font-size: .82rem; color: var(--muted); }

/* ---------- Career ---------- */
.career { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.career::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 194, 66, .16), transparent 70%); top: -200px; right: -140px; }
.career .section__head h2 { color: var(--white); }
.career .section__head p { color: var(--slate-light); }
.career .eyebrow { background: rgba(125, 194, 66, .15); color: var(--lime); }
.career-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 64px; position: relative; }
.career-stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 26px 22px; }
.career-stat strong { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--lime); line-height: 1.1; margin-bottom: 6px; }
.career-stat span { color: var(--slate-pale); font-size: .92rem; }
.career-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; position: relative; }
.support-list { display: grid; gap: 16px; }
.support-item { display: flex; gap: 16px; background: rgba(255, 255, 255, .04); border-radius: var(--radius); padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .08); transition: background .25s; }
.support-item:hover { background: rgba(255, 255, 255, .08); }
.support-item__icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(125, 194, 66, .15); color: var(--lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.support-item h4 { color: var(--white); font-size: 1rem; margin-bottom: 2px; }
.support-item p { color: var(--slate-light); font-size: .88rem; }
.timeline h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 26px; }
.timeline ol { list-style: none; position: relative; padding-left: 34px; }
.timeline ol::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--lime), var(--slate)); }
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -32px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid var(--lime); }
.timeline__year { font-family: var(--font-head); font-weight: 700; color: var(--lime); font-size: .9rem; }
.timeline li h4 { color: var(--white); font-size: 1.05rem; margin: 2px 0 4px; }
.timeline li p { color: var(--slate-light); font-size: .88rem; }

/* ---------- Testimonials ---------- */
.testimonial-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 3); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 24px; scrollbar-width: none; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial { scroll-snap-align: start; background: var(--white); border-radius: var(--radius); padding: 30px 28px; border: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
.testimonial::before { content: '\201C'; position: absolute; top: 4px; right: 24px; font-family: Georgia, serif; font-size: 5rem; color: var(--lime-pale); line-height: 1; }
.testimonial .stars { margin-bottom: 14px; }
.testimonial blockquote { color: var(--text); font-size: .96rem; margin-bottom: 24px; flex: 1; position: relative; }
.testimonial__person { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border); }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--slate)); color: var(--white); font-family: var(--font-head); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testimonial__person strong { display: block; color: var(--navy); font-size: .95rem; }
.testimonial__person span { font-size: .82rem; color: var(--muted); }
.slider-nav { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.slider-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--navy); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.slider-nav button:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- CTA band ---------- */
.cta-band { padding: 0 0 96px; background: var(--bg); }
.cta-box { background: linear-gradient(120deg, var(--navy) 0%, var(--slate) 100%); border-radius: var(--radius-lg); padding: 56px 60px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; overflow: hidden; }
.cta-box::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(125, 194, 66, .25); right: -80px; bottom: -160px; }
.cta-box h2 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.cta-box p { color: var(--slate-pale); }
.cta-box .btn { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-dark); color: var(--slate-light); padding: 72px 0 0; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
.footer__logo { display: inline-block; background: var(--white); padding: 10px 16px; border-radius: 12px; margin-bottom: 18px; }
.footer__logo img { height: 30px; width: auto; }
.footer__about p { margin-bottom: 20px; max-width: 320px; }
.footer h4 { color: var(--white); font-size: 1rem; margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer a:hover { color: var(--lime); }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact .icon { width: 17px; height: 17px; color: var(--lime); margin-top: 3px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .07); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.socials a:hover { background: var(--lime); color: var(--white); }
.socials .icon { width: 17px; height: 17px; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__logout { color: var(--slate-light); font-size: inherit; padding: 0; }
.footer__logout:hover { color: var(--lime); }

.back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 12px; background: var(--lime); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; z-index: 90; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ---------- Motion system ---------- */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Scroll reveal (staggered via --d set in JS) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal--left { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--zoom { transform: scale(.94); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300; background: linear-gradient(90deg, var(--lime), var(--slate)); transform-origin: 0 50%; transform: scaleX(0); }

/* Hero entrance */
.hero-in { opacity: 0; transform: translateY(26px); animation: heroIn .9s var(--ease-out) forwards; }
.hero-in:nth-child(1) { animation-delay: .1s; }
.hero-in:nth-child(2) { animation-delay: .22s; }
.hero-in:nth-child(3) { animation-delay: .36s; }
.hero-in:nth-child(4) { animation-delay: .5s; }
.hero-in:nth-child(5) { animation-delay: .64s; }
.hero__visual .mock { opacity: 0; animation: mockIn 1.1s var(--ease-out) .35s forwards; }
.hero__visual .float-card { opacity: 0; animation: popIn .7s var(--ease-spring) forwards, float 5s ease-in-out infinite; }
.float-card--a { animation-delay: .9s, 1.6s !important; }
.float-card--b { animation-delay: 1.1s, 3.1s !important; }
.float-card--c { animation-delay: 1.3s, 4.6s !important; }
.progress span { animation: grow 1.6s var(--ease-out) 1.1s both; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes mockIn { from { opacity: 0; transform: perspective(1000px) rotateY(-12deg) translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes grow { from { width: 0; } }

/* Ambient gradient blobs */
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; animation: drift 18s ease-in-out infinite alternate; }
.hero::before { width: 380px; height: 380px; background: rgba(125, 194, 66, .18); top: -120px; right: 8%; }
.hero::after { width: 320px; height: 320px; background: rgba(90, 115, 145, .16); bottom: -120px; left: -60px; animation-delay: -9s; }
.hero .container { position: relative; z-index: 1; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } 100% { transform: translate(-30px, 10px) scale(.95); } }

/* Play button ripple */
.mock__play::before, .mock__play::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(125, 194, 66, .6); animation: ripple 2.4s ease-out infinite; }
.mock__play::after { animation-delay: 1.2s; }
@keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2); opacity: 0; } }

/* Button shine sweep */
.btn--primary, .btn--navy { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--navy::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease-out); z-index: -1; }
.btn--primary:hover::after, .btn--navy:hover::after { left: 140%; }
.btn .icon { transition: transform .3s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

/* Card micro-interactions */
.cat-card, .course-card, .live-card, .testimonial, .career-stat { transition: transform .6s var(--ease-out) var(--d, 0ms), box-shadow .45s var(--ease-out), border-color .3s, opacity .8s var(--ease-out) var(--d, 0ms); }
.cat-card__icon { transition: background .3s, color .3s, transform .5s var(--ease-spring); }
.cat-card:hover .cat-card__icon { transform: rotate(-8deg) scale(1.1); }
.cat-card__count .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.cat-card:hover .cat-card__count .icon { transform: translateX(5px); }
.course-card__thumb .icon { transition: transform .6s var(--ease-out); }
.course-card:hover .course-card__thumb .icon { transform: scale(1.15) rotate(-4deg); }
.course-card__thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s var(--ease-out); z-index: 1; }
.course-card:hover .course-card__thumb::before { transform: translateX(100%); }
.testimonial:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.career-stat:hover { transform: translateY(-4px); border-color: rgba(125, 194, 66, .4); }
.about-tile { transition: transform .5s var(--ease-out); }
.about-visual:hover .about-tile--1 { transform: translate(-6px, -6px); }
.about-visual:hover .about-tile--2 { transform: translate(6px, -6px); }
.about-visual:hover .about-tile--3 { transform: translate(-6px, 6px); }
.about-visual:hover .about-tile--4 { transform: translate(6px, 6px); }

/* Course filter transition */
.course-card.is-filtering { opacity: 0; transform: scale(.96); }

/* Timeline draws on reveal */
.timeline ol::before { transform-origin: top; transform: scaleY(0); transition: transform 1.6s var(--ease-out) .2s; }
.timeline.is-visible ol::before { transform: scaleY(1); }
.timeline li { opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.timeline.is-visible li { opacity: 1; transform: none; }
.timeline.is-visible li:nth-child(1) { transition-delay: .3s; }
.timeline.is-visible li:nth-child(2) { transition-delay: .55s; }
.timeline.is-visible li:nth-child(3) { transition-delay: .8s; }
.timeline.is-visible li:nth-child(4) { transition-delay: 1.05s; }
.timeline.is-visible li:nth-child(5) { transition-delay: 1.3s; }
.no-js .timeline li { opacity: 1; transform: none; }
.no-js .timeline ol::before { transform: none; }

/* Process connector draws on reveal */
.process::before { transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease-out) .3s; }
.process.is-visible::before { transform: scaleX(1); }
.no-js .process::before { transform: none; }

/* Navbar slide-in */
.navbar { animation: navIn .7s var(--ease-out) both; }
@keyframes navIn { from { transform: translateY(-100%); } }

/* Message toast */
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .navbar__links { gap: 18px; }
  .navbar__menu { gap: 20px; }
  .hero__grid, .about-grid, .career-grid, .live-layout { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; margin: 20px auto 0; width: 100%; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4)::before { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .doubt-panel { position: relative; top: 0; }
  .process { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
  .process::before { display: none; }
  .career-stats { grid-template-columns: repeat(2, 1fr); }
  .testimonial-track { grid-auto-columns: calc((100% - 28px) / 2); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .navbar__toggle { display: inline-flex; }
  .navbar__menu { position: fixed; inset: 76px 0 auto 0; background: var(--white); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 24px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); max-height: calc(100vh - 76px); overflow-y: auto; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .25s; }
  .navbar__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .navbar__links { flex-direction: column; gap: 0; }
  .navbar__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .navbar__links a::after { display: none; }
  .navbar__auth { flex-wrap: wrap; padding-top: 18px; }
  .navbar__auth .btn, .navbar__auth form { flex: 1; }
  .navbar__auth form .btn { width: 100%; }
  .navbar__user { width: 100%; }
}
@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .hero { padding: 56px 0 100px; }
  .float-card--a { left: -6px; }
  .float-card--b { right: -6px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat::before { display: none; }
  .stat:last-child { grid-column: 1 / -1; }
  .live-card { grid-template-columns: auto 1fr; }
  .live-card__actions { grid-column: 1 / -1; flex-direction: row; }
  .live-card__actions .btn { flex: 1; }
  .about-features { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; text-align: left; padding-bottom: 26px; }
  .step:not(:last-child)::after { content: ''; position: absolute; left: 31px; top: 66px; bottom: 2px; width: 2px; background: repeating-linear-gradient(var(--slate-light) 0 6px, transparent 6px 12px); }
  .step__icon { width: 64px; height: 64px; margin: 0; }
  .step h4 { margin-top: 10px; }
  .cta-box { flex-direction: column; text-align: center; padding: 44px 28px; }
  .testimonial-track { grid-auto-columns: 88%; }
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .navbar__logo img { height: 32px; }
  .hero__actions .btn { flex: 1; padding-left: 14px; padding-right: 14px; font-size: .92rem; }
  .float-card { display: none; }
  .cat-grid, .course-grid, .career-stats { grid-template-columns: 1fr; }
  .about-visual { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about-tile { min-height: 130px; padding: 20px 16px; }
  .about-tile strong { font-size: 1.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__contact-col { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .hero-in, .hero__visual .mock, .hero__visual .float-card, .timeline li { opacity: 1 !important; transform: none !important; }
  .timeline ol::before, .process::before { transform: none !important; }
  .scroll-progress { display: none; }
}

/* =====================================================================
   INNER PAGES & COMPONENTS
   ===================================================================== */

.muted { color: var(--muted); }
.muted-light { color: var(--slate-light); }
.link-sm { font-size: .88rem; font-weight: 600; color: var(--lime-dark); }
.link-sm:hover { text-decoration: underline; }
.section--tight { padding: 56px 0 80px; }
.eyebrow--dark { background: rgba(125, 194, 66, .16); color: var(--lime); }
.empty-state { text-align: center; color: var(--muted); padding: 32px 16px; grid-column: 1 / -1; }
.empty-state .icon { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--slate-light); }
.empty-state h3 { margin-bottom: 6px; font-size: 1.15rem; }
.empty-state p { margin-bottom: 18px; }
.empty-state--card { background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius); padding: 56px 24px; }

/* Star rating with partial fill driven by --rating (0–5) */
.rating-stars { display: inline-block; letter-spacing: 1px; line-height: 1; background: linear-gradient(90deg, #F2B01E calc(var(--rating, 5) / 5 * 100%), #D5DCE5 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.testimonial .rating-stars { margin-bottom: 14px; font-size: 1.05rem; }

/* Avatars */
.avatar--sm { width: 32px; height: 32px; font-size: .78rem; }
.avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar--xl { width: 84px; height: 84px; font-size: 1.6rem; box-shadow: 0 0 0 4px rgba(125, 194, 66, .3); }

/* Navbar profile */
.navbar__profile { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--navy); padding: 4px 10px 4px 4px; border-radius: 999px; transition: background .2s; }
.navbar__profile:hover, .navbar__profile.is-active { background: var(--slate-pale); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; padding: 64px 0 72px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 60%, #24496E 100%); color: var(--white); }
.page-hero::before { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 194, 66, .22), transparent 70%); top: -200px; right: -100px; animation: drift 18s ease-in-out infinite alternate; }
.page-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 780px; margin: 10px 0 14px; }
.page-hero p { color: var(--slate-light); font-size: 1.08rem; max-width: 640px; }
.page-hero .eyebrow { background: rgba(125, 194, 66, .16); color: var(--lime); margin: 18px 0 0; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .86rem; color: var(--slate-light); }
.breadcrumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--slate-pale); }
.breadcrumbs a:hover { color: var(--lime); }
.breadcrumbs .icon { width: 15px; height: 15px; }
.breadcrumbs [aria-current] { color: var(--white); font-weight: 500; }
.breadcrumbs--light { color: var(--muted); margin-bottom: 20px; }
.breadcrumbs--light a { color: var(--slate); }
.breadcrumbs--light a:hover { color: var(--lime-dark); }
.breadcrumbs--light [aria-current] { color: var(--navy); }

.search-bar { margin-top: 28px; max-width: 640px; display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 14px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow-lg); }
.search-bar > .icon { color: var(--slate); }
.search-bar input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1rem; color: var(--text); background: transparent; padding: 10px 0; }

/* ---------- Catalog ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--slate-pale); color: var(--navy); font-size: .85rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.chip:hover { background: var(--navy); color: var(--white); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border: 1px solid var(--border); background: var(--white); color: var(--navy); transition: all .2s; }
.pagination a:hover { border-color: var(--navy); }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination .is-disabled { opacity: .4; }
.pagination .icon { width: 16px; height: 16px; }

/* ---------- Course / live detail hero ---------- */
.course-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); padding: 56px 0 64px; }
.course-hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 194, 66, .2), transparent 70%); right: -120px; top: -160px; animation: drift 18s ease-in-out infinite alternate; }
.course-hero .container { position: relative; z-index: 1; }
.course-hero__info, .course-hero .container > h1 { max-width: 760px; }
.course-hero .eyebrow { margin: 18px 0 0; }
.course-hero h1 { color: var(--white); font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 12px 0 14px; }
.course-hero__lead { color: var(--slate-pale); font-size: 1.1rem; margin-bottom: 18px; }
.course-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .92rem; color: var(--slate-pale); }
.course-hero__meta > span { display: inline-flex; align-items: center; gap: 7px; }
.course-hero__meta .icon { width: 17px; height: 17px; color: var(--lime); }
.course-hero__rating strong { color: #F2B01E; }
.course-hero__by { margin-top: 14px; color: var(--slate-light); font-size: .92rem; }
.course-hero__by strong { color: var(--white); }

.course-layout { display: grid; grid-template-columns: 1fr 370px; gap: 36px; align-items: start; }
.course-main { display: grid; gap: 24px; min-width: 0; }
.course-aside { position: sticky; top: 96px; margin-top: -150px; z-index: 5; }
.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.panel h2 { font-size: 1.3rem; margin-bottom: 18px; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.panel__head h2 { margin: 0; }
.panel__sub { font-size: 1.05rem; margin: 24px 0 12px; }
.panel--navy { background: linear-gradient(150deg, var(--navy), var(--navy-dark)); border: 0; color: var(--slate-pale); }
.panel--navy h3 { color: var(--white); margin-bottom: 8px; }
.panel--navy p { margin-bottom: 18px; font-size: .92rem; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.check-grid li { display: flex; gap: 10px; font-size: .95rem; }
.check-grid .icon { width: 18px; height: 18px; color: var(--lime-dark); margin-top: 3px; stroke-width: 2.5; }
.bullet-list { list-style: disc; padding-left: 20px; display: grid; gap: 6px; color: var(--text); }

.curriculum { list-style: none; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.curriculum__item { display: grid; grid-template-columns: 34px 1fr auto 60px; align-items: center; gap: 12px; padding: 14px 18px; font-size: .94rem; transition: background .2s; }
.curriculum__item + .curriculum__item { border-top: 1px solid var(--border); }
.curriculum__item:hover { background: var(--bg); }
.curriculum__num { width: 30px; height: 30px; border-radius: 8px; background: var(--slate-pale); color: var(--navy); font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.curriculum__title { color: var(--navy); font-weight: 500; }
.curriculum__time { color: var(--muted); font-size: .84rem; text-align: right; }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--slate-pale); color: var(--navy); white-space: nowrap; }
.tag .icon { width: 12px; height: 12px; }
.tag--lime { background: var(--lime-pale); color: var(--lime-dark); }
.tag--muted { background: var(--bg); color: var(--muted); }
a.tag:hover { filter: brightness(.95); }

.instructor { display: flex; gap: 20px; align-items: flex-start; }
.instructor h3 { font-size: 1.1rem; }
.instructor p:last-child { margin-top: 10px; }

.mini-live { display: grid; gap: 14px; }
.mini-live li { display: flex; align-items: center; gap: 16px; }
.mini-live li > div:nth-child(2) { flex: 1; min-width: 0; }
.mini-live a strong { color: var(--navy); }
.mini-live a:hover strong { color: var(--lime-dark); }
.mini-live p { font-size: .85rem; }
.live-date--sm { width: 56px; padding: 7px 4px; }
.live-date--sm strong { font-size: 1.2rem; }
.live-date--sm span { font-size: .68rem; }
.live-date--lg { width: 84px; }

.buy-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.buy-card__thumb { border: 0; border-radius: 0; box-shadow: none; }
.buy-card__thumb:hover { transform: none; box-shadow: none; }
.buy-card__thumb .course-card__thumb { aspect-ratio: 16 / 8.5; }
.buy-card__play { position: absolute; z-index: 3; width: 66px; height: 66px; border-radius: 50%; background: var(--white); color: var(--navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .2); transition: transform .3s var(--ease-spring); }
.buy-card__play:hover { transform: scale(1.1); }
.buy-card__play .icon { width: 26px !important; height: 26px !important; fill: currentColor; stroke: none; margin-left: 4px; }
.buy-card__body { padding: 26px; display: grid; gap: 12px; }
.buy-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.buy-card__price .price { font-size: 2rem; }
.buy-card__price del { color: var(--muted); }
.buy-card__note { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.buy-card__note .icon { width: 14px; height: 14px; }
.buy-card h4 { margin-top: 8px; font-size: 1rem; }
.includes { display: grid; gap: 10px; font-size: .9rem; }
.includes li { display: flex; align-items: center; gap: 10px; }
.includes .icon { width: 17px; height: 17px; color: var(--slate); }

.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: .9rem; background: var(--bg); color: var(--navy); }
.notice .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.notice--success { background: var(--lime-pale); color: #3F6E1C; }
.notice--info { background: var(--slate-pale); color: var(--navy); margin-bottom: 18px; }

.session-when { display: flex; align-items: center; gap: 16px; padding-bottom: 6px; }
.session-when strong { font-family: var(--font-head); color: var(--navy); font-size: 1.15rem; }
.linked-course { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.linked-course:hover { border-color: var(--lime); box-shadow: var(--shadow-sm); }
.linked-course > span:nth-child(2) { flex: 1; display: grid; }
.linked-course strong { color: var(--navy); }
.linked-course small { color: var(--muted); }
.linked-course > .icon { color: var(--lime-dark); }
.linked-course .cat-card__icon { width: 46px; height: 46px; }
.linked-course .cat-card__icon .icon { width: 22px; height: 22px; }
.steps-inline { padding-left: 20px; display: grid; gap: 10px; }

/* ---------- Course player ---------- */
.player-page { padding: 32px 0 80px; background: var(--bg); }
.player-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.player-main { display: grid; gap: 22px; min-width: 0; }
.player { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy-dark); box-shadow: var(--shadow); }
.player iframe { width: 100%; height: 100%; border: 0; }
.player__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-head); font-weight: 600; text-align: center; padding: 20px; background: radial-gradient(circle at 80% 20%, rgba(125, 194, 66, .3), transparent 50%), linear-gradient(135deg, var(--navy), var(--slate)); }
.player__placeholder .mock__play { width: 84px; height: 84px; }
.lesson h1 { font-size: 1.5rem; margin: 10px 0 6px; }
.lesson__body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.lesson__body p { margin-bottom: 12px; }
.player-side { position: sticky; top: 96px; }
.lesson-list h3 { font-size: 1.1rem; }
.lesson-list ol { list-style: none; margin-top: 14px; display: grid; gap: 4px; }
.lesson-list li > a, .lesson-list li > span { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .9rem; color: var(--text); transition: background .2s; }
.lesson-list li > a:hover { background: var(--bg); }
.lesson-list .icon { width: 17px; height: 17px; color: var(--slate); }
.lesson-list small { color: var(--muted); }
.lesson-list li.is-current > a { background: var(--lime-pale); color: var(--navy); font-weight: 600; }
.lesson-list li.is-current .icon { color: var(--lime-dark); }
.lesson-list li.is-locked > span { color: var(--muted); cursor: not-allowed; }
.enroll-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 30px; border-radius: var(--radius); background: linear-gradient(120deg, var(--navy), var(--slate)); color: var(--slate-pale); margin-top: 28px; }
.player-main .enroll-banner { margin-top: 0; }
.enroll-banner h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 4px; }

/* ---------- Live classes page ---------- */
.live-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }
.live-feature { display: flex; gap: 16px; padding: 22px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .45s var(--ease-out) var(--d, 0ms), box-shadow .45s, opacity .8s var(--ease-out) var(--d, 0ms); }
.live-feature:hover { box-shadow: var(--shadow); }
.live-feature__icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 12px; background: var(--lime-pale); color: var(--lime-dark); display: flex; align-items: center; justify-content: center; }
.live-feature h3 { font-size: 1.02rem; margin-bottom: 4px; }
.live-feature p { font-size: .88rem; color: var(--muted); }
.live-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.segmented { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.segmented a { padding: 9px 18px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--muted); transition: all .25s; }
.segmented a:hover { color: var(--navy); }
.segmented a.is-active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-sm); }
.live-card h3 a:hover { color: var(--lime-dark); }

/* ---------- About page ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mv-card { background: var(--white); border-radius: var(--radius-lg); padding: 34px 30px; border: 1px solid var(--border); transition: transform .45s var(--ease-out) var(--d, 0ms), box-shadow .45s, opacity .8s var(--ease-out) var(--d, 0ms); }
.mv-card:hover { box-shadow: var(--shadow); }
.mv-card__icon { width: 58px; height: 58px; border-radius: 16px; background: var(--lime-pale); color: var(--lime-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.mv-card__icon .icon { width: 28px; height: 28px; }
.mv-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.mv-card p { color: var(--muted); }
.mv-card--navy { background: linear-gradient(150deg, var(--navy), var(--navy-dark)); border: 0; }
.mv-card--navy h3 { color: var(--white); }
.mv-card--navy p { color: var(--slate-light); }
.mv-card--navy .mv-card__icon { background: var(--lime); color: var(--white); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { padding: 28px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--white); transition: transform .45s var(--ease-out) var(--d, 0ms), box-shadow .45s, border-color .3s, opacity .8s var(--ease-out) var(--d, 0ms); }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.feature__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--slate-pale); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .3s, color .3s, transform .5s var(--ease-spring); }
.feature:hover .feature__icon { background: var(--lime); color: var(--white); transform: rotate(-8deg) scale(1.08); }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .93rem; }

.journey { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.journey::before { content: ''; position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lime), var(--slate)); }
.journey__item { position: relative; padding-top: 48px; }
.journey__item::before { content: ''; position: absolute; top: 9px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); border: 4px solid var(--lime); }
.journey__year { font-family: var(--font-head); font-weight: 700; color: var(--lime); }
.journey__item h4 { color: var(--white); font-size: .98rem; margin: 4px 0 6px; }
.journey__item p { color: var(--slate-light); font-size: .85rem; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { text-align: center; padding: 30px 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .45s var(--ease-out) var(--d, 0ms), box-shadow .45s, opacity .8s var(--ease-out) var(--d, 0ms); }
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.team-card .avatar { margin: 0 auto 16px; }
.team-card h3 { font-size: 1.05rem; }
.team-card__role { color: var(--lime-dark); font-weight: 600; font-size: .88rem; margin: 2px 0 4px; }
.team-card .muted { font-size: .84rem; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 380px 1fr; gap: 36px; align-items: start; }
.contact-info { background: linear-gradient(160deg, var(--navy), var(--navy-dark)); color: var(--slate-light); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; overflow: hidden; }
.contact-info::after { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(125, 194, 66, .18); bottom: -110px; right: -90px; }
.contact-info h2 { color: var(--white); font-size: 1.4rem; margin-bottom: 10px; }
.contact-info > p { margin-bottom: 26px; font-size: .95rem; }
.contact-info ul { display: grid; gap: 20px; position: relative; z-index: 1; }
.contact-info li { display: flex; gap: 14px; align-items: flex-start; }
.contact-info li div { display: grid; }
.contact-info strong { color: var(--white); font-family: var(--font-head); font-size: .95rem; }
.contact-info a:hover { color: var(--lime); }
.contact-info__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgba(125, 194, 66, .15); color: var(--lime); display: flex; align-items: center; justify-content: center; }
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.form-card h2 { font-size: 1.4rem; margin-bottom: 4px; }
.form-card > .muted { margin-bottom: 24px; font-size: .9rem; }
.char-count { text-align: right; font-size: .78rem; color: var(--muted); margin: -12px 0 18px; }

/* ---------- Forms ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-group { margin-bottom: 18px; }
.form-group > label { display: block; font-weight: 600; font-size: .88rem; color: var(--navy); margin-bottom: 7px; }
.req { color: #D64545; margin-left: 3px; }
.input-wrap { position: relative; }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slate-light); pointer-events: none; transition: color .2s; }
.form-control { width: 100%; font: inherit; font-size: .95rem; color: var(--text); background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s; appearance: none; -webkit-appearance: none; }
.form-control::placeholder { color: #A3AFBF; }
.form-control:hover { border-color: var(--slate-light); }
.form-control:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(125, 194, 66, .18); }
.has-icon .form-control { padding-left: 42px; }
.has-toggle .form-control { padding-right: 46px; }
.input-wrap:focus-within .input-icon { color: var(--lime-dark); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A5F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; cursor: pointer; }
.has-error .form-control { border-color: #D64545; background: #FFF8F8; }
.has-error .form-control:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .15); }
.has-error .input-icon { color: #D64545; }
.is-valid .form-control { border-color: var(--lime); }
.field-error { color: #C53030; font-size: .82rem; margin-top: 6px; min-height: 0; display: none; }
.has-error .field-error { display: block; animation: shakeIn .4s ease; }
.field-help { color: var(--muted); font-size: .8rem; margin-top: 6px; }
.has-error .field-help { display: none; }
@keyframes shakeIn { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--slate); }
.pw-toggle:hover { background: var(--bg); color: var(--navy); }
.pw-toggle .icon { width: 18px; height: 18px; }
.pw-strength { margin: -10px 0 18px; }
.pw-strength__bar { height: 6px; background: var(--slate-pale); border-radius: 999px; overflow: hidden; }
.pw-strength__bar span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .35s var(--ease-out), background .35s; }
.pw-strength__label { display: block; font-size: .78rem; color: var(--muted); margin-top: 5px; }
.pw-strength[data-level="1"] span { width: 25%; background: #D64545; }
.pw-strength[data-level="2"] span { width: 50%; background: #E0A526; }
.pw-strength[data-level="3"] span { width: 75%; background: #9CCB5E; }
.pw-strength[data-level="4"] span { width: 100%; background: var(--lime-dark); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lime); flex-shrink: 0; }
.check a { color: var(--lime-dark); font-weight: 600; }
.check a:hover { text-decoration: underline; }
.form-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 22px; }
.form-alert { display: flex; gap: 10px; align-items: flex-start; background: #FFF1F1; border: 1px solid #F5C2C2; color: #A12828; padding: 12px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 18px; animation: shakeIn .4s ease; }
.form-alert .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Auth pages ---------- */
.auth { min-height: calc(100vh - 76px); padding: 48px 0; background: radial-gradient(circle at 90% 10%, rgba(125, 194, 66, .12), transparent 40%), var(--bg); display: flex; align-items: center; }
.auth__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; background: var(--white); border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; padding: 0; max-width: 1100px; width: calc(100% - 32px); }
.auth__side { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 70%); color: var(--slate-light); padding: 52px 44px; display: flex; align-items: center; }
.auth__side::before { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 194, 66, .28), transparent 70%); top: -140px; right: -140px; animation: drift 16s ease-in-out infinite alternate; }
.auth__side::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; }
.auth__side-inner { position: relative; z-index: 1; }
.auth__side h2 { color: var(--white); font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 16px 0 12px; }
.auth__perks { display: grid; gap: 12px; margin: 28px 0 34px; }
.auth__perks li { display: flex; gap: 10px; align-items: center; color: var(--slate-pale); }
.auth__perks .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--lime); color: var(--white); stroke-width: 3; }
.auth__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.auth__stats div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 14px 10px; text-align: center; }
.auth__stats strong { display: block; font-family: var(--font-head); color: var(--lime); font-size: 1.3rem; }
.auth__stats span { font-size: .78rem; }
.auth__card { padding: 52px 48px; }
.auth__card h1 { font-size: 1.75rem; margin-bottom: 6px; }
.auth__card > .muted { margin-bottom: 26px; }
.auth__card > .muted a { color: var(--lime-dark); font-weight: 600; }
.auth__legal { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 20px; }
.auth__legal a { color: var(--navy); text-decoration: underline; }

/* ---------- Dashboard ---------- */
.dash-hero { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: var(--white); padding: 44px 0; position: relative; overflow: hidden; }
.dash-hero::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 194, 66, .22), transparent 70%); right: -80px; top: -180px; }
.dash-hero__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.dash-hero__user { display: flex; align-items: center; gap: 20px; }
.dash-hero h1 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2rem); }
.dash-stats { display: flex; gap: 14px; }
.dash-stats div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 16px 22px; text-align: center; min-width: 140px; }
.dash-stats strong { display: block; font-family: var(--font-head); font-size: 1.8rem; color: var(--lime); line-height: 1.1; }
.dash-stats span { font-size: .82rem; color: var(--slate-light); }
.dash-layout { display: grid; grid-template-columns: 1fr 330px; gap: 28px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 24px; min-width: 0; }
.my-courses { display: grid; gap: 14px; }
.my-course { display: flex; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; transition: box-shadow .3s, border-color .3s; }
.my-course:hover { box-shadow: var(--shadow-sm); border-color: var(--slate-light); }
.my-course__icon { width: 96px; flex-shrink: 0; border: 0; box-shadow: none; border-radius: 10px; }
.my-course__icon:hover { transform: none; box-shadow: none; }
.my-course__icon .course-card__thumb { aspect-ratio: 4 / 3; }
.my-course__icon .course-card__thumb .icon { width: 34px; height: 34px; }
.my-course__info { flex: 1; min-width: 0; }
.my-course__info a strong { color: var(--navy); }
.my-course__info p { font-size: .84rem; margin-bottom: 8px; }
.progress--static span { animation-delay: .3s; }
.profile-list { display: grid; gap: 12px; margin-bottom: 20px; }
.profile-list div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.profile-list dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.profile-list dd { color: var(--navy); font-weight: 500; word-break: break-word; }

/* ---------- Legal & error ---------- */
.legal { max-width: 820px; background: var(--white); }
.legal h2 { font-size: 1.25rem; margin: 30px 0 10px; }
.legal p, .legal li { color: #3B4A5E; }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.legal a { color: var(--lime-dark); font-weight: 600; }
.error-page { text-align: center; min-height: 60vh; display: flex; align-items: center; }
.error-page__code { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 14vw, 9rem); line-height: 1; background: linear-gradient(135deg, var(--navy), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page h1 { margin: 10px 0; }
.error-page p { color: var(--muted); margin-bottom: 28px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Inner pages: responsive ---------- */
@media (max-width: 1024px) {
  .course-layout, .player-layout, .dash-layout, .contact-layout { grid-template-columns: 1fr; }
  .course-aside { position: static; margin-top: 0; order: -1; }
  .player-side { position: static; }
  .mv-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .journey { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
  .journey::before { top: 0; bottom: 0; left: 9px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--lime), var(--slate)); }
  .journey__item { padding: 0 0 26px; }
  .journey__item::before { top: 2px; left: -34px; }
  .auth__grid { grid-template-columns: 1fr; max-width: 640px; }
  .auth__side { display: none; }
}
@media (max-width: 768px) {
  .page-hero { padding: 48px 0 56px; }
  .live-features { grid-template-columns: 1fr; }
  .check-grid, .form-row { grid-template-columns: 1fr; }
  .mv-grid, .feature-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .curriculum__item { grid-template-columns: 30px 1fr auto; }
  .curriculum__time { display: none; }
  .auth__card, .form-card { padding: 32px 22px; }
  .panel { padding: 22px; }
  .my-course { flex-wrap: wrap; }
  .my-course .btn { width: 100%; }
  .dash-stats { width: 100%; }
  .dash-stats div { flex: 1; min-width: 0; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; text-align: center; padding: 9px 8px; font-size: .84rem; }
}
@media (max-width: 480px) {
  .search-bar { flex-wrap: wrap; padding: 10px; }
  .search-bar > .icon { display: none; }
  .search-bar input { width: 100%; padding: 8px 6px; }
  .search-bar .btn { width: 100%; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .instructor { flex-direction: column; }
  .navbar__profile span:last-child { display: inline; }
}
.filter-backdrop { position: fixed; inset: 0; background: rgba(21, 43, 71, .45); z-index: 140; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.filter-backdrop.is-visible { opacity: 1; visibility: visible; }
.form-group > label.check { display: flex; font-weight: 400; font-size: .9rem; color: var(--text); margin-bottom: 0; }

/* =====================================================================
   CREATOR STUDIO · REVIEW · PAYMENTS
   ===================================================================== */

/* Images inside thumbnails */
.course-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--ease-out); }
.course-card:hover .course-card__thumb img { transform: scale(1.05); }
.course-card__thumb .badge { z-index: 2; }

/* Navbar small links */
.navbar__link-sm { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; color: var(--navy); padding: 7px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.navbar__link-sm .icon { width: 16px; height: 16px; color: var(--lime-dark); }
.navbar__link-sm:hover, .navbar__link-sm.is-active { background: var(--lime-pale); }

/* Buttons */
.btn--danger { background: #D64545; color: var(--white); }
.btn--danger:hover { background: #B83333; }
.btn--danger-text { color: #C53030; }
.btn--danger-text:hover { background: #FFF1F1; }
.text-warn { color: #B7791F; font-weight: 600; }

/* Status badges */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--slate-pale); color: var(--navy); white-space: nowrap; }
.status-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge--draft { background: #EEF2F7; color: #5A6B80; }
.status-badge--pending_review, .status-badge--pending, .status-badge--requested, .status-badge--created { background: #FFF6E0; color: #A86B00; }
.status-badge--published, .status-badge--approved, .status-badge--paid { background: var(--lime-pale); color: #3F6E1C; }
.status-badge--rejected, .status-badge--failed, .status-badge--suspended { background: #FFF1F1; color: #B83333; }
.status-badge--archived, .status-badge--refunded { background: #F1F1F4; color: #6B7A8F; }
.status-badge--pending_review .status-badge__dot, .status-badge--pending .status-badge__dot { animation: pulse 1.6s infinite; }

.notice--warn { background: #FFF6E0; color: #7A4F00; margin-bottom: 18px; }
.notice--success, .notice--info { margin-bottom: 18px; }

/* Studio header */
.studio-hero { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: var(--white); position: relative; overflow: hidden; }
.studio-hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 194, 66, .2), transparent 70%); right: -120px; top: -200px; animation: drift 18s ease-in-out infinite alternate; }
.studio-hero__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 34px; padding-bottom: 24px; position: relative; }
.studio-hero__user { display: flex; align-items: center; gap: 18px; }
.studio-hero h1 { color: var(--white); font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 6px 0 2px; }
.studio-hero .eyebrow { margin: 0; }
.studio-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: relative; }
.studio-tabs::-webkit-scrollbar { display: none; }
.studio-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; color: var(--slate-light); font-weight: 600; font-size: .9rem; border-radius: 12px 12px 0 0; white-space: nowrap; transition: color .2s, background .2s; }
.studio-tabs a .icon { width: 17px; height: 17px; }
.studio-tabs a:hover { color: var(--white); }
.studio-tabs a.is-active { background: var(--bg); color: var(--navy); }
.studio-tabs a.is-active .icon { color: var(--lime-dark); }
.studio-hero + .section { background: var(--bg); }

/* Tiles */
.tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 28px; }
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tile { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: grid; gap: 4px; transition: transform .45s var(--ease-out) var(--d, 0ms), box-shadow .45s, opacity .8s var(--ease-out) var(--d, 0ms); }
a.tile:hover { box-shadow: var(--shadow); }
.tile__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--slate-pale); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.tile__icon--lime { background: var(--lime-pale); color: var(--lime-dark); }
.tile strong { font-family: var(--font-head); font-size: 1.55rem; color: var(--navy); line-height: 1.1; }
.tile span:last-child { font-size: .84rem; color: var(--muted); }

/* Studio course list */
.studio-courses { display: grid; gap: 14px; }
.studio-course { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 12px; transition: box-shadow .3s, border-color .3s; }
.studio-course:hover { box-shadow: var(--shadow-sm); border-color: var(--slate-light); }
.studio-course__thumb { border: 0; box-shadow: none; border-radius: 10px; }
.studio-course__thumb:hover { transform: none; box-shadow: none; }
.studio-course__thumb .course-card__thumb .icon { width: 36px; height: 36px; }
.studio-course__info { min-width: 0; }
.studio-course__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.studio-course__title a strong { color: var(--navy); }
.studio-course__title a:hover strong { color: var(--lime-dark); }
.studio-course__info p { font-size: .84rem; }
.studio-course__note { display: flex; gap: 6px; align-items: flex-start; color: #B83333; font-size: .82rem; margin-top: 6px; }
.studio-course__note .icon { width: 15px; height: 15px; margin-top: 2px; }
.studio-course__stats { display: flex; gap: 18px; text-align: center; }
.studio-course__stats strong { display: block; font-family: var(--font-head); color: var(--navy); }
.studio-course__stats span { font-size: .75rem; color: var(--muted); }
.studio-course__actions { display: flex; flex-direction: column; gap: 6px; }

.sales-list, .payout-list { display: grid; gap: 12px; }
.sales-list li, .payout-list li { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sales-list li:last-child, .payout-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.sales-list div, .payout-list div { flex: 1; min-width: 0; display: grid; font-size: .88rem; }
.sales-list__amount { font-family: var(--font-head); font-weight: 700; color: var(--lime-dark); }
.tip-list { display: grid; gap: 10px; font-size: .9rem; }
.tip-list li { position: relative; padding-left: 18px; }
.tip-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.tip-list--dark li { color: var(--text); }
.panel h3 { margin-bottom: 12px; }

/* Builder layouts & forms */
.builder-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.builder-main { display: grid; gap: 18px; min-width: 0; }
.builder-side { display: grid; gap: 20px; position: sticky; top: 96px; }
.form-section { border: 0; border-top: 1px solid var(--border); padding: 22px 0 6px; margin-top: 6px; }
.form-section legend { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.05rem; padding-right: 12px; }
.form-section legend span { width: 28px; height: 28px; border-radius: 8px; background: var(--lime); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.form-row--3 { grid-template-columns: repeat(3, 1fr); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.thumb-preview { width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 14px; }
.form-control--narrow { max-width: 90px; }
.form-control:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }

.dropzone { position: relative; border: 2px dashed var(--border); border-radius: 14px; padding: 26px 18px; text-align: center; background: var(--bg); transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--lime); background: var(--lime-pale); }
.dropzone__icon { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--slate); }
.dropzone__text { font-size: .9rem; color: var(--muted); }
.dropzone__text strong { color: var(--navy); }
.dropzone__file { font-size: .82rem; color: var(--lime-dark); font-weight: 600; margin-top: 6px; word-break: break-all; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone input[type=checkbox] { position: relative; z-index: 2; }
.dropzone label { position: relative; z-index: 2; font-size: .82rem; }
.dropzone a { position: relative; z-index: 2; }
.has-error .dropzone { border-color: #D64545; background: #FFF8F8; }

.chip-select { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-option { position: relative; cursor: pointer; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--border); font-size: .9rem; font-weight: 500; color: var(--navy); transition: all .2s; }
.chip-option:hover span { border-color: var(--navy); }
.chip-option input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip-option input:focus-visible + span { box-shadow: 0 0 0 4px rgba(125, 194, 66, .25); }

.upload-progress { margin: 6px 0 14px; }
.upload-progress__bar { height: 10px; border-radius: 999px; background: var(--slate-pale); overflow: hidden; }
.upload-progress__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime), var(--lime-dark)); transition: width .2s; }
.upload-progress__label { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.video-current { margin-bottom: 14px; }
.video-current video, .review-lesson video { width: 100%; max-height: 320px; border-radius: 12px; background: #000; }

/* Curriculum builder */
.course-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.course-bar h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 4px 0 8px; }
.course-bar .breadcrumbs { margin-bottom: 0; }
.course-bar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .88rem; }
.course-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.module-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; }
.module-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); position: relative; }
.module-card__head h3 { font-size: 1.02rem; margin: 0; flex: 1; }
.module-card__head > .muted { font-size: .82rem; }
.module-card__num { width: 32px; height: 32px; border-radius: 9px; background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.module-card__menu summary { list-style: none; }
.module-card__menu summary::-webkit-details-marker { display: none; }
.module-card__menu-panel { position: absolute; right: 12px; top: calc(100% - 6px); z-index: 20; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; display: grid; gap: 10px; width: min(420px, calc(100vw - 60px)); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form .form-control { flex: 1; min-width: 120px; padding: 9px 12px; }
.lesson-rows { list-style: none; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); transition: background .2s; }
.lesson-row:hover { background: var(--bg); }
.lesson-row--empty { justify-content: center; font-size: .88rem; }
.lesson-row__icon { width: 34px; height: 34px; border-radius: 9px; background: #FFF6E0; color: #B7791F; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lesson-row__icon.is-ok { background: var(--lime-pale); color: var(--lime-dark); }
.lesson-row__icon .icon { width: 17px; height: 17px; }
.lesson-row__info { flex: 1; min-width: 0; display: grid; }
.lesson-row__info strong { color: var(--navy); font-weight: 600; font-size: .94rem; }
.lesson-row__info small { font-size: .8rem; }
.lesson-row__actions { display: flex; gap: 2px; }
.lesson-row__actions .btn { padding: 7px 9px; }
.module-card__add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; font-weight: 600; font-size: .9rem; color: var(--lime-dark); border-radius: 0 0 var(--radius) var(--radius); transition: background .2s; }
.module-card__add:hover { background: var(--lime-pale); }
.module-card__add .icon { width: 17px; height: 17px; }
.module-add { background: var(--white); border: 2px dashed var(--border); border-radius: var(--radius); padding: 20px; }
.module-add h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 12px; }
.module-add h3 .icon { color: var(--lime-dark); }
.module-add__row { display: grid; grid-template-columns: 1fr 120px auto; gap: 12px; align-items: start; }
.module-add__row .btn { margin-top: 27px; }
.module-add .form-group { margin-bottom: 0; }

.checklist { display: grid; gap: 10px; margin-bottom: 18px; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.checklist li span { width: 24px; height: 24px; border-radius: 50%; background: #FFF6E0; color: #B7791F; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checklist li span .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.checklist li.is-done { color: var(--navy); }
.checklist li.is-done span { background: var(--lime); color: var(--white); }
.checklist-panel .field-help { margin-top: 8px; text-align: center; }

/* Tables */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover td { background: var(--bg); }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table a { color: var(--navy); font-weight: 500; }
.data-table a.btn { color: var(--white); }

/* Staff review */
.payout-requests { display: grid; gap: 14px; }
.payout-request { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.payout-request__info { display: grid; gap: 2px; }
.payout-request__info strong { font-family: var(--font-head); color: var(--navy); font-size: 1.1rem; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 8px; }
.detail-list div { display: grid; gap: 2px; }
.detail-list dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.detail-list dd { color: var(--navy); font-weight: 500; word-break: break-word; }
.decision-form { margin-bottom: 14px; }
.decision-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.course-aside--static { margin-top: 0; }
.course-aside--static .panel { display: grid; gap: 12px; }
.review-lesson { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.review-lesson summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 500; color: var(--navy); }
.review-lesson summary span:first-child { flex: 1; }
.review-lesson[open] summary { border-bottom: 1px solid var(--border); }
.review-lesson > video, .review-lesson > p, .review-lesson > .review-lesson__notes, .review-lesson > a { margin: 12px 14px; display: block; width: calc(100% - 28px); }
.review-lesson__notes { font-size: .9rem; color: var(--text); }

/* Application */
.apply-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.apply-side { display: grid; gap: 20px; position: sticky; top: 96px; }
.perk-list { display: grid; gap: 16px; }
.perk-list li { display: flex; gap: 12px; }
.perk-list .icon { width: 22px; height: 22px; color: var(--lime); flex-shrink: 0; margin-top: 2px; }
.perk-list div { display: grid; }
.perk-list strong { color: var(--white); }
.perk-list span { font-size: .86rem; }
.mini-steps { list-style: none; display: grid; gap: 12px; }
.mini-steps li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--navy); }
.mini-steps span { width: 28px; height: 28px; border-radius: 50%; background: var(--lime-pale); color: var(--lime-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.status-card { max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; text-align: center; box-shadow: var(--shadow); }
.status-card__icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.status-card__icon .icon { width: 34px; height: 34px; }
.status-card__icon--pending { background: #FFF6E0; color: #B7791F; }
.status-card__icon--blocked { background: #FFF1F1; color: #B83333; }
.status-card h2 { margin-bottom: 10px; }
.status-card > p { color: var(--muted); margin-bottom: 24px; }
.status-card__details { display: grid; gap: 12px; text-align: left; background: var(--bg); border-radius: 12px; padding: 18px; margin-bottom: 24px; }
.status-card__details div { display: flex; justify-content: space-between; gap: 16px; }
.status-card__details dt { color: var(--muted); font-size: .88rem; }
.status-card__details dd { color: var(--navy); font-weight: 500; text-align: right; }
.status-card__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Public creator page */
.creator-hero { display: flex; align-items: center; gap: 28px; }
.creator-hero .avatar--xl { width: 110px; height: 110px; font-size: 2.2rem; flex-shrink: 0; }
.creator-hero .course-hero__meta a { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-pale); }
.creator-hero .course-hero__meta a:hover { color: var(--lime); }
.section__head--left { text-align: left; margin: 44px 0 24px; max-width: none; }
.panel .chips { margin: 16px 0 0; }

/* Course detail additions */
.draft-banner { background: #FFF6E0; color: #7A4F00; font-size: .9rem; }
.draft-banner .container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.draft-banner .icon { width: 18px; height: 18px; }
.draft-banner span { flex: 1; }
.course-hero__by a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(125, 194, 66, .6); text-underline-offset: 3px; }
.curriculum-section + .curriculum-section { margin-top: 20px; }
.curriculum-section__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 1rem; margin-bottom: 10px; }
.curriculum-section__title span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lime-dark); background: var(--lime-pale); padding: 3px 8px; border-radius: 6px; }
.curriculum-section__title small { font-family: var(--font-body); font-weight: 400; font-size: .82rem; margin-left: auto; }
.lesson-list__module { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 4px; }
.lesson-list__module:first-of-type { margin-top: 14px; }
.lesson-list ol { margin-top: 4px; }
.player video { width: 100%; height: 100%; background: #000; display: block; }
.lesson__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; }

/* Checkout */
.checkout-page { background: radial-gradient(circle at 85% 10%, rgba(125, 194, 66, .12), transparent 40%), var(--bg); min-height: calc(100vh - 76px); display: flex; align-items: center; }
.checkout { display: flex; justify-content: center; }
.checkout__card { width: 100%; max-width: 520px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px; display: grid; gap: 16px; }
.checkout__card h1 { font-size: 1.6rem; }
.checkout__card .eyebrow { justify-self: start; margin: 0; }
.checkout__item { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.checkout__item strong { color: var(--navy); }
.checkout__item p { font-size: .84rem; }
.checkout__thumb { width: 96px; flex-shrink: 0; border: 0; box-shadow: none; border-radius: 10px; }
.checkout__thumb:hover { transform: none; box-shadow: none; }
.checkout__thumb .course-card__thumb .icon { width: 30px; height: 30px; }
.checkout__summary { display: grid; gap: 10px; }
.checkout__summary div { display: flex; justify-content: space-between; font-size: .95rem; }
.checkout__summary dt { color: var(--muted); }
.checkout__total { border-top: 1px solid var(--border); padding-top: 12px; }
.checkout__total dt, .checkout__total dd { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.15rem; }
.checkout__note { display: flex; gap: 8px; font-size: .82rem; color: var(--muted); }
.checkout__note .icon { width: 16px; height: 16px; color: var(--lime-dark); flex-shrink: 0; margin-top: 2px; }

/* Responsive */
@media (max-width: 1200px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .builder-layout, .apply-layout { grid-template-columns: 1fr; }
  .builder-side, .apply-side { position: static; }
  .studio-course { grid-template-columns: 96px 1fr; }
  .studio-course__stats, .studio-course__actions { grid-column: 2; flex-direction: row; justify-content: flex-start; }
}
@media (max-width: 768px) {
  .tile-grid, .tile-grid--3 { grid-template-columns: 1fr 1fr; }
  .form-row--3, .detail-list, .module-add__row { grid-template-columns: 1fr; }
  .module-add__row .btn { margin-top: 0; }
  .creator-hero { flex-direction: column; align-items: flex-start; }
  .studio-course { grid-template-columns: 1fr; }
  .studio-course__thumb { display: none; }
  .studio-course__stats, .studio-course__actions { grid-column: 1; }
  .lesson-row { flex-wrap: wrap; padding: 12px 14px; }
  .checkout__card, .status-card { padding: 26px 20px; }
}
@media (max-width: 480px) {
  .tile-grid, .tile-grid--3 { grid-template-columns: 1fr; }
  .decision-form__actions { grid-template-columns: 1fr; }
  .navbar__link-sm { flex: 1; justify-content: center; background: var(--bg); }
}

/* Navbar & stacking refinements */
.navbar__links a { white-space: nowrap; }
.container > .panel + .panel { margin-top: 24px; }
.payout-request__info { display: block; }
.payout-request__info small { display: block; margin-top: 4px; }
@media (max-width: 1280px) and (min-width: 901px) {
  .navbar__links { gap: 18px; }
  .navbar__menu { gap: 18px; }
  .navbar__profile span:last-child { display: none; }
  .navbar__link-sm { padding: 7px 10px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .navbar__link-sm { font-size: 0; gap: 0; }
  .navbar__link-sm .icon { width: 18px; height: 18px; }
}
.dropzone__clear { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; color: #B83333; cursor: pointer; }

/* =====================================================================
   CREATOR SIGNUP WIZARD
   ===================================================================== */
.wizard { padding: 40px 0 80px; background: radial-gradient(circle at 90% 0%, rgba(125, 194, 66, .12), transparent 40%), var(--bg); min-height: calc(100vh - 76px); }
.wizard__head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.wizard__head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 6px; }
.wizard__dev { max-width: 980px; margin: 0 auto 20px; }
.wizard__dev code { background: rgba(0, 0, 0, .06); padding: 1px 6px; border-radius: 4px; }
.wizard__grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; max-width: 980px; margin: 0 auto; align-items: start; }
.wizard__card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px; }
.wizard__card h2 { font-size: 1.35rem; margin-bottom: 6px; }
.wizard__card > .muted { margin-bottom: 22px; }
.wizard__side { display: grid; gap: 14px; position: sticky; top: 96px; }

.stepper { list-style: none; display: flex; justify-content: center; gap: 0; max-width: 820px; margin: 0 auto 28px; counter-reset: s; }
.stepper__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; }
.stepper__item:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: var(--border); }
.stepper__item.is-done:not(:last-child)::after { background: var(--lime); }
.stepper__dot { width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 2px solid var(--border); color: var(--muted); font-family: var(--font-head); font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: all .3s; }
.stepper__dot .icon { width: 16px; height: 16px; stroke-width: 3; }
.stepper__label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.stepper__item.is-active .stepper__dot { border-color: var(--navy); background: var(--navy); color: var(--white); box-shadow: 0 0 0 5px rgba(30, 58, 95, .12); }
.stepper__item.is-active .stepper__label { color: var(--navy); }
.stepper__item.is-done .stepper__dot { background: var(--lime); border-color: var(--lime); color: var(--white); }
.stepper__item.is-done .stepper__label { color: var(--lime-dark); }

.otp-cards { display: grid; gap: 16px; margin-bottom: 14px; }
.otp-card { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; transition: border-color .3s, background .3s; }
.otp-card.is-verified { border-color: var(--lime); background: var(--lime-pale); }
.otp-card__head { display: flex; align-items: center; gap: 12px; }
.otp-card__head > div { flex: 1; display: grid; }
.otp-card__head strong { color: var(--navy); }
.otp-card__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--slate-pale); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.otp-card__form { display: flex; gap: 10px; margin-top: 14px; }
.otp-card__form--lg { margin: 6px 0 14px; }
.otp-input { flex: 1; min-width: 0; font-family: var(--font-head); font-size: 1.35rem; letter-spacing: .45em; text-align: center; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; color: var(--navy); }
.otp-input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(125, 194, 66, .18); }
.otp-card__resend { margin-top: 10px; }
.otp-card__resend button[disabled], .link-sm[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }
button.link-sm { background: none; border: 0; padding: 0; }

.verified-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.verified-summary .tag .icon { width: 13px; height: 13px; stroke-width: 3; }
.detail-list--boxed { background: var(--bg); border-radius: 12px; padding: 18px; margin: 16px 0; }
.field-help--top { margin: -6px 0 14px; }
.kyc-list { display: grid; gap: 12px; margin: 10px 0; }
.kyc-list li { display: flex; gap: 10px; align-items: flex-start; }
.kyc-list .icon { width: 18px; height: 18px; color: var(--white); background: var(--lime); border-radius: 50%; padding: 3px; stroke-width: 3; flex-shrink: 0; }
.kyc-list div { display: grid; font-size: .88rem; }
.kyc-list strong { color: var(--navy); }

.creator-cta { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 22px; border-radius: 12px; background: var(--lime-pale); color: #3F6E1C; font-size: .9rem; transition: background .2s; }
.creator-cta:hover { background: #E2F2D1; }
.creator-cta span { flex: 1; }
.creator-cta .icon { width: 18px; height: 18px; flex-shrink: 0; }
.auth__card .creator-cta:last-of-type { margin: 22px 0 0; }

@media (max-width: 900px) {
  .wizard__grid { grid-template-columns: 1fr; }
  .wizard__side { position: static; }
}
@media (max-width: 600px) {
  .wizard__card { padding: 26px 18px; }
  .stepper__label { display: none; }
  .stepper__item.is-active .stepper__label { display: block; position: absolute; top: 44px; white-space: nowrap; }
  .stepper { margin-bottom: 44px; }
  .otp-card__form { flex-direction: column; }
}
.otp-input::placeholder { letter-spacing: normal; font-size: 1rem; font-family: var(--font-body); }

/* =====================================================================
   CART · CHECKOUT · PURCHASES
   ===================================================================== */
.h2 { font-size: 1.5rem; }
.text-ok { color: var(--lime-dark); }
.btn.is-static { cursor: default; transform: none; }

.navbar__cart { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); transition: background .2s; }
.navbar__cart:hover, .navbar__cart.is-active { background: var(--lime-pale); }
.navbar__cart .icon { width: 21px; height: 21px; }
.navbar__cart-count { position: absolute; top: 1px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--lime); color: var(--white); font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--white); animation: popIn .4s var(--ease-spring); }

.cart-actions { display: grid; gap: 10px; }
.cart-actions--sm { gap: 6px; }
.course-card__cart { margin-top: 12px; }
.live-card__price { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--slate-pale); color: var(--navy); }
.live-card__price.is-free { background: var(--lime-pale); color: var(--lime-dark); }
.live-card__actions .cart-actions { min-width: 150px; }

.shop-page { background: var(--bg); min-height: calc(100vh - 76px); }
.shop-head { margin-bottom: 20px; }
.shop-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.shop-layout { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.order-summary, .order-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.order-side .order-summary { position: static; }

.cart-list { padding: 8px 24px; }
.cart-item { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); animation: heroIn .5s var(--ease-out) both; }
.cart-item__thumb { width: 110px; border: 0; box-shadow: none; border-radius: 10px; }
.cart-item__thumb:hover { transform: none; box-shadow: none; }
.cart-item__thumb .course-card__thumb .icon { width: 34px; height: 34px; }
.cart-item__thumb--live { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy), var(--slate)); color: var(--white); border-radius: 10px; }
.cart-item__thumb--live strong { font-family: var(--font-head); font-size: 1.5rem; line-height: 1; }
.cart-item__thumb--live span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lime); }
.cart-item__info { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.cart-item__info a strong { color: var(--navy); }
.cart-item__info a:hover strong { color: var(--lime-dark); }
.cart-item__info small { font-size: .82rem; }
.cart-item__price { display: grid; text-align: right; }
.cart-item__price strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--navy); }
.cart-item__price del { font-size: .85rem; color: var(--muted); }
.cart-item__price small { font-size: .72rem; }
.cart-list__foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 10px; }

.order-summary h2 { font-size: 1.2rem; }
.order-summary__rows { display: grid; gap: 12px; margin-bottom: 16px; }
.order-summary__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.order-summary__rows dt { color: var(--muted); }
.order-summary__rows dd { color: var(--navy); font-weight: 500; }
.order-summary__rows .is-discount dd { color: var(--lime-dark); }
.order-summary__total { border-top: 1px solid var(--border); padding-top: 12px; }
.order-summary__total dt, .order-summary__total dd { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy) !important; }
.order-summary__save { background: var(--lime-pale); color: #3F6E1C; font-size: .88rem; font-weight: 600; text-align: center; border-radius: 10px; padding: 8px; margin-bottom: 14px; }
.order-summary .checkout__note { margin-top: 12px; }
.pay-panel { display: grid; gap: 14px; }
.pay-panel h3 { margin: 0; }
.pay-panel .notice { margin: 0; }

.checkout-steps { list-style: none; display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.checkout-steps li { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--muted); padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); }
.checkout-steps span { width: 24px; height: 24px; border-radius: 50%; background: var(--slate-pale); display: flex; align-items: center; justify-content: center; font-size: .78rem; }
.checkout-steps .is-done { color: var(--lime-dark); }
.checkout-steps .is-done span { background: var(--lime); color: var(--white); }
.checkout-steps .is-active { color: var(--navy); border-color: var(--navy); }
.checkout-steps .is-active span { background: var(--navy); color: var(--white); }
.order-table { margin: 18px 0; }
.order-table tfoot td { font-family: var(--font-head); color: var(--navy); border-bottom: 0; }

.result-card { max-width: 560px; margin: 20px auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 44px 36px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.result-card--wide { max-width: 720px; }
.result-card h1 { font-size: 1.8rem; }
.result-card__icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; animation: popIn .6s var(--ease-spring); }
.result-card__icon .icon { width: 40px; height: 40px; stroke-width: 3; }
.result-card__icon--success { background: var(--lime); color: var(--white); box-shadow: 0 0 0 12px var(--lime-pale); }
.result-card__icon--failed { background: #D64545; color: var(--white); box-shadow: 0 0 0 12px #FFF1F1; }
.result-card__cancel { margin-top: 8px; }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--lime-pale); border-top-color: var(--lime); animation: spin .9s linear infinite; margin-bottom: 8px; }
.receipt-meta { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; text-align: left; background: var(--bg); border-radius: 12px; padding: 18px; margin: 10px 0; }
.receipt-meta div { display: grid; gap: 2px; }
.receipt-meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.receipt-meta dd { color: var(--navy); font-weight: 600; word-break: break-word; }
.receipt-items { width: 100%; display: grid; gap: 10px; text-align: left; margin: 6px 0 12px; }
.receipt-items li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.receipt-items strong { flex: 1; color: var(--navy); }
.receipt-items li > span:not(.tag) { font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.receipt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }

.account-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.account-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); background: var(--white); border: 1px solid var(--border); transition: all .2s; }
.account-tabs a .icon { width: 16px; height: 16px; }
.account-tabs a:hover { color: var(--navy); border-color: var(--slate-light); }
.account-tabs a.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

@media print {
  .navbar, .footer, .breadcrumbs, .back-to-top, .scroll-progress, .receipt .btn { display: none !important; }
  .shop-page { background: #fff; }
}
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; }
  .order-summary, .order-side { position: static; }
}
@media (max-width: 640px) {
  .cart-item { grid-template-columns: 80px 1fr auto; }
  .cart-item__thumb { width: 80px; }
  .cart-item__price { grid-column: 2; text-align: left; }
  .cart-item__remove { grid-row: 1; grid-column: 3; }
  .receipt-meta { grid-template-columns: 1fr; }
  .result-card { padding: 32px 20px; }
}
.shop-layout > * { min-width: 0; } .order-side .order-summary { display: block; }
.data-table a.btn--outline { color: var(--navy); }
.data-table a.btn--outline:hover { color: var(--white); }
.status-badge--success { background: var(--lime-pale); color: #3F6E1C; }
.status-badge--cancelled { background: #F1F1F4; color: #6B7A8F; }

/* =====================================================================
   TOASTS · MODALS · CART UI (responsive review)
   ===================================================================== */
html, body { overflow-x: clip; }
body.has-modal { overflow: hidden; }

/* ---- Toast notifications ---- */
.toasts { position: fixed; top: 92px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); animation: toastIn .45s var(--ease-spring) both; }
.toast.is-leaving { animation: toastOut .3s ease forwards; }
.toast__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--slate-pale); color: var(--navy); }
.toast__icon .icon { width: 16px; height: 16px; stroke-width: 3; }
.toast--success .toast__icon { background: var(--lime); color: var(--white); }
.toast--error .toast__icon { background: #D64545; color: var(--white); }
.toast--warning .toast__icon { background: #FFF6E0; color: #B7791F; }
.toast__body { flex: 1; min-width: 0; display: grid; gap: 4px; padding-top: 5px; }
.toast__msg { font-size: .92rem; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.toast__action { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; font-weight: 700; color: var(--lime-dark); justify-self: start; }
.toast__action .icon { width: 14px; height: 14px; transition: transform .2s; }
.toast__action:hover .icon { transform: translateX(3px); }
.toast__close { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.toast__close:hover { background: var(--bg); color: var(--navy); }
.toast__close .icon { width: 15px; height: 15px; }
.toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--slate-light); transform-origin: left; animation: toastTimer 5s linear forwards; }
.toast--success .toast__timer { background: var(--lime); }
.toast--error .toast__timer { background: #D64545; }
.toast--warning .toast__timer { background: #E0A526; }
.toast.is-paused .toast__timer { animation-play-state: paused; }
@keyframes toastTimer { to { transform: scaleX(0); } }

/* ---- Modal dialog ---- */
.modal-backdrop { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(21, 43, 71, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.modal-backdrop.is-open { opacity: 1; }
.modal { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px 28px 24px; text-align: center; transform: translateY(16px) scale(.97); transition: transform .3s var(--ease-spring); }
.modal-backdrop.is-open .modal { transform: none; }
.modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.modal__close:hover { background: var(--bg); color: var(--navy); }
.modal__close .icon { width: 17px; height: 17px; }
.modal__icon { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--slate-pale); color: var(--navy); }
.modal__icon .icon { width: 28px; height: 28px; }
.modal--success .modal__icon { background: var(--lime); color: var(--white); box-shadow: 0 0 0 10px var(--lime-pale); }
.modal--success .modal__icon .icon { stroke-width: 3; }
.modal--danger .modal__icon { background: #FFF1F1; color: #D64545; }
.modal__title { font-size: 1.3rem; margin-bottom: 8px; }
.modal__message { color: var(--muted); font-size: .95rem; margin-bottom: 18px; overflow-wrap: anywhere; }
.modal__item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; margin: 14px 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.modal__item strong { flex: 1; min-width: 0; color: var(--navy); font-size: .95rem; overflow-wrap: anywhere; }
.modal__price { font-family: var(--font-head); font-weight: 700; color: var(--navy); white-space: nowrap; }
.modal__item + .modal__message { margin-top: 4px; font-size: .85rem; }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal__actions .btn { width: 100%; padding-left: 12px; padding-right: 12px; }

/* ---- Cart badges & mobile header cart ---- */
.navbar__cart--mobile { display: none; margin-left: auto; }
.navbar__cart-count[hidden] { display: none; }
.navbar__cart-count.is-bumped { animation: popIn .45s var(--ease-spring); }

/* ---- Add-to-cart buttons ---- */
.cart-slot { width: 100%; }
.btn.is-added { border-color: var(--lime); color: var(--lime-dark); background: var(--lime-pale); }
.btn.is-added:hover { background: var(--lime); color: var(--white); }
.btn.is-loading { pointer-events: none; opacity: .8; }
.course-card__foot { flex-wrap: wrap; row-gap: 10px; }
.course-card__cart .btn { white-space: nowrap; }

/* ---- Cart page ---- */
.cart-list { padding: 4px 24px; }
.cart-item { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.cart-item__thumb { width: 120px; }
.cart-item__info { gap: 6px; }
.cart-item__title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--navy); line-height: 1.3; }
.cart-item__title:hover { color: var(--lime-dark); }
.cart-item__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cart-item__chips li { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--slate); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.cart-item__chips .icon { width: 12px; height: 12px; }
.cart-item__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; align-self: stretch; }
.cart-item__price { text-align: right; }
.cart-item__remove { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: .84rem; font-weight: 600; color: #C53030; transition: background .2s; }
.cart-item__remove:hover { background: #FFF1F1; }
.cart-item__remove .icon { width: 16px; height: 16px; }
.cart-list__foot .link-sm { display: inline-flex; align-items: center; }
.mobile-paybar { display: none; }

/* ---- Success / failed result cards ---- */
.result-card { grid-template-columns: minmax(0, 1fr); }
.result-card > * { max-width: 100%; }
.receipt-items li { flex-wrap: wrap; }
.receipt-items strong { min-width: 0; overflow-wrap: anywhere; }
.error-page__actions { flex-wrap: wrap; }

/* ---- Tables never push the page wider ---- */
.table-wrap { -webkit-overflow-scrolling: touch; }
.data-table td, .data-table th { overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .shop-page { padding-bottom: 110px; }
  .mobile-paybar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px 12px 18px; background: var(--navy); color: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg); animation: heroIn .4s var(--ease-out) both; }
  .mobile-paybar small { display: block; font-size: .75rem; color: var(--slate-light); }
  .mobile-paybar strong { font-family: var(--font-head); font-size: 1.2rem; }
  .shop-layout .order-summary .btn--primary { display: none; }
}
@media (max-width: 900px) {
  .navbar__cart--mobile { display: inline-flex; }
  .navbar__menu .navbar__cart { display: none; }
  .navbar__toggle { margin-left: 4px; }
  .toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
  .page-cart .toasts { bottom: 96px; }
}
@media (max-width: 640px) {
  .cart-list { padding: 4px 16px; }
  .cart-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px 14px; }
  .cart-item__thumb { width: 76px; }
  .cart-item__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--border); }
  .cart-item__price { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .cart-item__remove { grid-row: auto; grid-column: auto; }
  .cart-list__foot { flex-wrap: wrap; gap: 10px; }
  .order-table--stack thead { display: none; }
  .order-table--stack tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .order-table--stack tbody td { border: 0; padding: 0; }
  .order-table--stack tbody td[data-label="Item"] { grid-column: 1 / -1; }
  .order-table--stack tbody td[data-label="Price"] { text-align: right; }
  .order-table--stack tfoot td { padding: 12px 0; }
  .modal { padding: 28px 18px 18px; }
  .modal__actions { grid-template-columns: 1fr; }
  .modal__actions .btn:last-child { order: -1; }
  .receipt-items li { gap: 8px 10px; }
  .receipt-items strong { flex-basis: calc(100% - 90px); }
  .receipt-items .btn { margin-left: auto; }
  .result-card h1 { font-size: 1.5rem; }
  .checkout-steps li { padding: 5px 10px 5px 5px; font-size: .8rem; }
}
.modal__note { color: var(--muted); font-size: .85rem; margin: 0 0 18px; }
.modal__item { margin: 16px 0 10px; }

/* ---- Course detail buy card on tablets: image beside price & actions ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .buy-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
  .buy-card__thumb .course-card__thumb { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .buy-card__body { padding: 22px 24px; }
}
@media (max-width: 640px) {
  .buy-card__thumb .course-card__thumb { aspect-ratio: 16 / 7; }
}

/* ---- Segmented tabs never wrap ---- */
.segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented a { white-space: nowrap; }
@media (max-width: 480px) {
  .segmented a { padding: 9px 10px; font-size: .8rem; }
  .live-card { gap: 14px; padding: 16px; }
  .live-date { width: 60px; padding: 8px 4px; }
  .live-date strong { font-size: 1.3rem; }
}

/* ---- Grid items may shrink below their content width (prevents hidden overflow) ---- */
.hero__grid > *, .about-grid > *, .career-grid > *, .live-layout > *, .catalog > *, .course-layout > *,
.player-layout > *, .dash-layout > *, .dash-main > *, .dash-side > *, .builder-layout > *, .builder-main > *,
.apply-layout > *, .contact-layout > *, .auth__grid > *, .wizard__grid > *, .shop-layout > *, .course-main > *,
.form-row > *, .tile-grid > *, .studio-course > * { min-width: 0; }

/* ---- Compact list rows wrap on small screens ---- */
.mini-live li { flex-wrap: wrap; }
.mini-live li > div:nth-child(2) { flex: 1 1 180px; }
.mini-live .tag { white-space: normal; }
@media (max-width: 480px) {
  .mini-live li > .btn, .mini-live li > .tag { margin-left: 72px; }
  .panel__head { flex-wrap: wrap; }
}

/* ---- In-page form submission ---- */
#main { transition: opacity .2s; }
#main.is-swapping { opacity: .55; pointer-events: none; cursor: progress; }
.separate-account { text-align: center; display: grid; gap: 12px; justify-items: center; }
.separate-account h2 { font-size: 1.3rem; }
.separate-account__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* =========================================================================
   Agent module — agent shell, verification steps, documents, seats, back office
   ========================================================================= */
.agent-shell { background: var(--bg); padding: 32px 0 64px; min-height: calc(100vh - 76px); }
.agent-shell__grid { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.agent-shell__grid > * { min-width: 0; }
.agent-nav { position: sticky; top: 92px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 12px; box-shadow: var(--shadow-sm); }
.agent-nav__head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.agent-nav__head > div { min-width: 0; }
.agent-nav__head .status-badge { white-space: normal; line-height: 1.3; }
.agent-nav__head strong { display: block; color: var(--navy); font-size: .95rem; line-height: 1.3; margin-bottom: 4px; word-break: break-word; }
.agent-nav__links { display: grid; gap: 2px; }
.agent-nav__links a, .agent-nav__links button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: .9rem; font-weight: 500; color: var(--slate); background: none; border: 0; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.agent-nav__links a:hover, .agent-nav__links button:hover { background: var(--bg); color: var(--navy); }
.agent-nav__links a.is-active { background: var(--slate-pale); color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--lime); }
.agent-nav__links .icon { width: 18px; height: 18px; flex-shrink: 0; }
.agent-nav__links form { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.agent-nav__links button:hover { color: #B83333; background: #FFF1F1; }
.agent-nav__count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--lime); color: var(--white); font-style: normal; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.agent-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.agent-main > .tile-grid { margin-bottom: 0; }
.agent-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.agent-head h1 { font-family: var(--font-head); font-size: 1.6rem; color: var(--navy); line-height: 1.2; }
.agent-head p { margin-top: 4px; }
.agent-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.agent-hero { text-align: center; padding: 40px 32px; display: grid; justify-items: center; gap: 12px; }
.agent-hero h1 { font-family: var(--font-head); color: var(--navy); font-size: 1.5rem; }
.agent-hero__msg { max-width: 560px; font-size: 1.02rem; color: var(--navy); }
.agent-hero .notice { text-align: left; max-width: 560px; margin: 0; }
.agent-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.agent-cols > .panel { margin: 0; }
.page-agent .panel { margin-bottom: 0; }
.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tile-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Verification progress */
.verify-steps { list-style: none; display: grid; gap: 10px; }
.verify-steps__item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.verify-steps__dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFF6E0; color: #A86B00; }
.verify-steps__dot .icon { width: 18px; height: 18px; }
.verify-steps__label { font-weight: 600; color: var(--navy); }
.verify-steps__state { font-size: .84rem; color: var(--muted); }
.verify-steps__item.is-done .verify-steps__dot { background: var(--lime-pale); color: var(--lime-dark); }
.verify-steps__item.is-done { border-color: #CFE7B8; }
.verify-steps__item.is-review .verify-steps__dot { background: var(--slate-pale); color: var(--navy); }
.verify-steps__item.is-failed .verify-steps__dot { background: #FFF1F1; color: #B83333; }
.kyc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mini-steps--light li { color: var(--white); }
.mini-steps--light span { background: rgba(255, 255, 255, .14); color: var(--lime); }

/* Documents */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.doc-list { list-style: none; display: grid; gap: 10px; }
.doc-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.doc-row__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--slate-pale); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-row__icon .icon { width: 20px; height: 20px; }
.doc-row__info { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.doc-row__info strong { color: var(--navy); }
.doc-row__upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-row__pick { cursor: pointer; }
.doc-row__pick input { display: none; }
.text-warn { color: #A86B00; }

/* Seats, catalogue, quantity */
.agent-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.seat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.seat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.seat-card__thumb { display: block; border: 0; border-radius: 0; box-shadow: none; background: none; }
.seat-card__thumb:hover { transform: none; box-shadow: none; }
.seat-card__thumb, .seat-card__thumb .course-card__thumb { width: 100%; }
.seat-card__thumb .course-card__thumb { height: 120px; aspect-ratio: auto; }
.seat-card__body { padding: 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.seat-card__body .tag { justify-self: start; }
.seat-card__foot { margin-top: auto; padding-top: 10px; display: grid; gap: 10px; }
.seat-card__foot .price { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.15rem; }
.qty-form { display: flex; align-items: center; gap: 8px; }
.qty-input { width: 76px !important; padding: 8px 10px !important; text-align: center; }
.seat-card .qty-form .btn { flex: 1; }
.search-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search-inline .form-control { flex: 1; min-width: 160px; width: auto; }
.search-inline select.form-control { flex: 0 1 220px; }
.cart-item--agent { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; }
.shop-layout--agent { margin-top: 0; }
form.inline { display: inline; }

/* Back office */
.bo-tabs { margin-bottom: 24px; }
.course-aside--static > .panel + .panel { margin-top: 20px; }
.bo-filter { gap: 12px; flex-wrap: wrap; }
.bo-filter .search-inline { flex: 1; }
.bo-label { display: block; font-weight: 600; font-size: .86rem; color: var(--navy); margin: 10px 0 6px; }
.bo-verify { list-style: none; display: grid; gap: 10px; }
.bo-verify li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.bo-verify li > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.bo-verify li strong { color: var(--navy); }
.bo-verify li.is-ok { border-color: #CFE7B8; background: #FBFDF8; }
.status-badge--verified { background: var(--lime-pale); color: #3F6E1C; }
.bo-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.bo-inline-form .form-control { flex: 1; min-width: 180px; padding: 8px 12px; }
.bo-blockers { background: #FFF6E0; color: #7A4F00; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; font-size: .88rem; }
.bo-blockers ul { margin: 6px 0 0 18px; display: grid; gap: 2px; }
.bo-ready { display: flex; align-items: center; gap: 8px; background: var(--lime-pale); color: #3F6E1C; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; font-weight: 600; }
.bo-ready .icon { width: 18px; height: 18px; }
.bo-action { border: 1px solid var(--border); border-radius: 12px; margin: 12px 0; }
.bo-action summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; }
.bo-action summary::after { content: '+'; color: var(--muted); }
.bo-action[open] summary::after { content: '–'; }
.bo-action form { padding: 0 14px 14px; }
.decision-form textarea.form-control { margin-bottom: 12px; }
.decision-form + .btn, .bo-action + .btn { margin-top: 12px; }
.check-list { border: 0; display: grid; gap: 8px; margin-bottom: 4px; }
.detail-list--compact { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.detail-list--compact div { display: flex; justify-content: space-between; gap: 12px; }
.detail-list--compact dt { text-transform: none; letter-spacing: 0; font-size: .86rem; }
.bo-rate { display: block; margin: 0 0 14px; }
.bo-rate__row { display: flex; gap: 8px; }
.bo-rate__row .form-control { max-width: 120px; }
.bo-history { margin-top: 14px; }
.bo-history summary { cursor: pointer; font-weight: 600; color: var(--slate); font-size: .9rem; }
.plain-list { list-style: none; display: grid; gap: 8px; margin-top: 10px; font-size: .9rem; }
.bo-feed li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.bo-feed li:last-child { border-bottom: 0; }
.bo-bulk { display: flex; justify-content: flex-end; margin-top: 16px; }
.bo-reverse { display: inline-block; text-align: left; }
.bo-reverse summary { list-style: none; }
.bo-reverse summary::-webkit-details-marker, .bo-action summary::-webkit-details-marker { display: none; }
.bo-reverse[open] .bo-inline-form { min-width: 260px; }
.verify-dots { white-space: nowrap; }
.verify-dots span { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #F1F1F4; color: #8A96A6; margin: 1px; }
.verify-dots span.is-ok { background: var(--lime-pale); color: #3F6E1C; }
.audit-log { list-style: none; display: grid; gap: 0; margin-top: 12px; border-left: 2px solid var(--border); padding-left: 18px; }
.audit-log li { position: relative; padding: 0 0 14px; display: grid; gap: 2px; }
.audit-log li::before { content: ''; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); border: 2px solid var(--slate-light); }
.audit-log strong { color: var(--navy); font-size: .92rem; }
.audit-log__kv { display: inline-block; font-size: .78rem; color: var(--slate); background: var(--bg); border-radius: 6px; padding: 1px 7px; margin: 2px 2px 0 0; word-break: break-word; }

/* Agent statuses */
.status-badge--submitted, .status-badge--under_review, .status-badge--pending_manual { background: var(--slate-pale); color: var(--navy); }
.status-badge--email_pending, .status-badge--mobile_pending, .status-badge--kyc_pending, .status-badge--documents_required,
.status-badge--resubmit, .status-badge--not_started { background: #FFF6E0; color: #A86B00; }
.status-badge--available { background: var(--slate-pale); color: var(--navy); }
.status-badge--assigned { background: var(--lime-pale); color: #3F6E1C; }
.status-badge--revoked, .status-badge--reversed, .status-badge--superseded { background: #F1F1F4; color: #6B7A8F; }

@media (max-width: 1100px) {
  .tile-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .tile-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .agent-shell { padding-top: 16px; }
  .agent-shell__grid { grid-template-columns: 1fr; gap: 18px; }
  .agent-nav { position: static; padding: 10px; }
  .agent-nav__head { padding: 4px 6px 10px; margin-bottom: 6px; }
  .agent-nav__links { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .agent-nav__links::-webkit-scrollbar { display: none; }
  .agent-nav__links a, .agent-nav__links button { white-space: nowrap; width: auto; padding: 8px 12px; }
  .agent-nav__links a.is-active { box-shadow: inset 0 -3px 0 var(--lime); }
  .agent-nav__links form { margin: 0; padding: 0 0 0 4px; border-top: 0; border-left: 1px solid var(--border); }
  .agent-cols, .kyc-cards { grid-template-columns: minmax(0, 1fr); }
  .cart-item--agent { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .tile-grid--4, .tile-grid--5 { grid-template-columns: 1fr 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .verify-steps__item { grid-template-columns: auto 1fr; }
  .verify-steps__state { grid-column: 2; }
  .verify-steps__item .btn { grid-column: 1 / -1; }
  .agent-head h1 { font-size: 1.35rem; }
  .agent-hero { padding: 28px 18px; }
  .bo-verify li { flex-direction: column; }
}
/* Agent cart/checkout have no mobile pay bar — keep the summary button visible */
@media (max-width: 1024px) {
  .shop-layout--agent .order-summary .btn--primary { display: flex; }
}
@media (max-width: 900px) {
  .table-wrap .data-table--wide { min-width: 720px; }
  .table-wrap .data-table--wide td, .table-wrap .data-table--wide th { overflow-wrap: normal; }
  .shop-layout--agent { grid-template-columns: minmax(0, 1fr); }
}

/* Imported catalogue: extra category colours + course reviews */
.course-card[data-category="marketing"] .course-card__thumb { background: linear-gradient(135deg, #2F5D50, #7DC242); }
.course-card[data-category="design-creative"] .course-card__thumb { background: linear-gradient(135deg, #4A3F75, #5A7391); }
.course-card[data-category="languages"] .course-card__thumb { background: linear-gradient(135deg, #1E3A5F, #4F8A8B); }
.course-card[data-category="lifestyle-wellness"] .course-card__thumb { background: linear-gradient(135deg, #3E7B5A, #A3C96B); }
.course-card[data-category="academics-test-prep"] .course-card__thumb { background: linear-gradient(135deg, #24496E, #8FA3BC); }
.review-list { list-style: none; display: grid; gap: 16px; margin-top: 4px; }
.review { display: flex; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; padding-bottom: 0; }
.review > div { min-width: 0; }
.review__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.review__head strong { color: var(--navy); }
.review p { color: var(--text); font-size: .94rem; }

/* =========================================================================
   Course catalogue redesign — category pills, equal-height cards, pagination
   ========================================================================= */
.catalog-hero { padding-bottom: 56px; }
.catalog-section { padding-top: 36px; }
.catalog__results { min-width: 0; }

/* Cards: same height in a row, clamped text, footer pinned to the bottom */
.course-grid { align-items: stretch; }
.course-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.course-card { height: 100%; min-width: 0; }
.course-card__body { padding: 18px 20px 20px; gap: 0; }
.course-card__title { font-size: 1.04rem; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); }
.course-card__instructor { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 10px; }
.course-card__instructor > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar--xs { width: 24px; height: 24px; font-size: .62rem; }
.course-card__rating { min-height: 24px; margin-bottom: 12px; }
.course-card__meta { list-style: none; flex-wrap: wrap; gap: 6px 16px; }
.course-card__meta li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.course-card__meta .icon { width: 16px; height: 16px; color: var(--slate); }
.course-card__foot { flex-wrap: wrap; row-gap: 10px; }
.course-card__foot .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 1.2rem; }
.course-card__foot .price del { margin-left: 0; }
.course-card__thumb img { transition: transform .6s var(--ease-out); }
.course-card .badge { max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pagination with previous / next labels and elided page numbers */
.pagination--catalog { align-items: center; flex-wrap: wrap; gap: 10px; }
.pagination__pages { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pagination .pagination__pages a, .pagination .pagination__pages span { min-width: 42px; }
.pagination .pagination__step { gap: 6px; padding: 0 14px; }
.pagination .pagination__gap { border: 0; background: none; min-width: 24px; color: var(--muted); }
.pagination .pagination__status { display: none; border: 0; background: none; font-weight: 500; color: var(--muted); }
.pagination .is-current { box-shadow: 0 6px 16px rgba(30, 58, 95, .25); }

@media (max-width: 640px) {
  .catalog-hero { padding-bottom: 40px; }
  .pagination .pagination__pages { display: none; }
  .pagination .pagination__status { display: inline-flex; }
  .pagination--catalog { justify-content: space-between; }
}

/* Learner signup: two-step indicator + verification page */
.signup-steps { list-style: none; display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.signup-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--muted); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg); }
.signup-steps span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--border); font-size: .75rem; }
.signup-steps .is-active { color: var(--navy); background: var(--slate-pale); }
.signup-steps .is-active span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.signup-steps .is-done { color: #3F6E1C; background: var(--lime-pale); }
.signup-steps .is-done span { background: var(--lime); border-color: var(--lime); color: var(--white); }
.otp-cards--stack { margin-top: 20px; }
.signup-cancel { margin-top: 18px; text-align: center; }
/* Card footer: price row + one actions row, identical on every card */
.course-card__foot { flex-wrap: nowrap; justify-content: space-between; align-items: center; min-height: 58px; }
.course-card__foot .price { min-width: 0; }
.course-card__actions { display: flex; align-items: stretch; gap: 8px; padding-top: 12px; }
.course-card__actions > .btn { flex-shrink: 0; }
.course-card__actions .course-card__cart { flex: 1; min-width: 0; margin-top: 0; }
.course-card__actions .course-card__cart .btn { width: 100%; height: 100%; overflow: hidden; text-overflow: ellipsis; }
.course-card__actions .cart-slot, .course-card__actions .cart-actions, .course-card__actions .cart-actions form { height: 100%; }
/* Pagination: inner wrappers must not inherit the page-button box styles */
.pagination .pagination__pages, .pagination .pagination__step > span {
  border: 0; background: none; padding: 0; min-width: 0; height: auto; box-shadow: none;
}
.pagination .pagination__step > span { color: inherit; font-weight: inherit; }
.pagination .pagination__step.is-disabled { pointer-events: none; }

/* =========================================================================
   Course catalogue (/courses/) — layout, filter panel, toolbar
   One breakpoint scheme: sidebar ≥ 1025px · drawer ≤ 1024px · 1 column ≤ 640px
   ========================================================================= */
.catalog { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 32px; align-items: start; }
.catalog__results { min-width: 0; }
.course-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Sidebar panel */
.catalog__sidebar { position: sticky; top: 96px; max-height: calc(100vh - 112px); display: flex; min-width: 0; }
.filter-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.filter-panel__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.filter-panel__head h2 { display: flex; align-items: center; gap: 8px; flex: 1; margin: 0; font-size: 1rem; }
.filter-panel__head h2 .icon { width: 18px; height: 18px; color: var(--lime-dark); }
.filter-panel__head h2 em { font-style: normal; font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lime); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.filter-panel__close { display: none; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--white); color: var(--navy); align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, background .2s; }
.filter-panel__close:hover { border-color: var(--navy); background: var(--bg); }
.filter-panel__close .icon { width: 18px; height: 18px; }
.filter-panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.filter-panel__foot { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--white); }
.filter-panel__foot .btn { padding: 10px 16px; font-size: .9rem; }

/* Search inside the panel */
.filter-search { position: relative; margin-bottom: 6px; }
.filter-search .icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--slate); pointer-events: none; }
.filter-search input { width: 100%; height: 42px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font: inherit; font-size: .9rem; color: var(--text); transition: border-color .2s, background .2s, box-shadow .2s; }
.filter-search input::placeholder { color: var(--muted); }
.filter-search input:focus { outline: 0; border-color: var(--lime); background: var(--white); box-shadow: 0 0 0 3px rgba(125, 194, 66, .18); }

/* Collapsible sections */
.filter-section { border-top: 1px solid var(--border); padding: 2px 0 10px; }
.filter-section:first-of-type { border-top: 0; }
.filter-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 8px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy); user-select: none; }
.filter-section > summary::-webkit-details-marker { display: none; }
.filter-section > summary::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .2s; }
.filter-section[open] > summary::after { transform: rotate(-135deg); }
.filter-section__count { margin-left: auto; font-family: var(--font-body); font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lime-pale); color: #3F6E1C; display: inline-flex; align-items: center; justify-content: center; }

/* Options: one consistent checkbox / radio row for every facet */
.filter-options { display: grid; gap: 1px; }
.filter-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--text); transition: background .15s; }
.filter-option:hover { background: var(--bg); }
.filter-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filter-option__box { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid #B8C4D3; border-radius: 5px; background: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.filter-option--radio .filter-option__box { border-radius: 50%; }
.filter-option:hover .filter-option__box { border-color: var(--slate); }
.filter-option input:checked + .filter-option__box { background: var(--lime); border-color: var(--lime); }
.filter-option input:checked + .filter-option__box::after { content: ''; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.filter-option--radio input:checked + .filter-option__box::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--white); transform: none; }
.filter-option input:focus-visible + .filter-option__box { outline: 2px solid var(--navy); outline-offset: 2px; }
.filter-option__label { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.filter-option__label .rating-stars { font-size: .8rem; margin-right: 4px; }
.filter-option em { flex-shrink: 0; font-style: normal; font-size: .74rem; font-weight: 600; min-width: 28px; text-align: center; color: var(--muted); background: var(--bg); padding: 1px 7px; border-radius: 999px; }
.filter-option.is-selected { background: var(--lime-pale); }
.filter-option.is-selected .filter-option__label { color: var(--navy); font-weight: 600; }
.filter-option.is-selected em { background: var(--white); color: #3F6E1C; }
.filter-option.is-empty { opacity: .45; }

/* Results toolbar */
.catalog__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.catalog__count { color: var(--muted); font-size: .95rem; line-height: 1.3; }
.catalog__count strong { font-family: var(--font-head); font-size: 1.35rem; color: var(--navy); margin-right: 2px; }
.catalog__count small { display: block; font-size: .8rem; margin-top: 2px; }
.catalog__tools { display: flex; align-items: center; gap: 10px; }
.catalog__tools .sort-form { display: flex; gap: 8px; }
.catalog__tools .form-control { height: 42px; padding: 0 36px 0 14px; font-size: .9rem; min-width: 0; width: auto; }
.catalog__tools .btn { height: 42px; }
.filter-toggle { display: none; gap: 8px; }
.filter-toggle__count { font-style: normal; font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lime); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }

/* Selected filters */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.active-filter { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: .82rem; font-weight: 600; transition: background .2s; }
.active-filter span[aria-hidden] { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; }
.active-filter:hover { background: var(--navy-dark); }
.active-filters__clear { margin-left: 4px; font-weight: 600; }
body.has-drawer { overflow: hidden; }

/* Small laptops: narrower sidebar, two card columns */
@media (max-width: 1199px) {
  .catalog { grid-template-columns: 252px minmax(0, 1fr); gap: 24px; }
  .course-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet & mobile: the panel becomes an off-canvas drawer, results use the full width */
@media (max-width: 1024px) {
  .catalog { grid-template-columns: minmax(0, 1fr); }
  .catalog__sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 150; width: min(380px, 92vw); max-height: none; height: 100%; background: var(--white); box-shadow: var(--shadow-lg); transform: translateX(-102%); visibility: hidden; transition: transform .35s var(--ease-out), visibility 0s linear .35s; }
  .catalog__sidebar.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease-out), visibility 0s; }
  .filter-panel { border: 0; border-radius: 0; box-shadow: none; height: 100%; }
  .filter-panel__head { padding: 14px 18px; }
  .filter-panel__close { display: inline-flex; }
  .filter-panel__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(30, 58, 95, .06); }
  .filter-panel__foot .btn { padding: 12px 16px; }
  .filter-option { min-height: 42px; }
  .filter-toggle { display: inline-flex; }
  .course-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 640px) {
  .catalog-hero { padding-bottom: 40px; }
  .course-grid--catalog { grid-template-columns: minmax(0, 1fr); }
  .catalog__toolbar { align-items: stretch; }
  /* Filters button on its own row (large touch target); sort + per-page share the next row */
  .catalog__tools { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
  .catalog__tools .filter-toggle { justify-content: center; }
  .catalog__tools .sort-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
  .catalog__tools .form-control { width: 100%; padding: 0 30px 0 12px; font-size: .88rem; }
}

/* =========================================================================
   Live classes: image cards with category and status
   ========================================================================= */
.live-card { grid-template-columns: 150px minmax(0, 1fr) auto; }
.live-card__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.live-card__thumb:hover { transform: none; box-shadow: none; }
.live-card__thumb .course-card__thumb { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.live-card__thumb .course-card__thumb .icon { width: 40px; height: 40px; }
.live-card__date { position: absolute; left: 8px; top: 8px; z-index: 3; background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 4px 8px; text-align: center; line-height: 1.1; box-shadow: var(--shadow-sm); }
.live-card__date strong { display: block; font-family: var(--font-head); font-size: 1.1rem; color: var(--navy); }
.live-card__date span { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--slate); }
.live-card__body { min-width: 0; }
.live-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.live-card__tags .live-card__tag { margin-bottom: 0; }
.live-card__tags .live-card__price { margin-left: 0; }
.live-card__cat { font-size: .72rem; font-weight: 600; color: var(--slate); background: var(--bg); padding: 3px 10px; border-radius: 6px; }
.live-card--cancelled h3 a { text-decoration: line-through; text-decoration-color: rgba(184, 51, 51, .5); }
.live-card--cancelled, .live-card--completed { background: #FBFCFD; }
.live-card--completed .live-card__thumb img, .live-card--cancelled .live-card__thumb img { filter: grayscale(.6); }
.live-toolbar { flex-wrap: wrap; gap: 12px; }
.live-filterbar { display: grid; gap: 10px; margin: 6px 0 20px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-row::-webkit-scrollbar { display: none; }
.filter-chip { white-space: nowrap; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--slate); font-size: .85rem; font-weight: 600; transition: all .15s; }
.filter-chip:hover { border-color: var(--navy); color: var(--navy); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
@media (max-width: 768px) {
  .live-card { grid-template-columns: 110px minmax(0, 1fr); }
  .live-card__actions { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .live-card { grid-template-columns: 1fr; }
  .live-card__thumb { aspect-ratio: 16 / 7; }
}
.course-card__meta li.course-card__outline { flex: 1 1 100%; min-width: 0; align-items: flex-start; white-space: normal; }
.course-card__outline .icon { margin-top: 2px; flex-shrink: 0; }
.course-outline { font-variant-numeric: tabular-nums; }
.course-outline > span { white-space: nowrap; }

/* =========================================================================
   Agent dashboard theme — the button green (#7DC242) is the main colour.
   Scoped to .agent-shell (templates/agents/_layout.html) so learner, creator and
   back-office pages keep the standard navy theme.
   ========================================================================= */
.agent-shell {
  /* Re-map the palette inside the agent area only: navy text/accents become deep green */
  --navy: #2F5D1B;
  --navy-dark: #234716;
  --slate: #557A43;
  --slate-light: #9DBF86;
  --slate-pale: #EAF5DF;
  --border: #DCEAD0;
  --bg: #F5FAEF;
  background: linear-gradient(180deg, #F2F9EA 0%, #F7FBF3 320px, #F7FBF3 100%);
}
/* Primary actions use the main green */
.agent-shell .btn--navy { background: var(--lime); color: var(--white); box-shadow: 0 8px 20px rgba(125, 194, 66, .3); }
.agent-shell .btn--navy:hover { background: var(--lime-dark); }
.agent-shell .btn--outline { border-color: var(--lime); color: var(--navy); }
.agent-shell .btn--outline:hover { background: var(--lime); border-color: var(--lime); color: var(--white); }
/* Sidebar navigation */
.agent-nav { border-top: 4px solid var(--lime); }
.agent-nav__links a:hover { background: var(--lime-pale); color: var(--navy); }
.agent-nav__links a.is-active { background: var(--lime); color: var(--white); box-shadow: 0 6px 14px rgba(125, 194, 66, .3); }
.agent-nav__links a.is-active .icon { color: var(--white); }
.agent-nav__links a.is-active .agent-nav__count { background: var(--white); color: var(--lime-dark); }
.agent-nav__links button:hover { color: #B83333; background: #FFF1F1; }
/* Avatars, tiles, panels and tables */
.agent-shell .avatar { background: linear-gradient(135deg, var(--lime), var(--lime-dark)); }
.agent-shell .tile__icon { background: var(--lime-pale); color: var(--lime-dark); }
.agent-shell .tile { border-color: var(--border); }
.agent-shell .tile:hover { border-color: var(--lime); }
.agent-shell .tile strong { color: var(--navy); }
.agent-shell .panel { border-color: var(--border); }
.agent-shell .data-table th { color: var(--slate); background: var(--bg); }
.agent-shell .data-table tbody tr:hover td { background: #F3F9EC; }
.agent-shell .segmented a.is-active { color: var(--lime-dark); }
.agent-shell .form-control:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(125, 194, 66, .18); }
.agent-shell .verify-steps__item.is-review .verify-steps__dot { background: var(--lime-pale); color: var(--lime-dark); }
@media (max-width: 900px) {
  .agent-nav { border-top-width: 3px; }
  .agent-nav__links a.is-active { box-shadow: none; }
}