/* Bab ul Ilm Academy — Islamic Academic Design System (Material Design 3 structure) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@500&display=swap');
/* Arabic-script fonts -- Naskh suits Arabic/Persian, Nastaliq suits Urdu's distinct calligraphic style */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Nastaliq+Urdu:wght@400;600;700&display=swap');
:root {
    --teal-deep:   #083344;
    --teal-mid:    #0e5272;
    --teal-light:  #1a7a9e;
    --green-deep:  #0a3d1f;
    --green-mid:   #1f7a44;
    --gold:        #d4af5a;
    --gold-dark:   #b8973b;
    --gold-light:  #f0d78a;
    --cream:       #faf8f4;
    --white:       #ffffff;
    --text:        #1a1a1a;
    --text-mid:    #555;
    --text-light:  #888;
    --border:      #e0dbd2;
    /* M3 elevation scale: level 1 (resting cards) and level 3 (hover/dialogs) */
    --shadow:      0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --shadow-lg:   0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
    /* M3 shape scale */
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-full: 999px;
    --transition:  .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif; background: var(--cream); color: var(--text); line-height: 1.6; }
a { color: var(--teal-mid); text-decoration: none; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; height: auto; display: block; }

/* ── Internationalization: RTL (Urdu/Persian/Arabic) ──
   Layout-primitives pass, not a pixel-perfect mirror of every page yet --
   covers the chrome shared everywhere (nav, footer, forms, cards) so
   nothing reads backwards while individual pages get translated. */
html[lang="ur"] body, html[lang="ur"] input, html[lang="ur"] textarea, html[lang="ur"] select { font-family: 'Noto Nastaliq Urdu', 'Roboto', sans-serif; }
html[lang="fa"] body, html[lang="fa"] input, html[lang="fa"] textarea, html[lang="fa"] select,
html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select { font-family: 'Noto Naskh Arabic', 'Roboto', sans-serif; }

[dir="rtl"] { text-align: right; }
[dir="rtl"] .navbar { direction: rtl; }
[dir="rtl"] .nav-search input { text-align: right; }
[dir="rtl"] .nav-account-menu { left: 0; right: auto; }
[dir="rtl"] .footer-grid, [dir="rtl"] .course-meta, [dir="rtl"] .instructor-stats,
[dir="rtl"] .action-row, [dir="rtl"] .form-row, [dir="rtl"] .wizard-step { direction: rtl; }
[dir="rtl"] .form-label, [dir="rtl"] .form-hint { text-align: right; }
[dir="rtl"] .course-wizard-sidebar { direction: rtl; }
[dir="rtl"] .lesson-num, [dir="rtl"] .curriculum-lecture-check, [dir="rtl"] .step-num { margin-left: 0; }
/* Directional icons (next/back arrows) need to visually flip in RTL so "continue" still points the reading-forward direction */
[dir="rtl"] .icon-flip-rtl { transform: scaleX(-1); display: inline-block; }

/* ── Navbar ── */
.navbar {
    background: var(--green-deep);
    padding: 0 1.5rem;
    display: flex; align-items: center; gap: 1.5rem;
    height: 76px; position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.nav-brand { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav-search {
    flex: 1; max-width: 480px; display: flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.15);
    border-radius: var(--radius-full); padding: .5rem 1rem; transition: var(--transition);
}
.nav-search:focus-within { background: rgba(255,255,255,.16); border-color: var(--gold); }
.nav-search .lucide-icon { color: rgba(255,255,255,.6); flex-shrink: 0; }
.nav-search input {
    background: none; border: none; outline: none; color: var(--white);
    font-size: .88rem; flex: 1; min-width: 0; font-family: inherit;
}
.nav-search input::placeholder { color: rgba(255,255,255,.55); }
.nav-logo { height: 58px; width: auto; display: block; }
.nav-brand small { display: block; font-size: .85rem; color: rgba(255,255,255,.75); font-weight: 500; letter-spacing: .5px; }
.nav-links { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; flex-shrink: 0; }
.nav-links a { color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 500; padding: .4rem .8rem; border-radius: 6px; transition: var(--transition); }
.nav-links a:hover { background: rgba(255,255,255,.1); color: var(--gold); }
.nav-btn { background: var(--gold) !important; color: var(--green-deep) !important; font-weight: 700 !important; border-radius: 20px !important; }
.lucide-icon {
    width: 1em; height: 1em; stroke: currentColor; stroke-width: 2;
    vertical-align: -0.125em; flex-shrink: 0; display: inline-block;
}
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7em; height: 1.7em; border-radius: var(--radius-full);
    background: var(--green-deep); color: var(--white); font-weight: 700;
    font-size: 0.85em; flex-shrink: 0;
}
.nav-user {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--gold); font-size: .85rem; font-weight: 600;
    padding: .35rem .7rem; background: rgba(255,255,255,.08); border-radius: var(--radius-full);
    white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}

/* ── Account dropdown (avatar + menu, Udemy-style) ── */
.nav-account { position: relative; }
/* Language switcher: pinned to the far end of the navbar via flex order,
   after the auth/account controls (marketplace convention). The markup
   stays where it is in each page's copy-pasted navbar; in the mobile
   drawer (a flex column) this puts it at the bottom of the menu. */
.nav-links .nav-lang { order: 99; }
.nav-account-trigger {
    display: flex; align-items: center; gap: .4rem; background: none; border: none; cursor: pointer;
    padding: .3rem .5rem .3rem .3rem; border-radius: var(--radius-full); transition: var(--transition);
}
.nav-account-trigger:hover { background: rgba(255,255,255,.1); }
.nav-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--green-deep);
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.nav-avatar-img { object-fit: cover; }
.chat-avatar-img { object-fit: cover; }
.msg-group-avatar-img { object-fit: cover; }
.profile-avatar-img { object-fit: cover; border-radius: 50%; }
.nav-account-trigger .lucide-icon { color: rgba(255,255,255,.7); width: .9em; height: .9em; }
.nav-account-menu {
    position: absolute; top: calc(100% + 10px); right: 0; width: 260px;
    background: var(--white); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: .5rem 0; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: var(--transition); border: 1px solid var(--border);
}
.nav-account.open .nav-account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-account-header { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem 1rem; }
.nav-account-header .nav-avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.nav-account-name { font-weight: 700; font-size: .92rem; color: var(--text); }
.nav-account-email { font-size: .78rem; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.nav-menu-divider { height: 1px; background: var(--border); margin: .4rem 0; }
.nav-account-menu a {
    display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem;
    color: var(--text-mid); font-size: .88rem; font-weight: 500; border-radius: 0;
}
.nav-account-menu a:hover { background: var(--cream); color: var(--green-deep); }
.nav-account-menu a .lucide-icon { width: 1.05em; height: 1.05em; color: var(--text-light); }

/* ── Hero ── */
.hero {
    background: linear-gradient(135deg, var(--green-deep) 0%, #1a3d28 50%, var(--teal-deep) 100%);
    color: var(--white); padding: 5rem 1.5rem; text-align: center; position: relative; overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='rgba(212,175,90,0.06)' stroke-width='1'/%3E%3C/svg%3E") repeat;
}
.hero-content { position: relative; max-width: 700px; margin: 0 auto; }
.hero-arabic { font-size: 1.2rem; color: var(--gold-light); letter-spacing: 2px; margin-bottom: .8rem; font-family: 'Amiri', serif; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.hero h1 span { color: var(--gold); }
.hero p { font-size: 1.05rem; opacity: .85; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 3rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat .num { font-size: 2rem; font-weight: 800; color: var(--gold); }
.hero-stat .lbl { font-size: .8rem; opacity: .7; }

/* ── Mission/Vision band (shown to logged-out visitors only) ──
   Helps a returning visitor whose session expired understand what this
   platform is and that they need to log back in, instead of landing on an
   ambiguous page with no context. */
.mission-band { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3rem 1.5rem; }
.mission-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.mission-grid h3 { font-size: 1.1rem; color: var(--green-deep); margin-bottom: .5rem; font-weight: 700; }
.mission-grid p { color: var(--text-mid); font-size: .95rem; }
.mission-cta { text-align: center; margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--border); max-width: 1180px; margin-left: auto; margin-right: auto; }
.mission-cta p { color: var(--text-mid); margin-bottom: 1rem; font-size: .95rem; font-weight: 600; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.6rem; border-radius: 25px; font-size: .95rem; font-weight: 600; cursor: pointer; border: none; transition: var(--transition); text-decoration: none; }
.btn-primary  { background: var(--gold); color: var(--green-deep); }
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-1px); color: var(--green-deep); }
.btn-secondary { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); }
.btn-secondary:hover { background: rgba(255,255,255,.1); color: var(--white); }
.btn-teal  { background: var(--teal-mid); color: var(--white); }
.btn-teal:hover { background: var(--teal-light); color: var(--white); }
.btn-green { background: var(--green-deep); color: var(--white); }
.btn-green:hover { background: #1a5c33; color: var(--white); }
.btn-outline { background: transparent; color: var(--teal-mid); border: 2px solid var(--teal-mid); }
.btn-outline:hover { background: var(--teal-mid); color: var(--white); }
.btn-sm { padding: .4rem 1rem; font-size: .85rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Icon Buttons (Material Design 3 icon-button + tooltip pattern) ──
   M3 spec: 24dp icon in a 48dp touch target, with a plain tooltip showing
   the action's label on hover/focus — used for compact row actions instead
   of multi-word buttons that wrap and break card layouts on mobile. */
.action-row { display: flex; gap: .4rem; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px; padding: 0;
    border-radius: 50%; border: 1.5px solid var(--border);
    background: var(--white); color: var(--text-mid);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    transition: var(--transition); position: relative; flex-shrink: 0;
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--cream); border-color: var(--teal-mid); color: var(--teal-mid); outline: none; }
.icon-btn.icon-btn-danger:hover { background: #fdecea; border-color: #c00; color: #c00; }
.icon-btn .count-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--gold); color: var(--green-deep);
    font-size: .62rem; font-weight: 700; border-radius: 999px;
    padding: 0 4px; min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1a1a1a; color: #fff; font-size: .72rem; font-weight: 500;
    padding: .35rem .6rem; border-radius: 6px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 50;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }

/* ── Container ── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
/* Only vertical padding — must NOT touch left/right, or it zeroes out
   .container's horizontal padding when both classes are combined. */
.section { padding-top: 4rem; padding-bottom: 4rem; }
.section-title { font-size: 1.8rem; font-weight: 700; color: var(--green-deep); margin-bottom: .4rem; }
.section-title span { color: var(--gold-dark); }
.section-sub { color: var(--text-mid); margin-bottom: 2.5rem; }

/* ── Course Cards ── */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1.5rem; }

/* ── Cart & Checkout ── */
.cart-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
.cart-item { display: flex; gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
.cart-item-cover { width: 120px; height: 68px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.cart-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { display: block; font-weight: 700; color: var(--text); font-size: .95rem; margin-bottom: .2rem; }
.cart-item-title:hover { color: var(--teal-mid); }
.cart-item-teacher { font-size: .8rem; color: var(--text-light); margin-bottom: .4rem; }
.cart-item-remove { background: none; border: none; color: var(--teal-mid); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.cart-item-remove:hover { color: var(--gold-dark); }
.cart-item-price { font-weight: 800; font-size: 1.1rem; color: var(--green-deep); flex-shrink: 0; }
.cart-summary { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); border: 1.5px solid var(--border); position: sticky; top: 92px; }
.cart-summary-label { font-size: .85rem; color: var(--text-light); margin-bottom: .3rem; }
.cart-summary-total { font-size: 1.8rem; font-weight: 800; color: var(--green-deep); }
.nav-cart-link { position: relative; display: inline-flex; align-items: center; color: rgba(255,255,255,.8); padding: .4rem; }
.nav-cart-link:hover { color: var(--gold); }
.nav-cart-badge { position: absolute; top: -2px; right: -2px; background: var(--gold); color: var(--green-deep); font-size: .65rem; font-weight: 800; border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
@media (max-width: 768px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
}

.course-card {
    background: var(--white); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    border: 1.5px solid var(--border); transition: var(--transition);
    display: flex; flex-direction: column;
    position: relative;
}
.course-card:hover {
    transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10,61,31,.22);
    border-color: var(--gold); position: relative; z-index: 30;
}

.course-cover {
    height: 160px; background: linear-gradient(135deg, var(--green-deep), #2d7a4a);
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; position: relative; overflow: hidden;
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-level { position: absolute; top: .8rem; right: .8rem; }
.course-body { padding: 1.2rem; flex: 1; }
.course-subject { font-size: .75rem; font-weight: 700; color: var(--teal-mid); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .4rem; }
.course-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; line-height: 1.35; }
.course-desc  { font-size: .85rem; color: var(--text-mid); margin-bottom: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-meta  { display: flex; align-items: center; gap: .8rem; font-size: .8rem; color: var(--text-light); flex-wrap: wrap; }
.course-footer { padding: .9rem 1.2rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.course-price { font-size: 1.1rem; font-weight: 700; color: var(--green-deep); }
.course-price.free { color: #2e7d32; }
.course-bestseller { position: absolute; top: .8rem; left: .8rem; background: var(--gold); color: var(--green-deep); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: .2rem .55rem; border-radius: 4px; }

/* Hover preview (inspired by Alison.com's catalog tiles): instead of a flat
   tint over the thumbnail, the whole tile presents an elevated white panel
   with proper type hierarchy — closer to how Coursera/LinkedIn Learning
   surface a quick-look card on hover. Contained within the tile's own
   bounds (no overflow:visible needed on the parent grid). */
.course-hover-info {
    position: absolute; inset: 0; background: var(--white); color: var(--text);
    padding: 1.3rem; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none;
    overflow-y: auto;
}
.course-card:hover .course-hover-info { opacity: 1; visibility: visible; }
.course-hover-info .course-subject { margin-bottom: .3rem; }
.course-hover-info h4 { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: .5rem; }
.course-hover-info .course-rating-mini { margin-bottom: .6rem; }
.course-hover-info p {
    font-size: .85rem; line-height: 1.55; color: var(--text-mid);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 .8rem;
}
.course-hover-info .meta { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--text-light); margin-bottom: .8rem; }
.course-hover-info .cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.course-rating-mini { display: flex; align-items: center; gap: .3rem; font-size: .8rem; margin-bottom: .5rem; }
.course-rating-mini .num { font-weight: 700; color: var(--gold-dark); }
.course-rating-mini .stars { color: var(--gold-dark); letter-spacing: 1px; font-size: .75rem; }
.course-rating-mini .count { color: var(--text-light); }

/* ── Horizontal scroll carousel (Udemy-style course rows) ── */
.carousel-row { display: flex; gap: 1.2rem; overflow-x: auto; padding-bottom: .6rem; scroll-behavior: smooth; scrollbar-width: thin; }
.carousel-row::-webkit-scrollbar { height: 6px; }
.carousel-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.carousel-row .course-card { flex: 0 0 280px; }
.carousel-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }

/* ── Teach CTA banner ── */
.teach-cta-band { background: var(--green-deep); color: var(--white); border-radius: var(--radius-lg); padding: 2.2rem 2.5rem; margin: 3rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.teach-cta-band h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.teach-cta-band p { opacity: .8; font-size: .92rem; }

/* ── Trust stats strip ── */
.trust-strip { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2rem 1.5rem; display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; text-align: center; }
.trust-strip .num { font-size: 1.7rem; font-weight: 800; color: var(--green-deep); }
.trust-strip .lbl { font-size: .8rem; color: var(--text-light); }


/* ── Student Roster Cards (teacher's per-course student list) ── */
.student-card {
    background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border);
    box-shadow: var(--shadow); padding: 1.1rem; display: flex; align-items: center; gap: .9rem;
}
.student-avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--teal-mid); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem;
    flex-shrink: 0;
}
.student-info { flex: 1; min-width: 0; }
.student-name { font-weight: 600; font-size: .95rem; }
.student-meta { font-size: .78rem; color: var(--text-light); }

/* ── Chat (Material Design 3: elevated panel, avatars, timestamps) ── */
.chat-page { background: var(--cream); padding: 1.5rem; }
.chat-wrap {
    display: flex; height: calc(100vh - 64px - 3rem); max-height: 760px;
    max-width: 1180px; margin: 0 auto;
    background: var(--white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    overflow: hidden;
}
.chat-list { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; background: var(--white); display: flex; flex-direction: column; }
.chat-list-header { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 1rem; color: var(--teal-deep); }
.chat-list-item { padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--transition); display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; }
.chat-list-item:hover { background: var(--cream); }
.chat-list-item.active { background: var(--cream); box-shadow: inset 3px 0 0 var(--teal-mid); }
.chat-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--teal-mid); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; }
.chat-preview-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.chat-preview-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-time { font-size: .7rem; color: var(--text-light); flex-shrink: 0; }
.chat-preview-msg { font-size: .8rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chat-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-dark); flex-shrink: 0; }
.chat-empty-list { padding: 2rem 1.2rem; text-align: center; color: var(--text-light); font-size: .85rem; line-height: 1.6; }

.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--cream); min-width: 0; }
.chat-header { padding: .9rem 1.3rem; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.chat-back { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-mid); padding: 0 .3rem 0 0; }
.chat-header-name { font-weight: 700; font-size: .98rem; }
.chat-header-sub { font-size: .76rem; color: var(--text-light); }

.chat-messages { flex: 1; overflow-y: auto; padding: 1.3rem; display: flex; flex-direction: column; gap: .25rem; scroll-behavior: smooth; }
.msg-group { display: flex; gap: .6rem; max-width: 72%; margin-bottom: .7rem; }
.msg-group.sent { margin-left: auto; flex-direction: row-reverse; }
.msg-group-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-mid); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; align-self: flex-end; }
.msg-bubbles { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.msg-group.sent .msg-bubbles { align-items: flex-end; }
.msg { padding: .6rem .9rem; border-radius: 16px; font-size: .9rem; line-height: 1.45; word-wrap: break-word; }
.msg-sent { background: var(--teal-mid); color: var(--white); border-bottom-right-radius: 4px; }
.msg-recv { background: var(--white); color: var(--text); border-bottom-left-radius: 4px; box-shadow: var(--shadow); }
.msg-time { font-size: .68rem; color: var(--text-light); padding: 0 .3rem; display: flex; align-items: center; gap: .25rem; }
.msg-time .lucide-icon { width: .9em; height: .9em; }
.msg-tick-sent { color: var(--text-light); }
.msg-tick-delivered { color: var(--text-light); }
.msg-tick-seen { color: var(--teal-mid); }
.msg-attachment-img { max-width: 220px; max-height: 220px; border-radius: 10px; object-fit: cover; display: block; }
.msg-attachment-file { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; text-decoration: underline; }
.msg-sent .msg-attachment-file { color: var(--white); }
.msg-recv .msg-attachment-file { color: var(--teal-mid); }
.chat-search-wrap { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--border); }
.chat-search-wrap .lucide-icon { color: var(--text-light); flex-shrink: 0; }
.chat-search-wrap input { border: none; outline: none; font-size: .85rem; width: 100%; background: none; }
.chat-empty-thread { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-light); text-align: center; padding: 2rem; }
.chat-empty-thread .icon { font-size: 2.8rem; margin-bottom: .6rem; opacity: .6; }

.chat-input-bar { padding: .9rem 1.1rem; background: var(--white); border-top: 1px solid var(--border); display: flex; gap: .7rem; align-items: flex-end; flex-shrink: 0; }
.chat-input { flex: 1; padding: .65rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius); outline: none; font-size: .92rem; font-family: inherit; resize: none; max-height: 110px; line-height: 1.4; }
.chat-input:focus { border-color: var(--teal-mid); }
.chat-send-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--teal-mid); color: var(--white); font-size: 1.05rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); flex-shrink: 0; }
.chat-send-btn:hover { background: var(--teal-deep); }

/* ── Filter Chips (Material Design 3 filter-chip pattern) ──
   A scrollable single-row strip, not a wrapping wall of chips — keeps any
   number of subjects from overwhelming the page vertically, especially
   on mobile. Chips use M3's "small" 8px shape (not a pill) so they read as
   filters, distinct from pill-shaped call-to-action buttons. */
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; }
/* Copyable AI-prompt blocks on the bulk-CSV-upload pages -- a monospace,
   pre-wrapped box so long generated prompts/CSV stay readable without
   overflowing the card on mobile. */
.ai-prompt-box { background: var(--cream); border-radius: var(--radius-sm); padding: 1rem; border: 1.5px solid var(--border); }
.ai-prompt-box pre { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .78rem; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; margin: 0 0 .8rem; color: var(--text-dark); }
.acting-as-banner {
    background: var(--gold); color: var(--green-deep); font-size: .85rem; font-weight: 600;
    padding: .7rem 1.2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    border-radius: var(--radius-sm); margin-bottom: 1.2rem;
}
.acting-as-banner a { color: var(--green-deep); text-decoration: underline; margin-left: auto; }
.chip-row {
    display: flex; gap: .6rem; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: .35rem; margin-bottom: 1.6rem;
    mask-image: linear-gradient(to right, black 0%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 94%, transparent 100%);
}
.chip-row::-webkit-scrollbar { display: none; }
.cat-chip {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    padding: .55rem 1.1rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}
.cat-chip:hover { border-color: var(--teal-mid); }
.cat-chip.active {
    background: var(--teal-deep);
    color: var(--gold);
    border-color: var(--teal-deep);
}

/* ── Udemy-style category nav strip (fields-of-study row) with a
   subjects bar that only appears for whichever field is being hovered
   (app.js), instead of always showing one field's subjects. The panel is
   absolutely positioned so it overlays rather than pushing page content
   down when it opens. ── */
.category-nav-group { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 76px; z-index: 90; }
.category-nav {
    display: flex; justify-content: center; overflow-x: auto; scrollbar-width: none;
    padding: 0 1.5rem;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a {
    display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
    padding: .85rem 1rem; font-size: .85rem; font-weight: 600; color: var(--text-mid);
    border-bottom: 2.5px solid transparent; white-space: nowrap; transition: var(--transition);
}
.category-nav a:hover { color: var(--green-deep); }
.category-nav a.active { color: var(--green-deep); border-bottom-color: var(--gold); }
.subcategory-nav-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.category-nav-group.open .subcategory-nav-panel { opacity: 1; visibility: visible; }
.subcategory-nav {
    display: none; background: var(--green-deep); justify-content: center;
    overflow-x: auto; scrollbar-width: none; padding: 0 1.5rem;
}
.subcategory-nav.active-panel { display: flex; }
.subcategory-nav::-webkit-scrollbar { display: none; }
.subcategory-nav a {
    display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
    padding: .6rem 1rem; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.75);
    white-space: nowrap; transition: var(--transition);
}
.subcategory-nav a:hover, .subcategory-nav a.active { color: var(--gold); background: rgba(255,255,255,.06); }
@media (max-width: 768px) {
    /* The hover-driven desktop strip is replaced by .category-nav-mobile
       (a <details>-based accordion living inside the hamburger drawer)
       on small screens -- showing both would mean two separate category
       navigation UIs stacked on the page. */
    .category-nav-group { display: none; }
}
/* ── Mobile category accordion (lives inside .nav-links) ── */
.category-nav-mobile { display: none; }
@media (max-width: 768px) {
    .category-nav-mobile { display: block; margin: .4rem 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
    .category-nav-mobile .nav-links-label { color: rgba(255,255,255,.45); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: .7rem 1rem .3rem; }
    .category-nav-mobile > a { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; font-size: .92rem; color: rgba(255,255,255,.8); border-radius: 12px; }
    .category-nav-mobile > a:hover, .category-nav-mobile > a.active { background: rgba(255,255,255,.1); color: var(--gold); }
    .category-nav-mobile details { border-top: 1px solid rgba(255,255,255,.08); }
    .category-nav-mobile summary {
        padding: .7rem 1rem; font-size: .92rem; color: rgba(255,255,255,.85);
        cursor: pointer; display: flex; align-items: center; gap: .6rem; list-style: none;
    }
    .category-nav-mobile summary::-webkit-details-marker { display: none; }
    .category-nav-mobile summary::after { content: '+'; margin-left: auto; opacity: .6; font-size: 1.1rem; }
    .category-nav-mobile details[open] summary::after { content: '\2212'; }
    .category-nav-mobile details a {
        display: block; padding: .6rem 1rem .6rem 2.6rem; font-size: .85rem;
        color: rgba(255,255,255,.6); border-radius: 12px;
    }
    .category-nav-mobile details a:hover, .category-nav-mobile details a.active { color: var(--gold); background: rgba(255,255,255,.06); }
}
.chip-view-all {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    font-size: .85rem; font-weight: 600; color: var(--teal-mid);
    padding: .55rem .2rem; white-space: nowrap; text-decoration: none;
}
.chip-view-all:hover { color: var(--gold-dark); }

/* ── Lesson List ── */
.lesson-list { list-style: none; }
.lesson-item {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--border);
    background: var(--white); cursor: pointer; transition: var(--transition);
}
.lesson-item:hover { background: var(--cream); }
.lesson-item.done { opacity: .6; }
.lesson-num { width: 28px; height: 28px; border-radius: 50%; background: var(--cream); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: var(--text-mid); flex-shrink: 0; }
.lesson-item.done .lesson-num { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.lesson-title { font-size: .9rem; font-weight: 500; color: var(--text); }
.lesson-check { margin-left: auto; color: #4caf50; font-size: 1.1rem; }

/* ── Curriculum Builder (Sections → Lectures tree) ── */
.curriculum-section { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; }
.curriculum-section-head {
    display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
    background: var(--cream); cursor: pointer; user-select: none;
}
.curriculum-section-head:hover { background: #f0ead9; }
.curriculum-section-head .chevron { transition: transform .15s; color: var(--text-light); cursor: pointer; }
.curriculum-section.collapsed .curriculum-section-head .chevron { transform: rotate(-90deg); }
.curriculum-section-head strong.section-name-display { font-size: .92rem; color: var(--green-deep); flex: 1; cursor: pointer; }
.curriculum-section-head .section-rename-form { display: none; flex: 1; gap: .4rem; align-items: center; }
.curriculum-section-head .section-rename-form .form-control { padding: .35rem .6rem; height: auto; font-size: .85rem; }
.curriculum-section-head.renaming strong.section-name-display,
.curriculum-section-head.renaming > button.icon-btn { display: none; }
.curriculum-section-head.renaming .section-rename-form { display: flex; }
.curriculum-section-body { padding: .6rem; }
.curriculum-section.collapsed .curriculum-section-body { display: none; }
.curriculum-lecture {
    display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--white); margin-bottom: .5rem;
}
.curriculum-lecture-check { width: 22px; height: 22px; border-radius: 50%; background: #e8f5e9; color: #2e7d32; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.curriculum-lecture-check.empty { background: var(--cream); color: var(--text-light); }
.curriculum-lecture-title { flex: 1; font-size: .88rem; font-weight: 500; }
.curriculum-lecture-meta { font-size: .75rem; color: var(--text-light); }
.curriculum-add-btn {
    display: inline-flex; align-items: center; gap: .4rem; background: none;
    border: 1.5px solid var(--green-mid); color: var(--green-mid); border-radius: 8px;
    padding: .45rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.curriculum-add-btn:hover { background: var(--green-mid); color: var(--white); }

/* Content-type tabs inside the add/edit lecture form */
.content-type-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.content-type-tab {
    padding: .55rem 1rem; font-size: .85rem; font-weight: 600; color: var(--text-light);
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.content-type-tab.active { color: var(--green-deep); border-bottom-color: var(--green-deep); }
.content-type-panel { display: none; }
.content-type-panel.active { display: block; }

.pacing-panel { display: none; border: 1px solid var(--border); border-radius: 10px; padding: 1rem; background: var(--cream); margin-bottom: 1.2rem; }
.pacing-panel.open { display: block; }

/* ── Course Wizard (sidebar + step content) ── */
.course-wizard-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.8rem; align-items: start; }
.course-wizard-sidebar { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.wizard-group-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); margin: 1rem 0 .4rem; }
.wizard-group-label:first-child { margin-top: 0; }
.wizard-step {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px;
    font-size: .87rem; font-weight: 600; color: var(--text-mid); text-decoration: none; transition: var(--transition);
}
.wizard-step:hover { background: var(--cream); }
.wizard-step.active { background: var(--green-deep); color: var(--white); }
.wizard-step.disabled { color: var(--text-light); opacity: .55; cursor: not-allowed; }
.wizard-step.disabled:hover { background: none; }

/* Visually separated from the regular Save/Cancel actions above it, so a
   destructive action never sits right under a routine one. */
.danger-zone-section { margin-top: 3rem; padding-top: 1.8rem; border-top: 2px dashed #f3c9c9; }

.video-upload-placeholder {
    border: 1.5px dashed var(--border); border-radius: 8px; padding: 1.2rem;
    text-align: center; color: var(--text-light); background: var(--cream);
}
.video-upload-placeholder input[type="file"] { pointer-events: none; opacity: .6; }

/* Quill editor sizing to match our form-control look */
.ql-toolbar.ql-snow { border-color: var(--border); border-radius: 8px 8px 0 0; }
.ql-container.ql-snow { border-color: var(--border); border-radius: 0 0 8px 8px; min-height: 160px; font-family: inherit; font-size: .9rem; }

/* ── Rendered lesson rich-text content (student-facing) ── */
.lesson-rich-content { color: var(--text-mid); line-height: 1.75; font-size: .95rem; }
.lesson-rich-content h1, .lesson-rich-content h2, .lesson-rich-content h3 { color: var(--green-deep); margin: 1.2rem 0 .6rem; }
.lesson-rich-content p { margin: 0 0 .9rem; }
.lesson-rich-content ul, .lesson-rich-content ol { margin: 0 0 .9rem 1.3rem; }
.lesson-rich-content a { color: var(--green-mid); text-decoration: underline; }
.lesson-rich-content img { max-width: 100%; border-radius: 8px; margin: .6rem 0; }
.lesson-rich-content blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--text-light); margin: 0 0 .9rem; }
.lesson-rich-content pre, .lesson-rich-content code { background: var(--cream); border-radius: 6px; padding: .1rem .4rem; font-size: .85em; }
.lesson-rich-content pre { padding: .8rem; overflow-x: auto; }

.lesson-slides-card {
    display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--cream); margin-bottom: 1.2rem;
}

/* ── Course Detail Page ── */
.profile-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--green-deep); color: var(--white);
    font-weight: 700; flex-shrink: 0;
}
.course-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .course-layout { grid-template-columns: 1fr; } }
.course-main-col { min-width: 0; }
.enroll-card { position: sticky; top: 92px; }
.enroll-card .course-cover { height: 180px; }
.course-rating-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--text-mid); margin-bottom: .6rem; flex-wrap: wrap; }
.course-rating-row .stars { color: var(--gold-dark); letter-spacing: 1px; }
.course-rating-row .score { font-weight: 700; color: var(--text); }

/* ── Course detail page hero banner (Udemy-style dark band) ── */
.course-hero-band {
    background: linear-gradient(135deg, var(--green-deep) 0%, var(--teal-deep) 100%);
    padding: 2.2rem 1.5rem 2.4rem;
}
.course-hero-inner { max-width: 1180px; margin: 0 auto; }
.course-hero-breadcrumb { font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: .8rem; }
.course-hero-breadcrumb a { color: rgba(255,255,255,.85); }
.course-hero-breadcrumb a:hover { color: var(--gold); }
.course-hero-title { font-size: 1.9rem; font-weight: 800; color: var(--white); margin-bottom: .6rem; line-height: 1.25; max-width: 760px; }
.course-hero-desc { font-size: .95rem; color: rgba(255,255,255,.8); margin-bottom: .9rem; max-width: 700px; line-height: 1.55; }
.course-hero-band .course-rating-row { color: rgba(255,255,255,.85); }
.course-hero-band .course-rating-row .score { color: var(--gold); }
.course-hero-band .course-rating-row .stars { color: var(--gold); }
.course-hero-meta { font-size: .85rem; color: rgba(255,255,255,.65); margin-bottom: 0; }
@media (max-width: 768px) {
    .course-hero-band { padding: 1.6rem 1rem 1.8rem; }
    .course-hero-title { font-size: 1.4rem; }
}
.objectives-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: .6rem 1.5rem; margin: 1rem 0; }
.objective-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--text-mid); }
.objective-item .lucide-icon { color: #2e7d32; margin-top: .15rem; flex-shrink: 0; }
.requirements-list { list-style: disc; padding-left: 1.3rem; font-size: .88rem; color: var(--text-mid); display: flex; flex-direction: column; gap: .3rem; }
.curriculum-section { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .6rem; overflow: hidden; }
.curriculum-section summary { padding: .8rem 1rem; font-weight: 700; font-size: .92rem; color: var(--green-deep); cursor: pointer; background: var(--cream); display: flex; justify-content: space-between; align-items: center; list-style: none; }
.curriculum-section summary::-webkit-details-marker { display: none; }
.curriculum-section summary .count { font-weight: 500; font-size: .78rem; color: var(--text-light); }
.curriculum-lesson-row { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; border-top: 1px solid var(--border); font-size: .86rem; color: var(--text-mid); }
.curriculum-lesson-row .lucide-icon { flex-shrink: 0; color: var(--text-light); }
.curriculum-lesson-row .dur { margin-left: auto; font-size: .78rem; color: var(--text-light); white-space: nowrap; }
.instructor-card { display: flex; gap: 1.2rem; align-items: flex-start; }
.instructor-card .profile-avatar { width: 64px; height: 64px; font-size: 1.4rem; margin: 0; flex-shrink: 0; background: var(--gold); }
.instructor-stats { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .6rem 0; font-size: .82rem; color: var(--text-mid); }
.instructor-stats span { display: flex; align-items: center; gap: .35rem; }
.rating-summary { display: flex; gap: 2rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.rating-summary .big-score { font-size: 2.6rem; font-weight: 800; color: var(--green-deep); }
.rating-bar-row { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text-light); margin-bottom: .25rem; }
.rating-bar-track { flex: 1; height: 8px; background: var(--cream); border-radius: 4px; overflow: hidden; max-width: 220px; }
.rating-bar-fill { height: 100%; background: var(--gold); }
.review-item { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.review-item:last-child { border-bottom: none; }
.review-item-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.review-item .profile-avatar { width: 36px; height: 36px; font-size: .9rem; margin: 0; }

/* ── Registration Form ── */
.reg-section-title { font-size: .95rem; font-weight: 700; color: var(--green-deep); margin: 1.6rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.reg-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.role-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.role-card { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 1rem .6rem; text-align: center; cursor: pointer; transition: var(--transition); }
.role-card .lucide-icon { width: 1.4em; height: 1.4em; color: var(--green-deep); margin-bottom: .4rem; }
.role-card-label { font-weight: 700; font-size: .85rem; color: var(--text); }
.role-card-desc { font-size: .72rem; color: var(--text-light); margin-top: .15rem; }
.role-card:hover { border-color: var(--gold); }
.role-card.active { border-color: var(--green-deep); background: var(--cream); }
.role-card.active .lucide-icon { color: var(--green-deep); }
.gender-pill-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.gender-pill { border: 2px solid var(--border); border-radius: var(--radius-full); padding: .45rem 1.1rem; font-size: .85rem; cursor: pointer; transition: var(--transition); }
.gender-pill input { display: none; }
.gender-pill:has(input:checked) { border-color: var(--green-deep); background: var(--cream); color: var(--green-deep); font-weight: 600; }
.pw-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-light); display: flex; }
.pw-strength-track { height: 5px; background: var(--border); border-radius: 3px; margin-top: .5rem; overflow: hidden; }
.pw-strength-fill { height: 100%; width: 0; transition: var(--transition); }
.profile-progress-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.profile-progress-fill { height: 100%; background: var(--green-mid); border-radius: 4px; transition: var(--transition); }

/* ── Post-enrollment "Great choice!" page ── */
.enroll-success-banner {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    background: #e8f5e9; border: 1.5px solid #4caf50; border-radius: var(--radius); padding: 1.2rem 1.5rem;
    font-weight: 700; color: #2e7d32; font-size: 1.05rem;
}
.enroll-success-banner > div { display: flex; align-items: center; gap: .6rem; }
.jump-right-in {
    display: flex; background: var(--green-deep); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-lg); margin-top: 1rem;
}
.jump-right-in-cover { width: 280px; flex-shrink: 0; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.jump-right-in-cover img { width: 100%; height: 100%; object-fit: cover; }
.jump-right-in-cover .lucide-icon { width: 3em; height: 3em; color: var(--green-deep); }
.jump-right-in-body { padding: 1.5rem 2rem; color: var(--white); flex: 1; }
.jump-right-in-body h3 { font-size: 1.3rem; font-weight: 800; }
@media (max-width: 600px) {
    .jump-right-in { flex-direction: column; }
    .jump-right-in-cover { width: 100%; height: 160px; }
}

/* ── Role Switch ── */
.role-switch { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--green-deep); margin-bottom: 1.5rem; }
.role-option { flex: 1; text-align: center; padding: .7rem; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--green-deep); background: var(--white); transition: var(--transition); }
.role-option:hover { background: var(--cream); }
.role-option.active { background: var(--green-deep); color: var(--gold); }

/* ── Dashboard ── */
.dashboard-wrap { max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem; }
/* Full-bleed banner, not a rounded "island" card -- breaks out of
   .dashboard-wrap's max-width via the 100vw/negative-margin trick so
   every one of the ~20 pages using this class gets the wide banner
   look with zero HTML changes. Side padding uses max() instead of a
   fixed value so content still lines up in a readable ~1180px column
   on wide screens instead of hugging the literal viewport edge. */
.dashboard-header {
    background: linear-gradient(135deg, var(--green-deep) 0%, var(--teal-deep) 65%, var(--teal-light) 100%);
    color: var(--white);
    border-radius: 0;
    padding: 2.2rem max(1.5rem, calc(50vw - 590px)) 2.4rem;
    margin: 0 calc(-50vw + 50%) 1.8rem;
    width: 100vw;
    min-height: 230px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
}
.dashboard-header::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='rgba(212,175,90,0.08)' stroke-width='1'/%3E%3C/svg%3E") repeat;
}
.dashboard-header > * { position: relative; z-index: 1; }
.dashboard-header h2 { font-size: 1.6rem; font-weight: 800; }
.dashboard-header p  { opacity: .85; font-size: .92rem; margin-top: .4rem; }
@media (max-width: 768px) {
    .dashboard-header { padding: 1.6rem 1.2rem 1.8rem; margin-bottom: 1.4rem; min-height: 190px; }
    .dashboard-header h2 { font-size: 1.3rem; }
}
.dashboard-header-link { opacity: 1; color: var(--gold); font-weight: 600; text-decoration: underline; }
.dashboard-header-link:hover { color: var(--gold-light, #f0d78a); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-card { background: var(--white); border-radius: var(--radius-sm); padding: 1.2rem; box-shadow: var(--shadow); border: 1.5px solid var(--border); text-align: center; }
.stat-card .num { font-size: 1.8rem; font-weight: 800; color: var(--green-deep); }
.stat-card .lbl { font-size: .8rem; color: var(--text-mid); margin-top: .2rem; }
/* Self-contained, high-contrast pill for the dark dashboard-header gradient —
   must not rely on .badge-* tints (those assume a light page background and
   become nearly invisible here; combining classes also let .badge-* win the
   cascade and override these colors entirely). */
.dashboard-role { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.18); color: var(--white); border: 1px solid rgba(255,255,255,.35); border-radius: 12px; padding: .25rem .9rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-top: .8rem; }

/* ── Auth ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green-deep) 0%, var(--teal-deep) 100%); padding: 2rem; }
.auth-box { background: var(--white); border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); }
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.oauth-buttons { display: flex; flex-direction: column; gap: .7rem; }
.oauth-btn {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-full);
    background: var(--white); color: var(--text); font-weight: 600; font-size: .9rem;
    transition: var(--transition);
}
.oauth-btn:hover { background: var(--cream); border-color: var(--gold); box-shadow: var(--shadow); }
.oauth-btn svg { flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--text-light); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.auth-logo h2 { color: var(--green-deep); font-size: 1.5rem; font-weight: 800; }
.auth-logo p  { color: var(--text-light); font-size: .85rem; }
.auth-logo-img { height: 64px; width: auto; margin: 0 auto; display: block; }

/* ── Forms ── */
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-mid); margin-bottom: .4rem; }
.form-control { width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .95rem; color: var(--text); background: var(--cream); outline: none; transition: var(--transition); }
.form-control:focus { border-color: var(--teal-mid); background: var(--white); box-shadow: 0 0 0 3px rgba(14,82,114,.1); }
textarea.form-control { min-height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-hint { font-size: .78rem; color: var(--text-light); margin-top: .3rem; }

/* ── Alerts ── */
.alert { padding: .9rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; font-size: .92rem; border-left: 4px solid; }
.alert-success { background: #e8f5e9; color: #1b5e20; border-color: #4caf50; }
.alert-error   { background: #ffebee; color: #b71c1c; border-color: #f44336; }
.alert-info    { background: #e3f2fd; color: #0d47a1; border-color: #2196f3; }

/* ── Badges ── */
.badge { display: inline-block; padding: .2rem .7rem; border-radius: 12px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.badge-beginner     { background: #e8f5e9; color: #2e7d32; }
.badge-intermediate { background: #fff8e1; color: #e65100; }
.badge-advanced     { background: #fce4ec; color: #c62828; }
.badge-free  { background: #e8f5e9; color: #2e7d32; }
.badge-paid  { background: #e8eaf6; color: #283593; }
.badge-pending { background: #fff8e1; color: #e65100; }
.badge-teacher  { background: rgba(212,175,90,.15); color: var(--gold-dark); }
.badge-student  { background: rgba(14,82,114,.1); color: var(--teal-mid); }

/* ── Tables ── */
.table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th { background: var(--green-deep); color: var(--gold); padding: .9rem 1rem; text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; }
.table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--cream); }

/* ── Card ── */
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1.5px solid var(--border); }
.card-body  { padding: 1.2rem; }
.card-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.card-footer { padding: .9rem 1.2rem; border-top: 1px solid var(--border); }

/* ── Tabs ── */
.tabs { display: flex; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.tab-btn { flex: 1; padding: .85rem; font-size: .9rem; font-weight: 600; background: none; border: none; cursor: pointer; color: var(--text-mid); border-bottom: 3px solid transparent; transition: var(--transition); }
.tab-btn.active { color: var(--green-deep); border-bottom-color: var(--gold); background: var(--cream); }

/* ── Progress ── */
.progress-bar { background: var(--border); border-radius: 10px; height: 8px; overflow: hidden; margin-top: .5rem; }
.progress-fill { height: 100%; background: var(--green-mid); border-radius: 10px; transition: width .4s ease; }

/* ── Footer ── */
footer { background: var(--green-deep); color: rgba(255,255,255,.75); padding: 3rem 1.5rem 1.5rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1180px; margin: 0 auto 2rem; }
.footer-seal { width: 64px; height: 64px; margin-bottom: .8rem; }
.footer-brand { font-size: 1.2rem; font-weight: 700; color: var(--gold); }
.footer-grid p { font-size: .83rem; color: rgba(255,255,255,.55); font-weight: 400; margin-top: .3rem; }
.footer-heading { font-size: .8rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .8rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .4rem; }
.footer-links a { color: rgba(255,255,255,.6); font-size: .88rem; transition: var(--transition); }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem; font-size: .82rem; max-width: 1180px; margin: 0 auto; }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-light); }
.empty-state .icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: .5; }
.empty-state h3 { font-size: 1.2rem; color: var(--text-mid); margin-bottom: .5rem; }

/* ── Mobile nav drawer (Material Design 3 modal navigation drawer) ── */
.nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; padding: .3rem .5rem; line-height: 1; }
.nav-scrim { display: none; }
.nav-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Tablet: tighten the desktop nav row before it switches to a drawer ── */
@media (max-width: 1024px) {
    .navbar { padding: 0 1.1rem; }
    .nav-links { gap: 1rem; }
    .nav-links a { font-size: .85rem; padding: .35rem .6rem; }
}

@media (max-width: 768px) {
    /* A full-width search row pushed the navbar to two rows, eating into
       the limited vertical space a phone has for the actual hero banner
       below it. Collapses to a small round icon button instead (logo
       left, icon + hamburger right); tapping it expands the very same
       form into a full-screen search overlay -- see .nav-search.search-open
       below and the toggle logic in app.js. No separate markup needed
       since it's the same .nav-search element on every page already. */
    /* Logo was scaled to ~50% of navbar height here vs ~76% on desktop
       (58px in a 76px bar) -- bumped to match that same proportion so it
       doesn't look disproportionately tiny next to the icon buttons. */
    .navbar { padding: 0 1rem; height: 60px; flex-direction: row; align-items: center; gap: .5rem; }
    .nav-brand { font-size: 1.05rem; max-width: 50vw; }
    .nav-logo { height: 44px; }
    .nav-brand small { font-size: .68rem; }
    .nav-toggle { order: 3; display: block; }
    .nav-search {
        order: 2; margin-left: auto; flex: 0 0 auto; width: 38px; height: 38px;
        padding: 0; justify-content: center; border-radius: 50%; cursor: pointer;
    }
    .nav-search input { display: none; }
    .nav-search.search-open {
        position: fixed; inset: 0; z-index: 300; width: 100%; height: 100%;
        margin: 0; border-radius: 0; border: none; padding: 5.5rem 1.6rem 2rem;
        cursor: default; flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 1.1rem; background: linear-gradient(135deg, var(--green-deep) 0%, var(--teal-deep) 100%);
        opacity: 0; animation: navSearchFadeIn .22s ease forwards;
    }
    .nav-search.search-open::after {
        content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='rgba(212,175,90,0.08)' stroke-width='1'/%3E%3C/svg%3E") repeat;
    }
    .nav-search.search-open::before {
        content: 'Search for anything you want to learn'; display: block;
        color: var(--white); font-size: 1.25rem; font-weight: 800; text-align: center;
        line-height: 1.35; padding: 0 1rem;
    }
    .nav-search.search-open .lucide-icon { color: rgba(255,255,255,.6); width: 1.1em; height: 1.1em; }
    .nav-search.search-open input {
        display: block; width: 100%; background: rgba(255,255,255,.12);
        border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius-full);
        padding: .9rem 1.2rem; font-size: 1.05rem; color: var(--white); outline: none;
    }
    .nav-search-close {
        position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px;
        border-radius: 50%; background: rgba(255,255,255,.1); border: none;
        color: var(--white); display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
}
@keyframes navSearchFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
    .nav-links {
        position: fixed; top: 0; left: 0; height: 100vh; width: 80%; max-width: 300px;
        background: var(--green-deep); flex-direction: column; align-items: stretch;
        justify-content: flex-start; padding: 5rem 1.2rem 2rem; gap: .3rem;
        transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 200; border-radius: 0 16px 16px 0; box-shadow: 4px 0 24px rgba(0,0,0,.35);
        flex-wrap: nowrap; overflow-y: auto;
    }
    .nav-links.nav-open { transform: translateX(0); }
    .nav-links a { width: 100%; padding: .85rem 1rem; font-size: 1rem; border-radius: 12px; }
    .nav-user { width: 100%; max-width: none; padding: .85rem 1rem; font-size: 1rem; margin-bottom: .3rem; box-sizing: border-box; }
    .nav-scrim {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150;
        opacity: 0; pointer-events: none; transition: opacity .28s ease;
    }
    .nav-scrim.show { opacity: 1; pointer-events: auto; }

    /* Admin panel tabs: flex:1 across 9 tabs squeezed each to ~40px on a
       phone, illegible. Scroll horizontally instead, like the category
       nav already does. */
    .tabs { overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: .75rem 1.1rem; }

    /* Keeps the account dropdown from overflowing the smallest phones. */
    .nav-account-menu { max-width: calc(100vw - 2rem); }

    .hero { padding: 2.5rem 1rem; }
    .hero h1 { font-size: 1.6rem; }
    .hero p { font-size: .95rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-stats { gap: 1.5rem; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .mission-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .mission-band { padding: 2.2rem 1.2rem; }
    .form-row { grid-template-columns: 1fr; }
    .auth-box { padding: 1.5rem; }
    .container, .section { padding-left: 1rem; padding-right: 1rem; }
    .dashboard-wrap { padding: 0 1rem; }

    /* Tables become Material-style elevated cards instead of horizontal-scrolling grids */
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table { border: none; }
    .table tr {
        margin-bottom: .9rem; border-radius: 12px; background: var(--white);
        box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
        padding: .9rem 1rem; border: none;
    }
    .table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: .5rem 0; border: none; text-align: right; gap: .8rem; white-space: normal;
    }
    .table td:not(:last-child) { border-bottom: 1px solid var(--border); }
    .table td::before {
        content: attr(data-label); font-weight: 600; color: var(--text-mid);
        font-size: .72rem; text-transform: uppercase; letter-spacing: .3px;
        text-align: left; flex-shrink: 0;
    }
    .table td:last-child { justify-content: flex-end; }

    .role-switch { flex-direction: column; }
    /* Chat: show one pane at a time (list OR thread), like a real messaging app */
    .chat-page { padding: 0; }
    /* Back to the single-row 60px navbar height now that search collapses
       to an icon instead of taking its own full-width row. */
    .chat-wrap { height: calc(100vh - 60px); max-height: none; border-radius: 0; border: none; }
    .chat-list { width: 100%; display: flex; }
    .chat-main { display: none; }
    .chat-wrap.thread-open .chat-list { display: none; }
    .chat-wrap.thread-open .chat-main { display: flex; }
    .chat-back { display: inline-flex; }
    .msg-group { max-width: 85%; }

    /* ── Footer: stack and center instead of left-aligning a single column ── */
    footer { padding: 2.2rem 1.2rem 1.2rem; margin-top: 3rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
    .footer-links { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
    .footer-links li { margin-bottom: 0; }

    /* ── Course wizard: vertical sidebar -> horizontal scrollable tab bar
       (same pattern as the admin .tabs scroller above) ── */
    .course-wizard-layout { grid-template-columns: 1fr; gap: 1rem; }
    .course-wizard-sidebar {
        position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none;
        gap: .4rem; padding-bottom: .3rem; margin-bottom: .5rem;
    }
    .course-wizard-sidebar::-webkit-scrollbar { display: none; }
    .wizard-group-label { display: none; }
    .wizard-step { flex: 0 0 auto; white-space: nowrap; }

    /* ── Curriculum builder: let lecture rows wrap instead of squeezing ── */
    .curriculum-section-head { flex-wrap: wrap; }
    .curriculum-section-head .section-rename-form { flex-basis: 100%; order: 4; margin-top: .5rem; }
    .curriculum-lecture { flex-wrap: wrap; }
    .curriculum-lecture-title { flex: 1 1 100%; }

    /* ── Content-type tabs + Quill toolbar: scroll instead of clipping ── */
    .content-type-tabs { overflow-x: auto; scrollbar-width: none; }
    .content-type-tabs::-webkit-scrollbar { display: none; }
    .content-type-tab { flex: 0 0 auto; white-space: nowrap; }
    .ql-toolbar.ql-snow { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }

    .lesson-slides-card { flex-wrap: wrap; }
}
@media (max-width: 420px) {
    .hero h1 { font-size: 1.4rem; }
    .nav-brand { font-size: 1rem; max-width: 50vw; }
    .nav-logo { height: 38px; }
    .nav-search.search-open input::placeholder { font-size: .76rem; }
    .btn { padding: .6rem 1.2rem; font-size: .88rem; }
}

/* ── Points celebration popup (inspired by Alison.com's XP-earned modal) ──
   Shown once, right after an action earns points, via a session payload
   (popPointsCelebration()) — not a toast that fires on every tiny action. */
.points-celebration-overlay {
    position: fixed; inset: 0; background: rgba(10,61,31,.6); z-index: 500;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    animation: pcFadeIn .25s ease;
}
@keyframes pcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcPopIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.points-celebration-modal {
    background: var(--white); border-radius: var(--radius-lg); padding: 2.2rem 2rem;
    max-width: 380px; width: 100%; text-align: center; position: relative;
    box-shadow: var(--shadow-lg); animation: pcPopIn .35s cubic-bezier(.34,1.56,.64,1);
}
.points-celebration-close {
    position: absolute; top: .7rem; right: .8rem; background: none; border: none;
    font-size: 1.4rem; color: var(--text-light); cursor: pointer; line-height: 1; padding: .3rem;
}
.points-celebration-burst { font-size: 2.6rem; color: var(--gold); margin-bottom: .4rem; }
.points-celebration-amount { font-size: 2.1rem; font-weight: 800; color: var(--green-deep); margin-bottom: .7rem; }
.points-celebration-total {
    display: inline-flex; align-items: center; gap: .4rem; background: var(--cream);
    padding: .5rem 1rem; border-radius: var(--radius-full); font-size: .85rem;
    color: var(--text-mid); margin-bottom: 1.1rem;
}
.points-celebration-total strong { color: var(--green-deep); }
.points-celebration-badges { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.2rem; }
.points-celebration-badge {
    display: flex; align-items: center; gap: .4rem; background: var(--cream);
    border: 1px solid var(--gold); border-radius: var(--radius-full);
    padding: .35rem .8rem; font-size: .78rem; font-weight: 600; color: var(--green-deep);
}
.points-celebration-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ── Certificate of completion ── */
.cert-card {
    background: var(--white); border: 8px double var(--gold); border-radius: var(--radius);
    padding: 3rem 2.5rem; text-align: center; box-shadow: var(--shadow-lg); margin: 1.5rem 0;
}
.cert-seal img { width: 72px; height: 72px; margin: 0 auto 1rem; }
.cert-eyebrow { font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; margin-bottom: 1.2rem; }
.cert-name { font-family: 'Marcellus', serif; font-size: 2.2rem; color: var(--green-deep); margin-bottom: .8rem; }
.cert-line { font-size: .95rem; color: var(--text-mid); margin-bottom: .6rem; }
.cert-course { font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; }
.cert-footer-row { display: flex; justify-content: center; gap: 3rem; margin: 1.8rem 0 1.2rem; flex-wrap: wrap; }
.cert-footer-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); margin-bottom: .2rem; }
.cert-footer-value { font-size: .9rem; font-weight: 700; color: var(--text); }
.cert-verify-note { font-size: .78rem; color: var(--text-light); display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1rem; }
.cert-page-actions { display: flex; justify-content: center; gap: .8rem; margin-bottom: 2rem; flex-wrap: wrap; }
@media (max-width: 600px) {
    .cert-card { padding: 1.8rem 1.2rem; }
    .cert-name { font-size: 1.5rem; }
    .cert-course { font-size: 1.1rem; }
    .cert-footer-row { gap: 1.5rem; }
}