/* =====================================================================
   FreeEduZone public site
   ---------------------------------------------------------------------
   Tokens, base styles and shared components (buttons, inputs, cards,
   badges, alerts, pagination, modal) live in design-system.css, which
   is loaded before this file. This file only lays out the pages.

    1. Page shell          background, eyebrow labels, section headings
    2. Header              logo, navigation, icons, mobile menu
    3. Search overlay      header search and live results
    4. Login / register    modal details
    5. Footer              footer and back-to-top button
    6. Page header         shared title block (Courses, Categories, About)
    7. Home
    8. Courses
    9. Course details
   10. Categories
   11. About
   12. 404
   13. User area          dashboard and profile
   14. Help desk          contact support page
   15. Password pages     forgot / reset password
   ===================================================================== */


/* =====================================================================
   1. PAGE SHELL
   ===================================================================== */

body {
    background:
        radial-gradient(circle at 8% 0%,var(--glow-blue),transparent 32%),
        radial-gradient(circle at 92% 30%,var(--glow-sky),transparent 30%),
        var(--color-bg);
    background-attachment:fixed;
    /* Footer sits at the bottom of the window even on short pages */
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* Messages shown under the header after an action (e.g. account deleted) */
.site-flash {
    width:100%;
    max-width:var(--container);
    margin:var(--space-6) auto 0;
    padding:0 var(--space-8);
}

.site-flash .alert {
    margin:0;
}

@media(max-width:600px) {
    .site-flash {
        padding:0 var(--space-4);
    }
}

/* Space between page content and the footer. Pages that set their own
   padding (e.g. .courses-page) must keep a bottom value too. */
main {
    display:block;
    padding-bottom:var(--space-16);
}

/* Page sections are flex items of <body>; let them shrink on small screens.
   Auto side margins stop flex items stretching, so set the width too. */
body > * {
    min-width:0;
}

body > main,
body > .user-layout {
    width:100%;
}

/* Small uppercase label above titles */
.section-kicker,
.hero-kicker,
.course-details-kicker,
.cta-kicker {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin:0 0 var(--space-4);
    padding:6px 12px;
    border:1px solid var(--color-primary-border);
    border-radius:var(--radius-pill);
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
    font-size:var(--text-xs);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
}

.section-subtitle {
    max-width:600px;
    margin:0 auto;
    color:var(--color-muted);
    font-size:var(--text-lg);
    line-height:var(--leading-normal);
}


/* =====================================================================
   2. HEADER
   ===================================================================== */

header {
    position:sticky;
    top:0;
    z-index:var(--z-sticky);
    border-bottom:1px solid var(--color-border);
}

/* Frosted background on a separate layer: a filter on <header> itself
   would trap the fixed search overlay inside the header */
header::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--color-surface-glass);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
}

.navbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-6);
    max-width:1280px;
    height:72px;
    margin:0 auto;
    padding:0 var(--space-8);
}

.logo a {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--color-heading);
    font-size:var(--text-xl);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
    text-decoration:none;
}

.logo-mark {
    display:inline-grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
    color:#ffffff;
    font-size:var(--text-base);
    box-shadow:var(--shadow-primary);
}

.menu-links {
    display:flex;
    align-items:center;
    gap:var(--space-1);
}

.menu-links a {
    padding:var(--space-2) 14px;
    border-radius:var(--radius-sm);
    color:var(--color-text-soft);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    text-decoration:none;
    transition:color var(--transition),background-color var(--transition);
}

.menu-links a:hover {
    background:var(--color-surface-muted);
    color:var(--color-heading);
}

.menu-links a.is-active {
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
    font-weight:var(--weight-semibold);
}

.right-side {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-shrink:0;
}

.nav-icons {
    display:flex;
    align-items:center;
    gap:var(--space-1);
}

.nav-icon,
.user-icon,
.menu-toggle {
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--color-text-soft);
    font-size:var(--text-base);
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:color var(--transition),background-color var(--transition);
}

.nav-icon {
    position:relative;
}

/* Saved-courses count on the bookmark icon */
.nav-badge {
    position:absolute;
    top:2px;
    right:0;
    display:grid;
    place-items:center;
    min-width:20px;
    height:20px;
    padding:0 4px;
    border:2px solid var(--color-surface);
    border-radius:var(--radius-pill);
    background:var(--color-primary-fill);
    color:#ffffff;
    font-size:10px;
    font-weight:var(--weight-bold);
    line-height:1;
}

.nav-icon:hover,
.user-icon:hover,
.menu-toggle:hover {
    background:var(--color-surface-muted);
    color:var(--color-primary);
}

.header-profile-image,
.header-profile-fallback {
    width:30px;
    height:30px;
    border-radius:50%;
}

.header-profile-image {
    display:block;
    object-fit:cover;
    box-shadow:0 0 0 2px var(--color-surface),0 0 0 3px var(--blue-200);
}

.header-profile-fallback {
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
    color:#ffffff;
    font-size:var(--text-sm);
    font-weight:var(--weight-bold);
}

.menu-toggle {
    display:none;
    font-size:var(--text-xl);
    color:var(--color-heading);
}

@keyframes slideMenu {
    from {
        opacity:0;
        transform:translateY(-8px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:800px) {

    .navbar {
        position:relative;
        height:64px;
        padding:0 var(--space-5);
    }

    .nav-icons {
        order:-1;
        margin-left:auto;
    }

    .menu-toggle {
        display:inline-grid;
    }

    /* Menu drops down under the header */
    .menu-links {
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:var(--space-1);
        padding:var(--space-3) var(--space-4) var(--space-4);
        background:var(--color-surface);
        border-bottom:1px solid var(--color-border);
        box-shadow:var(--shadow-md);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
    }

    .menu-links.active {
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .menu-links.active a {
        animation:slideMenu .25s var(--ease) both;
    }

    .menu-links a {
        padding:var(--space-3) var(--space-4);
        font-size:var(--text-base);
    }

}

@media(max-width:480px) {

    .navbar {
        padding:0 var(--space-4);
    }

    .logo a {
        gap:var(--space-2);
        font-size:var(--text-lg);
    }

    .logo-mark {
        width:32px;
        height:32px;
        font-size:var(--text-sm);
    }

    .right-side,
    .nav-icons {
        gap:0;
    }

}

/* Very narrow phones (360px): slightly smaller header buttons */
@media(max-width:400px) {

    .nav-icon,
    .user-icon,
    .menu-toggle {
        width:36px;
        height:36px;
    }

}

/* 320px phones: show only the logo icon (the name stays readable to screen readers) */
@media(max-width:340px) {

    .logo a {
        gap:0;
        font-size:0;
    }

}


/* =====================================================================
   3. SEARCH OVERLAY
   ===================================================================== */

.search-overlay {
    position:fixed;
    inset:0;
    z-index:var(--z-modal);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:18vh var(--space-6) var(--space-6);
    background:rgba(15,23,42,.6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--transition),visibility var(--transition);
}

.search-overlay.active {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.search-overlay-close {
    position:absolute;
    top:var(--space-5);
    right:var(--space-6);
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    font-size:var(--text-xl);
    cursor:pointer;
    transition:background-color var(--transition);
}

.search-overlay-close:hover {
    background:rgba(255,255,255,.24);
}

.search-overlay-content {
    width:min(680px,100%);
}

.search-overlay-form {
    display:flex;
    align-items:center;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
}


/* Focus ring around the whole search box (the input itself has none) */
.search-overlay-form:focus-within {
    border-color:var(--blue-300);
    box-shadow:var(--shadow-lg),var(--ring);
}

.search-overlay-form input {
    flex:1;
    min-width:0;
    padding:var(--space-5) var(--space-6);
    border:0;
    outline:0;
    background:transparent;
    color:var(--color-heading);
    font-size:var(--text-lg);
}

.search-overlay-form input::placeholder {
    color:var(--color-placeholder);
}

.search-overlay-form button {
    align-self:stretch;
    width:64px;
    border:0;
    background:transparent;
    color:var(--color-muted);
    font-size:var(--text-lg);
    cursor:pointer;
    transition:color var(--transition);
}

.search-overlay-form button:hover {
    color:var(--color-primary);
}

.search-results {
    margin-top:var(--space-3);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
}

.search-result {
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:14px var(--space-6);
    border-bottom:1px solid var(--color-border);
    color:var(--color-heading);
    text-decoration:none;
    transition:background-color var(--transition);
}

.search-result:last-child {
    border-bottom:0;
}

.search-result:hover,
.search-result:focus-visible {
    background:var(--color-primary-soft);
    box-shadow:none;
}

.search-result-title {
    font-size:var(--text-base);
    font-weight:var(--weight-semibold);
}

.search-result-meta {
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.search-result-all {
    color:var(--color-primary);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.search-results-message {
    margin:0;
    padding:var(--space-4) var(--space-6);
    color:var(--color-muted);
    font-size:var(--text-sm);
}

@media(max-width:600px) {

    .search-overlay {
        padding:14vh var(--space-4) var(--space-4);
    }

    .search-overlay-close {
        top:var(--space-4);
        right:var(--space-4);
    }

    .search-overlay-form input {
        padding:var(--space-4);
        font-size:var(--text-base);
    }

}


/* =====================================================================
   4. LOGIN / REGISTER MODAL
   ===================================================================== */

.modal {
    display:none;
    position:fixed;
    inset:0;
    align-items:center;
    justify-content:center;
    padding:var(--space-4);
}

body.modal-open {
    overflow:hidden;
}

.modal-box {
    position:relative;
    width:min(400px,100%);
    max-height:calc(100vh - 32px);
    padding:var(--space-8);
    overflow-y:auto;
}

.modal-box h2 {
    margin:0 0 var(--space-6);
    color:var(--color-heading);
    text-align:center;
}

.modal-box form {
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.modal-box form > button {
    margin-top:var(--space-1);
}

.modal-box p {
    margin:var(--space-5) 0 0;
    color:var(--color-text-soft);
    font-size:var(--text-sm);
    text-align:center;
}

/* Weekly email notice above the Register button */
.modal-box .register-note {
    margin:0 0 var(--space-3);
    font-size:var(--text-xs);
    text-align:left;
}

/* Why the window opened (e.g. from "Suggest a course") */
.modal-box .modal-reason {
    display:flex;
    align-items:flex-start;
    gap:var(--space-2);
    margin:0 0 var(--space-5);
    padding:var(--space-3) var(--space-4);
    border:1px solid var(--color-primary-border);
    border-radius:var(--radius-sm);
    background:var(--color-primary-soft);
    color:var(--color-text);
    text-align:left;
}

.modal-box .modal-reason[hidden] {
    display:none;
}

.modal-box .modal-reason i {
    margin-top:3px;
    color:var(--color-primary);
}

.modal-box p a {
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
    text-decoration:none;
}

.modal-box p a:hover {
    text-decoration:underline;
}

.modal-box .close {
    position:absolute;
    top:var(--space-4);
    right:var(--space-4);
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    background:transparent;
    font-size:var(--text-2xl);
    line-height:1;
    cursor:pointer;
}

/* Hidden until the login/register script shows it */
.error-message {
    display:none;
    margin-bottom:var(--space-4);
    text-align:center;
}

.error-message-link {
    color:inherit;
    font-weight:var(--weight-bold);
    text-decoration:underline;
    white-space:nowrap;
}

.password-box {
    position:relative;
}

/* "Remember me" and "Forgot password?" under the login password */
.login-options {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    font-size:var(--text-sm);
}

/* One-line label: centre the box on the text */
.login-options .check-label {
    align-items:center;
}

.login-options .check-label input {
    margin:0;
    accent-color:var(--color-primary);
}

.login-options a {
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
    text-decoration:none;
}

.login-options a:hover {
    text-decoration:underline;
}

.password-box input {
    padding-right:48px;
}

.toggle-password {
    position:absolute;
    top:50%;
    right:4px;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--color-muted);
    transform:translateY(-50%);
    cursor:pointer;
    transition:color var(--transition);
}

.toggle-password:hover {
    color:var(--color-primary);
}

@media(max-width:480px) {

    .modal {
        align-items:flex-start;
        padding-top:var(--space-5);
    }

    .modal-box {
        padding:var(--space-6) var(--space-5);
    }

}


/* =====================================================================
   5. FOOTER
   ===================================================================== */

footer {
    margin-top:auto;
    padding:var(--space-12) var(--space-8) var(--space-6);
    background:var(--slate-900);
    color:var(--slate-300);
}

.footer-content {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-10);
    max-width:var(--container);
    margin:0 auto;
}

.footer-brand h3 {
    margin:0 0 var(--space-3);
    color:#ffffff;
    font-size:var(--text-xl);
    font-weight:var(--weight-extrabold);
}

.footer-brand p {
    max-width:300px;
    margin:0;
    color:var(--slate-400);
    font-size:var(--text-sm);
}

.footer-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:var(--space-3) var(--space-8);
}

.footer-links a {
    color:var(--slate-300);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    text-decoration:none;
    transition:color var(--transition);
}

.footer-links a:hover {
    color:#ffffff;
}

.footer-bottom {
    max-width:var(--container);
    margin:var(--space-10) auto 0;
    padding-top:var(--space-5);
    border-top:1px solid rgba(148,163,184,.2);
    text-align:center;
}

.footer-bottom p {
    margin:0;
    color:var(--slate-400);
    font-size:var(--text-xs);
}

/* Back-to-top: hidden until the page is scrolled (script adds .is-visible) */
.back-to-top {
    position:fixed;
    right:var(--space-6);
    bottom:var(--space-6);
    z-index:90;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:var(--color-primary-fill);
    color:#ffffff;
    box-shadow:var(--shadow-primary);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity var(--transition),transform var(--transition),visibility var(--transition),background-color var(--transition);
}

.back-to-top.is-visible {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover {
    background:var(--color-primary-fill-hover);
}

@media(max-width:800px) {

    footer {
        padding:var(--space-10) var(--space-5) var(--space-6);
    }

    .footer-content {
        flex-direction:column;
        gap:var(--space-6);
    }

    .footer-links {
        justify-content:flex-start;
    }

    .back-to-top {
        right:var(--space-4);
        bottom:var(--space-4);
    }

}


/* =====================================================================
   6. PAGE HEADER (Courses, Categories, About)
   ===================================================================== */

.categories-header {
    max-width:760px;
    margin:0 auto;
    padding:var(--space-16) var(--space-6) var(--space-10);
    text-align:center;
}

.categories-header h1 {
    margin:0 0 var(--space-3);
    color:var(--color-heading);
    font-size:var(--text-title);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.categories-header > p:last-child {
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-lg);
}

@media(max-width:600px) {

    .categories-header {
        padding:var(--space-10) var(--space-5) var(--space-8);
    }

    .categories-header > p:last-child {
        font-size:var(--text-base);
    }

}


/* =====================================================================
   7. HOME
   ===================================================================== */

/* ---- Hero ---- */

.hero {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:center;
    gap:var(--space-12);
    max-width:var(--container);
    margin:0 auto;
    padding:var(--space-20) var(--space-8) var(--space-16);
}

.hero h1 {
    margin:0 0 var(--space-5);
    color:var(--color-heading);
    font-size:var(--text-display);
    font-weight:var(--weight-extrabold);
    line-height:1.08;
    letter-spacing:-.03em;
}

.hero-highlight {
    background:linear-gradient(90deg,var(--blue-600),var(--blue-400));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-content > p {
    max-width:520px;
    margin:0 0 var(--space-8);
    color:var(--color-text-soft);
    font-size:var(--text-lg);
    line-height:var(--leading-relaxed);
}

.hero-search {
    position:relative;
    display:flex;
    align-items:center;
    gap:var(--space-2);
    max-width:540px;
    padding:6px;
}

.hero-search-icon {
    margin-left:var(--space-4);
    color:var(--color-placeholder);
}

.hero-search input {
    flex:1;
    min-width:0;
    height:48px;
    padding:0 var(--space-2);
}

.hero-search button {
    min-height:48px;
    padding:0 var(--space-6);
}

.hero-tags {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-2);
    margin-top:var(--space-5);
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.hero-tags a {
    padding:4px 12px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:var(--color-surface-translucent);
    color:var(--color-text-soft);
    font-weight:var(--weight-medium);
    text-decoration:none;
    transition:border-color var(--transition),color var(--transition),background-color var(--transition);
}

.hero-tags a:hover {
    border-color:var(--color-primary-border);
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
}

/* ---- Hero visual ---- */

.hero-box {
    position:relative;
    display:flex;
    justify-content:center;
}

/* Soft glow behind the card */
.hero-box::before {
    content:"";
    position:absolute;
    inset:8% 4%;
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg,var(--blue-300),var(--blue-600));
    opacity:.35;
    filter:blur(48px);
}

.learning-card {
    position:relative;
    width:min(420px,100%);
    padding:var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    box-shadow:var(--shadow-lg);
}

.learning-card-header {
    display:flex;
    align-items:center;
    gap:var(--space-4);
    padding-bottom:var(--space-6);
    border-bottom:1px solid var(--color-border);
}

.learning-card-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:56px;
    height:56px;
    border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
    color:#ffffff;
    font-size:var(--text-2xl);
    box-shadow:var(--shadow-primary);
}

.learning-card h3 {
    margin:0 0 2px;
    color:var(--color-heading);
    font-size:var(--text-xl);
}

.learning-card-header p {
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.learning-card-list {
    display:grid;
    gap:var(--space-3);
    margin:var(--space-6) 0 0;
    padding:0;
    list-style:none;
}

.learning-card-list li {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-sm);
    background:var(--color-surface-subtle);
    color:var(--color-text);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
}

.learning-card-list i {
    color:var(--color-success);
}

/* ---- Stats ---- */

.stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-5);
    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--space-8);
}

.stats div {
    padding:var(--space-6);
    text-align:left;
}

.stats i {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin-bottom:var(--space-4);
    border-radius:var(--radius-sm);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-lg);
}

.stats h2 {
    margin:0 0 var(--space-1);
    color:var(--color-heading);
    font-size:var(--text-4xl);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.stats p {
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
}

/* ---- Platforms ---- */

.platforms-section {
    max-width:var(--container);
    margin:0 auto;
    padding:var(--space-20) var(--space-8) var(--space-12);
    text-align:center;
}

.platforms-section h2 {
    margin:0 0 var(--space-3);
    color:var(--color-heading);
    font-size:var(--text-4xl);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.platform-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-4);
    margin-top:var(--space-10);
}

.platform-card {
    display:inline-flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-6);
    color:var(--color-heading);
    font-weight:var(--weight-semibold);
}

.platform-logo {
    width:28px;
    height:28px;
    object-fit:contain;
}

/* Each card links to that platform's courses */
a.platform-card {
    text-decoration:none;
}

.platform-card-text {
    display:grid;
    text-align:left;
    line-height:1.3;
}

.platform-card-count {
    color:var(--color-muted);
    font-size:var(--text-xs);
    font-weight:var(--weight-medium);
}

.platforms-more {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-top:var(--space-8);
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
    text-decoration:none;
}

.platforms-more:hover {
    text-decoration:underline;
}

/* ---- Call to action banner ---- */

.cta {
    position:relative;
    max-width:var(--container);
    margin:var(--space-12) auto 0;
    padding:var(--space-16) var(--space-8);
    overflow:hidden;
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg,var(--blue-700) 0%,var(--blue-600) 55%,var(--blue-500) 100%);
    color:#ffffff;
    text-align:center;
    box-shadow:0 24px 48px rgba(29,78,216,.28);
}

/* Decorative circles */
.cta::before,
.cta::after {
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}

.cta::before {
    width:320px;
    height:320px;
    top:-140px;
    right:-80px;
}

.cta::after {
    width:220px;
    height:220px;
    bottom:-120px;
    left:-60px;
}

.cta > * {
    position:relative;
}

.cta-kicker {
    border-color:rgba(255,255,255,.25);
    background:rgba(255,255,255,.12);
    color:#ffffff;
}

.cta h2 {
    margin:0 0 var(--space-3);
    color:#ffffff;
    font-size:var(--text-4xl);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.cta p {
    margin:0 0 var(--space-8);
    color:var(--blue-100);
    font-size:var(--text-lg);
}

/* White button on the blue banner */
.cta .cta-btn {
    background:#ffffff;
    color:var(--blue-700);
}

.cta .cta-btn:hover {
    background:var(--blue-50);
    color:var(--blue-700);
    box-shadow:0 8px 20px rgba(15,23,42,.25);
}

@media(max-width:1024px) {

    .stats {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:900px) {

    .hero {
        grid-template-columns:minmax(0,1fr);
        gap:var(--space-10);
        padding:var(--space-12) var(--space-5) var(--space-12);
        text-align:center;
    }

    .hero-content > p,
    .hero-search {
        margin-left:auto;
        margin-right:auto;
    }

    .hero-tags {
        justify-content:center;
    }

    .platforms-section {
        padding:var(--space-16) var(--space-5) var(--space-10);
    }

    .cta {
        margin:var(--space-10) var(--space-5) 0;
    }

}

@media(max-width:600px) {

    .stats {
        gap:var(--space-3);
        padding:0 var(--space-5);
    }

    .stats div {
        padding:var(--space-4);
    }

    .stats h2 {
        font-size:var(--text-3xl);
    }

    .hero-search button {
        padding:0 var(--space-4);
    }

    .hero-search-icon {
        display:none;
    }

    .hero-search input {
        padding:0 var(--space-3);
    }

    .learning-card {
        padding:var(--space-6);
        text-align:left;
    }

    .platforms-section h2,
    .cta h2 {
        font-size:var(--text-3xl);
    }

    .cta {
        padding:var(--space-12) var(--space-5);
    }

    .cta .cta-btn {
        width:100%;
        max-width:300px;
    }

}


/* =====================================================================
   8. COURSES
   ===================================================================== */

.courses-page {
    max-width:1280px;
    margin:0 auto;
    padding:0 var(--space-8) var(--space-16);
}

/* ---- Search ---- */

.courses-page .search-box {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    max-width:640px;
    margin:0 auto var(--space-10);
    padding:6px;
}

.courses-page .search-box input {
    flex:1;
    min-width:0;
    height:48px;
    padding:0 var(--space-5);
}

.courses-page .search-box button {
    min-height:48px;
    padding:0 var(--space-6);
}

/* ---- Filters + grid ---- */

.courses-layout {
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    align-items:start;
    gap:var(--space-8);
}

/* Filter panel: a card with header, fields and an action footer */
.courses-page .filters {
    position:sticky;
    top:96px;
    padding:0;
    overflow:hidden;
}

.filters-header {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-4) var(--space-5);
    border-bottom:1px solid var(--color-border);
}

.filters-header h2 {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    margin:0;
    color:var(--color-heading);
    font-size:var(--text-base);
    font-weight:var(--weight-bold);
}

.filters-header h2 i {
    color:var(--color-primary);
    font-size:var(--text-sm);
}

.filters-clear {
    margin-left:auto;
    color:var(--color-primary);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
    text-decoration:none;
}

.filters-clear:hover {
    text-decoration:underline;
}

.filters-body {
    padding:var(--space-5);
}

.filter-group + .filter-group {
    margin-top:var(--space-4);
}

/* Searchable filter dropdowns (built by script.js from the <select>s).
   The list opens inside the panel, not over it, because the filter card
   clips anything that sticks out. */
.select-search-native {
    display:none !important;
}

.select-search-toggle {
    display:block;
    width:100%;
    min-height:var(--control-height);
    padding:10px var(--space-10) 10px var(--space-4);
    overflow:hidden;
    border:1px solid var(--color-border-strong);
    border-radius:var(--radius-sm);
    background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-4) center;
    box-shadow:var(--shadow-xs);
    color:var(--color-muted);
    font:inherit;
    font-size:var(--text-sm);
    line-height:1.5;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
    transition:border-color var(--transition),box-shadow var(--transition);
}

.select-search-toggle.has-value {
    color:var(--color-text);
    font-weight:var(--weight-medium);
}

.select-search-toggle:hover {
    border-color:var(--slate-400);
}

.select-search-toggle:focus-visible,
.select-search.is-open .select-search-toggle {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:var(--ring);
}

.select-search.is-open .select-search-toggle {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.select-search-panel {
    margin-top:var(--space-2);
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
}

.select-search-field {
    position:relative;
    padding:var(--space-2);
    border-bottom:1px solid var(--color-border);
}

.select-search-field i {
    position:absolute;
    top:50%;
    left:calc(var(--space-2) + 12px);
    transform:translateY(-50%);
    color:var(--color-placeholder);
    font-size:var(--text-xs);
    pointer-events:none;
}

.select-search-field input {
    display:block;
    width:100%;
    min-height:36px;
    padding:6px var(--space-3) 6px 32px;
    border:1px solid var(--color-border-strong);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-text);
    font:inherit;
    font-size:var(--text-sm);
}

.select-search-field input:focus {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:var(--ring);
}

.select-search-list {
    max-height:220px;
    margin:0;
    padding:var(--space-1);
    overflow-y:auto;
    list-style:none;
    overscroll-behavior:contain;
}

.select-search-option {
    position:relative;
    padding:8px var(--space-8) 8px var(--space-3);
    border-radius:var(--radius-sm);
    color:var(--color-text);
    font-size:var(--text-sm);
    cursor:pointer;
}

.select-search-option.is-active {
    background:var(--color-primary-soft);
}

.select-search-option[aria-selected="true"] {
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
}

/* Check mark on the chosen option */
.select-search-option[aria-selected="true"]::after {
    content:"";
    position:absolute;
    top:50%;
    right:var(--space-3);
    width:5px;
    height:10px;
    border:solid currentColor;
    border-width:0 2px 2px 0;
    transform:translateY(-60%) rotate(45deg);
}

/* Several choices: a tick box in front of each option instead */
.select-search-list[aria-multiselectable="true"] .select-search-option {
    padding-left:36px;
    padding-right:var(--space-3);
}

.select-search-list[aria-multiselectable="true"] .select-search-option::before {
    content:"";
    position:absolute;
    top:50%;
    left:var(--space-3);
    width:16px;
    height:16px;
    border:1.5px solid var(--color-border-strong);
    border-radius:4px;
    background:var(--color-surface);
    transform:translateY(-50%);
}

.select-search-list[aria-multiselectable="true"] .select-search-option[aria-selected="true"]::before {
    border-color:var(--color-primary);
    background:var(--color-primary);
}

.select-search-list[aria-multiselectable="true"] .select-search-option[aria-selected="true"]::after {
    right:auto;
    left:calc(var(--space-3) + 6px);
    width:4px;
    height:8px;
    border-color:#fff;
}

.select-search-clear {
    display:block;
    width:100%;
    padding:var(--space-2) var(--space-3);
    border:0;
    border-top:1px solid var(--color-border);
    background:none;
    color:var(--color-primary);
    font:inherit;
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    text-align:left;
    cursor:pointer;
}

.select-search-clear:hover,
.select-search-clear:focus-visible {
    background:var(--color-primary-soft);
    outline:none;
}

.select-search-empty {
    margin:0;
    padding:var(--space-3);
    color:var(--color-muted);
    font-size:var(--text-sm);
    text-align:center;
}

.filters-footer {
    display:grid;
    gap:var(--space-2);
    padding:var(--space-4) var(--space-5);
    border-top:1px solid var(--color-border);
    background:var(--color-surface-subtle);
}

.filters-reset {
    width:100%;
}

/* Filter drawer controls are only used on smaller screens */
.filters-toggle,
.filters-close,
.filters-backdrop {
    display:none;
}

/* ---- Results summary and active filter chips ---- */

.results-bar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-3);
    margin:calc(var(--space-6) * -1) 0 var(--space-6);
}

/* "Sort by" sits at the right end of the results bar */
.sort-form {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    margin-left:auto;
}

.sort-form label {
    color:var(--color-muted);
    font-size:var(--text-sm);
    white-space:nowrap;
}

.sort-form select {
    min-height:38px;
    padding:6px var(--space-8) 6px var(--space-3);
    border:1px solid var(--color-border-strong);
    border-radius:var(--radius-sm);
    background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
    color:var(--color-text);
    font:inherit;
    font-size:var(--text-sm);
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

.sort-form select:focus-visible {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:var(--ring);
}

.results-count {
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.filter-chips {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin:0;
    padding:0;
    list-style:none;
}

.filter-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:260px;
    padding:6px 10px;
    border:1px solid var(--color-primary-border);
    border-radius:var(--radius-sm);
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
    font-size:var(--text-sm);
    text-decoration:none;
    transition:background-color var(--transition),border-color var(--transition);
}

.filter-chip span {
    color:var(--color-muted);
}

.filter-chip strong {
    overflow:hidden;
    font-weight:var(--weight-semibold);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.filter-chip i {
    font-size:var(--text-xs);
}

.filter-chip:hover {
    border-color:var(--color-primary);
    background:var(--color-primary-soft-hover);
}

.filters-clear-all {
    color:var(--color-text-soft);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.filters-clear-all:hover {
    color:var(--color-primary);
}

.course-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:var(--space-6);
    min-width:0;
}

/* ---- Course card ---- */

.course-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:var(--space-4);
    overflow:hidden;
}

.course-image {
    position:relative;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--color-primary-soft),var(--color-surface-muted));
}

.course-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Placeholder shown when a course has no image (or it fails to load) */
.default-image,
.default-course-image {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    background:
        radial-gradient(circle at 80% 20%,rgba(147,197,253,.45),transparent 45%),
        linear-gradient(135deg,var(--color-primary-soft),var(--color-surface-muted));
}

.default-image::before,
.default-course-image::before {
    content:"\f19d";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--blue-300);
    font-size:40px;
}

.platform-badge {
    width:max-content;
    max-width:100%;
    margin-top:var(--space-4);
}

.course-platform-logo {
    width:18px;
    height:18px;
    object-fit:contain;
}

.course-card h3 {
    display:-webkit-box;
    margin:var(--space-3) 0 var(--space-2);
    overflow:hidden;
    color:var(--color-heading);
    font-size:var(--text-lg);
    font-weight:var(--weight-bold);
    line-height:var(--leading-snug);
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.course-card p {
    margin:0 0 var(--space-4);
    color:var(--color-muted);
    font-size:var(--text-sm);
    line-height:var(--leading-normal);
}

.course-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:auto;
    margin-bottom:var(--space-4);
}

.course-actions {
    display:flex;
    gap:var(--space-2);
}

.course-actions .course-btn {
    flex:1;
    width:auto;
}

.save-course-form {
    margin:0;
}

/* In the card the save button is a square icon button */
.course-actions .save-course-btn {
    width:var(--control-height);
    padding:0;
}

.course-actions .save-label {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
}

.courses-empty {
    grid-column:1 / -1;
    padding:var(--space-16) var(--space-6);
    border:1px dashed var(--color-border-strong);
    border-radius:var(--radius-lg);
    background:var(--color-surface-translucent);
    text-align:center;
}

.courses-empty h2 {
    margin:0 0 var(--space-2);
    color:var(--color-heading);
}

.courses-empty p {
    margin:0 0 var(--space-6);
    color:var(--color-muted);
}

.courses-empty .course-btn {
    width:auto;
}

.pagination {
    margin-top:var(--space-10);
}

/* ---- Tablet and phone: filters move into a slide-in drawer ---- */

@keyframes filtersDrawerIn {
    from { transform:translateX(-100%); }
    to { transform:translateX(0); }
}

@media(max-width:1024px) {

    .courses-layout {
        grid-template-columns:minmax(0,1fr);
        gap:0;
    }

    .courses-page .filters-toggle {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        min-height:var(--control-height);
        margin-bottom:var(--space-5);
        padding:0 var(--space-4);
        border:1px solid var(--color-border-strong);
        border-radius:var(--radius-sm);
        background:var(--color-surface);
        color:var(--color-heading);
        font-weight:var(--weight-semibold);
        box-shadow:var(--shadow-xs);
        cursor:pointer;
    }

    .filters-toggle > span:first-child {
        display:inline-flex;
        align-items:center;
        gap:var(--space-2);
    }

    .filters-toggle i {
        color:var(--color-primary);
    }

    .filters-count {
        display:inline-grid;
        place-items:center;
        min-width:20px;
        height:20px;
        padding:0 6px;
        border-radius:var(--radius-pill);
        background:var(--color-primary-fill);
        color:#ffffff;
        font-size:11px;
        font-weight:var(--weight-bold);
    }

    .filters-toggle-icon {
        color:var(--color-primary);
        font-size:var(--text-xl);
        line-height:1;
    }

    .courses-page .filters {
        display:none;
    }

    /* Full-height drawer with straight edges, fixed header and footer */
    .courses-page .filters.is-open {
        display:flex;
        flex-direction:column;
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        z-index:var(--z-drawer);
        width:min(360px,88vw);
        margin:0;
        border:0;
        border-right:1px solid var(--color-border);
        border-radius:0;
        box-shadow:var(--shadow-lg);
        animation:filtersDrawerIn .22s var(--ease);
    }

    .filters.is-open .filters-header {
        min-height:64px;
    }

    .filters.is-open .filters-body {
        flex:1;
        overflow-y:auto;
    }

    .courses-page .filters-close {
        display:grid;
        place-items:center;
        width:36px;
        height:36px;
        margin-left:var(--space-2);
        border:0;
        border-radius:var(--radius-sm);
        background:var(--color-surface-muted);
        color:var(--color-heading);
        font-size:var(--text-base);
        cursor:pointer;
    }

    /* Keep the close button at the far right even without "Clear" */
    .filters-header h2 + .filters-close {
        margin-left:auto;
    }

    .courses-page .filters-close:hover {
        background:var(--slate-200);
    }

    .filters-backdrop.is-visible {
        display:block;
        position:fixed;
        inset:0;
        z-index:calc(var(--z-drawer) - 1);
        background:var(--color-overlay);
    }

    body.filters-drawer-open {
        overflow:hidden;
    }

}

@media(max-width:600px) {

    .courses-page {
        padding:0 var(--space-4) var(--space-12);
    }

    .courses-page .search-box button {
        padding:0 var(--space-4);
    }

    .courses-page .search-box input {
        padding:0 var(--space-3);
    }

    .course-grid {
        gap:var(--space-4);
    }

}


/* =====================================================================
   9. COURSE DETAILS
   ===================================================================== */

.course-details-page {
    max-width:1120px;
    margin:0 auto;
    padding:var(--space-10) var(--space-8) var(--space-16);
}

.course-details-back {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-bottom:var(--space-6);
    color:var(--color-text-soft);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
    text-decoration:none;
    transition:color var(--transition);
}

.course-details-back:hover {
    color:var(--color-primary);
}

.course-details-card {
    display:grid;
    grid-template-columns:minmax(260px,380px) minmax(0,1fr);
    align-items:start;
    gap:var(--space-10);
    padding:var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
}

.course-details-image {
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--color-primary-soft),var(--color-surface-muted));
}

.course-details-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.default-course-image::before {
    font-size:56px;
}

.course-details-content h1 {
    margin:0 0 var(--space-4);
    color:var(--color-heading);
    font-size:var(--text-title);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.course-details-content .description {
    margin:0;
    color:var(--color-text-soft);
    font-size:var(--text-lg);
    line-height:var(--leading-relaxed);
}

.course-info {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-3);
    margin:var(--space-8) 0;
}

.info-box {
    padding:var(--space-4);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface-subtle);
}

.info-box span {
    display:block;
    margin-bottom:var(--space-1);
    color:var(--color-muted);
    font-size:var(--text-xs);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
}

.info-box strong {
    color:var(--color-heading);
    font-size:var(--text-base);
}

.platform-info-box strong {
    display:flex;
    align-items:center;
    gap:var(--space-2);
}

.platform-info-box .course-platform-logo {
    width:24px;
    height:24px;
}

.course-details-actions {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
}

.course-details-actions .save-course-btn {
    min-height:var(--control-height-lg);
    padding:0 var(--space-6);
    font-size:var(--text-base);
}

/* Admins viewing a hidden course */
.course-hidden-notice {
    margin-bottom:var(--space-5);
}

/* "Install app" in the footer (shown only when the browser offers it) */
.install-app {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-top:var(--space-3);
    padding:6px var(--space-3);
    border:1px solid rgba(148,163,184,.35);
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--slate-300);
    font:inherit;
    font-size:var(--text-sm);
    cursor:pointer;
}

.install-app:hover {
    border-color:var(--slate-300);
    color:#ffffff;
}

.install-app[hidden] {
    display:none;
}

/* "Report a problem" under the course details */
.report-problem {
    grid-column:1 / -1;
    margin-top:var(--space-2);
    padding-top:var(--space-4);
    border-top:1px solid var(--color-border);
    font-size:var(--text-sm);
}

.report-problem summary {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    color:var(--color-muted);
    font-weight:var(--weight-semibold);
    cursor:pointer;
}

.report-problem summary:hover {
    color:var(--color-text);
}

.report-problem form {
    display:grid;
    gap:var(--space-3);
    max-width:520px;
    margin-top:var(--space-4);
}

.report-problem fieldset {
    display:grid;
    gap:var(--space-2);
    margin:0;
    padding:0;
    border:0;
}

.report-problem legend,
.report-problem label[for] {
    margin-bottom:var(--space-1);
    color:var(--color-heading);
    font-weight:var(--weight-semibold);
}

.optional {
    color:var(--color-muted);
    font-weight:var(--weight-regular);
}

.report-problem .btn-secondary {
    justify-self:start;
}

.report-problem .alert {
    margin:var(--space-4) 0 0;
}

/* Related courses below the details card */
.related-courses {
    margin-top:var(--space-12);
}

.related-courses h2 {
    margin:0 0 var(--space-5);
    color:var(--color-heading);
    font-size:var(--text-xl);
}

.related-course-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:var(--space-5);
}

.related-course {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-3);
    min-width:0;
    padding:var(--space-5);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    box-shadow:var(--shadow-xs);
    color:inherit;
    text-decoration:none;
    transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}

.related-course:hover,
.related-course:focus-visible {
    border-color:var(--color-primary-border);
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}

.related-course h3 {
    margin:0;
    color:var(--color-heading);
    font-size:var(--text-base);
    line-height:1.35;
    overflow-wrap:anywhere;
}

.related-course p {
    flex:1;
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.related-course .course-tags {
    margin:0;
}

@media(max-width:900px) {

    .course-details-card {
        grid-template-columns:1fr;
        gap:var(--space-6);
    }

    .course-details-image {
        aspect-ratio:16 / 9;
    }

}

@media(max-width:600px) {

    .course-details-page {
        padding:var(--space-6) var(--space-4) var(--space-12);
    }

    .course-details-card {
        padding:var(--space-5);
        border-radius:var(--radius-lg);
    }

    .course-info {
        grid-template-columns:1fr;
    }

    .course-details-actions > * {
        flex:1 1 100%;
    }

    .course-details-actions .save-course-btn {
        width:100%;
    }

}


/* =====================================================================
   10. CATEGORIES
   ===================================================================== */

.categories-page {
    padding:0 var(--space-8) var(--space-16);
}

.category-tools {
    max-width:560px;
    margin:0 auto var(--space-10);
}

.category-tools .category-search {
    position:relative;
}

.category-search i {
    position:absolute;
    top:50%;
    left:var(--space-5);
    color:var(--color-placeholder);
    transform:translateY(-50%);
    pointer-events:none;
}

.category-search input {
    width:100%;
    height:52px;
    padding:0 var(--space-5) 0 48px;
}

.category-results {
    margin:var(--space-2) 0 0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.category-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:var(--space-5);
    max-width:var(--container);
    margin:0 auto;
}

.category-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:var(--space-6);
    color:var(--color-text);
    text-decoration:none;
}

.category-icon,
.about-icon {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin-bottom:var(--space-4);
    border-radius:var(--radius-md);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-xl);
    transition:background-color var(--transition),color var(--transition);
}

.category-card:hover .category-icon {
    background:var(--color-primary-fill);
    color:#ffffff;
}

.category-card h2 {
    margin:0 0 var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-lg);
}

.category-card p {
    flex:1;
    margin:0 0 var(--space-5);
    color:var(--color-muted);
    font-size:var(--text-sm);
    line-height:var(--leading-normal);
}

.categories-empty {
    max-width:560px;
    margin:0 auto;
    padding:var(--space-12) var(--space-6);
    border:1px dashed var(--color-border-strong);
    border-radius:var(--radius-lg);
    background:var(--color-surface-translucent);
    text-align:center;
}

.categories-empty h2 {
    margin:0 0 var(--space-2);
}

.categories-empty p {
    margin:0 0 var(--space-6);
    color:var(--color-muted);
}

.search-empty {
    margin-top:var(--space-6);
    padding:var(--space-8) var(--space-5);
}

@media(max-width:600px) {

    .categories-page {
        padding:0 var(--space-4) var(--space-12);
    }

}


/* =====================================================================
   11. ABOUT
   ===================================================================== */

.about-section {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--space-5);
    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--space-8);
}

.about-card {
    padding:var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
}

.about-card h2 {
    margin:0 0 var(--space-3);
    color:var(--color-heading);
    font-size:var(--text-xl);
}

.about-card p {
    margin:0;
    color:var(--color-text-soft);
    line-height:var(--leading-relaxed);
}

@media(max-width:600px) {

    .about-section {
        padding:0 var(--space-4);
    }

    .about-card {
        padding:var(--space-6);
    }

}


/* =====================================================================
   12. 404
   ===================================================================== */

.not-found-page {
    max-width:640px;
    margin:0 auto;
    padding:var(--space-20) var(--space-6) var(--space-16);
}

.not-found-code {
    display:block;
    margin-bottom:var(--space-3);
    background:linear-gradient(90deg,var(--blue-600),var(--blue-400));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:88px;
    font-weight:var(--weight-extrabold);
    letter-spacing:-.04em;
    line-height:1;
}

.not-found-page h1 {
    margin:0 0 var(--space-2);
    color:var(--color-heading);
}

.not-found-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:var(--space-5);
}

.not-found-home {
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
    text-decoration:none;
}

.not-found-home:hover {
    text-decoration:underline;
}

@media(max-width:600px) {

    .not-found-page {
        padding:var(--space-12) var(--space-4) var(--space-12);
    }

    .not-found-code {
        font-size:64px;
    }

}


/* =====================================================================
   13. USER AREA (dashboard and profile)
   ===================================================================== */

.user-layout {
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    align-items:start;
    gap:var(--space-8);
    max-width:var(--container);
    margin:0 auto;
    padding:var(--space-10) var(--space-8) var(--space-16);
}

.user-content {
    min-width:0;
}

/* ---- Sidebar ---- */

.user-sidebar {
    position:sticky;
    top:96px;
    padding:var(--space-4);
}

.user-sidebar-profile {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin-bottom:var(--space-3);
    padding:var(--space-2) var(--space-2) var(--space-4);
    border-bottom:1px solid var(--color-border);
}

.user-sidebar-profile > div {
    min-width:0;
}

.user-sidebar-profile strong,
.user-sidebar-profile > div > span {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-sidebar-profile strong {
    color:var(--color-heading);
    font-size:var(--text-sm);
}

.user-sidebar-profile > div > span {
    color:var(--color-muted);
    font-size:var(--text-xs);
}

.user-sidebar-avatar {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
    background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
    color:#ffffff;
    font-weight:var(--weight-bold);
}

.user-sidebar-nav {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.user-sidebar-nav a {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:10px var(--space-3);
    border-radius:var(--radius-sm);
    color:var(--color-text-soft);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    text-decoration:none;
    transition:background-color var(--transition),color var(--transition);
}

.user-sidebar-nav a i {
    width:18px;
    color:var(--color-placeholder);
    text-align:center;
    transition:color var(--transition);
}

.user-sidebar-nav a:hover {
    background:var(--color-surface-muted);
    color:var(--color-heading);
}

.user-sidebar-nav a.is-active {
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
    font-weight:var(--weight-semibold);
}

.user-sidebar-nav a.is-active i,
.user-sidebar-nav a:hover i {
    color:var(--color-primary);
}

.user-sidebar-nav .user-sidebar-logout {
    position:relative;
    margin-top:var(--space-4);
    color:var(--color-danger-text);
}

/* Divider above Logout */
.user-sidebar-nav .user-sidebar-logout::before {
    content:"";
    position:absolute;
    top:calc(var(--space-2) * -1);
    left:var(--space-3);
    right:var(--space-3);
    height:1px;
    background:var(--color-border);
}

.user-sidebar-nav .user-sidebar-logout i,
.user-sidebar-nav .user-sidebar-logout:hover i {
    color:var(--color-danger);
}

.user-sidebar-nav .user-sidebar-logout:hover {
    background:var(--color-danger-soft);
    color:var(--color-danger-hover);
}

/* ---- Welcome banner ---- */

.welcome-card {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-6);
    padding:var(--space-8);
    overflow:hidden;
    border:1px solid var(--color-primary-border);
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg,var(--color-primary-soft) 0%,var(--color-surface) 70%);
}

.welcome-card::after {
    content:"";
    position:absolute;
    top:-110px;
    right:-60px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(147,197,253,.25);
    pointer-events:none;
}

.welcome-card > * {
    position:relative;
    z-index:1;
}

.welcome-card .section-kicker {
    margin-bottom:var(--space-3);
}

.welcome-card h1 {
    margin:0 0 var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-3xl);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.welcome-card p {
    margin:0;
    color:var(--color-text-soft);
}

.welcome-card .btn-primary {
    flex-shrink:0;
}

/* ---- Stats ---- */

.stats-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-4);
    margin:var(--space-6) 0 var(--space-10);
}

.stat-card {
    display:flex;
    align-items:center;
    gap:var(--space-4);
    padding:var(--space-5);
}

.stat-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-lg);
}

.stat-card h2 {
    margin:0;
    color:var(--color-heading);
    font-size:var(--text-2xl);
    font-weight:var(--weight-extrabold);
    line-height:1.1;
}

.stat-card p {
    margin:2px 0 0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

/* ---- Saved courses ---- */

.section-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-bottom:var(--space-4);
}

.section-title {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin:0;
    color:var(--color-heading);
    font-size:var(--text-xl);
}

.section-link {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--color-primary);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
    text-decoration:none;
}

.section-link:hover {
    color:var(--color-primary-hover);
}

.saved-course-list {
    display:grid;
    gap:var(--space-3);
}

.saved-course-item {
    display:flex;
    align-items:center;
    gap:var(--space-4);
    padding:var(--space-4);
    transition:border-color var(--transition),box-shadow var(--transition);
}

.saved-course-item:hover {
    border-color:var(--color-primary-border);
    box-shadow:var(--shadow-sm);
}

.saved-course-logo {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface-subtle);
    color:var(--blue-400);
    font-size:var(--text-lg);
}

.saved-course-logo img {
    width:26px;
    height:26px;
    object-fit:contain;
}

.saved-course-info {
    flex:1;
    min-width:0;
}

.saved-course-info h3 {
    margin:0 0 2px;
    text-align:left;
    overflow:hidden;
    color:var(--color-heading);
    font-size:var(--text-base);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.saved-course-info p {
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.saved-course-actions {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-shrink:0;
}

.saved-course-actions form {
    margin:0;
}

.saved-course-remove:hover {
    background:var(--color-danger-soft);
    color:var(--color-danger-hover);
}

.empty-state {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:var(--space-12) var(--space-6);
    border:1px dashed var(--color-border-strong);
    border-radius:var(--radius-lg);
    background:var(--color-surface-translucent);
    text-align:center;
}

.empty-state-icon {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    margin-bottom:var(--space-4);
    border-radius:50%;
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-xl);
}

.empty-state h3 {
    margin:0 0 var(--space-1);
    color:var(--color-heading);
    font-size:var(--text-lg);
}

.empty-state p {
    margin:0 0 var(--space-5);
    color:var(--color-muted);
}

/* ---- Profile ---- */

.profile-page {
    max-width:720px;
}

.profile-header {
    margin-bottom:var(--space-6);
}

.profile-header .section-kicker {
    margin-bottom:var(--space-3);
}

.profile-header h1 {
    margin:0 0 var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-3xl);
    font-weight:var(--weight-extrabold);
    letter-spacing:-.02em;
}

.profile-header p {
    margin:0;
    color:var(--color-muted);
}

.profile-message {
    margin-bottom:var(--space-5);
}

.profile-form {
    padding:0;
    overflow:hidden;
}

.profile-photo {
    display:flex;
    align-items:center;
    gap:var(--space-6);
    padding:var(--space-6);
    border-bottom:1px solid var(--color-border);
}

.profile-avatar {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:96px;
    height:96px;
    overflow:hidden;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
    color:#ffffff;
    font-size:var(--text-4xl);
    font-weight:var(--weight-bold);
    box-shadow:0 0 0 4px var(--color-surface),0 0 0 5px var(--color-border);
}

.profile-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-photo-body {
    flex:1;
    min-width:0;
}

.profile-photo-body label {
    margin-bottom:0;
}

.profile-photo-body .form-hint {
    margin:2px 0 var(--space-3);
}

/* Unconfirmed email note under the profile email field */
.email-unconfirmed {
    color:var(--color-warning-text);
}

.email-unconfirmed a {
    color:inherit;
    font-weight:var(--weight-semibold);
}

/* "Remove photo": back to the default avatar.
   Needs .profile-form in front to beat the primary ".profile-form button" style. */
.profile-form .profile-photo-remove {
    min-height:var(--control-height-sm);
    margin-top:var(--space-3);
    padding:0 var(--space-3);
    border-color:transparent;
    background:transparent;
    color:var(--color-danger-text);
    box-shadow:none;
}

.profile-form .profile-photo-remove:hover {
    background:var(--color-danger-soft);
    color:var(--color-danger-hover);
    box-shadow:none;
    transform:none;
}

.profile-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-5);
    padding:var(--space-6);
}

.profile-actions {
    display:flex;
    justify-content:flex-end;
    padding:var(--space-4) var(--space-6);
    border-top:1px solid var(--color-border);
    background:var(--color-surface-subtle);
}

/* ---- Change password ---- */

.settings-card {
    margin-top:var(--space-8);
    padding:var(--space-6);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
}

.settings-card-intro h2 {
    margin:0 0 var(--space-1);
    color:var(--color-heading);
    font-size:var(--text-lg);
}

.settings-card-intro p {
    margin:0 0 var(--space-5);
    color:var(--color-text-soft);
    font-size:var(--text-sm);
}

.settings-card .alert {
    margin-bottom:var(--space-4);
}

.settings-form {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-4) var(--space-5);
}

.settings-form label {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.settings-field-full {
    grid-column:1 / -1;
}

/* Weekly email on / off */
.settings-form .settings-check {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin:0;
    font-weight:var(--weight-medium);
    cursor:pointer;
}

.settings-check input {
    width:18px;
    height:18px;
    flex:none;
    accent-color:var(--color-primary-fill);
}

/* Topics for the weekly email: tick-able chips */
.topic-picker {
    margin:0;
    padding:0;
    border:0;
    min-width:0;
}

.topic-picker legend {
    margin-bottom:var(--space-1);
    padding:0;
    color:var(--color-heading);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.topic-picker .form-hint {
    margin:0 0 var(--space-3);
}

.topic-options {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
}

.settings-form .topic-option {
    position:relative;
    margin:0;
    font-weight:var(--weight-medium);
    cursor:pointer;
}

.topic-option input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.topic-option span {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    padding:6px var(--space-4);
    border:1px solid var(--color-border-strong);
    border-radius:var(--radius-pill);
    background:var(--color-surface);
    color:var(--color-text);
    font-size:var(--text-sm);
    transition:background var(--transition),border-color var(--transition),color var(--transition);
}

.topic-option:hover span {
    border-color:var(--color-primary);
}

.topic-option input:checked + span {
    border-color:var(--color-primary-fill);
    background:var(--color-primary-fill);
    color:#fff;
}

.topic-option input:checked + span::before {
    content:"\2713";
    font-weight:var(--weight-bold);
}

.topic-option input:focus-visible + span {
    box-shadow:var(--ring);
}

@media(max-width:700px) {

    .settings-form {
        grid-template-columns:minmax(0,1fr);
    }

    .settings-form .btn {
        width:100%;
    }

}

/* ---- Delete account ---- */

.danger-zone {
    margin-top:var(--space-8);
    padding:var(--space-6);
    border:1px solid var(--color-danger-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
}

.danger-zone-intro h2 {
    margin:0 0 var(--space-1);
    color:var(--color-danger-text);
    font-size:var(--text-lg);
}

.danger-zone-intro p {
    margin:0 0 var(--space-5);
    color:var(--color-text-soft);
    font-size:var(--text-sm);
}

.danger-zone .alert {
    max-width:420px;
}

.danger-zone-form {
    display:grid;
    gap:var(--space-4);
    max-width:420px;
}

.danger-zone-form label:not(.check-label) {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.danger-zone-form .btn-danger {
    justify-self:start;
}

.danger-zone-note {
    display:flex;
    gap:var(--space-2);
    margin:0;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-sm);
    background:var(--color-warning-soft);
    color:var(--color-warning-text);
    font-size:var(--text-sm);
}

.check-label {
    display:flex;
    align-items:flex-start;
    gap:var(--space-2);
    color:var(--color-text);
    font-size:var(--text-sm);
    cursor:pointer;
}

.check-label input {
    flex-shrink:0;
    width:16px;
    height:16px;
    min-height:0;
    /* Centre the 16px box on the first 22px line of text */
    margin:3px 0 0;
    padding:0;
    accent-color:var(--color-danger);
}

/* ---- Tablet and phone ---- */

@media(max-width:900px) {

    .user-layout {
        grid-template-columns:minmax(0,1fr);
        gap:var(--space-5);
        padding:var(--space-6) var(--space-5) var(--space-12);
    }

    /* Sidebar becomes a row of tabs */
    .user-sidebar {
        position:static;
        padding:var(--space-2);
    }

    .user-sidebar-profile {
        display:none;
    }

    .user-sidebar-nav {
        flex-direction:row;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .user-sidebar-nav::-webkit-scrollbar {
        display:none;
    }

    .user-sidebar-nav a {
        flex-shrink:0;
        white-space:nowrap;
    }

    .user-sidebar-nav .user-sidebar-logout {
        margin:0 0 0 auto;
    }

    .user-sidebar-nav .user-sidebar-logout::before {
        display:none;
    }

}

@media(max-width:700px) {

    .welcome-card {
        flex-direction:column;
        align-items:flex-start;
        padding:var(--space-6);
    }

    .welcome-card h1,
    .profile-header h1 {
        font-size:var(--text-2xl);
    }

    /* Three compact stat cards in a row */
    .stats-grid {
        gap:var(--space-2);
        margin:var(--space-4) 0 var(--space-8);
    }

    .stat-card {
        flex-direction:column;
        align-items:flex-start;
        gap:var(--space-2);
        padding:var(--space-3);
    }

    .stat-icon {
        width:36px;
        height:36px;
        font-size:var(--text-base);
    }

    .stat-card h2 {
        font-size:var(--text-xl);
    }

    .stat-card p {
        font-size:var(--text-xs);
    }

    .profile-fields {
        grid-template-columns:minmax(0,1fr);
    }

}

@media(max-width:520px) {

    .user-layout {
        padding:var(--space-4) var(--space-4) var(--space-12);
    }

    .saved-course-item {
        flex-wrap:wrap;
    }

    .saved-course-actions {
        width:100%;
        padding-left:64px;
    }

    .saved-course-actions > * {
        flex:1;
    }

    .saved-course-actions .btn-outline,
    .saved-course-actions button {
        width:100%;
    }

    .profile-photo {
        flex-direction:column;
        text-align:center;
    }

    .profile-actions button {
        width:100%;
    }

}


/* =====================================================================
   14. HELP DESK (help.php)
   ===================================================================== */

.help-page {
    padding:0 var(--space-8) var(--space-16);
}

.help-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:start;
    gap:var(--space-6);
    max-width:960px;
    margin:0 auto;
}

.help-card {
    padding:var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
}

.help-card .alert {
    margin-bottom:var(--space-3);
}

.help-form {
    display:grid;
    gap:var(--space-5);
}

.help-form label {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.help-form .btn {
    justify-self:start;
}

.help-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-5);
}

/* Spam trap: kept out of sight and out of the tab order */
.help-honeypot {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.help-sent {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:var(--space-8) 0;
    text-align:center;
}

.help-sent-icon,
.help-aside-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--color-success-soft);
    color:var(--color-success);
    font-size:var(--text-xl);
}

.help-sent-icon {
    margin-bottom:var(--space-4);
}

.help-sent h2 {
    margin:0 0 var(--space-2);
}

.help-sent p {
    max-width:380px;
    margin:0 0 var(--space-6);
    color:var(--color-text-soft);
}

.help-aside {
    display:grid;
    gap:var(--space-4);
}

.help-aside-item {
    display:flex;
    gap:var(--space-4);
    padding:var(--space-5);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface-translucent);
}

.help-aside-icon {
    width:40px;
    height:40px;
    border-radius:var(--radius-md);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-base);
}

.help-aside h2 {
    margin:0 0 var(--space-1);
    color:var(--color-heading);
    font-size:var(--text-base);
}

.help-aside p {
    margin:0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

@media(max-width:860px) {

    .help-layout {
        grid-template-columns:minmax(0,1fr);
    }

}

@media(max-width:600px) {

    .help-page {
        padding:0 var(--space-4) var(--space-12);
    }

    .help-card {
        padding:var(--space-5);
    }

    .help-grid {
        grid-template-columns:minmax(0,1fr);
    }

    .help-form .btn {
        justify-self:stretch;
    }

}


/* =====================================================================
   15. PASSWORD PAGES (forgot-password.php, reset-password.php)
   ===================================================================== */

.auth-page {
    display:grid;
    place-items:start center;
    padding:var(--space-16) var(--space-6);
}

.auth-card {
    width:min(440px,100%);
    padding:var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    box-shadow:var(--shadow-md);
    text-align:center;
}

.auth-icon {
    display:inline-grid;
    place-items:center;
    width:56px;
    height:56px;
    margin-bottom:var(--space-4);
    border-radius:50%;
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-xl);
}

.auth-icon.is-error {
    background:var(--color-danger-soft);
    color:var(--color-danger);
}

.auth-card h1 {
    margin:0 0 var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-2xl);
    font-weight:var(--weight-extrabold);
}

.auth-lead {
    margin:0 0 var(--space-6);
    color:var(--color-text-soft);
    font-size:var(--text-sm);
}

.auth-card .alert {
    margin-bottom:var(--space-4);
    text-align:left;
}

.auth-form {
    display:grid;
    gap:var(--space-4);
    text-align:left;
}

.auth-form label {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.auth-footer {
    margin:var(--space-6) 0 0;
    color:var(--color-muted);
    font-size:var(--text-sm);
}

.auth-footer a {
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
}

@media(max-width:600px) {

    .auth-page {
        padding:var(--space-10) var(--space-4);
    }

    .auth-card {
        padding:var(--space-6) var(--space-5);
    }

}


/* ---- Suggest a course (user/suggest.php) ---- */

.profile-form.suggest-form {
    display:grid;
    gap:var(--space-5);
    padding:var(--space-6);
}

.profile-form.suggest-form .btn {
    justify-self:start;
}

.my-suggestions {
    margin-top:var(--space-8);
}

.my-suggestions h2 {
    margin:0 0 var(--space-3);
    color:var(--color-heading);
    font-size:var(--text-lg);
}

.my-suggestions ul {
    margin:0;
    padding:0;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    list-style:none;
}

.my-suggestions li {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    font-size:var(--text-sm);
}

.my-suggestions li + li {
    border-top:1px solid var(--color-border);
}

.my-suggestion-link {
    min-width:0;
    overflow-wrap:anywhere;
}

.my-suggestions a.badge {
    text-decoration:none;
}

/* ---- "Suggest a course" band (home page, end of the course list) ---- */

.suggest-band {
    display:flex;
    align-items:center;
    gap:var(--space-5);
    max-width:var(--container);
    margin:var(--space-12) auto 0;
    padding:var(--space-6) var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
}

.suggest-band-icon {
    flex:none;
    line-height:1;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--text-xl);
}

.suggest-band-text {
    flex:1;
    min-width:0;
}

.suggest-band-text h2 {
    margin:0 0 var(--space-1);
    color:var(--color-heading);
    font-size:var(--text-lg);
}

.suggest-band-text p {
    margin:0;
    color:var(--color-text-soft);
    font-size:var(--text-sm);
}

.suggest-band > a {
    flex:none;
}

/* Home page: same side gaps as the blue banner below it */
@media(max-width:900px) {
    .suggest-band-home {
        margin:var(--space-10) var(--space-5) 0;
    }
}

@media(max-width:600px) {
    .suggest-band {
        flex-direction:column;
        align-items:flex-start;
        padding:var(--space-5);
    }

    .suggest-band > a {
        width:100%;
    }
}


/* ---- Google ad spots (includes/ads.php) ---- */

.ad-slot {
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:1200px;
    margin:var(--space-8) auto;
    padding:0 var(--space-4);
}

/* Google needs the full width to choose an ad size, so no shrink-to-fit layout */
.ad-label {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--color-muted);
    font-size:var(--text-xs);
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
}

.ad-slot .adsbygoogle {
    display:block;
    width:100%;
    min-height:90px;
}

/* No ad available: hide the empty spot and its label (Google's recommendation) */
.ad-slot:has(ins[data-ad-status="unfilled"]),
ins.adsbygoogle[data-ad-status="unfilled"] {
    display:none !important;
}


/* ---- Privacy policy and other long text pages ---- */

.legal-content {
    max-width:760px;
    margin:0 auto var(--space-16);
    padding:var(--space-8);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
    color:var(--color-text);
    line-height:var(--leading-relaxed);
}

.legal-content h2 {
    margin:var(--space-8) 0 var(--space-3);
    color:var(--color-heading);
    font-size:var(--text-xl);
}

.legal-content ul {
    display:grid;
    gap:var(--space-2);
    padding-left:var(--space-5);
}

.legal-content a {
    color:var(--color-primary);
    font-weight:var(--weight-semibold);
}

@media(max-width:600px) {

    .legal-content {
        margin:0 var(--space-4) var(--space-12);
        padding:var(--space-5);
    }

}


/* Short message after saving / removing a course (script.js) */
.save-toast {
    position:fixed;
    left:50%;
    bottom:var(--space-6);
    z-index:1000;
    max-width:calc(100% - 32px);
    padding:var(--space-3) var(--space-5);
    border-radius:var(--radius-sm);
    background:var(--slate-900);
    box-shadow:var(--shadow-sm);
    color:#fff;
    font-size:var(--text-sm);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, 8px);
    transition:opacity var(--transition),transform var(--transition);
}

.save-toast.is-visible {
    opacity:1;
    transform:translate(-50%, 0);
}

.save-course-btn[aria-busy="true"],
.saved-course-remove[aria-busy="true"] {
    opacity:.6;
    cursor:progress;
}