/* ============================================================

   IGA INES AI Learning Platform — Design System

   Brand colors inspired by INES-Ruhengeri campus architecture

   ============================================================ */



:root {

    /* Typography (Google Fonts) */

    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;



    /* INES-Ruhengeri Official Brand (Green & Yellow from logo) */

    --ines-green: #13b652;

    --ines-green-dark: #0f5230;

    --ines-green-light: #2ac56b;

    --ines-yellow: #f0c020;

    --ines-yellow-dark: #c99200;

    --ines-yellow-light: #f5d04a;



    /* Legacy aliases mapped to brand colors */

    --ines-navy: var(--ines-green-dark);

    --ines-navy-light: var(--ines-green);

    --ines-blue: var(--ines-green);

    --ines-orange: var(--ines-yellow-dark);

    --ines-orange-light: var(--ines-yellow);

    --ines-gold: var(--ines-yellow);

    --ines-primary: var(--ines-green);

    --ines-primary-dark: var(--ines-green-dark);

    --ines-white: #ffffff;

    --ines-off-white: #f7faf8;

    --ines-gray-100: #eef4f0;

    --ines-gray-200: #dce8e0;

    --ines-gray-400: #8fa898;

    --ines-gray-600: #4a6356;

    --ines-gray-800: #1a2e24;



    /* Semantic */

    --color-primary: var(--ines-green-dark);

    --color-accent: var(--ines-yellow);

    --color-accent-hover: var(--ines-yellow-light);

    --color-surface: var(--ines-off-white);

    --color-text: var(--ines-gray-800);

    --color-text-muted: var(--ines-gray-600);



    /* Layout */

    --navbar-height: 76px;

    --section-padding: 5rem;

    --border-radius: 7px;

    --border-radius-lg: 7px;

    --shadow-sm: 0 1px 3px rgba(15, 82, 48, 0.08);

    --shadow-md: 0 4px 20px rgba(15, 82, 48, 0.12);

    --shadow-lg: 0 12px 40px rgba(15, 82, 48, 0.16);

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);



    /* Bootstrap overrides */

    --bs-primary: var(--ines-green);

    --bs-primary-rgb: 26, 122, 62;

    --bs-body-font-family: var(--font-sans);

    --bs-font-sans-serif: var(--font-sans);

}



[data-bs-theme="dark"],
[data-theme="dark"] {
    --ines-off-white: #0a110e;
    --ines-white: #141e19;
    --ines-gray-100: #1c2822;
    --ines-gray-200: #2c3d34;
    --ines-gray-400: #9db3a6;
    --ines-gray-600: #c5d9cc;
    --ines-gray-800: #f3faf6;

    --color-primary: #3ddc7a;
    --color-accent: var(--ines-yellow);
    --color-accent-hover: var(--ines-yellow-light);
    --color-surface: #0a110e;
    --surface: #13261c;
    --desk-surface: #13261c;
    --desk-border: rgba(255, 255, 255, 0.08);
    --color-text: #eef6f1;
    --color-text-muted: #b7cec0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

    --bs-body-bg: #0a110e;
    --bs-body-color: #eef6f1;
    --bs-border-color: #2c3d34;
    --bs-secondary-bg: #141e19;
    --bs-tertiary-bg: #1c2822;
    --bs-heading-color: #f6fcf8;
    --bs-link-color: #5ee08a;
    --bs-link-hover-color: #8aebb0;
    --bs-card-bg: #141e19;
    --bs-card-border-color: #2c3d34;
    --bs-modal-bg: #141e19;
    --bs-modal-border-color: #2c3d34;
    --bs-dropdown-bg: #141e19;
    --bs-dropdown-link-color: #eef6f1;
    --bs-dropdown-link-hover-bg: #1c2822;
    --bs-dropdown-border-color: #2c3d34;
    --bs-table-bg: transparent;
    --bs-table-color: #eef6f1;
    --bs-table-border-color: #2c3d34;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
    --bs-form-control-bg: #1c2822;
    --bs-emphasis-color: #f6fcf8;
}



/* ---- Base (full-system Google Font) ---- */

html {

    font-family: var(--font-sans);

}



body,

button,

input,

select,

textarea,

.btn,

.form-control,

.form-select,

.dropdown-menu,

.nav-link,

.navbar,

.app-shell,

.app-sidebar,

.app-topbar,

.app-content,

.modal,

.table,

.alert,

.badge,

.card {

    font-family: var(--font-sans);

}



body {

    color: var(--color-text);

    background-color: var(--ines-off-white);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, .display-font {

    font-family: var(--font-display);

}



.app-shell h1,

.app-shell h2,

.app-shell h3,

.app-shell .display-font,

.app-topbar-title,

.app-page-title h1 {

    font-family: var(--font-sans);

}



a {

    transition: color var(--transition);

}



/* ---- Top Bar ---- */

.top-bar {

    background: var(--ines-green-dark);

    color: #ffffff;

    font-size: 0.8125rem;

    padding: 0.45rem 0;

    border-bottom: 2px solid var(--ines-yellow);

}



.top-bar a {

    color: #ffffff;

    text-decoration: none;

}



.top-bar a:hover {

    color: var(--ines-yellow);

}



/* ---- Navbar ---- */

.navbar-ines {

    background: #ffffff !important;

    border-bottom: 2px solid var(--ines-gray-200);

    padding: 0.5rem 0;

    transition: all var(--transition);

    min-height: var(--navbar-height);

}



.navbar-ines.scrolled {

    box-shadow: var(--shadow-md);

    border-bottom-color: var(--ines-green);

}



[data-bs-theme="dark"] .navbar-ines {

    background: #0f2918 !important;

    border-bottom-color: var(--ines-green);

}



.navbar-brand-ines {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    text-decoration: none;

}



.navbar-brand-ines img {

    height: 58px;

    width: auto;

    max-width: 58px;

    object-fit: contain;

    background: #ffffff;

    border-radius: 4px;

    padding: 2px;

}



.navbar-brand-ines .brand-text {

    line-height: 1.2;

}



.navbar-brand-ines .brand-name {

    font-family: var(--font-display);

    font-weight: 700;

    font-size: 1.1rem;

    color: var(--ines-green-dark);

    display: block;

}



.navbar-brand-ines .brand-tagline {

    font-size: 0.68rem;

    color: var(--ines-green);

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



[data-bs-theme="dark"] .navbar-brand-ines .brand-name {

    color: #f1f5f9;

}



.nav-link-ines {

    font-weight: 500;

    font-size: 0.9375rem;

    color: var(--ines-gray-600) !important;

    padding: 0.5rem 0.85rem !important;

    border-radius: 0;

    transition: color var(--transition);

}



.nav-link-ines:hover,

.nav-link-ines.active {

    color: var(--ines-green) !important;

    background: transparent;

    font-weight: 600;

}



.nav-link-ines.active {

    box-shadow: none;

}



[data-bs-theme="dark"] .nav-link-ines {

    color: #cbd5e1 !important;

}



.search-form-nav {

    position: relative;

}



.search-form-nav input {

    border-radius: 50px;

    padding-left: 2.5rem;

    border: 1.5px solid var(--ines-gray-200);

    background: var(--ines-gray-100);

    font-size: 0.875rem;

    width: 220px;

    transition: all var(--transition);

}



.search-form-nav input:focus {

    width: 280px;

    border-color: var(--ines-green);

    box-shadow: 0 0 0 3px rgba(26, 122, 62, 0.18);

    background: white;

}



.search-form-nav .search-icon {

    position: absolute;

    left: 0.875rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--ines-gray-400);

    pointer-events: none;

}



/* ---- Buttons ---- */

.btn-ines-primary {

    background: var(--ines-green);

    border: none;

    color: #ffffff;

    font-weight: 600;

    padding: 0.625rem 1.5rem;

    border-radius: 50px;

    transition: all var(--transition);

}



.btn-ines-primary:hover {

    background: var(--ines-green-light);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(26, 122, 62, 0.35);

}



.btn-ines-accent {

    background: var(--ines-yellow);

    border: none;

    color: var(--ines-green-dark);

    font-weight: 700;

    padding: 0.625rem 1.5rem;

    border-radius: 50px;

    transition: all var(--transition);

}



.btn-ines-accent:hover {

    background: var(--ines-yellow-light);

    color: var(--ines-green-dark);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(240, 192, 32, 0.4);

}



.btn-ines-outline {

    border: 2px solid #ffffff;

    color: #ffffff;

    font-weight: 600;

    padding: 0.625rem 1.5rem;

    border-radius: 50px;

    background: transparent;

    transition: all var(--transition);

}



.btn-ines-outline:hover {

    background: #ffffff;

    color: var(--ines-green-dark);

    border-color: #ffffff;

}



.btn-ines-navy {

    background: var(--ines-green-dark);

    border: none;

    color: #ffffff;

    font-weight: 600;

    padding: 0.625rem 1.5rem;

    border-radius: 50px;

    transition: all var(--transition);

}



.btn-ines-navy:hover {

    background: var(--ines-green);

    color: #ffffff;

    transform: translateY(-2px);

}



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

.hero-ines {

    position: relative;

    min-height: 88vh;

    display: flex;

    align-items: center;

    overflow: hidden;

}



.hero-ines-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transform: scale(1.05);

    transition: transform 8s ease;

}



.hero-ines:hover .hero-ines-bg {

    transform: scale(1);

}



.hero-ines-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        135deg,

        rgba(15, 82, 48, 0.52) 0%,

        rgba(26, 122, 62, 0.42) 50%,

        rgba(0, 0, 0, 0.35) 100%

    );

    z-index: 1;

}

.hero-ines-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-ines-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.hero-ines-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.hero-ines-slide .hero-ines-bg-img,
.hero-ines-bg .hero-ines-bg-img,
.hero-ines-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.28);
}

.hero-ines-slide.is-active .hero-ines-bg-img {
    animation: heroComeForward 8.5s ease-out forwards;
}

@keyframes heroComeForward {
    from {
        transform: scale(1.32) translate3d(0, 8px, 0);
        filter: blur(2px);
    }
    to {
        transform: scale(1.04) translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.hero-ines-copy {
    position: relative;
}

.hero-ines-copy-panel {
    display: none;
}

.hero-ines-copy-panel.is-active {
    display: block;
    animation: heroCopyIn 0.7s ease both;
}

@keyframes heroCopyIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-ines-kicker {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f0c020;
    margin-bottom: 0.65rem;
}

.hero-ines-dots {
    display: flex;
    gap: 0.45rem;
    margin-top: 1.5rem;
}

.hero-ines-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
}

.hero-ines-dot.is-active {
    width: 28px;
    background: #f0c020;
}

@media (prefers-reduced-motion: reduce) {
    .hero-ines-slide.is-active .hero-ines-bg-img {
        animation: none;
        transform: scale(1.05);
        filter: none;
    }
}



.hero-ines-content {

    position: relative;

    z-index: 2;

    color: white;

    max-width: 720px;

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    background: var(--ines-yellow);

    color: var(--ines-green-dark);

    border: none;

    border-radius: 50px;

    padding: 0.45rem 1.1rem;

    font-size: 0.8125rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

}



.hero-ines h1 {

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 700;

    line-height: 1.15;

    margin-bottom: 1.25rem;

}



.hero-ines h1 .highlight {

    color: var(--ines-yellow);

}



.hero-ines-lead {

    font-size: 1.125rem;

    opacity: 0.9;

    line-height: 1.7;

    margin-bottom: 2rem;

}



.hero-stats {

    display: flex;

    gap: 2.5rem;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

}



.hero-stat-number {

    font-size: 2rem;

    font-weight: 800;

    color: var(--ines-yellow);

    line-height: 1;

}



.hero-stat-label {

    font-size: 0.8125rem;

    opacity: 0.75;

    margin-top: 0.25rem;

}



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

.stats-bar {

    background: white;

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-lg);

    margin-top: -3rem;

    position: relative;

    z-index: 10;

    padding: 2rem;

}



[data-bs-theme="dark"] .stats-bar {

    background: #1e293b;

}



.stat-item {

    text-align: center;

    padding: 0.5rem;

}



.stat-item .stat-icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 0.75rem;

    font-size: 1.4rem;

}



.stat-item .stat-value {

    font-size: 1.75rem;

    font-weight: 800;

    color: var(--ines-green-dark);

    line-height: 1;

}



[data-bs-theme="dark"] .stat-item .stat-value {

    color: #f1f5f9;

}



.stat-item .stat-label {

    font-size: 0.8125rem;

    color: var(--color-text-muted);

    margin-top: 0.25rem;

}



/* ---- Section Headers ---- */

.section-header {

    text-align: center;

    max-width: 640px;

    margin: 0 auto 3rem;

}



.section-eyebrow {

    display: inline-block;

    color: var(--ines-green);

    font-weight: 700;

    font-size: 0.8125rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    margin-bottom: 0.75rem;

}



.section-title {

    font-size: clamp(1.75rem, 3vw, 2.5rem);

    font-weight: 700;

    color: var(--ines-green-dark);

    margin-bottom: 1rem;

}



[data-bs-theme="dark"] .section-title {

    color: #f1f5f9;

}



.section-subtitle {

    color: var(--color-text-muted);

    font-size: 1.0625rem;

    line-height: 1.7;

}



/* ---- Feature Cards ---- */

.feature-card {

    background: white;

    border-radius: var(--border-radius-lg);

    padding: 2rem;

    height: 100%;

    border: 1px solid var(--ines-gray-200);

    transition: box-shadow var(--transition), transform var(--transition);

}



.feature-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-lg);

}



[data-bs-theme="dark"] .feature-card {

    background: #1e293b;

    border-color: rgba(255, 255, 255, 0.08);

}



.feature-card h5 {

    font-family: var(--font-sans);

    font-weight: 700;

    margin-bottom: 0.75rem;

}



.feature-card p {

    color: var(--color-text-muted);

    font-size: 0.9375rem;

    line-height: 1.65;

    margin-bottom: 0;

}



/* ---- Course Cards ---- */

.course-card {

    background: white;

    border-radius: var(--border-radius-lg);

    overflow: hidden;

    border: 1px solid var(--ines-gray-200);

    transition: all var(--transition);

    height: 100%;

}



.course-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);

}



[data-bs-theme="dark"] .course-card {

    background: #1e293b;

    border-color: rgba(255, 255, 255, 0.08);

}



.course-card-img {

    height: 200px;

    object-fit: cover;

    width: 100%;

}



.course-card-img-placeholder {

    height: 200px;

    background: linear-gradient(135deg, var(--ines-green-dark), var(--ines-green));

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, 0.5);

    font-size: 3rem;

}



.course-thumb-preview {

    max-width: 280px;

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid var(--ines-gray-200);

}



.course-thumb-preview img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 160px;

    object-fit: cover;

}



.course-video-player {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #0f172a;

    border-radius: 12px;

    overflow: hidden;

}



.course-video-player iframe,

.course-video-player video,

.course-video-poster {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

    object-fit: cover;

}



.lesson-thumb-sm {

    width: 40px;

    height: 28px;

    object-fit: cover;

    border-radius: 4px;

    flex-shrink: 0;

}



.paper-reader {

    background: var(--ines-gray-100, #f1f5f9);

}



.paper-reader-frame {

    width: 100%;

    min-height: 75vh;

    border: 0;

    display: block;

}



.paper-actions {

    flex-shrink: 0;

}



.course-card-body {

    padding: 1.5rem;

}



.course-badge {

    font-size: 0.75rem;

    font-weight: 600;

    padding: 0.3rem 0.75rem;

    border-radius: 50px;

}



/* ---- Campus Gallery ---- */

.campus-gallery-item {

    position: relative;

    border-radius: var(--border-radius-lg);

    overflow: hidden;

    height: 280px;

    cursor: pointer;

}



.campus-gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.campus-gallery-item:hover img {

    transform: scale(1.05);

}



.campus-gallery-caption {

    padding: 0.75rem 0 0;

}



.campus-gallery-caption h6 {

    font-weight: 600;

    margin: 0 0 0.15rem;

    color: var(--color-text);

}



.campus-gallery-caption small {

    color: var(--color-text-muted);

    font-size: 0.875rem;

}



/* ---- Role Cards ---- */

.role-card {

    border-radius: var(--border-radius-lg);

    overflow: hidden;

    position: relative;

    min-height: 320px;

    display: flex;

    align-items: flex-end;

}



.role-card-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: transform 0.6s ease;

}



.role-card:hover .role-card-bg {

    transform: scale(1.05);

}



.role-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(15, 82, 48, 0.94) 0%, rgba(26, 122, 62, 0.55) 100%);

}



.role-card-content {

    position: relative;

    z-index: 2;

    padding: 2rem;

    color: white;

    width: 100%;

}



.role-card-content h4 {

    font-family: var(--font-display);

    margin-bottom: 0.5rem;

}



/* ---- How It Works ---- */

.step-card {

    text-align: center;

    padding: 2rem 1.5rem;

}



.step-number {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: var(--ines-green);

    color: #ffffff;

    font-size: 1.25rem;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.25rem;

    box-shadow: 0 4px 15px rgba(26, 122, 62, 0.35);

}



/* ---- Page Hero (inner pages) ---- */

.page-hero {

    position: relative;

    min-height: 55vh;

    display: flex;

    align-items: center;

    overflow: hidden;

}



.page-hero-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.page-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        135deg,

        rgba(55, 65, 70, 0.58) 0%,

        rgba(75, 85, 90, 0.48) 50%,

        rgba(35, 42, 48, 0.62) 100%

    );

}



.page-hero-content {

    position: relative;

    z-index: 2;

    color: #ffffff;

    padding: 4.5rem 0 4rem;

    width: 100%;

}



.page-hero-content h1 {

    font-family: var(--font-display);

    font-size: clamp(2rem, 5vw, 3.25rem);

    font-weight: 700;

    margin-bottom: 1rem;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);

}



.page-hero-lead {

    font-size: clamp(1.0625rem, 2.2vw, 1.25rem);

    line-height: 1.7;

    max-width: 720px;

    opacity: 0.92;

    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

}



.page-hero-breadcrumb {

    margin-bottom: 1rem;

    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);

}



.page-hero-breadcrumb .breadcrumb-item a {

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

}



.page-hero-breadcrumb .breadcrumb-item a:hover {

    color: #ffffff;

}



.page-hero-breadcrumb .breadcrumb-item.active {

    color: var(--ines-yellow);

}



.page-hero .badge {

    font-size: 0.8125rem;

}



/* ---- Dashboard ---- */

.dashboard-welcome {

    background: linear-gradient(135deg, #3a7a55, #4a9068);

    border-radius: var(--border-radius-lg);

    color: white;

    padding: 2rem;

    margin-bottom: 2rem;

}



.stat-card-dash {

    background: white;

    border-radius: var(--border-radius);

    padding: 1.5rem;

    border: 1px solid var(--ines-gray-200);

    transition: all var(--transition);

    height: 100%;

}



.stat-card-dash:hover {

    box-shadow: var(--shadow-md);

    transform: translateY(-3px);

}



[data-bs-theme="dark"] .stat-card-dash {

    background: #1e293b;

    border-color: rgba(255,255,255,0.08);

}



.stat-card-dash .dash-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    margin-bottom: 1rem;

}



/* ---- CTA Section ---- */

.cta-section {

    background: linear-gradient(135deg, #3a7a55 0%, #4a9068 70%, #5a9e75 100%);

    border-radius: var(--border-radius-lg);

    padding: 4rem 3rem;

    color: white;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.cta-section::before {

    content: '';

    position: absolute;

    inset: 0;

    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}



/* ---- Footer ---- */

.footer-ines {

    background: #3a7a55;

    color: #ffffff;

    padding-top: 3.5rem;

}



.footer-ines h5, .footer-ines h6 {

    color: white;

    font-family: var(--font-sans);

    font-weight: 700;

}



.footer-ines a {

    color: #e8f5ec;

    text-decoration: none;

    transition: color var(--transition);

    font-size: 0.9375rem;

}



.footer-ines a:hover {

    color: #ffffff;

    text-decoration: underline;

}



.footer-brand img {

    height: 64px;

    width: auto;

    max-width: 64px;

    object-fit: contain;

    background: #ffffff;

    border-radius: 6px;

    padding: 3px;

}



.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding: 1.5rem 0;

    margin-top: 3rem;

    font-size: 0.875rem;

    color: rgba(255, 255, 255, 0.5);

}



.footer-bottom-row {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 0.75rem 1rem;

}



.footer-bottom-links {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem 1rem;

}



.footer-developed {

    margin: 0.85rem 0 0;

    text-align: center;

    color: rgba(255, 255, 255, 0.72);

}



.footer-developed a {

    color: var(--ines-yellow);

    font-weight: 700;

}



.footer-developed a:hover {

    color: #fff;

}



.footer-social a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all var(--transition);

}



.footer-social a:hover {

    background: rgba(255, 255, 255, 0.2);

    color: #ffffff !important;

}



/* ---- Parallax section (Ikigugu-style: fixed bg, scrolling text) ---- */

.parallax-section {

    position: relative;

    min-height: 28rem;

    display: flex;

    align-items: center;

    z-index: 1;

    overflow: hidden;

    margin-top: 3rem;

}



.parallax-section .parallax-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



.parallax-section .parallax-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background: linear-gradient(

        to bottom,

        rgba(15, 82, 48, 0.22) 0%,

        rgba(15, 82, 48, 0.32) 50%,

        rgba(15, 82, 48, 0.42) 100%

    );

}



.parallax-section .parallax-content {

    position: relative;

    z-index: 10;

    width: 100%;

    padding: 5rem 1rem;

}



.parallax-title {

    font-family: var(--font-display);

    font-size: clamp(1.75rem, 4vw, 3rem);

    font-weight: 700;

    color: #ffffff;

    text-shadow:

        0 1px 2px rgba(0, 0, 0, 0.95),

        0 2px 10px rgba(0, 0, 0, 0.85),

        0 4px 28px rgba(0, 0, 0, 0.65);

    margin-bottom: 1.5rem;

}



.parallax-text {

    color: #ffffff;

    font-size: 1.125rem;

    line-height: 1.7;

    max-width: 42rem;

    margin: 0 auto 2rem;

    text-shadow:

        0 1px 2px rgba(0, 0, 0, 0.95),

        0 2px 10px rgba(0, 0, 0, 0.85),

        0 4px 28px rgba(0, 0, 0, 0.65);

}



@media (max-width: 768px), (hover: none) {

    .parallax-section .parallax-bg {

        background-attachment: scroll;

    }

}



/* ---- Animations ---- */

.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.animate-on-scroll.visible {

    opacity: 1;

    transform: translateY(0);

}



@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(24px); }

    to { opacity: 1; transform: translateY(0); }

}



.animate-fade-in {

    animation: fadeInUp 0.8s ease forwards;

}



/* ---- AI Tutor immersive studio ---- */

.ai-tutor-immersive {

    overflow-x: hidden;

}



body.ai-tutor-immersive:not(.app-shell) {

    height: 100dvh;

    overflow: hidden;

    background: #0c3d24;

}



.ai-tutor-immersive:not(.app-shell) .navbar-ines {

    margin-bottom: 0;

}



.ai-tutor-page .app-content,

body.ai-tutor-immersive:not(.app-shell) > main {

    background:

        radial-gradient(ellipse at 12% 0%, rgba(19, 182, 82, 0.14), transparent 42%),

        radial-gradient(ellipse at 88% 8%, rgba(240, 192, 32, 0.12), transparent 38%),

        linear-gradient(180deg, #f3f5f4 0%, #eef2f0 100%);

    padding: 0 !important;

    margin: 0 !important;

}



.app-shell.ai-tutor-immersive {

    overflow: hidden;

    height: 100dvh;

}



.app-shell.ai-tutor-immersive .app-content {

    display: flex;

    flex-direction: column;

    height: calc(100dvh - 4.25rem);

    max-height: calc(100dvh - 4.25rem);

    min-height: 0;

    overflow: hidden;

    padding: 0 !important;

}



body.ai-tutor-immersive:not(.app-shell) > main {

    height: calc(100dvh - 72px);

    max-height: calc(100dvh - 72px);

    min-height: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.ai-studio {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-height: 0;

    height: 100%;

    width: 100%;

    overflow: hidden;

}



.ai-studio-stage {

    flex: 1;

    display: grid;

    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);

    min-height: 0;

    height: 100%;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    overflow: hidden;

}



.ai-studio-rail {

    padding: 1.25rem 1rem 1.25rem 1.15rem;

    display: flex;

    min-height: 0;

    height: 100%;

    overflow: hidden;

}



.ai-studio-rail-inner {

    width: 100%;

    height: 100%;

    min-height: 0;

    padding: 1.1rem 1.1rem 1.15rem;

    border-radius: 1.25rem;

    background:

        radial-gradient(circle at top left, rgba(240, 192, 32, 0.22), transparent 48%),

        linear-gradient(165deg, #0c3d24 0%, #0f5230 45%, #13b652 100%);

    color: #fff;

    box-shadow: 0 18px 44px rgba(15, 82, 48, 0.22);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.ai-studio-rail-toolbar {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 0.55rem;

    flex-shrink: 0;

}



.ai-studio-rail-top {

    flex-shrink: 0;

}



.ai-rail-toggle {

    width: 2.15rem;

    height: 2.15rem;

    border: 1px solid #e5ebe7;

    border-radius: 0.7rem;

    background: #fff;

    color: #0f5230;

    display: grid;

    place-items: center;

    padding: 0;

    font-size: 1.05rem;

}



.ai-rail-toggle:hover {

    border-color: #13b652;

    background: #f4faf6;

}



.ai-studio-rail .ai-rail-toggle {

    border-color: rgba(255, 255, 255, 0.22);

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

}



.ai-studio-rail .ai-rail-toggle:hover {

    background: rgba(255, 255, 255, 0.22);

}



.ai-rail-toggle--header {

    margin-right: 0.15rem;

    flex-shrink: 0;

}



.ai-studio:not(.rail-hidden) .ai-rail-toggle--header {

    display: none;

}



.ai-studio.rail-hidden .ai-studio-stage {

    grid-template-columns: minmax(0, 1fr);

}



.ai-studio.rail-hidden .ai-studio-rail {

    display: none;

}



.ai-rail-backdrop {

    display: none;

}



.ai-studio-title {

    margin: 0 0 0.55rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.1;

    color: #fff;

}



.ai-studio-lead {

    margin: 0 0 1.15rem;

    font-size: 0.9rem;

    line-height: 1.55;

    color: rgba(255, 255, 255, 0.82);

}



.ai-studio-focus {

    margin-bottom: 0.85rem;

}



.ai-studio-focus label {

    display: block;

    margin-bottom: 0.35rem;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(240, 192, 32, 0.95);

}



.ai-studio-select {

    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.22);

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

    border-radius: 0.85rem;

    padding: 0.65rem 0.75rem;

    font-size: 0.82rem;

    font-weight: 650;

}



.ai-studio-select option {

    color: #1a2e24;

}



.ai-studio-tips {

    list-style: none;

    margin: 0.85rem 0 0;

    padding: 0.85rem 0 0;

    display: grid;

    gap: 0.45rem;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    flex-shrink: 0;

}



.ai-studio-tips li {

    display: flex;

    gap: 0.55rem;

    align-items: flex-start;

    font-size: 0.78rem;

    line-height: 1.4;

    color: rgba(255, 255, 255, 0.78);

}



.ai-studio-tips i {

    color: #f0c020;

    margin-top: 0.1rem;

}



.ai-studio-chat {

    display: flex;

    flex-direction: column;

    min-height: 0;

    height: 100%;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.72);

    border-left: 1px solid #e5ebe7;

}



.ai-studio-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 0.85rem 1.25rem;

    border-bottom: 1px solid #eef2f0;

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);

}



.ai-studio-top-id {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.ai-studio-top-id .ai-chat-avatar--bot {

    background: linear-gradient(145deg, #0f5230, #13b652);

    color: #f0c020;

    border: none;

}



.ai-studio-top-id strong {

    display: block;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.05rem;

    color: #10261a;

}



.ai-studio-top-id small {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    font-size: 0.75rem;

    color: #6b7280;

}



.ai-chat-thread {

    position: relative;

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

}



.ai-studio-chat .ai-chat-body {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    overscroll-behavior: contain;

    padding: 1.5rem 1.35rem 1.25rem;

    scroll-padding-top: 0.5rem;

    scrollbar-width: thin;

    scrollbar-color: rgba(15, 82, 48, 0.28) transparent;

}



.ai-studio-chat .ai-chat-body::-webkit-scrollbar {

    width: 5px;

}



.ai-studio-chat .ai-chat-body::-webkit-scrollbar-track {

    background: transparent;

}



.ai-studio-chat .ai-chat-body::-webkit-scrollbar-thumb {

    background: rgba(15, 82, 48, 0.28);

    border-radius: 999px;

}



.ai-chat-spacer {

    width: 100%;

    pointer-events: none;

    flex-shrink: 0;

}



.ai-chat-nav {

    position: absolute;

    right: 0.85rem;

    bottom: 1rem;

    z-index: 5;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.ai-chat-nav.is-hidden {

    display: none;

}



.ai-chat-nav-btn {

    width: 2.4rem;

    height: 2.4rem;

    border: 1px solid #d7e0db;

    border-radius: 999px;

    background: #fff;

    color: #0f5230;

    box-shadow: 0 8px 20px rgba(15, 82, 48, 0.14);

    display: grid;

    place-items: center;

    font-size: 1.05rem;

    padding: 0;

}



.ai-chat-nav-btn:hover:not(:disabled) {

    background: #f4faf6;

    border-color: #13b652;

}



.ai-chat-nav-btn:disabled {

    opacity: 0.38;

    cursor: default;

}



.ai-studio-chat .ai-chat-composer {

    padding: 0.85rem 1.25rem 1.1rem;

    background: rgba(255, 255, 255, 0.96);

    border-top: 1px solid #eef2f0;

}



.ai-studio-chat .ai-msg-bubble {

    max-width: min(72%, 680px);

}



@media (max-width: 991.98px) {

    .ai-studio-stage {

        grid-template-columns: 1fr;

        position: relative;

    }



    .ai-studio-rail {

        display: none;

        position: absolute;

        inset: 0 auto 0 0;

        width: min(88vw, 320px);

        z-index: 30;

        padding: 0.75rem 0.65rem 0.75rem 0.75rem;

        height: 100%;

    }



    .ai-studio:not(.rail-hidden) .ai-studio-rail {

        display: flex;

    }



    .ai-studio:not(.rail-hidden) .ai-rail-backdrop {

        display: block;

        position: absolute;

        inset: 0;

        z-index: 25;

        background: rgba(16, 38, 26, 0.45);

        border: 0;

    }



    .ai-studio:not(.rail-hidden) .ai-rail-toggle--header {

        display: grid;

    }



    .ai-studio-chat {

        border-left: 0;

        height: 100%;

        min-height: 0;

    }



    .app-shell.ai-tutor-immersive .ai-studio-chat {

        height: 100%;

        min-height: 0;

    }



    .ai-studio-chat .ai-msg-bubble {

        max-width: 90%;

    }

}



/* ---- AI Tutor page (shared chat chrome) ---- */

.ai-tutor-page .app-content {

    background: #f3f5f4;

}



.ai-tutor {

    max-width: 1180px;

    margin: 0 auto;

}



.ai-tutor-layout {

    display: grid;

    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);

    gap: 1.25rem;

    align-items: stretch;

}



.ai-tutor-side-card {

    height: 100%;

    padding: 1.5rem 1.35rem;

    border-radius: 1.25rem;

    background:

        radial-gradient(circle at top left, rgba(240, 192, 32, 0.22), transparent 50%),

        linear-gradient(165deg, #0c3d24 0%, #0f5230 42%, #13b652 100%);

    color: #fff;

    box-shadow: 0 18px 44px rgba(15, 82, 48, 0.2);

}



.ai-tutor-mark {

    width: 2.75rem;

    height: 2.75rem;

    margin-bottom: 0.85rem;

    border-radius: 0.95rem;

    display: grid;

    place-items: center;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #f0c020;

    font-size: 1.2rem;

}



.ai-tutor-eyebrow {

    margin: 0 0 0.55rem;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: rgba(240, 192, 32, 0.95);

}



.ai-tutor-side-title {

    margin: 0 0 0.75rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.65rem;

    font-weight: 700;

    line-height: 1.2;

    color: #fff;

}



.ai-tutor-side-copy {

    margin: 0 0 1.25rem;

    font-size: 0.92rem;

    line-height: 1.55;

    color: rgba(255, 255, 255, 0.82);

}



.ai-tutor-caps {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.55rem;

}



.ai-tutor-caps li {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.7rem 0.85rem;

    border-radius: 0.9rem;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.12);

    font-size: 0.86rem;

    font-weight: 600;

}



.ai-tutor-caps i {

    color: var(--ines-yellow);

    font-size: 1rem;

}



.ai-tutor-guest-cta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 1.15rem;

}



.ai-tutor-guest-cta .lc-btn-ghost {

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.28);

    color: #fff;

}



.ai-tutor-guest-cta .lc-btn-ghost:hover {

    background: rgba(255, 255, 255, 0.2);

    color: #fff;

}



.ai-tutor-guest-cta .lc-btn-primary {

    background: #f0c020;

    border-color: #f0c020;

    color: #1a2e24;

}



.ai-tutor-guest-cta .lc-btn-primary:hover {

    background: #e4b418;

    border-color: #e4b418;

    color: #1a2e24;

}



.ai-chat-container {

    display: flex;

    flex-direction: column;

    min-height: min(74vh, 760px);

    border-radius: 1.25rem;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid #e5ebe7;

    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);

    backdrop-filter: blur(8px);

}



.ai-chat-header {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.95rem 1.2rem;

    background: linear-gradient(135deg, #0f5230, #157a42 55%, #13b652);

    color: #fff;

    flex-wrap: wrap;

}



.ai-chat-header-text {

    flex: 1;

    min-width: 140px;

}



.ai-chat-course-pick {

    margin-left: auto;

}



.ai-course-select {

    max-width: min(280px, 70vw);

    border: 1px solid rgba(255, 255, 255, 0.28);

    background: rgba(255, 255, 255, 0.14);

    color: #fff;

    border-radius: 0.75rem;

    padding: 0.45rem 0.7rem;

    font-size: 0.8rem;

    font-weight: 600;

}



.ai-course-select option {

    color: #1a2e24;

}



.ai-tutor-course-list {

    margin-top: 1.15rem;

}



.ai-tutor-course-list-label {

    margin: 0 0 0.5rem;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.7);

}



.ai-tutor-course-pill {

    display: inline-block;

    margin: 0 0.35rem 0.35rem 0;

    padding: 0.28rem 0.55rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.16);

    font-size: 0.72rem;

    font-weight: 700;

}



.ai-chat-header-text h5 {

    margin: 0;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.15rem;

    font-weight: 700;

}



.ai-chat-header-text small {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    opacity: 0.9;

    font-size: 0.76rem;

}



.ai-chat-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #7dffb0;

    box-shadow: 0 0 0 3px rgba(125, 255, 176, 0.25);

    animation: aiPulse 2s ease-in-out infinite;

}



@keyframes aiPulse {

    0%, 100% { box-shadow: 0 0 0 3px rgba(125, 255, 176, 0.2); }

    50% { box-shadow: 0 0 0 5px rgba(125, 255, 176, 0.12); }

}



.ai-chat-avatar {

    width: 40px;

    height: 40px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    font-size: 1.1rem;

}



.ai-chat-avatar--bot {

    background: rgba(255, 255, 255, 0.16);

    color: #f0c020;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.ai-msg .ai-chat-avatar--bot {

    background: linear-gradient(145deg, #0f5230, #13b652);

    color: #f0c020;

    border: none;

}



.ai-chat-avatar--user {

    background: #eef4f0;

    color: var(--ines-green-dark);

}



.ai-chat-body {

    flex: 1;

    overflow-y: auto;

    padding: 1.35rem 1.15rem 1.1rem;

    background: transparent;

    scroll-behavior: smooth;

}



.ai-chat-body.has-messages {

    background: linear-gradient(180deg, rgba(247, 250, 248, 0.65), rgba(243, 246, 244, 0.9));

}



[data-bs-theme="dark"] .ai-chat-body {

    background: #0f172a;

}



.ai-chat-empty {

    text-align: center;

    padding: 2.75rem 1rem 1.75rem;

    max-width: 36rem;

    margin: 0 auto;

}



.ai-chat-empty-orb {

    width: 72px;

    height: 72px;

    margin: 0 auto 1.15rem;

    border-radius: 1.35rem;

    display: grid;

    place-items: center;

    background:

        radial-gradient(circle at 30% 25%, rgba(240, 192, 32, 0.45), transparent 50%),

        linear-gradient(145deg, #0f5230, #13b652);

    color: #fff;

    font-size: 1.75rem;

    box-shadow: 0 16px 36px rgba(15, 82, 48, 0.28);

    animation: aiOrb 4s ease-in-out infinite;

}



@keyframes aiOrb {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}



.ai-chat-empty-title {

    margin: 0 0 0.45rem;

    font-family: Fraunces, Georgia, serif;

    font-weight: 700;

    font-size: 1.55rem;

    color: #10261a;

}



.ai-chat-empty-copy {

    margin: 0 auto 1.35rem;

    max-width: 28rem;

    font-size: 0.94rem;

    line-height: 1.55;

    color: #6b7280;

}



.ai-chat-prompts {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.65rem;

    text-align: left;

}



@media (max-width: 560px) {

    .ai-chat-prompts {

        grid-template-columns: 1fr;

    }

}



.ai-prompt-chip {

    display: grid;

    gap: 0.2rem;

    border: 1px solid #e5ebe7;

    background: #fff;

    color: #1f2937;

    border-radius: 1rem;

    padding: 0.85rem 0.95rem;

    font-size: 0.88rem;

    font-weight: 650;

    line-height: 1.35;

    text-align: left;

    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;

}



.ai-prompt-chip-kicker {

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: #0f5230;

}



.ai-prompt-chip:hover {

    border-color: #13b652;

    background: #f4faf6;

    transform: translateY(-2px);

    box-shadow: 0 10px 22px rgba(15, 82, 48, 0.08);

}



.ai-msg {

    display: flex;

    gap: 0.75rem;

    margin-bottom: 1.15rem;

    align-items: flex-start;

    animation: aiMsgIn 0.32s ease;

}



.ai-msg--user {

    flex-direction: row-reverse;

}



@keyframes aiMsgIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}



.ai-msg-bubble {

    max-width: min(78%, 640px);

    min-width: 0;

}



.ai-msg-label {

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-bottom: 0.35rem;

    color: #6b7280;

}



.ai-msg--user .ai-msg-label {

    text-align: right;

}



.ai-msg-text,

.ai-msg-prose {

    padding: 0.9rem 1.05rem;

    border-radius: 1.15rem;

    font-size: 0.96rem;

    line-height: 1.65;

}



.ai-msg--user .ai-msg-text {

    background: linear-gradient(135deg, #0f5230, #13b652);

    color: #fff;

    border-bottom-right-radius: 0.35rem;

    white-space: pre-wrap;

    word-break: break-word;

}



.ai-msg--assistant .ai-msg-prose {

    background: #fff;

    border: 1px solid #e5ebe7;

    box-shadow: 0 6px 18px rgba(15, 82, 48, 0.05);

    border-bottom-left-radius: 0.35rem;

    color: #1f2937;

}



.ai-msg-prose.is-revealing {

    animation: aiReveal 0.45s ease;

}



@keyframes aiReveal {

    from { opacity: 0.35; transform: translateY(4px); }

    to { opacity: 1; transform: none; }

}



.ai-msg-prose > *:first-child { margin-top: 0; }

.ai-msg-prose > *:last-child { margin-bottom: 0; }



.ai-msg-prose p {

    margin: 0 0 0.75rem;

}



.ai-msg-prose h1,

.ai-msg-prose h2,

.ai-msg-prose h3,

.ai-msg-prose h4 {

    margin: 1rem 0 0.45rem;

    font-family: Fraunces, Georgia, serif;

    font-weight: 700;

    line-height: 1.3;

    color: var(--ines-green-dark);

}



.ai-msg-prose h2 { font-size: 1.15rem; }

.ai-msg-prose h3 { font-size: 1.02rem; }

.ai-msg-prose h4 { font-size: 0.95rem; }



.ai-msg-prose ul,

.ai-msg-prose ol {

    margin: 0 0 0.85rem;

    padding-left: 1.2rem;

}



.ai-msg-prose li {

    margin-bottom: 0.35rem;

}



.ai-msg-prose li::marker {

    color: var(--ines-green);

}



.ai-msg-prose strong {

    color: #0c3d24;

    font-weight: 700;

}



.ai-msg-prose a {

    color: var(--ines-green-dark);

    font-weight: 600;

}



.ai-msg-prose blockquote {

    margin: 0.75rem 0;

    padding: 0.55rem 0.85rem;

    border-left: 3px solid var(--ines-yellow);

    background: #fbf8ee;

    color: var(--ines-gray-600);

    border-radius: 0 0.5rem 0.5rem 0;

}



.ai-msg-prose code {

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-size: 0.86em;

    background: #eef4f0;

    color: #0f5230;

    padding: 0.12em 0.4em;

    border-radius: 0.35rem;

}



.ai-msg-prose pre {

    margin: 0.75rem 0;

    padding: 0.85rem 1rem;

    overflow-x: auto;

    background: #10261a;

    color: #e8f6ee;

    border-radius: 0.75rem;

}



.ai-msg-prose pre code {

    background: transparent;

    color: inherit;

    padding: 0;

    font-size: 0.84rem;

}



.ai-msg-prose table {

    width: 100%;

    border-collapse: collapse;

    margin: 0.75rem 0;

    font-size: 0.88rem;

}



.ai-msg-prose th,

.ai-msg-prose td {

    border: 1px solid #dce8e0;

    padding: 0.45rem 0.6rem;

}



.ai-msg-prose th {

    background: #eef6f1;

    color: var(--ines-green-dark);

}



.ai-msg-actions {

    display: flex;

    gap: 0.35rem;

    margin-top: 0.45rem;

}



.ai-msg-action {

    border: 0;

    background: transparent;

    color: #6b7280;

    font-size: 0.75rem;

    font-weight: 650;

    padding: 0.25rem 0.45rem;

    border-radius: 0.5rem;

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

}



.ai-msg-action:hover {

    background: #eef4f0;

    color: #0f5230;

}



.ai-thinking {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

}



.ai-thinking-text {

    font-style: normal;

    font-size: 0.86rem;

    font-weight: 600;

    color: #6b7280;

}



.ai-typing {

    display: inline-flex;

    gap: 0.35rem;

    align-items: center;

    min-height: 1.2rem;

}



.ai-typing span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--ines-green);

    opacity: 0.35;

    animation: aiTyping 1.1s infinite ease-in-out;

}



.ai-typing span:nth-child(2) { animation-delay: 0.15s; }

.ai-typing span:nth-child(3) { animation-delay: 0.3s; }



@keyframes aiTyping {

    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }

    40% { opacity: 1; transform: translateY(-3px); }

}



.ai-chat-composer {

    padding: 0.9rem 1rem 0.85rem;

    background: rgba(255, 255, 255, 0.96);

    border-top: 1px solid #eef2f0;

}



.ai-chat-form {

    display: flex;

    align-items: flex-end;

    gap: 0.65rem;

    padding: 0.5rem 0.5rem 0.5rem 1rem;

    border: 1.5px solid #e5ebe7;

    border-radius: 1.35rem;

    background: #fff;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.ai-chat-form:focus-within {

    border-color: #13b652;

    box-shadow: 0 0 0 4px rgba(19, 182, 82, 0.12);

}



.ai-chat-form.is-busy {

    opacity: 0.78;

}



.ai-chat-input {

    flex: 1;

    border: 0;

    outline: 0;

    resize: none;

    background: transparent;

    min-height: 44px;

    max-height: 160px;

    padding: 0.6rem 0;

    font-size: 0.98rem;

    line-height: 1.45;

    color: var(--ines-gray-800);

}



.ai-chat-input::placeholder {

    color: #9ca3af;

}



.ai-chat-send {

    width: 44px;

    height: 44px;

    border: 0;

    border-radius: 999px;

    background: linear-gradient(145deg, #0f5230, #13b652);

    color: #fff;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    transition: transform 0.15s ease, filter 0.15s ease;

}



.ai-chat-send:hover:not(:disabled) {

    transform: translateY(-1px) scale(1.03);

    filter: brightness(1.05);

}



.ai-chat-send:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.ai-chat-hint {

    margin: 0.5rem 0 0;

    font-size: 0.72rem;

    color: #9ca3af;

    text-align: center;

}



@media (max-width: 991.98px) {

    .ai-tutor-layout {

        grid-template-columns: 1fr;

    }



    .ai-tutor-side {

        display: none;

    }



    .ai-chat-container {

        min-height: min(80vh, 720px);

    }



    .ai-msg-bubble {

        max-width: 88%;

    }

}



/* ---- Responsive ---- */

@media (max-width: 991.98px) {

    :root {

        --section-padding: 3.5rem;

        --navbar-height: 68px;

    }



    .navbar-ines .navbar-collapse {

        padding: 1rem 0 0.5rem;

        border-top: 1px solid var(--ines-gray-200);

        margin-top: 0.75rem;

    }



    .navbar-ines .nav-link-ines {

        padding: 0.65rem 0.25rem !important;

    }



    .navbar-actions .btn {

        width: 100%;

        justify-content: center;

        min-height: 44px;

    }



    .footer-bottom {

        text-align: center;

    }



    .footer-bottom-row {

        flex-direction: column;

        justify-content: center;

        text-align: center;

    }



    .footer-bottom-links {

        justify-content: center;

    }

}



@media (max-width: 768px) {

    .hero-stats {

        flex-wrap: wrap;

        gap: 1.25rem;

    }



    .hero-stats > div {

        flex: 1 1 calc(50% - 0.75rem);

        min-width: 120px;

    }



    .stats-bar {

        margin-top: -1.5rem;

        padding: 1.25rem;

    }



    .search-form-nav input {

        width: 100%;

    }



    .search-form-nav input:focus {

        width: 100%;

    }



    .hero-ines {

        min-height: auto;

        padding: 4.5rem 0 3rem;

    }



    .hero-ines-content h1 {

        font-size: clamp(1.85rem, 8vw, 2.75rem);

    }



    .hero-ines-lead {

        font-size: 1rem;

    }



    .hero-ines-content .btn-lg {

        width: 100%;

    }



    .hero-ines-content .d-flex.flex-wrap.gap-3 {

        flex-direction: column;

    }



    .section-header {

        text-align: center;

    }



    .section-title {

        font-size: clamp(1.5rem, 6vw, 2rem);

    }



    .feature-card {

        padding: 1.5rem;

    }



    .campus-gallery-item {

        height: 220px !important;

    }



    .campus-gallery-item[style*="height:360px"],

    .campus-gallery-item[style*="height:170px"] {

        height: 220px !important;

    }



    .parallax-section {

        min-height: 22rem;

        margin-top: 2rem;

    }



    .parallax-section .parallax-content {

        padding: 3rem 1rem;

    }



    .parallax-title {

        font-size: clamp(1.5rem, 6vw, 2.25rem);

    }



    .parallax-text {

        font-size: 1rem;

    }



    .page-hero {

        min-height: 42vh;

    }



    .page-hero-content {

        padding: 3rem 0 2.5rem;

    }



    .page-hero-content h1 {

        font-size: clamp(1.75rem, 7vw, 2.5rem);

    }



    .page-hero-lead {

        font-size: 0.9375rem;

    }



    .course-card-body .btn,

    .course-card-body .d-flex {

        flex-wrap: wrap;

        gap: 0.75rem;

    }



    .dashboard-welcome .row {

        text-align: center;

    }

}



@media (max-width: 575.98px) {

    :root {

        --section-padding: 2.75rem;

    }



    .container {

        padding-left: 1rem;

        padding-right: 1rem;

    }



    .navbar-brand-ines img {

        height: 46px;

        max-width: 46px;

    }



    .navbar-brand-ines .brand-name {

        font-size: 0.95rem;

    }



    .navbar-brand-ines .brand-tagline {

        font-size: 0.6rem;

    }



    .stat-item {

        padding: 0.75rem;

    }



    .stat-value {

        font-size: 1.25rem;

    }



    .footer-ines {

        text-align: center;

    }



    .footer-brand {

        justify-content: center;

    }



    .footer-social {

        justify-content: center;

    }



    .step-card {

        text-align: center;

    }



    .btn-ines-primary,

    .btn-ines-accent,

    .btn-ines-navy,

    .btn-ines-outline {

        min-height: 44px;

    }

}



/* ---- Auth pages ---- */

.auth-page main {

    min-height: calc(100vh - var(--navbar-height) - 120px);

}



.auth-card {

    max-width: 100%;

}



.auth-logo {

    height: 64px;

    width: auto;

}



.auth-form .auth-input,

.auth-form .form-control,

.auth-form .form-select {

    border-radius: 10px;

    padding: 0.75rem 1rem;

    border: 1.5px solid var(--ines-gray-200);

    width: 100%;

    font-size: 1rem;

    min-height: 48px;

}



.pw-toggle-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.pw-toggle-wrap input,
.auth-form .pw-toggle-wrap input[type="password"],
.auth-form .pw-toggle-wrap input[type="text"],
.as-form .pw-toggle-wrap input[type="password"],
.as-form .pw-toggle-wrap input[type="text"] {
    width: 100%;
    padding-right: 2.85rem !important;
}

.pw-toggle-btn {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: #475569;
    padding: 0;
    line-height: 1;
    font-size: 1.15rem;
    cursor: pointer;
}

.pw-toggle-btn svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
}
.pw-toggle-btn .pw-icon-hide[hidden],
.pw-toggle-btn .pw-icon-show[hidden] {
    display: none;
}



.auth-form .auth-input:focus,

.auth-form .form-control:focus,

.auth-form .form-select:focus {

    border-color: var(--ines-green);

    box-shadow: 0 0 0 3px rgba(26, 122, 62, 0.18);

    outline: none;

}



.auth-form .form-text {

    font-size: 0.8125rem;

    color: var(--color-text-muted);

}



.auth-form ul.errorlist {

    list-style: none;

    padding: 0;

    margin: 0.35rem 0 0;

    color: #dc3545;

    font-size: 0.875rem;

}



/* ---- App shell (black sidebar + dropdown groups) ---- */

:root {

    --app-sidebar-width: 280px;

    --app-sidebar-collapsed: 76px;

    --app-topbar-height: 64px;

    --sb-bg: #000000;

    --sb-ink: #ffffff;

    --sb-muted: #9ca3af;

    --sb-line: rgba(255, 255, 255, 0.12);

    --sb-soft: rgba(255, 255, 255, 0.08);

    --sb-elevated: #141414;

}



.app-shell {

    background: var(--ines-off-white);

}



.app-sidebar {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1040;

    width: var(--app-sidebar-width);

    height: 100vh;

    height: 100dvh;

    padding: 0;

    background: #000000;

    display: flex;

    flex-direction: column;

    transform: translateX(-100%);

    transition: transform 0.25s ease, width 0.25s ease;

    border-right: 1px solid var(--sb-line);

}



.app-shell.sidebar-open .app-sidebar {

    transform: translateX(0);

}



.sb-panel {

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

    background: #000000;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    overflow: hidden;

}



@media (min-width: 992px) {

    .app-sidebar {

        transform: translateX(0);

    }



    .app-shell.sidebar-collapsed {

        --app-sidebar-width: var(--app-sidebar-collapsed);

    }



    .app-shell.sidebar-collapsed .app-sidebar {

        padding: 0;

        overflow: visible;

        z-index: 1050;

    }



    .app-shell.sidebar-collapsed .app-sidebar {

        overflow-x: visible;

        overflow-y: auto;

    }



    .app-shell.sidebar-collapsed .sb-panel {

        overflow: visible;

    }



    .app-shell.sidebar-collapsed .app-sidebar-nav {

        overflow: visible;

    }



    .app-shell.sidebar-collapsed .sb-section-label,

    .app-shell.sidebar-collapsed .sb-brand-text {

        display: none !important;

    }



    .app-shell.sidebar-collapsed .app-nav-link,

    .app-shell.sidebar-collapsed .sb-group-toggle {

        color: var(--sb-ink);

    }



    .app-shell.sidebar-collapsed .app-nav-link i,

    .app-shell.sidebar-collapsed .sb-group-toggle > i:first-child {

        color: var(--sb-ink);

    }



    .app-shell.sidebar-collapsed .app-nav-link:hover,

    .app-shell.sidebar-collapsed .sb-group-toggle:hover {

        color: #ffffff;

    }



    .app-shell.sidebar-collapsed .app-nav-link.active {

        color: #000000;

    }



    .app-shell.sidebar-collapsed .app-nav-link.active i {

        color: #000000;

    }



    .app-shell.sidebar-collapsed .sb-collapse-btn i {

        color: var(--ines-yellow);

    }



    .app-shell.sidebar-collapsed .sb-head {

        flex-direction: column;

        align-items: center;

        gap: 0.35rem;

        padding: 0.55rem 0.35rem 0.45rem;

    }



    .app-shell.sidebar-collapsed .sb-collapse-btn {

        width: 42px;

        min-width: 42px;

        height: 42px;

        padding: 0;

        justify-content: center;

        flex-shrink: 0;

    }



    .app-shell.sidebar-collapsed .sb-brand {

        justify-content: center;

        width: 100%;

    }



    .app-shell.sidebar-collapsed .sb-search input,

    .app-shell.sidebar-collapsed .sb-kbd,

    .app-shell.sidebar-collapsed .app-nav-link span,

    .app-shell.sidebar-collapsed .sb-group-toggle span,

    .app-shell.sidebar-collapsed .sb-chevron,

    .app-shell.sidebar-collapsed .sb-badge,

    .app-shell.sidebar-collapsed .sb-collapse-btn span,
    .app-shell.sidebar-collapsed .sb-collapse-label,
    .app-shell.sidebar-collapsed .sb-foot-link span {

        display: none !important;

    }



    .app-shell.sidebar-collapsed .sb-search,

    .app-shell.sidebar-collapsed .app-nav-link,

    .app-shell.sidebar-collapsed .sb-group-toggle,

    .app-shell.sidebar-collapsed .sb-collapse-btn,

    .app-shell.sidebar-collapsed .sb-foot-link {

        justify-content: center;

        padding-left: 0.55rem;

        padding-right: 0.55rem;

    }



    .app-shell.sidebar-collapsed .sb-search {

        padding: 0.55rem;

    }



    /* Collapsed: hover tooltips for icon rail */

    .app-shell.sidebar-collapsed .app-nav-link[data-tooltip],

    .app-shell.sidebar-collapsed .sb-group-toggle[data-tooltip],

    .app-shell.sidebar-collapsed .sb-brand[data-tooltip],

    .app-shell.sidebar-collapsed .sb-collapse-btn {

        position: relative;

    }



    .app-shell.sidebar-collapsed .app-nav-link[data-tooltip]:hover::after,

    .app-shell.sidebar-collapsed .sb-group-toggle[data-tooltip]:hover::after,

    .app-shell.sidebar-collapsed .sb-brand[data-tooltip]:hover::after,

    .app-shell.sidebar-collapsed .sb-collapse-btn[title]:hover::after,

    .app-shell.sidebar-collapsed .sb-search:hover::after {

        content: attr(data-tooltip);

        position: absolute;

        left: calc(100% + 0.65rem);

        top: 50%;

        transform: translateY(-50%);

        background: var(--ines-green);

        color: #fff;

        font-size: 0.78rem;

        font-weight: 600;

        padding: 0.45rem 0.75rem;

        border-radius: 8px;

        white-space: nowrap;

        z-index: 1080;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

        pointer-events: none;

    }



    .app-shell.sidebar-collapsed .sb-collapse-btn[title]:hover::after {

        content: attr(title);

    }



    .app-shell.sidebar-collapsed .sb-search:hover::after {

        content: 'Search';

    }



    .app-shell.sidebar-collapsed .app-nav-link[data-tooltip]:hover::before,

    .app-shell.sidebar-collapsed .sb-group-toggle[data-tooltip]:hover::before,

    .app-shell.sidebar-collapsed .sb-brand[data-tooltip]:hover::before,

    .app-shell.sidebar-collapsed .sb-collapse-btn[title]:hover::before,

    .app-shell.sidebar-collapsed .sb-search:hover::before {

        content: '';

        position: absolute;

        left: calc(100% + 0.2rem);

        top: 50%;

        transform: translateY(-50%);

        border: 6px solid transparent;

        border-right-color: var(--ines-green);

        z-index: 1081;

        pointer-events: none;

    }



    /* Collapsed: group flyout dropdown on hover */

    .app-shell.sidebar-collapsed .sb-group {

        position: relative;

    }



    /* Invisible bridge so cursor can reach the flyout */

    .app-shell.sidebar-collapsed .sb-group::after {

        content: '';

        position: absolute;

        left: 100%;

        top: 0;

        width: 0.75rem;

        height: 100%;

        z-index: 1075;

    }



    .app-shell.sidebar-collapsed .sb-group > .sb-sub {

        display: none !important;

        position: absolute;

        left: calc(100% + 0.45rem);

        top: 0;

        margin: 0;

        padding: 0.45rem;

        min-width: 200px;

        background: #111111;

        border: 1px solid var(--sb-line);

        border-radius: 12px;

        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);

        z-index: 1080;

    }



    .app-shell.sidebar-collapsed .sb-group .sb-sub-link::before {

        display: none;

    }



    .app-shell.sidebar-collapsed .sb-group > .sb-sub[data-label]::before {

        content: attr(data-label);

        display: block;

        font-size: 0.68rem;

        font-weight: 700;

        letter-spacing: 0.06em;

        text-transform: uppercase;

        color: var(--sb-muted);

        padding: 0.35rem 0.7rem 0.5rem;

        margin-bottom: 0.2rem;

        border-bottom: 1px solid var(--sb-line);

        background: none;

        position: static;

        width: auto;

        height: auto;

        left: auto;

        top: auto;

    }



    .app-shell.sidebar-collapsed .sb-group:hover > .sb-sub,

    .app-shell.sidebar-collapsed .sb-group:focus-within > .sb-sub,

    .app-shell.sidebar-collapsed .sb-group.is-flyout > .sb-sub {

        display: block !important;

    }



    .app-shell.sidebar-collapsed .sb-group:hover > .sb-group-toggle,

    .app-shell.sidebar-collapsed .sb-group:focus-within > .sb-group-toggle,

    .app-shell.sidebar-collapsed .sb-group.is-flyout > .sb-group-toggle {

        background: var(--sb-soft);

        color: var(--sb-ink);

    }



    .app-shell.sidebar-collapsed .sb-sub-link {

        padding: 0.55rem 0.7rem;

        border-radius: 8px;

        color: var(--sb-muted);

    }



    .app-shell.sidebar-collapsed .sb-sub-link:hover {

        background: var(--sb-soft);

        color: #fff;

    }



    .app-shell.sidebar-collapsed .sb-sub-link.active {

        background: #ffffff;

        color: #000000;

        font-weight: 700;

    }



    .app-shell.sidebar-collapsed .sb-badge-dot::after {

        content: '';

        position: absolute;

        top: 0.55rem;

        right: 0.55rem;

        width: 7px;

        height: 7px;

        border-radius: 50%;

        background: #ef4444;

    }

}



.sb-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

    padding: 0.65rem 0.65rem 0.55rem;

    flex-shrink: 0;

    border-bottom: 1px dotted var(--sb-line);

}



.sb-brand {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    min-width: 0;

    flex: 1;

    color: var(--sb-ink);

    text-decoration: none;

    font-weight: 800;

    font-size: 0.92rem;

    letter-spacing: 0.02em;

}



.sb-brand-logo {

    flex-shrink: 0;

    border-radius: 6px;

}



.sb-brand-text {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.sb-section-label {

    margin: 0.85rem 0.75rem 0.35rem;

    padding: 0;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--sb-muted);

}



.app-sidebar-close {

    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 50%;

    background: var(--sb-elevated);

    color: var(--sb-muted);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.sb-search {

    margin: 0.75rem 0.85rem 0.35rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.55rem 0.7rem;

    background: var(--sb-elevated);

    border: 1px solid var(--sb-line);

    border-radius: 12px;

}



.sb-search i {

    color: var(--sb-muted);

}



.sb-search input {

    border: 0;

    outline: 0;

    background: transparent;

    width: 100%;

    font-size: 0.875rem;

    color: var(--sb-ink);

}



.sb-search input::placeholder {

    color: var(--sb-muted);

}



.sb-kbd {

    font-size: 0.68rem;

    font-weight: 700;

    color: var(--sb-muted);

    background: var(--sb-soft);

    border: 1px solid var(--sb-line);

    border-radius: 6px;

    padding: 0.1rem 0.35rem;

}



.app-sidebar-nav {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 0.55rem 0.65rem 0.85rem;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;

}



.app-sidebar-nav::-webkit-scrollbar {

    width: 4px;

}



.app-sidebar-nav::-webkit-scrollbar-track {

    background: transparent;

}



.app-sidebar-nav::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.22);

    border-radius: 999px;

}



.app-sidebar-nav::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.35);

}



.app-shell.sidebar-collapsed .app-sidebar {

    scrollbar-width: thin;

    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;

}



.app-shell.sidebar-collapsed .app-sidebar::-webkit-scrollbar {

    width: 4px;

}



.app-shell.sidebar-collapsed .app-sidebar::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.22);

    border-radius: 999px;

}



.app-nav-link,

.sb-group-toggle {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.62rem 0.75rem;

    border-radius: 12px;

    border: 0;

    background: transparent;

    color: var(--sb-muted);

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    min-height: 42px;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;

}



.app-nav-link i,

.sb-group-toggle > i:first-child {

    font-size: 1.05rem;

    width: 1.2rem;

    text-align: center;

    color: inherit;

}



.app-nav-link:hover,

.sb-group-toggle:hover {

    background: var(--sb-soft);

    color: var(--sb-ink);

}



.app-nav-link.active {

    background: #ffffff;

    color: #000000;

}



.sb-chevron {

    margin-left: auto;

    font-size: 0.8rem;

    transition: transform 0.2s ease;

}



.sb-group.is-open > .sb-group-toggle .sb-chevron {

    transform: rotate(180deg);

}



.sb-group.is-open > .sb-group-toggle {

    color: var(--sb-ink);

}



.sb-sub {

    display: none;

    position: relative;

    margin: 0.15rem 0 0.45rem 1.15rem;

    padding-left: 0.95rem;

}



.sb-group.is-open > .sb-sub {

    display: block;

}



.sb-sub::before {

    content: '';

    position: absolute;

    left: 0.15rem;

    top: 0.2rem;

    bottom: 0.55rem;

    width: 1px;

    background: var(--sb-line);

}



.sb-sub-link {

    position: relative;

    display: block;

    padding: 0.45rem 0.55rem 0.45rem 0.7rem;

    border-radius: 8px;

    color: var(--sb-muted);

    text-decoration: none;

    font-size: 0.86rem;

    font-weight: 500;

}



.sb-sub-link::before {

    content: '';

    position: absolute;

    left: -0.8rem;

    top: 50%;

    width: 0.7rem;

    height: 1px;

    background: var(--sb-line);

}



.sb-sub-link:hover {

    color: var(--sb-ink);

    background: var(--sb-soft);

}



.sb-sub-link.active {

    color: var(--sb-ink);

    font-weight: 700;

    background: var(--sb-soft);

}



.sb-divider {

    border: 0;

    border-top: 1px dotted var(--sb-line);

    margin: 0.65rem 0.55rem;

}



.sb-badge {

    margin-left: auto;

    min-width: 1.25rem;

    height: 1.25rem;

    padding: 0 0.35rem;

    border-radius: 999px;

    background: #fee2e2;

    color: #b91c1c;

    font-size: 0.68rem;

    font-style: normal;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.sb-footer {

    border-top: 1px dotted var(--sb-line);

    padding: 0.55rem 0.65rem 0.75rem;

    display: grid;

    gap: 0.2rem;

}



.sb-credit {

    margin: 0.45rem 0.75rem 0.15rem;

    font-size: 0.68rem;

    color: var(--sb-muted);

    line-height: 1.35;

}



.sb-credit a {

    color: var(--ines-green, #0f5230);

    font-weight: 750;

    text-decoration: none;

}



.sb-credit a:hover {

    text-decoration: underline;

}



.app-shell.sidebar-collapsed .sb-credit {

    display: none;

}



.sb-collapse-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.45rem;

    flex-shrink: 0;

    width: auto;

    min-width: 42px;

    height: 42px;

    border: 0;

    background: transparent;

    color: var(--sb-muted);

    border-radius: 12px;

    padding: 0 0.65rem;

    font-size: 0.875rem;

    font-weight: 500;

    cursor: pointer;

}



.sb-collapse-btn i {

    font-size: 1.1rem;

    line-height: 1;

}



.sb-collapse-btn:hover {

    background: var(--sb-soft);

    color: var(--sb-ink);

}



.sb-hover-tip {

    position: fixed;

    z-index: 1090;

    transform: translateY(-50%);

    background: var(--ines-green);

    color: #fff;

    font-size: 0.78rem;

    font-weight: 600;

    padding: 0.45rem 0.75rem;

    border-radius: 8px;

    white-space: nowrap;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

    pointer-events: none;

}



.sb-hover-tip[hidden] {

    display: none !important;

}



@media (min-width: 992px) {

    .app-shell.sidebar-collapsed .app-nav-link[data-tooltip]:hover::after,

    .app-shell.sidebar-collapsed .app-nav-link[data-tooltip]:hover::before,

    .app-shell.sidebar-collapsed .sb-group-toggle[data-tooltip]:hover::after,

    .app-shell.sidebar-collapsed .sb-group-toggle[data-tooltip]:hover::before,

    .app-shell.sidebar-collapsed .sb-brand[data-tooltip]:hover::after,

    .app-shell.sidebar-collapsed .sb-brand[data-tooltip]:hover::before,

    .app-shell.sidebar-collapsed .sb-collapse-btn[title]:hover::after,

    .app-shell.sidebar-collapsed .sb-collapse-btn[title]:hover::before {

        content: none;

        display: none;

    }

}



[data-bs-theme="dark"] .sb-panel,

[data-bs-theme="dark"] .app-sidebar {

    background: #000000;

}



[data-bs-theme="dark"] .sb-search {

    background: var(--sb-elevated);

    border-color: var(--sb-line);

}



[data-bs-theme="dark"] .app-nav-link:hover,

[data-bs-theme="dark"] .sb-group-toggle:hover,

[data-bs-theme="dark"] .sb-sub-link.active,

[data-bs-theme="dark"] .sb-group.is-open > .sb-group-toggle {

    color: #ffffff;

}



[data-bs-theme="dark"] .app-nav-link,

[data-bs-theme="dark"] .sb-group-toggle,

[data-bs-theme="dark"] .sb-sub-link {

    color: var(--sb-muted);

}



[data-bs-theme="dark"] .app-nav-link.active {

    background: #ffffff;

    color: #000000;

}



[data-bs-theme="dark"] .sb-sub::before,

[data-bs-theme="dark"] .sb-sub-link::before {

    background: var(--sb-line);

}



[data-bs-theme="dark"] .sb-divider,

[data-bs-theme="dark"] .sb-footer {

    border-color: var(--sb-line);

}



/* ---- Student dashboard (analytics mockup, INES brand) ---- */

.student-dash {

    max-width: none;

    width: 100%;

    font-family: var(--font-sans);

    color: var(--color-text);

}



.student-dash h1,

.student-dash h2,

.student-dash p,

.student-dash strong,

.student-dash span,

.student-dash em,

.student-dash a,

.student-dash th,

.student-dash td,

.student-dash button,

.student-dash .btn {

    font-family: var(--font-sans);

}



.sd-hero {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-end;

    gap: 1rem;

    margin-bottom: 1.35rem;

}



.sd-hero h1 {

    font-size: clamp(1.45rem, 2.8vw, 1.9rem);

    font-weight: 750;

    margin: 0 0 0.25rem;

    color: var(--ines-gray-800);

}



.sd-hero p {

    margin: 0;

    color: var(--ines-gray-600);

    font-size: 0.9rem;

}



.sd-hero-actions {

    display: flex;

    gap: 0.5rem;

}



.sd-metrics {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.85rem;

    margin-bottom: 1.25rem;

}



@media (min-width: 992px) {

    .sd-metrics {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



.sd-metric {

    background: #fff;

    border: 1px solid var(--ines-gray-200);

    border-radius: var(--border-radius);

    padding: 1rem 1.1rem 1.05rem;

    box-shadow: var(--shadow-sm);

}



.sd-metric-label {

    margin: 0 0 0.55rem;

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--ines-gray-600);

}



.sd-metric-row {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    flex-wrap: wrap;

}



.sd-metric-value {

    font-size: 1.55rem;

    font-weight: 800;

    color: var(--ines-gray-800);

    line-height: 1;

}



.sd-trend {

    display: inline-flex;

    align-items: center;

    gap: 0.15rem;

    padding: 0.2rem 0.45rem;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 700;

}



.sd-trend.is-up {

    background: rgba(19, 182, 82, 0.12);

    color: var(--ines-green-dark);

}



.sd-trend.is-down {

    background: rgba(201, 146, 0, 0.16);

    color: var(--ines-yellow-dark);

}



.sd-metric-sub {

    margin: 0.55rem 0 0;

    font-size: 0.78rem;

    color: var(--ines-gray-400);

}



.sd-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.15rem;

}



@media (min-width: 1100px) {

    .sd-grid {

        grid-template-columns: minmax(0, 1fr) 320px;

        align-items: start;

    }

}



.sd-col-main,

.sd-col-side {

    display: grid;

    gap: 1.15rem;

}



.sd-panel {

    background: #fff;

    border: 1px solid var(--ines-gray-200);

    border-radius: var(--border-radius-lg);

    padding: 1.15rem 1.2rem;

    box-shadow: var(--shadow-sm);

}



.sd-panel-head {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 0.75rem;

    margin-bottom: 0.85rem;

}



.sd-panel h2 {

    font-size: 1.05rem;

    font-weight: 700;

    margin: 0;

    color: var(--ines-gray-800);

}



.sd-legend {

    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;

    margin-top: 0.45rem;

    font-size: 0.78rem;

    color: var(--ines-gray-600);

}



.sd-legend .dot,

.sd-gauge-legend .dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

    margin-right: 0.35rem;

    vertical-align: middle;

}



.dot-quiz { background: var(--ines-green); }

.dot-task { background: var(--ines-gray-400); }

.dot-done { background: var(--ines-green-dark); }

.dot-active { background: var(--ines-green); }



.sd-select-label {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--ines-gray-600);

    background: var(--ines-gray-100);

    padding: 0.35rem 0.7rem;

    border-radius: 8px;

}



.sd-text-link {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--ines-green-dark);

    text-decoration: none;

}



.sd-text-link:hover {

    color: var(--ines-green);

}



.sd-chart-wrap {

    height: 260px;

    position: relative;

}



.sd-table-panel {

    padding-bottom: 0.5rem;

}



.sd-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.875rem;

}



.sd-table th {

    text-align: left;

    font-size: 0.68rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--ines-gray-400);

    font-weight: 700;

    padding: 0.55rem 0.5rem;

    border-bottom: 1px solid var(--ines-gray-200);

}



.sd-table td {

    padding: 0.85rem 0.5rem;

    border-bottom: 1px solid var(--ines-gray-100);

    vertical-align: middle;

    color: var(--ines-gray-800);

}



.sd-id {

    color: var(--ines-gray-400);

    font-weight: 600;

}



.sd-table td strong {

    display: block;

    font-size: 0.9rem;

}



.sd-subline {

    display: block;

    font-size: 0.75rem;

    color: var(--ines-gray-400);

    margin-top: 0.1rem;

}



.sd-pill {

    display: inline-flex;

    align-items: center;

    padding: 0.22rem 0.65rem;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 700;

}



.sd-pill.is-live {

    background: rgba(19, 182, 82, 0.14);

    color: var(--ines-green-dark);

}



.sd-pill.is-active {

    background: rgba(240, 192, 32, 0.2);

    color: var(--ines-yellow-dark);

}



.sd-pill.is-off {

    background: var(--ines-gray-100);

    color: var(--ines-gray-600);

}



.sd-prog {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

}



.sd-prog-track {

    width: 72px;

    height: 5px;

    background: var(--ines-gray-100);

    border-radius: 999px;

    overflow: hidden;

    display: inline-block;

}



.sd-prog-track > span {

    display: block;

    height: 100%;

    background: var(--ines-green);

}



.sd-prog em {

    font-style: normal;

    font-size: 0.78rem;

    font-weight: 650;

    color: var(--ines-gray-600);

}



.sd-date {

    color: var(--ines-gray-600);

    font-size: 0.82rem;

    white-space: nowrap;

}



.sd-empty {

    text-align: center;

    padding: 2.25rem 1rem !important;

}



.sd-empty p {

    margin: 0 0 0.85rem;

    color: var(--ines-gray-600);

}



.sd-gauge-panel h2 {

    margin-bottom: 0.35rem;

}



.sd-gauge-wrap {

    position: relative;

    height: 170px;

    margin: 0.25rem auto 0.35rem;

    max-width: 260px;

}



.sd-gauge-center {

    position: absolute;

    left: 50%;

    top: 62%;

    transform: translate(-50%, -50%);

    text-align: center;

}



.sd-gauge-center span {

    display: block;

    font-size: 0.75rem;

    color: var(--ines-gray-400);

}



.sd-gauge-center strong {

    display: block;

    font-size: 1.65rem;

    font-weight: 800;

    color: var(--ines-gray-800);

    line-height: 1.1;

}



.sd-gauge-copy {

    margin: 0.35rem 0 0.9rem;

    font-size: 0.82rem;

    color: var(--ines-gray-600);

    text-align: center;

}



.sd-gauge-legend {

    display: flex;

    justify-content: space-between;

    gap: 0.5rem;

    margin-top: 0.9rem;

    font-size: 0.78rem;

    color: var(--ines-gray-600);

}



.sd-alert-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.sd-alert-list li {

    padding: 0.7rem 0;

    border-bottom: 1px solid var(--ines-gray-100);

}



.sd-alert-list li:last-child {

    border-bottom: 0;

    padding-bottom: 0;

}



.sd-alert-list strong {

    display: block;

    font-size: 0.85rem;

    margin-bottom: 0.15rem;

    color: var(--ines-gray-800);

}



.sd-alert-list span {

    font-size: 0.78rem;

    color: var(--ines-gray-600);

}



[data-bs-theme="dark"] .sd-metric,

[data-bs-theme="dark"] .sd-panel {

    background: #0f2918;

    border-color: rgba(255, 255, 255, 0.1);

    box-shadow: none;

}



[data-bs-theme="dark"] .sd-hero h1,

[data-bs-theme="dark"] .sd-metric-value,

[data-bs-theme="dark"] .sd-panel h2,

[data-bs-theme="dark"] .sd-gauge-center strong,

[data-bs-theme="dark"] .sd-table td,

[data-bs-theme="dark"] .sd-alert-list strong {

    color: #f1f5f9;

}



[data-bs-theme="dark"] .sd-select-label,

[data-bs-theme="dark"] .sd-pill.is-off,

[data-bs-theme="dark"] .sd-prog-track {

    background: rgba(255, 255, 255, 0.08);

}



[data-bs-theme="dark"] .sd-table th,

[data-bs-theme="dark"] .sd-table td,

[data-bs-theme="dark"] .sd-alert-list li {

    border-color: rgba(255, 255, 255, 0.08);

}



.app-sidebar-backdrop {

    position: fixed;

    inset: 0;

    z-index: 1035;

    background: rgba(0, 0, 0, 0.45);

}



.app-main {

    min-height: 100vh;

    min-height: 100dvh;

    display: flex;

    flex-direction: column;

    transition: margin-left 0.25s ease;

}



@media (min-width: 992px) {

    .app-main {

        margin-left: var(--app-sidebar-width);

    }

}



.app-topbar {

    position: sticky;

    top: 0;

    z-index: 1020;

    min-height: var(--app-topbar-height);

    height: auto;

    background: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--ines-gray-200);

    display: flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.65rem 1.15rem;

    overflow: visible;

}



[data-bs-theme="dark"] .app-topbar {

    background: rgba(15, 41, 24, 0.92);

    border-bottom-color: rgba(255, 255, 255, 0.08);

}



.app-topbar-left {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    min-width: 0;

    flex: 1;

    justify-content: flex-start;

}



.app-menu-btn {

    width: 40px;

    height: 40px;

    border: 0;

    border-radius: 0;

    background: transparent;

    font-size: 1.25rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--ines-green-dark);

    flex-shrink: 0;

}



.app-menu-btn:hover {

    border-color: transparent;

    color: var(--ines-green);

    background: var(--ines-gray-100);

}



.app-topbar-brand {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    text-decoration: none;

    flex-shrink: 0;

}



.app-topbar-brand img {

    width: 32px;

    height: 32px;

    object-fit: contain;

    border-radius: 50%;

    background: #fff;

    border: 0;

    padding: 0;

}



.app-topbar-brand-text {

    font-weight: 800;

    font-size: 0.95rem;

    letter-spacing: 0.04em;

    color: var(--ines-green-dark);

}



.app-topbar-divider {

    width: 1px;

    height: 28px;

    background: var(--ines-gray-200);

    flex-shrink: 0;

}



.app-topbar-title-wrap {

    min-width: 0;

}



.app-topbar-eyebrow {

    margin: 0;

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--ines-green);

    line-height: 1.1;

}



.app-topbar-title {

    margin: 0;

    font-family: var(--font-sans);

    font-weight: 700;

    font-size: 1.05rem;

    color: var(--ines-gray-800);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.25;

}



[data-bs-theme="dark"] .app-topbar-brand-text,

[data-bs-theme="dark"] .app-topbar-title {

    color: #f1f5f9;

}



[data-bs-theme="dark"] .app-topbar-divider,

[data-bs-theme="dark"] .app-menu-btn,

[data-bs-theme="dark"] .app-topbar-brand img {

    border-color: rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.04);

    color: #f1f5f9;

}



.app-topbar-search-wrap {

    flex: 0 1 520px;

    max-width: min(520px, 46vw);

    width: 100%;

    margin: 0 auto;

    position: relative;

    z-index: 1030;

    overflow: visible;

}



.app-topbar-search {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    width: 100%;

    padding: 0.35rem 0.55rem 0.35rem 0.35rem;

    background: #f7faf8;

    border: 1px solid #e5efe8;

    border-radius: 999px;

    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

    position: relative;

}



.app-topbar-search-field {

    position: relative;

    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

    margin: 0;

}



.app-topbar-search-icon {

    position: absolute;

    left: 0.85rem;

    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;

    font-size: 0.95rem;

    pointer-events: none;

    z-index: 1;

}



.app-topbar-search:focus-within {

    border-color: var(--ines-green);

    background: #fff;

    box-shadow: 0 0 0 3px rgba(15, 159, 79, 0.12);

}



.app-topbar-search input {

    border: 0;

    outline: 0;

    background: transparent;

    width: 100%;

    min-width: 0;

    font-size: 0.875rem;

    color: var(--ines-gray-800);

    border-radius: 999px;

    padding: 0.62rem 0.85rem 0.62rem 2.35rem;

}



.app-topbar-search input::placeholder {

    color: #9ca3af;

}



.app-topbar-search-kbd {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.12rem 0.4rem;

    border-radius: 8px;

    border: 1px solid #e5efe8;

    background: #fff;

    color: #8a9a90;

    font-size: 0.68rem;

    font-family: inherit;

    line-height: 1.2;

    flex-shrink: 0;

}



.app-topbar-search-panel {

    position: absolute;

    top: calc(100% + 0.45rem);

    left: 0;

    right: 0;

    z-index: 1060;

    background: #fff;

    border: 1px solid #e5efe8;

    border-radius: 14px;

    box-shadow: 0 14px 36px rgba(15, 41, 24, 0.12);

    max-height: min(380px, 56vh);

    overflow: auto;

    padding: 0.35rem;

}



.app-topbar-search-item {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: 0.75rem;

    align-items: center;

    padding: 0.55rem 0.65rem;

    border-radius: 12px;

    text-decoration: none;

    color: inherit;

}



.app-topbar-search-badge {

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(19, 182, 82, 0.12);

    color: var(--ines-green-dark, #0f5230);

    font-size: 1rem;

    flex-shrink: 0;

}



.app-topbar-search-copy {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 0.1rem;

}



.app-topbar-search-item strong {

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--ines-gray-900, #111827);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.app-topbar-search-item small {

    font-size: 0.75rem;

    color: var(--ines-gray-500, #6b7280);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.app-topbar-search-item small em {

    font-style: normal;

    color: #8a9a90;

}



.app-topbar-search-item:hover,

.app-topbar-search-item.is-active {

    background: #f3f7f5;

}



.app-topbar-search-empty {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    padding: 0.75rem 0.85rem;

    font-size: 0.82rem;

    color: var(--ines-gray-500, #6b7280);

}



.app-topbar-search-empty i {

    color: #9ca3af;

    font-size: 1rem;

}



.app-topbar-search-spinner {

    width: 0.95rem;

    height: 0.95rem;

    border-radius: 50%;

    border: 2px solid rgba(15, 82, 48, 0.15);

    border-top-color: var(--ines-green, #0b6e4f);

    animation: appTopbarSpin 0.7s linear infinite;

    flex-shrink: 0;

}



@keyframes appTopbarSpin {

    to { transform: rotate(360deg); }

}



[data-bs-theme="dark"] .app-topbar-search {

    background: rgba(255, 255, 255, 0.04);

    border-color: rgba(255, 255, 255, 0.12);

}



[data-bs-theme="dark"] .app-topbar-search:focus-within {

    border-color: var(--ines-green);

    background: rgba(255, 255, 255, 0.06);

    box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.2);

}



[data-bs-theme="dark"] .app-topbar-search input {

    color: #f1f5f9;

}



[data-bs-theme="dark"] .app-topbar-search-kbd {

    background: rgba(255, 255, 255, 0.06);

    border-color: rgba(255, 255, 255, 0.12);

    color: #94a3b8;

}



[data-bs-theme="dark"] .app-topbar-search-panel {

    background: #0f2918;

    border-color: rgba(255, 255, 255, 0.1);

}



[data-bs-theme="dark"] .app-topbar-search-item strong {

    color: #f1f5f9;

}



[data-bs-theme="dark"] .app-topbar-search-item:hover,

[data-bs-theme="dark"] .app-topbar-search-item.is-active {

    background: rgba(255, 255, 255, 0.06);

}



.app-topbar-actions {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    gap: 0.35rem;

    flex: 1;

    justify-content: flex-end;

    margin-left: 0;

    min-width: 0;

}



.app-topbar-tools {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    gap: 0.15rem;

    flex-shrink: 0;

}



.app-topbar-alerts {

    position: relative;

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

}



.app-topbar-icon-btn {

    position: relative;

    width: 40px;

    height: 40px;

    border-radius: 0;

    border: 0;

    background: transparent;

    color: var(--ines-gray-600);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 1.1rem;

    transition: color 0.15s ease, background 0.15s ease;

}



.app-topbar-icon-btn:hover {

    border-color: transparent;

    color: var(--ines-green-dark);

    background: var(--ines-gray-100);

}



.app-topbar-badge {

    position: absolute;

    top: 6px;

    right: 6px;

    min-width: 14px;

    height: 14px;

    padding: 0 3px;

    border-radius: 50%;

    background: #e11d48;

    color: #fff;

    font-size: 0.58rem;

    font-style: normal;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}



.app-topbar-profile {

    position: relative;

}



.app-topbar-user {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    padding: 0.25rem 0.35rem 0.25rem 0.25rem;

    border-radius: 0;

    border: 0;

    background: transparent;

    color: inherit;

    max-width: 200px;

    cursor: pointer;

    transition: background 0.15s ease;

}



.app-topbar-user:hover,

.app-topbar-user[aria-expanded="true"] {

    border-color: transparent;

    background: var(--ines-gray-100);

    box-shadow: none;

}



.app-topbar-caret {

    font-size: 0.75rem;

    color: var(--ines-gray-400);

    transition: transform 0.15s ease;

}



.app-topbar-user[aria-expanded="true"] .app-topbar-caret {

    transform: rotate(180deg);

}



.app-topbar-user img,

.app-topbar-user-fallback,

.app-topbar-drop-head img {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.app-topbar-user-fallback {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(145deg, var(--ines-green), var(--ines-green-dark));

    color: #fff;

    font-size: 1rem;

}



.app-topbar-drop-head .app-topbar-user-fallback {

    width: 40px;

    height: 40px;

    font-size: 1.1rem;

}



.app-topbar-user-meta {

    flex-direction: column;

    min-width: 0;

    line-height: 1.15;

    text-align: left;

}



.app-topbar-user-meta strong {

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--ines-gray-800);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.app-topbar-user-meta small {

    font-size: 0.68rem;

    color: var(--ines-gray-400);

}



.app-topbar-drop {

    position: absolute;

    top: calc(100% + 0.35rem);

    right: 0;

    width: 240px;

    background: #fff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 0;

    box-shadow: none;

    z-index: 1100;

    overflow: hidden;

}



.app-topbar-drop-head {

    display: flex;

    align-items: center;

    gap: 0.7rem;

    padding: 0.85rem 0.9rem;

    background: transparent;

    border-bottom: 1px solid var(--ines-gray-200);

}



.app-topbar-drop-head img {

    width: 40px;

    height: 40px;

}



.app-topbar-drop-head strong {

    display: block;

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--ines-gray-800);

    line-height: 1.2;

}



.app-topbar-drop-head small {

    display: block;

    font-size: 0.72rem;

    color: var(--ines-gray-400);

    margin-top: 0.15rem;

    word-break: break-all;

}



.app-topbar-drop-list,

.app-topbar-drop-foot {

    padding: 0.25rem 0;

}



.app-topbar-drop-foot {

    border-top: 1px solid var(--ines-gray-200);

}



.app-topbar-drop a {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.65rem 0.9rem;

    border-radius: 0;

    color: var(--ines-gray-800);

    text-decoration: none;

    font-size: 0.875rem;

    font-weight: 500;

}



.app-topbar-drop a i {

    width: 1.1rem;

    text-align: center;

    color: var(--ines-gray-400);

}



.app-topbar-drop a:hover {

    background: var(--ines-gray-100);

}



.app-topbar-drop a:hover i {

    color: var(--ines-green-dark);

}



.app-topbar-drop a.is-danger {

    color: #b91c1c;

}



.app-topbar-drop a.is-danger i {

    color: #ef4444;

}



.app-topbar-drop a.is-danger:hover {

    background: #fef2f2;

}



[data-bs-theme="dark"] .app-topbar-icon-btn,

[data-bs-theme="dark"] .app-topbar-user {

    background: transparent;

    border-color: transparent;

    color: rgba(241, 245, 249, 0.85);

}



[data-bs-theme="dark"] .app-topbar-icon-btn:hover,

[data-bs-theme="dark"] .app-topbar-user:hover,

[data-bs-theme="dark"] .app-topbar-user[aria-expanded="true"] {

    background: rgba(255, 255, 255, 0.06);

}



[data-bs-theme="dark"] .app-topbar-drop {

    background: #0f2918;

    border-color: rgba(255, 255, 255, 0.12);

    box-shadow: none;

}



[data-bs-theme="dark"] .app-topbar-drop-head {

    background: transparent;

    border-color: rgba(255, 255, 255, 0.08);

}



[data-bs-theme="dark"] .app-topbar-user-meta strong,

[data-bs-theme="dark"] .app-topbar-drop-head strong,

[data-bs-theme="dark"] .app-topbar-drop a {

    color: #f1f5f9;

}



[data-bs-theme="dark"] .app-topbar-drop-foot {

    border-color: rgba(255, 255, 255, 0.08);

}



[data-bs-theme="dark"] .app-topbar-drop a:hover {

    background: rgba(255, 255, 255, 0.06);

}



.app-content {

    flex: 1;

    padding-bottom: 2rem;

}



/* Logged-in: hide marketing page heroes — sidebar is the nav */

.app-shell .page-hero {

    display: none !important;

}



.app-shell .lecturer-dash,

.app-shell .container.py-5,

.app-shell .container.py-4 {

    padding-top: 1.25rem !important;

}



.app-shell .app-page-title {

    display: block !important;

}



.app-page-title {

    padding: 0 0 1rem;

}



.app-page-title h1 {

    font-family: var(--font-sans);

    font-size: 1.35rem;

    font-weight: 700;

    margin: 0 0 0.25rem;

    color: var(--ines-green-dark);

}



.app-page-title p {

    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.9rem;

}



@media (max-width: 991.98px) {

    .app-shell.sidebar-open .app-sidebar {

        transform: translateX(0);

    }

}





/* ---- App hub theme (match lecturer courses light design) ---- */

.app-shell .app-content {

    background: #eef2f0;

}



.app-shell .app-page-title h1 {

    font-size: 1.15rem;

    font-weight: 750;

    color: #111827;

    letter-spacing: -0.02em;

}



.app-shell .app-page-title p {

    color: #6b7280;

    font-size: 0.9rem;

}



.app-shell .btn-ines-primary {

    background: var(--ines-yellow);

    border-color: var(--ines-yellow);

    color: #1a2e24;

    border-radius: 999px;

    font-weight: 700;

    box-shadow: none;

}



.app-shell .btn-ines-primary:hover {

    background: var(--ines-yellow-light);

    border-color: var(--ines-yellow-light);

    color: #1a2e24;

}



.app-shell .btn-outline-secondary,

.app-shell .btn-outline-primary {

    border-radius: 999px;

    font-weight: 650;

}



.app-shell .card,

.app-shell .lecturer-stat,

.app-shell .lecturer-action-card,

.app-shell .lecturer-side-card,

.app-shell .lecturer-form-card,

.app-shell .module-list-card,

.app-shell .sd-metric,

.app-shell .sd-panel {

    background: #ffffff !important;

    border: 0 !important;

    border-radius: 20px !important;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.app-shell .lecturer-stat {

    text-align: center;

    padding: 1.1rem 1rem;

}



.app-shell .lecturer-stat.highlight {

    background: #1f2937 !important;

}



.app-shell .lecturer-stat.highlight .lecturer-stat-value,

.app-shell .lecturer-stat.highlight .lecturer-stat-label {

    color: #fff;

}



.app-shell .lecturer-stat-value {

    color: #111827;

}



.app-shell .lecturer-action-card {

    border: 0 !important;

}



.app-shell .lecturer-action-card:hover {

    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);

    transform: translateY(-2px);

}



.app-shell .lecturer-action-icon {

    background: #fff7e0;

    color: #92400e;

    border-radius: 14px;

}



.app-shell .lecturer-quick-btn {

    background: var(--ines-yellow);

    color: #1a2e24 !important;

    border-radius: 999px;

}



.app-shell .lecturer-chip {

    border: 0;

    background: #ffffff;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);

}



.app-shell .lecturer-chip.active,

.app-shell .lecturer-chip:hover {

    background: var(--ines-yellow);

    border-color: var(--ines-yellow);

    color: #1a2e24;

}



.app-shell .lecturer-section-head h2 {

    text-transform: none;

    letter-spacing: -0.02em;

    font-size: 1.05rem;

    font-weight: 750;

    color: #111827;

}



.app-shell .module-list-card {

    padding: 1.2rem;

}



.app-shell .module-list-order {

    background: #fff7e0;

    color: #92400e;

    border-radius: 999px;

}



.app-shell .table {

    --bs-table-bg: transparent;

}



.app-shell .table > :not(caption) > * > * {

    background: transparent;

}



.student-dash-page .app-content,

.hub-page .app-content {

    background: #eef2f0;

}



.sd-metric,

.sd-panel {

    border: 0 !important;

    border-radius: 20px !important;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.sd-hero h1 {

    font-size: 1.15rem;

    font-weight: 750;

    color: #111827;

}



.sd-hero-actions .btn-ines-primary {

    background: var(--ines-yellow);

    border-color: var(--ines-yellow);

    color: #1a2e24;

    border-radius: 999px;

}



.sd-hero-actions .btn-outline-secondary {

    border-radius: 999px;

    background: #fff;

    border-color: transparent;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);

}



/* ---- Student home (sh-*) — brand-first continue hub ---- */

.sh-home-page .app-content {
    background: #f4f5f7;
    padding: 0 !important;
}

.sh-home {
    font-family: var(--font-sans);
    color: var(--color-text);
    max-width: none;
    width: 100%;
}

.sh-hero,
.sh-signals,
.sh-section {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.sh-hero.is-in,
.sh-signals.is-in,
.sh-section.is-in {
    opacity: 1;
    transform: none;
}

.sh-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(280px, 42vh, 420px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
}

.sh-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(115deg, rgba(15, 82, 48, 0.92) 0%, rgba(15, 82, 48, 0.72) 45%, rgba(26, 46, 36, 0.55) 100%),
        url('/static/img/campus-building.jpg') center / cover no-repeat;
}

.sh-hero-inner {
    width: 100%;
    max-width: 1100px;
    padding: 2rem 1.25rem 1.75rem;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .sh-hero-inner {
        padding: 2.75rem 2rem 2.25rem;
    }
}

.sh-brand {
    margin: 0 0 0.55rem;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ines-yellow);
    line-height: 1.15;
}

.sh-greeting {
    margin: 0 0 0.45rem;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    color: #fff;
}

.sh-lead {
    margin: 0 0 1.15rem;
    max-width: 36rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.sh-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}

.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sh-btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}

.sh-btn-primary {
    background: var(--ines-yellow);
    color: #1a2e24;
}

.sh-btn-primary:hover {
    background: var(--ines-yellow-light);
    color: #1a2e24;
}

.sh-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.sh-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.sh-btn-quiet {
    background: #fff;
    color: #374151;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.sh-btn-quiet:hover {
    color: var(--ines-green-dark);
}

.sh-continue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    align-items: center;
    max-width: 32rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.sh-continue-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    grid-column: 1;
}

.sh-continue-code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ines-yellow);
}

.sh-continue-copy strong {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-continue-mod {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
}

.sh-continue-bar {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.sh-continue-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ines-yellow);
}

.sh-continue-pct {
    grid-column: 2;
    grid-row: 1;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.sh-signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 1100px;
    margin: -1.25rem auto 0;
    padding: 0 1.25rem 0.25rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .sh-signals {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.sh-signal {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
}

.sh-signal > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.sh-signal > strong {
    font-size: 1.35rem;
    font-weight: 750;
    color: #111827;
    line-height: 1.1;
}

.sh-signal > em {
    font-style: normal;
    font-size: 0.78rem;
    color: #6b7280;
}

.sh-signal-link:hover {
    box-shadow: 0 12px 32px rgba(15, 82, 48, 0.12);
}

.sh-signal-link:hover strong {
    color: var(--ines-green-dark);
}

.sh-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 2rem;
}

@media (min-width: 992px) {
    .sh-body {
        grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
        gap: 1.5rem;
        padding: 1.5rem 2rem 2.5rem;
    }
}

.sh-main,
.sh-side {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-width: 0;
}

.sh-section {
    background: #fff;
    border-radius: 20px;
    padding: 1.15rem 1.2rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.sh-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.sh-section-head h2 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 750;
    color: #111827;
}

.sh-section-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
}

.sh-text-link {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--ines-green);
    text-decoration: none;
}

.sh-text-link:hover {
    color: var(--ines-green-dark);
}

.sh-course-list,
.sh-reco,
.sh-up-list,
.sh-career {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sh-course {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: #f7faf8;
}

.sh-course-main {
    min-width: 0;
    flex: 1 1 12rem;
}

.sh-course-code {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ines-green);
}

.sh-course-main h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.sh-course-main > p {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.sh-course-prog {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 14rem;
}

.sh-course-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.sh-course-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ines-green);
    font-style: normal;
}

.sh-course-prog em {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4b5563;
}

.sh-course-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sh-reco li,
.sh-up-list li,
.sh-career li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eef2f0;
}

.sh-reco li:last-child,
.sh-up-list li:last-child,
.sh-career li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sh-reco li:first-child,
.sh-up-list li:first-child,
.sh-career li:first-child {
    padding-top: 0;
}

.sh-reco li > div,
.sh-up-copy,
.sh-career li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sh-career li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sh-reco strong,
.sh-up-copy strong,
.sh-career strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

.sh-reco span,
.sh-up-copy > span:last-child,
.sh-career span {
    font-size: 0.78rem;
    color: #6b7280;
}

.sh-career em {
    font-style: normal;
    font-size: 0.72rem;
    color: var(--ines-green-dark);
    font-weight: 600;
}

.sh-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #eef4f0;
    color: var(--ines-green-dark);
}

.sh-tag.is-live {
    background: rgba(19, 182, 82, 0.15);
    color: var(--ines-green-dark);
}

.sh-tag.is-alert {
    background: rgba(240, 192, 32, 0.22);
    color: #8a6a00;
}

.sh-empty {
    text-align: center;
    padding: 1.25rem 0.5rem;
}

.sh-empty p {
    margin: 0 0 0.85rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.sh-empty-inline {
    color: #6b7280;
    font-size: 0.85rem;
    padding: 0.25rem 0 !important;
    border: 0 !important;
}

[data-theme="dark"] .sh-home-page .app-content,
[data-bs-theme="dark"] .sh-home-page .app-content {
    background: #0f172a;
}

[data-theme="dark"] .sh-signal,
[data-theme="dark"] .sh-section,
[data-bs-theme="dark"] .sh-signal,
[data-bs-theme="dark"] .sh-section {
    background: #1e293b;
    box-shadow: none;
}

[data-theme="dark"] .sh-course,
[data-bs-theme="dark"] .sh-course {
    background: #0f172a;
}

[data-theme="dark"] .sh-signal > strong,
[data-theme="dark"] .sh-section-head h2,
[data-theme="dark"] .sh-course-main h3,
[data-theme="dark"] .sh-reco strong,
[data-theme="dark"] .sh-up-copy strong,
[data-theme="dark"] .sh-career strong,
[data-bs-theme="dark"] .sh-signal > strong,
[data-bs-theme="dark"] .sh-section-head h2,
[data-bs-theme="dark"] .sh-course-main h3,
[data-bs-theme="dark"] .sh-reco strong,
[data-bs-theme="dark"] .sh-up-copy strong,
[data-bs-theme="dark"] .sh-career strong {
    color: #f8fafc;
}

[data-theme="dark"] .sh-btn-quiet,
[data-bs-theme="dark"] .sh-btn-quiet {
    background: #334155;
    color: #e2e8f0;
    box-shadow: none;
}

[data-theme="dark"] .sh-reco li,
[data-theme="dark"] .sh-up-list li,
[data-theme="dark"] .sh-career li,
[data-bs-theme="dark"] .sh-reco li,
[data-bs-theme="dark"] .sh-up-list li,
[data-bs-theme="dark"] .sh-career li {
    border-bottom-color: #334155;
}


/* ---- Student assessments (sm-* / si-* / asn-*) ---- */

.study-workspace-page .app-content,
.sm-marks-page .app-content,
.learn-desk-page .app-content {
    background: #f4f5f7;
}

.student-hub.study-shell {
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--color-text);
}

.asn-header {
    margin-bottom: 1.15rem;
}

.asn-header-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
}

.asn-kicker,
.sm-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ines-green);
}

.asn-header h1,
.sm-head h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 750;
    color: #111827;
}

.asn-header-note,
.sm-lede {
    margin: 0.35rem 0 0;
    max-width: 40rem;
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.45;
}

.asn-header-actions,
.sm-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.asn-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.85rem 0 0;
    padding: 0;
}

.asn-meta-row > div {
    min-width: 5.5rem;
}

.asn-meta-row dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #9ca3af;
}

.asn-meta-row dd {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    font-weight: 650;
    color: #111827;
}

.asn-workspace {
    display: block;
}

.asn-main.asn-list-panel {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.asn-section {
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem 1.15rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.asn-section-head {
    margin-bottom: 0.75rem;
}

.asn-section-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
    color: #111827;
}

.asn-copy {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #374151;
}

.asn-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asn-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    background: #f7faf8;
    color: #1a2e24;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.asn-tool:hover {
    background: #eef4f0;
    color: var(--ines-green-dark);
}

.asn-form .asn-label,
.asn-label {
    display: block;
    margin: 0.75rem 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
}

.asn-label span {
    font-weight: 500;
    color: #9ca3af;
}

.asn-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1rem;
}

.asn-form-hint {
    font-size: 0.8rem;
    color: #6b7280;
}

.asn-question {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eef2f0;
}

.asn-question:last-of-type {
    border-bottom: 0;
}

.learn-desk-card,
.learn-desk-head {
    max-width: 820px;
}

.asn-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
}

.asn-submit-overlay[hidden] {
    display: none !important;
}

.asn-submit-overlay-card {
    width: min(92vw, 380px);
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.asn-submit-spinner {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    border-top-color: var(--ines-green);
    animation: asn-spin 0.8s linear infinite;
}

@keyframes asn-spin {
    to { transform: rotate(360deg); }
}

.asn-submit-overlay-title {
    margin: 0 0 0.35rem;
    font-weight: 750;
    color: #111827;
}

.asn-submit-overlay-copy {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.asn-submit-progress {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.asn-submit-progress > i {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: inherit;
    background: var(--ines-green);
    animation: asn-progress 1.4s ease-in-out infinite;
}

@keyframes asn-progress {
    0% { transform: translateX(-100%); width: 35%; }
    50% { width: 55%; }
    100% { transform: translateX(280%); width: 35%; }
}

.sm-head {
    margin-bottom: 1.15rem;
}

.sm-head-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
}

.sm-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .sm-stat-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sm-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.sm-stat span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.sm-stat strong {
    font-size: 1.35rem;
    font-weight: 750;
    color: #111827;
    line-height: 1.1;
}

.sm-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sm-tabs,
.si-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sm-tab,
.si-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.sm-tab em,
.si-tab em {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
}

.sm-tab.is-active,
.si-tab.is-active {
    background: var(--ines-green-dark);
    color: #fff;
}

.sm-tab.is-active em,
.si-tab.is-active em {
    color: rgba(255, 255, 255, 0.75);
}

.sm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.sm-filters .form-control,
.sm-filters .auth-input {
    max-width: 16rem;
    border-radius: 999px;
}

.sm-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sm-list-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.sm-list-main {
    min-width: 0;
    flex: 1 1 14rem;
}

.sm-list-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.25rem;
}

.sm-list-top strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.sm-list-main > p,
.sm-list-main > time {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.sm-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.95rem;
}
.sm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #dce6e0;
    background: #fff;
    color: #1f3a2b;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}
.sm-tab span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7c72;
}
.sm-tab.is-active {
    background: #0f5230;
    border-color: #0f5230;
    color: #fff;
}
.sm-tab.is-active span { color: rgba(255,255,255,0.85); }
.sm-tab:hover { background: #f4f7f5; color: #0b3d28; }
.sm-tab.is-active:hover { background: #0c4227; color: #fff; }
.sm-group { margin-bottom: 1.35rem; }
.sm-group-head { margin: 0 0 0.55rem; }
.sm-group-head h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 720;
    color: #12261c;
}
.sm-group-head p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: #6b7c72;
}
.sm-list-item.is-locked {
    opacity: 0.92;
    background: #f7faf8;
}
.sm-pill.is-lock {
    background: #eef2f0;
    color: #5c6b7a;
    gap: 0.25rem;
}
.sm-lock-note {
    margin: 0.35rem 0 0 !important;
    color: #7a5a20 !important;
}

.sm-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #eef2f0;
    color: #4b5563;
}

.sm-pill.is-ok {
    background: rgba(19, 182, 82, 0.15);
    color: var(--ines-green-dark);
}

.sm-pill.is-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #9a6700;
}

.sm-pill.is-accent {
    background: rgba(240, 192, 32, 0.28);
    color: #7a5a00;
}

.sm-pill.is-muted,
.sm-pill.is-danger {
    background: #f3f4f6;
    color: #6b7280;
}

.sm-pill.is-danger {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.sm-empty,
.si-empty {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    color: #6b7280;
}

.sm-empty i,
.si-empty i {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 1.6rem;
    color: var(--ines-green);
}

.sm-empty p,
.si-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.sm-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1rem 0 0;
    padding: 0;
}

.sm-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    color: #6b7280;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.sm-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #e5e7eb;
    font-size: 0.7rem;
    font-weight: 700;
    color: #4b5563;
}

.sm-steps li em {
    font-style: normal;
    font-weight: 650;
}

.sm-steps li.is-done {
    color: var(--ines-green-dark);
}

.sm-steps li.is-done span {
    background: rgba(19, 182, 82, 0.18);
    color: var(--ines-green-dark);
}

.sm-steps li.is-current {
    background: var(--ines-green-dark);
    color: #fff;
}

.sm-steps li.is-current span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.sm-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 992px) {
    .sm-split {
        grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.85fr);
        align-items: start;
    }
}

.sm-scoreboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin: 0.85rem 0 1rem;
}

@media (min-width: 640px) {
    .sm-scoreboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sm-score-card {
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.sm-score-card.is-released {
    box-shadow: 0 10px 28px rgba(19, 182, 82, 0.12);
}

.sm-score-card.is-pending {
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.12);
}

.sm-score-card.is-returned {
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.1);
}

.sm-score-value {
    margin: 0.2rem 0;
    font-size: 1.55rem;
    font-weight: 750;
    color: #111827;
    line-height: 1.1;
}

.sm-score-value small {
    font-size: 0.85rem;
    font-weight: 600;
    color: #9ca3af;
}

.sm-score-value.is-warn {
    color: #c2410c;
}

.sm-score-sub,
.sm-status-title {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.sm-status-title {
    font-size: 1rem;
    font-weight: 750;
    color: #111827;
    margin-bottom: 0.2rem;
}

.sm-meter {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
    margin: 0.45rem 0 0.25rem;
}

.sm-meter > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ines-green);
}

.sm-panel {
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem 1.15rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.sm-panel-accent {
    box-shadow: 0 10px 28px rgba(19, 182, 82, 0.1);
}

.sm-panel-warn {
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.12);
}

.sm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.sm-panel-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
    color: #111827;
}

.sm-feedback {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #374151;
}

.sm-confirm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef2f0;
}

.sm-confirm-bar p {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.sm-rubric {
    display: grid;
    gap: 0.45rem;
}

.sm-rubric article {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #eef2f0;
    font-size: 0.85rem;
}

.sm-rubric article:last-child {
    border-bottom: 0;
}

.sm-rubric span {
    color: #6b7280;
}

.sm-rubric strong {
    color: #111827;
}

.sm-ai-block {
    margin-top: 0.85rem;
}

.sm-ai-block p,
.sm-ai-block ul {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #374151;
}

.sm-plag-row.has-rule {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #eef2f0;
}

.sm-source-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

.si-toolbar {
    margin-bottom: 0.85rem;
}

.si-feed {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.si-item-form {
    margin: 0;
}

.si-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 0;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    color: inherit;
    cursor: default;
}

button.si-item {
    cursor: pointer;
    font: inherit;
}

.si-item.is-unread {
    box-shadow: 0 10px 28px rgba(15, 82, 48, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
}

.si-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    background: #eef4f0;
    color: var(--ines-green-dark);
    font-size: 1.05rem;
}

.si-item-icon.is-grade,
.si-item-icon.is-success { background: rgba(19, 182, 82, 0.15); }
.si-item-icon.is-assignment,
.si-item-icon.is-warn { background: rgba(245, 158, 11, 0.18); color: #9a6700; }
.si-item-icon.is-live,
.si-item-icon.is-info { background: rgba(56, 189, 248, 0.15); color: #0284c7; }
.si-item-icon.is-system { background: #f3f4f6; color: #4b5563; }

.si-item-main {
    min-width: 0;
}

.si-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.2rem;
}

.si-item-top strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
}

.si-item-type {
    font-size: 0.72rem;
    font-weight: 650;
    color: #9ca3af;
}

.si-item-msg {
    margin: 0;
    font-size: 0.84rem;
    color: #4b5563;
    line-height: 1.4;
}

.si-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
}

.si-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ines-green);
}

.si-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.05rem;
    margin-bottom: 0.85rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.si-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    font-size: 1.15rem;
}

.si-banner.is-success { box-shadow: 0 10px 28px rgba(19, 182, 82, 0.12); }
.si-banner.is-success .si-banner-icon { background: rgba(19, 182, 82, 0.15); color: var(--ines-green-dark); }
.si-banner.is-warning { box-shadow: 0 10px 28px rgba(245, 158, 11, 0.12); }
.si-banner.is-warning .si-banner-icon { background: rgba(245, 158, 11, 0.18); color: #9a6700; }
.si-banner.is-info .si-banner-icon { background: rgba(56, 189, 248, 0.15); color: #0284c7; }

.si-banner-copy {
    flex: 1 1 12rem;
    min-width: 0;
}

.si-banner-copy h3 {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 750;
    color: #111827;
}

.si-banner-copy p {
    margin: 0;
    font-size: 0.84rem;
    color: #6b7280;
}

.si-banner-actions {
    display: flex;
    gap: 0.4rem;
}

/* ---- Flash / success messages (Django messages → si-flash) ---- */

.flash-messages {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: sticky;
    top: 0.65rem;
    z-index: 1040;
    pointer-events: none;
}

.app-shell .flash-messages {
    margin: 0;
    padding-top: 0.65rem !important;
    padding-bottom: 0;
}

.flash-messages .si-flash {
    pointer-events: auto;
}

.si-flash {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
    font-family: var(--font-sans);
    color: #111827;
    animation: si-flash-in 0.28s ease both;
}

@keyframes si-flash-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.si-flash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: #eef4f0;
    color: var(--ines-green-dark);
}

.si-flash-body {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.si-flash-body a {
    color: inherit;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.si-flash-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
}

.si-flash-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #374151;
}

.si-flash.is-success {
    background: linear-gradient(180deg, #ffffff 0%, #f3fbf6 100%);
    box-shadow: 0 12px 32px rgba(19, 182, 82, 0.16);
}

.si-flash.is-success .si-flash-icon {
    background: rgba(19, 182, 82, 0.16);
    color: var(--ines-green-dark);
}

.si-flash.is-credential {
    background: linear-gradient(180deg, #ffffff 0%, #fffbf0 100%);
    box-shadow: 0 14px 36px rgba(212, 160, 23, 0.22);
    border: 1px solid rgba(212, 160, 23, 0.22);
}

.si-flash.is-credential .si-flash-icon {
    background: rgba(212, 160, 23, 0.18);
    color: #9a7209;
}

.si-flash.is-info,
.si-flash.is-debug {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.12);
}

.si-flash.is-info .si-flash-icon,
.si-flash.is-debug .si-flash-icon {
    background: rgba(56, 189, 248, 0.16);
    color: #0284c7;
}

.si-flash.is-warning {
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.16);
}

.si-flash.is-warning .si-flash-icon {
    background: rgba(245, 158, 11, 0.2);
    color: #9a6700;
}

.si-flash.is-error,
.si-flash.is-danger {
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.14);
}

.si-flash.is-error .si-flash-icon,
.si-flash.is-danger .si-flash-icon {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

[data-theme="dark"] .si-flash,
[data-bs-theme="dark"] .si-flash {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .si-flash-close:hover,
[data-bs-theme="dark"] .si-flash-close:hover {
    background: rgba(248, 250, 252, 0.08);
    color: #e2e8f0;
}

[data-theme="dark"] .study-workspace-page .app-content,
[data-theme="dark"] .sm-marks-page .app-content,
[data-bs-theme="dark"] .study-workspace-page .app-content,
[data-bs-theme="dark"] .sm-marks-page .app-content {
    background: #0f172a;
}

[data-theme="dark"] .sm-stat,
[data-theme="dark"] .sm-list-item,
[data-theme="dark"] .sm-tab,
[data-theme="dark"] .si-tab,
[data-theme="dark"] .si-item,
[data-theme="dark"] .sm-panel,
[data-theme="dark"] .sm-score-card,
[data-theme="dark"] .asn-section,
[data-theme="dark"] .sm-empty,
[data-theme="dark"] .si-empty,
[data-theme="dark"] .si-banner,
[data-bs-theme="dark"] .sm-stat,
[data-bs-theme="dark"] .sm-list-item,
[data-bs-theme="dark"] .sm-tab,
[data-bs-theme="dark"] .si-tab,
[data-bs-theme="dark"] .si-item,
[data-bs-theme="dark"] .sm-panel,
[data-bs-theme="dark"] .sm-score-card,
[data-bs-theme="dark"] .asn-section,
[data-bs-theme="dark"] .sm-empty,
[data-bs-theme="dark"] .si-empty,
[data-bs-theme="dark"] .si-banner {
    background: #1e293b;
    box-shadow: none;
}

[data-theme="dark"] .sm-head h1,
[data-theme="dark"] .asn-header h1,
[data-theme="dark"] .sm-list-top strong,
[data-theme="dark"] .sm-stat strong,
[data-theme="dark"] .si-item-top strong,
[data-bs-theme="dark"] .sm-head h1,
[data-bs-theme="dark"] .asn-header h1,
[data-bs-theme="dark"] .sm-list-top strong,
[data-bs-theme="dark"] .sm-stat strong,
[data-bs-theme="dark"] .si-item-top strong {
    color: #f8fafc;
}



/* ---- AI study / teaching coach drawer ---- */

.ai-assist-root {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
}

.ai-assist-root *,
.ai-assist-root *::before,
.ai-assist-root *::after {
    box-sizing: border-box;
}

.ai-assist-root[hidden] {
    display: none !important;
}

.ai-assist-root.is-open {
    pointer-events: auto;
}

.ai-assist-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.ai-assist-root.is-open .ai-assist-backdrop {
    opacity: 1;
}

.ai-assist-drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 440px);
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: #fff;
    box-shadow: -16px 0 48px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 0.26s ease;
    font-family: var(--font-sans);
}

.ai-assist-drawer[data-ai-mode="teach"] {
    width: min(100%, 460px);
    max-width: 100%;
}

.ai-assist-root.is-open .ai-assist-drawer {
    transform: none;
}

.ai-assist-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.15rem 1.15rem 0.95rem;
    border-bottom: 1px solid #eef2f0;
    background: #fff;
    flex-shrink: 0;
    z-index: 5;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head {
    padding: 1.25rem 1.2rem 1.05rem;
    border-bottom: 0;
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 52%, #40916c 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(212, 160, 23, 0.22) 0%, transparent 55%);
    pointer-events: none;
}

.ai-assist-head-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ai-assist-brand {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.ai-assist-icon {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    background: rgba(19, 182, 82, 0.12);
    color: var(--ines-green-dark);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fef3c7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ai-assist-titles {
    min-width: 0;
}

.ai-assist-eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ines-green);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #d8f3dc;
    letter-spacing: 0.05em;
}

.ai-assist-head h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.45rem);
    color: #fff;
    letter-spacing: -0.02em;
}

.ai-assist-sub {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.45;
    max-width: 34rem;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-sub {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.84rem;
}

.ai-assist-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-close {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.ai-assist-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-close:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.ai-assist-tools-wrap {
    border-bottom: 1px solid #eef2f0;
    background: #fff;
    flex-shrink: 0;
    z-index: 4;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-tools-wrap {
    padding-top: 0.35rem;
    padding-bottom: 0.15rem;
    background: linear-gradient(180deg, rgba(45, 106, 79, 0.08) 0%, #fff 100%);
    border-bottom-color: #e5efe8;
}

.ai-assist-tools-label {
    margin: 0;
    padding: 0.65rem 1.15rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.ai-assist-tools-label[hidden] {
    display: none !important;
}

.ai-assist-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1.15rem 0.85rem;
}

/* Teach mode: single horizontal row, text-only chips */
.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-tools {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    padding: 0 1.15rem 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 106, 79, 0.35) transparent;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-tools::-webkit-scrollbar {
    height: 4px;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-tools::-webkit-scrollbar-thumb {
    background: rgba(45, 106, 79, 0.28);
    border-radius: 999px;
}

.ai-assist-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.42rem 0.78rem;
    background: #f7faf8;
    color: #1a2e24;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-chip {
    flex: 0 0 auto;
    min-height: auto;
    background: #fff;
    border-color: #dce8e0;
    box-shadow: 0 2px 8px rgba(15, 41, 32, 0.04);
    font-size: 0.76rem;
    font-weight: 700;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-chip i {
    display: none !important;
}

.ai-assist-chip:hover:not(:disabled) {
    background: rgba(19, 182, 82, 0.14);
    color: var(--ines-green-dark);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-chip:hover:not(:disabled) {
    border-color: rgba(45, 106, 79, 0.35);
    background: #ecfdf3;
    color: #1b4332;
}

.ai-assist-chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ai-assist-messages-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ai-assist-thread-top[hidden] {
    display: none !important;
}

.ai-assist-thread-top {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -0.25rem 0 0.35rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #eef2f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-thread-top {
    background: rgba(247, 250, 248, 0.97);
    border-bottom-color: #e5efe8;
}

.ai-assist-thread-top:not([hidden]) + .ai-assist-messages-body {
    padding-top: 0;
}

.ai-assist-thread-top-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    text-align: left;
}

.ai-assist-thread-top-btn i {
    flex-shrink: 0;
    color: var(--ines-green, #13b652);
    font-size: 0.85rem;
}

.ai-assist-thread-top-line {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 650;
    color: #374151;
    line-height: 1.3;
}

.ai-assist-thread-top-btn:hover .ai-assist-thread-top-line {
    color: #1b4332;
}

.ai-assist-jump-bottom {
    position: absolute;
    bottom: 0.65rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ai-assist-jump-bottom:hover {
    transform: translateX(-50%) translateY(-1px);
    background: #f9fafb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    color: #1b4332;
}

.ai-assist-jump-bottom[hidden] {
    display: none !important;
}

.ai-assist-messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.65rem 1.15rem 0.5rem;
    background: #f7faf8;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    touch-action: pan-y;
}

.ai-assist-messages-body {
    padding-bottom: 2.25rem;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-messages {
    background: linear-gradient(180deg, #f7faf8 0%, #f3f7f4 100%);
}

.ai-assist-empty {
    text-align: center;
    padding: 1.5rem 0.85rem;
    color: #6b7280;
    border-radius: 16px;
    border: 1px dashed #d7e0db;
    background: rgba(255, 255, 255, 0.72);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-empty {
    padding: 1.75rem 1rem;
    border-color: rgba(45, 106, 79, 0.18);
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 41, 32, 0.05);
}

.ai-assist-empty-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--ines-green);
    background: rgba(19, 182, 82, 0.1);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-empty-icon {
    color: #b45309;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.18) 0%, rgba(19, 182, 82, 0.12) 100%);
}

.ai-assist-empty-title {
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #111827;
}

.ai-assist-empty p:last-child,
.ai-assist-empty #aiAssistEmptyCopy {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.ai-assist-empty i {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 1.6rem;
    color: var(--ines-green);
}

.ai-assist-msg {
    display: flex;
    margin-bottom: 0.85rem;
}

.ai-assist-msg-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 94%;
}

.ai-assist-msg--user .ai-assist-msg-wrap {
    align-items: flex-end;
}

.ai-assist-msg--assistant .ai-assist-msg-wrap {
    align-items: flex-start;
}

.ai-assist-msg--user {
    justify-content: flex-end;
}

.ai-assist-msg--assistant {
    justify-content: flex-start;
}

.ai-assist-bubble {
    max-width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #111827;
}

.ai-assist-bubble--rich {
    padding: 0.85rem 0.95rem;
}

.ai-assist-msg--user .ai-assist-bubble {
    background: var(--ines-green-dark);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-assist-msg--assistant .ai-assist-bubble {
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(15, 41, 32, 0.06);
}

.ai-assist-msg-actions {
    display: inline-flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ai-assist-msg-wrap:hover .ai-assist-msg-actions,
.ai-assist-msg-actions:focus-within {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .ai-assist-msg-actions {
        opacity: 1;
    }
}

.ai-assist-act {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ai-assist-act:hover {
    background: #f3f4f6;
    color: #1b4332;
    border-color: #d1d5db;
}

.ai-assist-act.is-done {
    color: #0f7a3a;
    border-color: rgba(19, 182, 82, 0.35);
    background: #ecfdf3;
}

/* Rich Markdown in AI responses */
.ai-assist-md h1,
.ai-assist-md h2,
.ai-assist-md h3,
.ai-assist-md h4 {
    margin: 0.85rem 0 0.45rem;
    font-weight: 800;
    line-height: 1.25;
    color: #1b4332;
}

.ai-assist-md h1:first-child,
.ai-assist-md h2:first-child,
.ai-assist-md h3:first-child {
    margin-top: 0;
}

.ai-assist-md h2 {
    font-size: 0.98rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid rgba(19, 182, 82, 0.18);
}

.ai-assist-md h3 {
    font-size: 0.92rem;
    color: #2d6a4f;
}

.ai-assist-md p {
    margin: 0 0 0.55rem;
}

.ai-assist-md p:last-child {
    margin-bottom: 0;
}

.ai-assist-md strong {
    color: #0f5230;
    font-weight: 800;
}

.ai-assist-md ul,
.ai-assist-md ol {
    margin: 0.35rem 0 0.65rem;
    padding-left: 0;
    list-style: none;
}

.ai-assist-md ul li,
.ai-assist-md ol li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: 0.35rem;
}

.ai-assist-md ul li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.55em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--ines-green, #13b652);
}

.ai-assist-md ol {
    counter-reset: ai-ol;
}

.ai-assist-md ol li {
    counter-increment: ai-ol;
}

.ai-assist-md ol li::before {
    content: counter(ai-ol);
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: rgba(19, 182, 82, 0.12);
    color: #1b4332;
    font-size: 0.65rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.ai-assist-md blockquote {
    margin: 0.55rem 0;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid #d4a017;
    border-radius: 0 10px 10px 0;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.84rem;
}

.ai-assist-md blockquote p:last-child {
    margin-bottom: 0;
}

.ai-assist-md code {
    font-size: 0.82em;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #0f172a;
}

.ai-assist-md pre {
    margin: 0.55rem 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: auto;
    font-size: 0.8rem;
}

.ai-assist-md pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.ai-assist-md hr {
    border: 0;
    border-top: 1px dashed #d7e0db;
    margin: 0.75rem 0;
}

.ai-assist-md a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ai-assist-msg--assistant .ai-assist-bubble p {
    margin: 0 0 0.55rem;
}

.ai-assist-msg--assistant .ai-assist-bubble p:last-child {
    margin-bottom: 0;
}

.ai-assist-insert {
    display: inline-block;
    margin-top: 0.55rem;
    border: 1px solid #d7e0db;
    background: #f4faf6;
    color: #0f5230;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
}

.ai-assist-msg--assistant .ai-assist-bubble ul,
.ai-assist-msg--assistant .ai-assist-bubble ol {
    margin: 0.35rem 0 0.55rem;
    padding-left: 1.15rem;
}

.ai-assist-msg--assistant .ai-assist-bubble .ai-assist-md ul,
.ai-assist-msg--assistant .ai-assist-bubble .ai-assist-md ol {
    padding-left: 0;
}

.ai-assist-thinking {
    display: inline-flex;
    gap: 0.28rem;
    padding: 0.15rem 0;
}

.ai-assist-thinking span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #9ca3af;
    animation: ai-assist-bounce 1s ease-in-out infinite;
}

.ai-assist-thinking span:nth-child(2) { animation-delay: 0.15s; }
.ai-assist-thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-assist-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
    40% { transform: translateY(-4px); opacity: 1; }
}

.ai-assist-composer {
    flex-shrink: 0;
    padding: 0.65rem 1.15rem 0.75rem;
    border-top: 1px solid #eef2f0;
    background: #fff;
    z-index: 4;
}

.ai-assist-input-wrap {
    position: relative;
}

.ai-assist-input-wrap textarea {
    width: 100%;
    min-height: 2.85rem;
    max-height: 7.5rem;
    resize: none;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 0.65rem 2.85rem 0.65rem 0.85rem;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #111827;
    background: #f9fafb;
    display: block;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ai-assist-input-wrap textarea::placeholder {
    color: #9ca3af;
}

.ai-assist-composer.is-busy .ai-assist-input-wrap textarea {
    background: #fff;
    border-color: #e5e7eb;
}

.ai-assist-composer.is-busy .ai-assist-input-wrap textarea::placeholder {
    color: #6b7280;
}

.ai-assist-input-wrap textarea:focus {
    outline: none;
    border-color: var(--ines-green);
    box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.15);
    background: #fff;
}

.ai-assist-send {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--ines-yellow);
    color: #1a2e24;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 2;
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-send {
    background: linear-gradient(135deg, #d4a017 0%, #fbbf24 100%);
    color: #1b4332;
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.15);
}

.ai-assist-send:hover:not(:disabled) {
    background: var(--ines-yellow-light);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-send:hover:not(:disabled) {
    transform: scale(1.04);
    background: linear-gradient(135deg, #e6b422 0%, #fcd34d 100%);
}

.ai-assist-drawer[data-ai-mode="teach"] .ai-assist-note {
    color: #6b7c72;
    border-top: 1px solid #eef2f0;
    padding-top: 0.65rem;
}

.ai-assist-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ai-assist-composer.is-busy .ai-assist-send:not(:disabled) {
    animation: ai-assist-send-pulse 1.2s ease-in-out infinite;
}

@keyframes ai-assist-send-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.75; }
}

.ai-assist-note {
    margin: 0;
    padding: 0 1.15rem 0.85rem;
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.35;
    background: #fff;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .ai-assist-root {
        justify-content: stretch;
        align-items: stretch;
    }

    .ai-assist-drawer,
    .ai-assist-drawer[data-ai-mode="teach"] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .ai-assist-drawer {
        height: 100%;
        height: 100dvh;
        height: 100svh;
        max-height: 100dvh;
        max-height: 100svh;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        overflow: hidden;
        box-shadow: none;
    }

    @supports (-webkit-touch-callout: none) {
        .ai-assist-drawer {
            height: -webkit-fill-available;
            max-height: -webkit-fill-available;
        }
    }

    .ai-assist-head {
        align-items: center;
        padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
        position: relative;
        z-index: 6;
        flex-shrink: 0;
    }

    .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head {
        padding-top: max(0.7rem, env(safe-area-inset-top, 0px));
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    }

    .ai-assist-brand {
        align-items: center;
        gap: 0.55rem;
        margin-bottom: 0;
    }

    .ai-assist-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
        border-radius: 12px;
    }

    .ai-assist-head h2 {
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head h2 {
        font-size: 1.08rem;
    }

    .ai-assist-eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.12rem;
    }

    .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-eyebrow {
        display: inline-flex !important;
        padding: 0.12rem 0.45rem;
        font-size: 0.58rem;
    }

    .ai-assist-close {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .ai-assist-tools-wrap {
        flex-shrink: 0;
        min-height: 0;
        padding-left: max(0, env(safe-area-inset-left, 0px));
        padding-right: max(0, env(safe-area-inset-right, 0px));
    }

    .ai-assist-tools {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.65rem;
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    }

    .ai-assist-tools::-webkit-scrollbar {
        display: none;
    }

    .ai-assist-messages {
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
        touch-action: pan-y;
    }

    .ai-assist-messages-wrap {
        flex: none;
        min-height: 0;
        overflow: hidden;
    }

    .ai-assist-sub,
    .ai-assist-note,
    .ai-assist-tools-label {
        display: none !important;
    }

    .ai-assist-composer {
        flex-shrink: 0;
        margin-top: 0;
        padding-top: 0.55rem;
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
        padding-bottom: max(0.55rem, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #eef2f0;
        background: #fff;
        z-index: 6;
    }

    .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-composer {
        border-top-color: #e5efe8;
    }

    .ai-assist-input-wrap textarea {
        min-height: 2.65rem;
        max-height: 5.5rem;
        font-size: 16px;
        border-radius: 24px;
    }
}

body.ai-assist-open {
    overflow: hidden;
    overscroll-behavior: none;
}

[data-theme="dark"] .ai-assist-drawer,
[data-bs-theme="dark"] .ai-assist-drawer {
    background: #0f172a;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .ai-assist-head,
[data-theme="dark"] .ai-assist-tools,
[data-theme="dark"] .ai-assist-composer,
[data-theme="dark"] .ai-assist-note,
[data-bs-theme="dark"] .ai-assist-head,
[data-bs-theme="dark"] .ai-assist-tools,
[data-bs-theme="dark"] .ai-assist-composer,
[data-bs-theme="dark"] .ai-assist-note {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .ai-assist-messages,
[data-bs-theme="dark"] .ai-assist-messages {
    background: #1e293b;
}

[data-theme="dark"] .ai-assist-head h2,
[data-bs-theme="dark"] .ai-assist-head h2 {
    color: #f8fafc;
}

[data-theme="dark"] .ai-assist-msg--assistant .ai-assist-bubble,
[data-bs-theme="dark"] .ai-assist-msg--assistant .ai-assist-bubble {
    background: #0f172a;
    color: #e2e8f0;
    box-shadow: none;
}

[data-theme="dark"] .ai-assist-chip,
[data-bs-theme="dark"] .ai-assist-chip {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head,
[data-bs-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-head {
    background: linear-gradient(135deg, #0f2920 0%, #1b4332 55%, #2d6a4f 100%);
}

[data-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-tools-wrap,
[data-bs-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-tools-wrap {
    background: linear-gradient(180deg, rgba(45, 106, 79, 0.15) 0%, #0f172a 100%);
}

[data-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-chip,
[data-bs-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-chip {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-empty,
[data-bs-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-empty {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-empty-title,
[data-bs-theme="dark"] .ai-assist-drawer[data-ai-mode="teach"] .ai-assist-empty-title {
    color: #f8fafc;
}

[data-theme="dark"] .ai-assist-thread-top,
[data-bs-theme="dark"] .ai-assist-thread-top {
    background: rgba(15, 23, 42, 0.94);
    border-bottom-color: #334155;
}

[data-theme="dark"] .ai-assist-thread-top-line,
[data-bs-theme="dark"] .ai-assist-thread-top-line {
    color: #e2e8f0;
}

[data-theme="dark"] .ai-assist-jump-bottom,
[data-bs-theme="dark"] .ai-assist-jump-bottom {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .ai-assist-act,
[data-bs-theme="dark"] .ai-assist-act {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .ai-assist-md h2,
[data-theme="dark"] .ai-assist-md h3,
[data-bs-theme="dark"] .ai-assist-md h2,
[data-bs-theme="dark"] .ai-assist-md h3 {
    color: #d8f3dc;
}

[data-theme="dark"] .ai-assist-md strong,
[data-bs-theme="dark"] .ai-assist-md strong {
    color: #86efac;
}

[data-theme="dark"] .ai-assist-md blockquote,
[data-bs-theme="dark"] .ai-assist-md blockquote {
    background: rgba(180, 83, 9, 0.12);
    color: #fde68a;
}

[data-theme="dark"] .ai-assist-input-wrap textarea,
[data-bs-theme="dark"] .ai-assist-input-wrap textarea {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}



/* ---- AI course studio + review ---- */

.ai-studio-page .app-content {
    background:
        radial-gradient(900px 420px at 8% -10%, rgba(19, 182, 82, 0.12), transparent 55%),
        radial-gradient(700px 360px at 100% 0%, rgba(240, 192, 32, 0.14), transparent 50%),
        #f4f5f7;
}

.ai-studio {
    max-width: 1120px;
    margin: 0 auto;
    font-family: var(--font-sans);
}

.ai-studio-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.ai-steps {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ai-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 650;
}

.ai-step em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #e5e7eb;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 750;
}

.ai-step.is-active,
.ai-step.is-done {
    background: #fff;
    color: #111827;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.ai-step.is-active em,
.ai-step.is-done em {
    background: var(--ines-green);
    color: #fff;
}

.ai-step-line {
    width: 1.25rem;
    height: 2px;
    background: #d1d5db;
}

.ai-review-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 1.4rem 1.4rem 1.25rem;
    margin-bottom: 1.15rem;
    background:
        linear-gradient(135deg, rgba(15, 82, 48, 0.96) 0%, rgba(19, 182, 82, 0.88) 55%, rgba(15, 82, 48, 0.92) 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 82, 48, 0.22);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: stretch;
}

.ai-review-hero > div:first-child {
    flex: 1 1 280px;
    min-width: 0;
}

.ai-review-hero::after {
    content: '';
    position: absolute;
    inset: auto -10% -40% auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 192, 32, 0.35), transparent 70%);
    pointer-events: none;
}

.ai-review-hero > * {
    position: relative;
    z-index: 1;
}

.ai-review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ai-chip.is-ai {
    background: rgba(240, 192, 32, 0.28);
    color: #fff8dc;
}

.ai-chip.is-status.is-ready {
    background: rgba(255, 255, 255, 0.22);
}

.ai-chip.is-status.is-generating {
    background: rgba(56, 189, 248, 0.28);
}

.ai-chip.is-status.is-failed {
    background: rgba(239, 68, 68, 0.3);
}

.ai-review-hero h1 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.ai-review-meta {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
}

.ai-review-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

@media (min-width: 720px) {
    .ai-review-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ai-review-stat {
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
}

.ai-review-stat span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.ai-review-stat strong {
    font-size: 1.2rem;
    font-weight: 750;
}

.ai-review-tip {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.84rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.ai-review-tip i {
    color: var(--ines-yellow);
    margin-top: 0.1rem;
}

.ai-progress-banner,
.ai-fail-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.ai-progress-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-progress-orb {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    border-top-color: var(--ines-green);
    animation: ai-spin 0.9s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-progress-track {
    flex: 1 1 12rem;
    height: 8px;
    border-radius: 999px;
    background: #eef2f0;
    overflow: hidden;
}

.ai-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ines-green), var(--ines-yellow));
    transition: width 0.35s ease;
}

.ai-fail-banner {
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: #fff7f7;
}

.ai-fail-banner p {
    margin: 0.2rem 0 0;
    color: #6b7280;
    font-size: 0.88rem;
}

.ai-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.15rem;
    background: var(--ines-yellow);
    color: #1a2e24;
    font-weight: 750;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(240, 192, 32, 0.28);
}

.ai-generate-btn:hover:not(:disabled) {
    background: var(--ines-yellow-light);
}

.ai-generate-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ai-generate-btn-sm {
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
}

.ai-review-layout {
    display: grid;
    gap: 1rem;
}

.ai-review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    position: sticky;
    top: 0.5rem;
    z-index: 5;
}

.ai-review-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    border-radius: 999px;
    padding: 0.48rem 0.85rem;
    background: transparent;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.ai-review-tab em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 750;
    color: #9ca3af;
}

.ai-review-tab.is-active {
    background: var(--ines-green-dark);
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 82, 48, 0.22);
}

.ai-review-tab.is-active em {
    color: rgba(255, 255, 255, 0.75);
}

.ai-sections {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ai-sections > .ai-card,
.ai-sections > .ai-add-module {
    display: none;
}

.ai-sections[data-active-tab="description"] > [data-section~="description"],
.ai-sections[data-active-tab="objectives"] > [data-section~="objectives"],
.ai-sections[data-active-tab="outcomes"] > [data-section~="outcomes"],
.ai-sections[data-active-tab="modules"] > [data-section~="modules"],
.ai-sections[data-active-tab="modules"] > .ai-add-module,
.ai-sections[data-active-tab="projects"] > [data-section~="projects"],
.ai-sections[data-active-tab="self_check"] > [data-section~="self_check"],
.ai-sections[data-active-tab="quizzes"] > [data-section~="quizzes"],
.ai-sections[data-active-tab="discussions"] > [data-section~="discussions"],
.ai-sections[data-active-tab="references"] > [data-section~="references"] {
    display: block;
}

.ai-sections[data-active-tab="projects"] .ai-nested-card:not(.is-project),
.ai-sections[data-active-tab="projects"] .ai-nested-card.is-selfcheck,
.ai-sections[data-active-tab="projects"] .ai-nested-card.is-discussion,
.ai-sections[data-active-tab="projects"] .ai-questions-block,
.ai-sections[data-active-tab="projects"] > .ai-card-module > .ai-prose {
    display: none;
}

.ai-sections[data-active-tab="self_check"] .ai-nested-card:not(.is-selfcheck),
.ai-sections[data-active-tab="self_check"] .ai-questions-block,
.ai-sections[data-active-tab="self_check"] > .ai-card-module > .ai-prose {
    display: none;
}

.ai-sections[data-active-tab="discussions"] .ai-nested-card:not(.is-discussion),
.ai-sections[data-active-tab="discussions"] .ai-questions-block,
.ai-sections[data-active-tab="discussions"] > .ai-card-module > .ai-prose {
    display: none;
}

.ai-sections[data-active-tab="quizzes"] .ai-nested-card,
.ai-sections[data-active-tab="quizzes"] > .ai-card-module > .ai-prose {
    display: none;
}

.ai-card {
    background: #fff;
    border-radius: 22px;
    padding: 1.15rem 1.2rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    animation: ai-card-in 0.35s ease both;
}

@keyframes ai-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.ai-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.ai-card-title {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-width: 0;
}

.ai-card-title h2 {
    margin: 0 0 0.15rem;
    font-size: 1.08rem;
    font-weight: 750;
    color: #111827;
}

.ai-card-title p {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.ai-card-icon,
.ai-module-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 14px;
    background: rgba(19, 182, 82, 0.12);
    color: var(--ines-green-dark);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ai-card-icon.is-teal { background: rgba(20, 184, 166, 0.15); color: #0f766e; }
.ai-card-icon.is-gold { background: rgba(240, 192, 32, 0.2); color: #a16207; }
.ai-card-icon.is-rose { background: rgba(244, 114, 182, 0.16); color: #be185d; }
.ai-card-icon.is-violet { background: rgba(167, 139, 250, 0.18); color: #6d28d9; }

.ai-module-num {
    font-size: 0.85rem;
    font-weight: 750;
}

.ai-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ai-act {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    background: #f7faf8;
    color: #1a2e24;
    font-size: 0.76rem;
    font-weight: 650;
    cursor: pointer;
}

.ai-act:hover {
    background: rgba(19, 182, 82, 0.14);
    color: var(--ines-green-dark);
}

.ai-act.is-regen:hover {
    background: rgba(56, 189, 248, 0.16);
    color: #0369a1;
}

.ai-act.is-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.ai-act-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
}

.ai-act.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.ai-generate-btn.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.ai-lede {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: #374151;
}

.ai-prose {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #374151;
    white-space: pre-wrap;
}

.ai-outcome-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.ai-outcome-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: #f7faf8;
}

.ai-outcome-list li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ines-green-dark);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
}

.ai-outcome-list li p {
    margin: 0;
    font-size: 0.9rem;
    color: #374151;
}

.ai-outcome-list li.is-empty {
    background: #f9fafb;
}

.ai-outcome-list li.is-empty span { display: none; }

.ai-nested-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

@media (min-width: 768px) {
    .ai-nested-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ai-nested-card,
.ai-questions-block {
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: #f7faf8;
    border: 1px solid #eef2f0;
}

.ai-nested-card.is-assign {
    background: #fffbeb;
    border-color: rgba(240, 192, 32, 0.35);
}

.ai-nested-card.is-project {
    background: #fff7ed;
    border-color: rgba(240, 135, 45, 0.35);
}

.ai-nested-card.is-selfcheck {
    background: #fffbeb;
    border-color: rgba(217, 119, 6, 0.3);
}

.ai-nested-card.is-discussion {
    background: #ecfdf5;
    border-color: rgba(16, 185, 129, 0.35);
}

.ai-nested-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin-bottom: 0.4rem;
}

.ai-nested-top strong {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: #111827;
}

.ai-nested-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.ai-nested-actions .ai-act {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.ai-nested-actions .ai-act span {
    font-size: 0.72rem;
}

.ai-nested-card > p {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.4;
}

.ai-tag {
    display: inline-flex;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(19, 182, 82, 0.14);
    color: var(--ines-green-dark);
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-tag.is-assign { background: rgba(240, 192, 32, 0.22); color: #92400e; }
.ai-tag.is-quiz { background: rgba(56, 189, 248, 0.18); color: #0369a1; }
.ai-tag.is-project { background: rgba(240, 135, 45, 0.20); color: #9a3412; }
.ai-tag.is-selfcheck { background: rgba(217, 119, 6, 0.18); color: #92400e; }
.ai-tag.is-discussion { background: rgba(16, 185, 129, 0.18); color: #065f46; }

.ai-questions-block {
    grid-column: 1 / -1;
}

.ai-questions-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.ai-questions-head em,
.ai-q-total {
    display: block;
    font-style: normal;
    font-size: 0.75rem;
    color: #6b7280;
}

.ai-q-list {
    display: grid;
    gap: 0.55rem;
}

.ai-q-item {
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.ai-q-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.ai-q-num {
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--ines-green-dark);
}

.ai-q-marks {
    margin-left: auto;
    font-size: 0.75rem;
    color: #6b7280;
}

.ai-q-text {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    color: #111827;
}

.ai-q-options {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.ai-q-options li.is-correct {
    color: var(--ines-green-dark);
    font-weight: 700;
}

.ai-q-answer {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.ai-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.ai-stat-row i {
    color: var(--ines-green);
    margin-right: 0.25rem;
}

.ai-add-module {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 1rem;
    border: 2px dashed #d1d5db;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.65);
    color: #4b5563;
    font-weight: 650;
    cursor: pointer;
}

.ai-add-module:hover {
    border-color: var(--ines-green);
    color: var(--ines-green-dark);
    background: #fff;
}

.ai-card-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
}

.ai-card-empty i {
    font-size: 1.8rem;
    color: var(--ines-green);
    margin-bottom: 0.5rem;
}

.ai-card-empty h2 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    color: #111827;
}

.ai-review-dock {
    position: sticky;
    bottom: 0.75rem;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

.ai-review-dock p {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.ai-review-dock strong {
    color: #111827;
}

.ai-modal .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

.ai-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
}

.ai-optional {
    font-weight: 500;
    color: #9ca3af;
}

.ai-hint {
    font-size: 0.75rem;
    color: #9ca3af;
}

.ai-price-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    margin-bottom: 0.55rem;
    border-radius: 14px;
    background: #f7faf8;
    cursor: pointer;
}

.ai-price-card strong {
    display: block;
    color: #111827;
}

.ai-price-card em {
    font-style: normal;
    font-size: 0.8rem;
    color: #6b7280;
}

.ai-price-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-price-input span {
    font-weight: 700;
    color: #6b7280;
}

.ai-marks-input {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ai-marks-input span {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Create form helpers used by ai_course_form */
.ai-studio-page .app-content {
    background:
        radial-gradient(1000px 480px at 0% -8%, rgba(19, 182, 82, 0.14), transparent 55%),
        radial-gradient(780px 420px at 100% 0%, rgba(240, 192, 32, 0.16), transparent 52%),
        linear-gradient(180deg, #f3f7f4 0%, #eef2f0 100%);
}

.ai-studio-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 1.75rem 1.6rem 1.65rem;
    margin-bottom: 1.35rem;
    background:
        linear-gradient(125deg, #0c3d24 0%, #0f5230 38%, #13b652 100%);
    color: #fff;
    box-shadow: 0 22px 48px rgba(15, 82, 48, 0.22);
}

.ai-studio-hero-glow {
    position: absolute;
    right: -8%;
    top: -40%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 192, 32, 0.4), transparent 68%);
    pointer-events: none;
}

.ai-studio-hero > *:not(.ai-studio-hero-glow) {
    position: relative;
    z-index: 1;
}

.ai-studio-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0c020;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ai-studio-hero h1 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display, Fraunces, Georgia, serif);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.ai-studio-hero p {
    margin: 0;
    max-width: 38rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.55;
}

.ai-studio-grid {
    display: grid;
    gap: 1.15rem;
    align-items: start;
}

@media (min-width: 992px) {
    .ai-studio-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 1.35rem;
    }
}

.ai-studio-main {
    min-width: 0;
}

.ai-panel {
    background: #fff;
    border: 1px solid rgba(15, 82, 48, 0.08);
    border-radius: 22px;
    padding: 1.25rem 1.3rem 1.35rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    margin-bottom: 1.1rem;
}

.ai-panel-head {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1.15rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid #eef2f0;
}

.ai-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(19, 182, 82, 0.12);
    color: #0f5230;
    font-size: 1.15rem;
}

.ai-panel-icon.is-gold {
    background: rgba(240, 192, 32, 0.22);
    color: #9a7200;
}

.ai-panel-head h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 750;
    color: #111827;
}

.ai-panel-head p {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.4;
}

.ai-studio-form .auth-input,
.ai-studio-form .form-control,
.ai-studio-form .form-select {
    border-radius: 12px;
    border: 1.5px solid #dbe4df;
    padding: 0.7rem 0.9rem;
    background: #fbfcfb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ai-studio-form .auth-input:focus,
.ai-studio-form .form-control:focus,
.ai-studio-form .form-select:focus {
    border-color: #13b652;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.16);
}

.ai-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
}

.ai-optional {
    font-weight: 500;
    color: #9ca3af;
}

.ai-hint {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

.ai-range-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem;
    align-items: center;
}

.ai-range-wrap input[type="range"],
.ai-range-wrap .form-range {
    width: 100%;
    accent-color: #0f5230;
}

.ai-range-live {
    min-width: 3.1rem;
    text-align: center;
    padding: 0.4rem 0.55rem;
    border-radius: 10px;
    background: #eef8f1;
    color: #0f5230;
    font-size: 0.8rem;
    font-weight: 750;
}

.ai-range-wrap--dual {
    grid-template-columns: 1fr 4.5rem auto;
}

.ai-count-input {
    padding: 0.35rem 0.45rem;
    min-height: 2.1rem;
    text-align: center;
    font-size: 0.85rem;
}

.ai-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.ai-choice-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .ai-choice-grid,
    .ai-choice-grid-3 {
        grid-template-columns: 1fr;
    }
}

.ai-choice {
    margin: 0;
    cursor: pointer;
}

.ai-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ai-choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-height: 100%;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1.5px solid #e2e8e4;
    background: #f8faf9;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ai-choice-card i {
    font-size: 1.2rem;
    color: #0f5230;
    margin-bottom: 0.25rem;
}

.ai-choice-card strong {
    font-size: 0.92rem;
    color: #111827;
}

.ai-choice-card em {
    font-style: normal;
    font-size: 0.76rem;
    color: #6b7280;
    line-height: 1.35;
}

.ai-choice-card.is-soft {
    background: #fff;
}

.ai-choice:hover .ai-choice-card {
    border-color: rgba(19, 182, 82, 0.45);
    transform: translateY(-1px);
}

.ai-choice input:checked + .ai-choice-card {
    border-color: #13b652;
    background: linear-gradient(180deg, #f2fbf5 0%, #fff 100%);
    box-shadow: 0 10px 24px rgba(19, 182, 82, 0.12);
}

.ai-choice input:checked + .ai-choice-card i {
    color: #13b652;
}

.ai-include-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

@media (min-width: 768px) {
    .ai-include-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ai-include {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ai-include input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ai-include-face {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    border: 1.5px solid #e5ebe7;
    background: #fbfcfb;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ai-include-face i {
    color: #0f5230;
    font-size: 1.05rem;
}

.ai-include-face strong {
    font-size: 0.82rem;
    font-weight: 650;
    color: #1f2937;
    line-height: 1.25;
}

.ai-include:hover .ai-include-face {
    border-color: rgba(19, 182, 82, 0.4);
}

.ai-include input:checked + .ai-include-face {
    border-color: #13b652;
    background: #eefaf2;
    box-shadow: inset 0 0 0 1px rgba(19, 182, 82, 0.12);
}

.ai-include input:checked + .ai-include-face::after {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    margin-left: auto;
    color: #13b652;
    font-size: 1rem;
}

.ai-prefs-embed {
    padding: 0.85rem 0 0.15rem;
}

.ai-prefs-embed .ai-label {
    font-size: 0.8rem;
    font-weight: 650;
}

.ai-studio-side {
    min-width: 0;
}

.ai-side-card {
    background: #fff;
    border: 1px solid rgba(15, 82, 48, 0.1);
    border-radius: 22px;
    padding: 1.15rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.ai-side-card.is-sticky {
    position: sticky;
    top: 1rem;
}

.ai-side-preview {
    padding: 1.05rem 1rem 1.15rem;
    margin-bottom: 1rem;
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(15, 82, 48, 0.96), rgba(19, 182, 82, 0.9));
    color: #fff;
}

.ai-side-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: rgba(240, 192, 32, 0.28);
    color: #fff8dc;
    font-size: 0.72rem;
    font-weight: 750;
}

.ai-side-preview h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 750;
}

.ai-side-preview > p {
    margin: 0 0 0.85rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

.ai-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.ai-side-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
}

.ai-side-list i {
    color: #f0c020;
    margin-top: 0.1rem;
}

.ai-studio-side .ai-generate-btn {
    width: 100%;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #f0c020, #e0a800);
    box-shadow: 0 12px 28px rgba(240, 192, 32, 0.32);
}

.ai-studio-side .ai-generate-btn:hover:not(:disabled) {
    filter: brightness(1.04);
    background: linear-gradient(135deg, #f5cc3a, #f0c020);
}

.ai-side-cancel {
    display: block;
    margin-top: 0.7rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

.ai-side-cancel:hover {
    color: #0f5230;
}

.ai-studio-top .ai-steps {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 82, 48, 0.08);
    border-radius: 999px;
    padding: 0.3rem 0.45rem;
}

[data-theme="dark"] .ai-studio-page .app-content,
[data-bs-theme="dark"] .ai-studio-page .app-content {
    background:
        radial-gradient(900px 420px at 8% -10%, rgba(19, 182, 82, 0.12), transparent 55%),
        #0f172a;
}

[data-theme="dark"] .ai-panel,
[data-theme="dark"] .ai-side-card,
[data-bs-theme="dark"] .ai-panel,
[data-bs-theme="dark"] .ai-side-card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: none;
}

[data-theme="dark"] .ai-panel-head,
[data-bs-theme="dark"] .ai-panel-head {
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

[data-theme="dark"] .ai-panel-head h2,
[data-theme="dark"] .ai-choice-card strong,
[data-theme="dark"] .ai-include-face strong,
[data-bs-theme="dark"] .ai-panel-head h2,
[data-bs-theme="dark"] .ai-choice-card strong,
[data-bs-theme="dark"] .ai-include-face strong {
    color: #f8fafc;
}

[data-theme="dark"] .ai-label,
[data-bs-theme="dark"] .ai-label {
    color: #cbd5e1;
}

[data-theme="dark"] .ai-choice-card,
[data-theme="dark"] .ai-include-face,
[data-bs-theme="dark"] .ai-choice-card,
[data-bs-theme="dark"] .ai-include-face {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.22);
}

[data-theme="dark"] .ai-studio-form .auth-input,
[data-theme="dark"] .ai-studio-form .form-control,
[data-theme="dark"] .ai-studio-form .form-select,
[data-bs-theme="dark"] .ai-studio-form .auth-input,
[data-bs-theme="dark"] .ai-studio-form .form-control,
[data-bs-theme="dark"] .ai-studio-form .form-select {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
}

[data-theme="dark"] .ai-step,
[data-bs-theme="dark"] .ai-step {
    background: rgba(30, 41, 59, 0.9);
    color: #94a3b8;
}

[data-theme="dark"] .ai-step.is-active,
[data-theme="dark"] .ai-step.is-done,
[data-bs-theme="dark"] .ai-step.is-active,
[data-bs-theme="dark"] .ai-step.is-done {
    background: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .ai-studio-top .ai-steps,
[data-bs-theme="dark"] .ai-studio-top .ai-steps {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(148, 163, 184, 0.16);
}


/* ---- Lecturer live monitoring dashboard (light hub) ---- */

.lecturer-monitor-page .app-content {

    background: #f4f5f7;

}



.lecturer-monitor {

    font-family: var(--font-sans);

    color: #374151;

}



.lecturer-monitor h1,

.lecturer-monitor h2,

.lecturer-monitor p,

.lecturer-monitor strong,

.lecturer-monitor span,

.lecturer-monitor em,

.lecturer-monitor a,

.lecturer-monitor li,

.lecturer-monitor button,

.lecturer-monitor .btn {

    font-family: var(--font-sans);

}



.lm-top {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-end;

    gap: 1rem;

    margin-bottom: 1.25rem;

}



.lm-crumb {

    margin: 0 0 0.35rem;

    font-size: 0.75rem;

    color: #6b7280;

}



.lm-top h1 {

    margin: 0 0 0.25rem;

    font-size: clamp(1.4rem, 2.5vw, 1.85rem);

    font-weight: 750;

    color: #111827;

}



.lm-sub {

    margin: 0;

    color: #6b7280;

    font-size: 0.9rem;

}



.lm-top-actions {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.lm-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    border: 0;

    border-radius: 999px;

    padding: 0.55rem 1rem;

    font-size: 0.875rem;

    font-weight: 650;

    text-decoration: none;

    cursor: pointer;

}



.lm-btn-primary {

    background: var(--ines-yellow);

    color: #1a2e24;

}



.lm-btn-primary:hover {

    background: var(--ines-yellow-light);

    color: #1a2e24;

}



.lm-btn-ghost {

    background: #ffffff;

    color: #374151;

    border: 0; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.lm-btn-sm {

    padding: 0.4rem 0.8rem;

    font-size: 0.8rem;

}



.lm-link {

    color: #6b7280;

    font-size: 0.85rem;

    font-weight: 600;

    text-decoration: none;

}



.lm-link:hover {

    color: var(--ines-green);

}



.lm-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

}



@media (min-width: 992px) {

    .lm-grid {

        grid-template-columns: repeat(12, minmax(0, 1fr));

    }



    .lm-profile { grid-column: span 5; }

    .lm-kpis { grid-column: span 4; }

    .lm-gauge-card { grid-column: span 3; }

    .lm-activity { grid-column: span 8; }

    .lm-ai { grid-column: span 4; }

    .lm-chart-card { grid-column: span 5; }

    .lm-mix { grid-column: span 3; }

    .lm-donut-card { grid-column: span 4; }

    .lm-sessions { grid-column: span 5; }

    .lm-trend { grid-column: span 7; }

}



.lm-card {

    background: #ffffff;

    border: 0;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

    border-radius: 20px;

    padding: 1.1rem 1.15rem;

}



.lm-card h2 {

    margin: 0 0 0.75rem;

    font-size: 1rem;

    font-weight: 700;

    color: #111827;

}



.lm-card-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 0.85rem;

}



.lm-card-head h2 {

    margin: 0;

}



.lm-card-head p {

    margin: 0.2rem 0 0;

    font-size: 0.8rem;

    color: #6b7280;

}



.lm-profile-head {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.85rem;

}



.lm-profile-id {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.lm-profile-id img,

.lm-avatar {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    object-fit: cover;

}



.lm-avatar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(145deg, var(--ines-green), var(--ines-green-dark));

    color: #ffffff;

    font-weight: 800;

    font-size: 1.2rem;

}



.lm-profile-id strong {

    display: block;

    color: #111827;

    font-size: 1rem;

}



.lm-profile-id span {

    color: #6b7280;

    font-size: 0.78rem;

}



.lm-profile-actions {

    display: flex;

    align-items: center;

    gap: 0.65rem;

}



.lm-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-bottom: 1rem;

}



.lm-tag {

    display: inline-flex;

    padding: 0.28rem 0.7rem;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 700;

    background: #f3f4f6;

    color: #4b5563;

}



.lm-tag.is-green {

    background: rgba(19, 182, 82, 0.18);

    color: var(--ines-green-dark);

}



.lm-tag.is-accent {

    background: #fff7e0;

    color: #92400e;

}



.lm-skill-bars {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.7rem;

}



.lm-skill-meta {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.3rem;

    font-size: 0.8rem;

    color: #4b5563;

}



.lm-skill-meta em {

    font-style: normal;

    color: #111827;

    font-weight: 700;

}



.lm-skill-track {

    height: 7px;

    background: #e5e7eb;

    border-radius: 999px;

    overflow: hidden;

}



.lm-skill-track > span {

    display: block;

    height: 100%;

    border-radius: inherit;

}



.lm-tone-1 > span { background: #38bdf8; }

.lm-tone-2 > span { background: var(--ines-green); }

.lm-tone-3 > span { background: #a78bfa; }

.lm-tone-4 > span { background: #f59e0b; }



.lm-kpis {

    display: grid;

    gap: 0.85rem;

}



.lm-kpi p {

    margin: 0.55rem 0 0.25rem;

    font-size: 0.8rem;

    color: #6b7280;

}



.lm-kpi strong {

    display: block;

    font-size: 1.55rem;

    font-weight: 800;

    color: #111827;

    line-height: 1.1;

}



.lm-kpi em {

    display: inline-flex;

    align-items: center;

    gap: 0.2rem;

    margin-top: 0.35rem;

    font-style: normal;

    font-size: 0.75rem;

    font-weight: 700;

}



.lm-kpi em.is-up { color: var(--ines-green-dark); }

.lm-kpi em.is-down { color: #f87171; }



.lm-kpi-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}



.lm-kpi-icon.is-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }

.lm-kpi-icon.is-pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }

.lm-kpi-icon.is-green { background: rgba(19, 182, 82, 0.15); color: var(--ines-green); }



.lm-gauge-wrap,

.lm-donut-wrap {

    position: relative;

    height: 150px;

    max-width: 220px;

    margin: 0 auto;

}



.lm-gauge-center,

.lm-donut-center {

    position: absolute;

    left: 50%;

    top: 58%;

    transform: translate(-50%, -50%);

    text-align: center;

}



.lm-donut-center {

    top: 50%;

}



.lm-gauge-center strong,

.lm-donut-center strong {

    display: block;

    font-size: 1.5rem;

    font-weight: 800;

    color: #111827;

}



.lm-gauge-center span,

.lm-donut-center span {

    font-size: 0.72rem;

    color: #6b7280;

}



.lm-gauge-copy {

    margin: 0.5rem 0 0.65rem;

    text-align: center;

    font-size: 0.8rem;

    color: #6b7280;

}



.lm-gauge-meta {

    display: flex;

    justify-content: space-between;

    gap: 0.5rem;

    font-size: 0.75rem;

    color: #6b7280;

}



.lm-activity-row {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 0.75rem;

}



.lm-activity-item {

    background: #ffffff;

    border: 0; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

    border-radius: 12px;

    padding: 0.75rem;

}



.lm-activity-thumb {

    position: relative;

    height: 72px;

    border-radius: 10px;

    background: linear-gradient(135deg, #1f2937, #0f5230);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #111827;

    font-size: 1.4rem;

    margin-bottom: 0.55rem;

}



.lm-badge {

    display: inline-flex;

    padding: 0.15rem 0.5rem;

    border-radius: 999px;

    font-size: 0.65rem;

    font-weight: 700;

}



.lm-activity-thumb .lm-badge {

    position: absolute;

    top: 0.45rem;

    left: 0.45rem;

}



.lm-badge.is-live,

.lm-badge.is-soon {

    background: rgba(19, 182, 82, 0.2);

    color: var(--ines-green-dark);

}



.lm-badge.is-load {

    background: rgba(167, 139, 250, 0.2);

    color: #c4b5fd;

}



.lm-activity-item strong {

    display: block;

    color: #111827;

    font-size: 0.85rem;

    margin-bottom: 0.2rem;

}



.lm-activity-item p,

.lm-activity-item small {

    margin: 0;

    color: #6b7280;

    font-size: 0.75rem;

}



.lm-ai-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0.5rem;

    margin-bottom: 0.75rem;

}



.lm-ai-stats span {

    display: block;

    font-size: 0.72rem;

    color: #6b7280;

}



.lm-ai-stats strong {

    display: block;

    font-size: 1.25rem;

    color: #111827;

    margin-top: 0.15rem;

}



.lm-ai-stats strong.is-warn { color: #f87171; }

.lm-ai-stats strong.is-ok { color: var(--ines-green-dark); }



.lm-ai-note {

    margin: 0 0 0.85rem;

    font-size: 0.8rem;

    color: #6b7280;

}



.lm-chart-wrap {

    height: 180px;

    position: relative;

}



.lm-chart-lg {

    height: 220px;

}



.lm-chart-footer {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.5rem;

    margin-top: 0.85rem;

    padding-top: 0.85rem;

    border-top: 1px solid #2a2a2a;

}



.lm-chart-footer span {

    display: block;

    font-size: 0.7rem;

    color: #6b7280;

}



.lm-chart-footer strong {

    color: #111827;

    font-size: 0.95rem;

}



.lm-stack-bar {

    display: flex;

    height: 14px;

    border-radius: 999px;

    overflow: hidden;

    background: #e5e7eb;

    margin: 0.5rem 0 0.85rem;

}



.lm-stack-bar > span { display: block; height: 100%; }

.lm-stack-bar .t1,

.lm-mix-legend .t1 { background: #38bdf8; }

.lm-stack-bar .t2,

.lm-mix-legend .t2 { background: var(--ines-green); }

.lm-stack-bar .t3,

.lm-mix-legend .t3 { background: #f59e0b; }

.lm-stack-bar .t4,

.lm-mix-legend .t4 { background: #a78bfa; }



.lm-mix-legend {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.45rem;

    font-size: 0.8rem;

    color: #4b5563;

}



.lm-mix-legend i {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

    margin-right: 0.4rem;

}



.lm-donut-legend {

    display: flex;

    justify-content: space-between;

    gap: 0.5rem;

    margin-top: 0.75rem;

    font-size: 0.78rem;

    color: #6b7280;

}



.lm-donut-legend i {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

    margin-right: 0.35rem;

}



.lm-donut-legend .on { background: #f59e0b; }

.lm-donut-legend .gap { background: #e5e7eb; border: 1px solid #475569; }



.lm-session-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.75rem;

}



.lm-session-list li {

    display: grid;

    grid-template-columns: 48px minmax(0, 1fr) auto auto;

    gap: 0.65rem;

    align-items: center;

}



.lm-session-list time {

    color: #6b7280;

    font-size: 0.78rem;

    font-weight: 650;

}



.lm-session-list strong {

    display: block;

    color: #111827;

    font-size: 0.85rem;

}



.lm-session-list span {

    color: #6b7280;

    font-size: 0.75rem;

}



.lm-session-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.3rem;

}



.lm-session-list small {

    color: #9ca3af;

    font-size: 0.72rem;

}



.lm-empty {

    color: #6b7280;

    font-size: 0.85rem;

    margin: 0;

}



/* ---- Lecturer teaching hub extras (kpi / grids) ---- */

.lm-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.lm-kpi-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .lm-kpi-row-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lm-kpi-simple {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: inherit;
}

.lm-kpi-simple p {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.lm-kpi-simple strong {
    font-size: 1.45rem;
    font-weight: 750;
    color: #111827;
    line-height: 1.15;
}

.lm-kpi-simple strong.is-warn {
    color: #c2410c;
}

.lm-kpi-simple em {
    font-style: normal;
    font-size: 0.78rem;
    color: #6b7280;
}

a.lm-kpi-simple:hover strong {
    color: var(--ines-green-dark);
}

.lm-teach-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.lm-teach-grid-primary {
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .lm-teach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lm-teach-grid-primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lm-recent-courses,
.lm-ai-suggestions,
.lm-simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.lm-recent-courses li,
.lm-ai-suggestions li,
.lm-simple-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #eef2f0;
}

.lm-recent-courses li:last-child,
.lm-ai-suggestions li:last-child,
.lm-simple-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lm-recent-courses li:first-child,
.lm-ai-suggestions li:first-child,
.lm-simple-list li:first-child {
    padding-top: 0;
}

.lm-recent-courses a,
.lm-ai-suggestions a,
.lm-simple-list a {
    color: #111827;
    font-weight: 650;
    text-decoration: none;
    min-width: 0;
}

.lm-recent-courses a:hover,
.lm-ai-suggestions a:hover,
.lm-simple-list a:hover {
    color: var(--ines-green);
}

.lm-teach-next {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0;
}

.lm-teach-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ines-green);
}

.lm-more-panel {
    padding: 0;
    overflow: hidden;
}

.lm-more-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.15rem;
    font-weight: 700;
    color: #111827;
}

.lm-more-panel > summary::-webkit-details-marker {
    display: none;
}

.lm-more-panel > summary::after {
    content: '▾';
    float: right;
    color: #9ca3af;
}

.lm-more-panel[open] > summary::after {
    content: '▴';
}

.lm-more-body {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid #eef2f0;
}

.lm-dept-alert {
    border-radius: 14px;
    margin-bottom: 1.25rem;
}

.lm-dept-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--ines-gray-200, #e5e7eb);
    border-radius: 16px;
}

.lm-dept-banner-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lm-dept-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ines-green);
}

.lm-dept-banner-main strong {
    font-size: 1.05rem;
    color: #111827;
}

.lm-dept-banner-main span {
    font-size: 0.85rem;
    color: #6b7280;
}

.lm-dept-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
}

.lm-dept-stats li {
    display: flex;
    flex-direction: column;
    min-width: 4.5rem;
}

.lm-dept-stats strong {
    font-size: 1.15rem;
    font-weight: 750;
    color: #111827;
    line-height: 1.2;
}

.lm-dept-stats span {
    font-size: 0.72rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.lm-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .lm-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lm-quick-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ines-gray-200, #e5e7eb);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    background: #f8faf9;
    min-height: 88px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lm-quick-card i {
    font-size: 1.15rem;
    color: var(--ines-green-dark, #0f7a3a);
    margin-bottom: 0.15rem;
}

.lm-quick-card strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
}

.lm-quick-card span {
    font-size: 0.78rem;
    color: #6b7280;
}

.lm-quick-card:hover {
    border-color: var(--ines-green, #13b652);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
    color: inherit;
}

.lm-teach-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lm-teach-next h2 {
    font-size: 1.15rem;
    margin: 0.15rem 0;
}

.lm-teach-next p {
    margin: 0;
    color: #6b7280;
}

/* ---- Admin / dept hub priority grids ---- */

.da-hub .app-page-title h1 {
    margin-bottom: 0.35rem;
}

.da-priority-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .da-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .da-priority-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.da-priority-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.da-priority-card:hover {
    box-shadow: 0 14px 34px rgba(15, 82, 48, 0.12);
    transform: translateY(-1px);
    color: inherit;
}

.da-priority-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: rgba(19, 182, 82, 0.12);
    color: var(--ines-green-dark);
    font-size: 1.15rem;
}

.da-priority-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.da-priority-body strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.da-priority-body span {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.35;
}

.da-priority-arrow {
    color: #9ca3af;
    font-size: 1rem;
}

.da-priority-card:hover .da-priority-arrow {
    color: var(--ines-green);
}

.da-secondary h2,
.da-priority h2 {
    color: #111827;
}

.da-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

@media (min-width: 768px) {
    .da-link-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.da-link-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    font-size: 0.9rem;
}

.da-link-list a:hover {
    color: var(--ines-green-dark);
}

[data-theme="dark"] .da-priority-card,
[data-theme="dark"] .da-link-list a,
[data-bs-theme="dark"] .da-priority-card,
[data-bs-theme="dark"] .da-link-list a {
    background: #1e293b;
    box-shadow: none;
}

[data-theme="dark"] .da-priority-body strong,
[data-theme="dark"] .lm-kpi-simple strong,
[data-bs-theme="dark"] .da-priority-body strong,
[data-bs-theme="dark"] .lm-kpi-simple strong {
    color: #f8fafc;
}

[data-theme="dark"] .lm-recent-courses li,
[data-theme="dark"] .lm-ai-suggestions li,
[data-theme="dark"] .lm-simple-list li,
[data-bs-theme="dark"] .lm-recent-courses li,
[data-bs-theme="dark"] .lm-ai-suggestions li,
[data-bs-theme="dark"] .lm-simple-list li {
    border-bottom-color: #334155;
}

[data-theme="dark"] .lm-more-body,
[data-bs-theme="dark"] .lm-more-body {
    border-top-color: #334155;
}



@media (max-width: 991.98px) {

    .lm-session-list li {

        grid-template-columns: 48px minmax(0, 1fr);

    }



    .lm-session-tags,

    .lm-session-list small {

        grid-column: 2;

    }



    .lm-chart-footer {

        grid-template-columns: repeat(2, 1fr);

    }

}



.lecturer-monitor-page .app-topbar {

    background: #ffffff;

    border-bottom-color: #e5e7eb;

}



.lecturer-monitor-page .app-topbar-title,

.lecturer-monitor-page .app-topbar-brand-text,

.lecturer-monitor-page .app-topbar-user-meta strong {

    color: #111827;

}



.lecturer-monitor-page .app-topbar-eyebrow {

    color: var(--ines-green);

}



/* ---- Lecturer courses (overview + catalog + table) ---- */

.lc-page .app-content {

    background: #f4f5f7;

}



.lc-shell {

    max-width: 1280px;

    margin: 0 auto;

    font-family: var(--font-sans);

    color: var(--ines-gray-800);

}



.lc-topbar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.85rem;

    margin-bottom: 1.5rem;

}



.lc-search {

    position: relative;

    flex: 1 1 260px;

    max-width: 520px;

}



.lc-search i {

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;

    font-size: 0.95rem;

    pointer-events: none;

}



.lc-search input {

    width: 100%;

    border: 0;

    background: #ffffff;

    color: var(--ines-gray-800);

    border-radius: 999px;

    padding: 0.75rem 1rem 0.75rem 2.6rem;

    font-size: 0.9rem;

    font-family: var(--font-sans);

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);

    outline: none;

}



.lc-search input::placeholder {

    color: #9ca3af;

}



.lc-search input:focus {

    box-shadow: 0 0 0 2px var(--ines-green);

}



.lc-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    border: 0;

    border-radius: 999px;

    padding: 0.7rem 1.15rem;

    font-size: 0.875rem;

    font-weight: 650;

    font-family: var(--font-sans);

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

}



.lc-btn-primary {

    background: var(--ines-yellow);

    color: #1a2e24;

}



.lc-btn-primary:hover {

    background: var(--ines-yellow-light);

    color: #1a2e24;

}



.lc-section {

    margin-bottom: 1.75rem;

}



.lc-section-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1rem;

}



.lc-section-head h1,

.lc-section-head h2 {

    margin: 0;

    font-size: 1.15rem;

    font-weight: 750;

    color: #111827;

    letter-spacing: -0.02em;

}



.lc-section-link {

    font-size: 0.85rem;

    font-weight: 650;

    color: var(--ines-green);

    text-decoration: none;

}



.lc-section-link:hover {

    color: var(--ines-green-dark);

}



.lc-section-tools {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.lc-view-toggle {

    display: inline-flex;

    align-items: center;

    padding: 0.2rem;

    border-radius: 999px;

    background: #eef2f0;

    border: 1px solid #e2e8e4;

    gap: 0.15rem;

}



.lc-view-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    border: 0;

    background: transparent;

    color: #6b7280;

    border-radius: 999px;

    padding: 0.4rem 0.75rem;

    font-size: 0.78rem;

    font-weight: 700;

    font-family: var(--font-sans);

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;

}



.lc-view-btn.is-active {

    background: #fff;

    color: var(--ines-green-dark);

    box-shadow: 0 2px 8px rgba(15, 82, 48, 0.08);

}



.lc-view-btn:hover:not(.is-active) {

    color: #111827;

}



.lc-pcard-code {

    margin: 0;

    font-size: 0.72rem;

    font-weight: 700;

    color: #9ca3af;

    letter-spacing: 0.02em;

}



.lc-pcard-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
}

.lc-pcard-icons form {
    margin: 0;
    display: inline-flex;
}

.lc-pcard-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid #cfd8d3;
    border-radius: 6px;
    background: #fff;
    color: #1a2e24;
    text-decoration: none;
    font-size: 0.92rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.lc-pcard-icon.is-modules {
    color: #0f5230;
    background: #e8f7ee;
    border-color: #b7e2c6;
}
.lc-pcard-icon.is-publish {
    color: #0b6b3a;
    background: #d9f5e4;
    border-color: #8ed9ad;
}
.lc-pcard-icon.is-unpublish {
    color: #9a6b00;
    background: #fff4d6;
    border-color: #f0d48a;
}
.lc-pcard-icon.is-view {
    color: #1d4ed8;
    background: #e8f0ff;
    border-color: #bfd0f7;
}
.lc-pcard-icon.is-edit {
    color: #5b21b6;
    background: #f3e8ff;
    border-color: #d8b4fe;
}
.lc-pcard-icon.is-ai {
    color: #b45309;
    background: #fff7e6;
    border-color: #f5d08a;
}
.lc-pcard-icon.is-cpr {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #f5b5b5;
}

.lc-pcard-icon:hover {
    filter: brightness(0.96);
}



.lc-get-secondary {

    width: 2.4rem;

    height: 2.4rem;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 999px;

    background: #eef4f0;

    color: var(--ines-green-dark);

    text-decoration: none;

}



.lc-get-secondary:hover {

    background: #e0efe6;

    color: var(--ines-green-dark);

}



.lc-overview {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.85rem;

}



@media (min-width: 700px) {

    .lc-overview {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1100px) {

    .lc-overview {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



.lc-ov-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 1.15rem 1.2rem 1rem;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

    display: flex;

    flex-direction: column;

    gap: 1.1rem;

    min-height: 140px;

}



.lc-ov-card.is-dark {

    background: #1f2937;

    color: #fff;

}



.lc-ov-top {

    display: flex;

    align-items: flex-start;

    gap: 0.85rem;

}



.lc-ov-badge {

    flex: 0 0 auto;

    width: 2.6rem;

    height: 2.6rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: #fff7e0;

    color: #92400e;

    font-size: 0.95rem;

    font-weight: 800;

}



.lc-ov-card.is-dark .lc-ov-badge {

    background: #374151;

    color: #fff;

}



.lc-ov-top h2 {

    margin: 0 0 0.2rem;

    font-size: 0.98rem;

    font-weight: 750;

    color: #111827;

}



.lc-ov-card.is-dark .lc-ov-top h2 {

    color: #fff;

}



.lc-ov-top p {

    margin: 0;

    font-size: 0.78rem;

    color: #6b7280;

    line-height: 1.35;

}



.lc-ov-card.is-dark .lc-ov-top p {

    color: #9ca3af;

}



.lc-ov-link {

    margin-top: auto;

    align-self: flex-end;

    font-size: 0.78rem;

    font-weight: 650;

    color: #9ca3af;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 0.2rem;

}



.lc-ov-link:hover {

    color: var(--ines-green);

}



.lc-ov-card.is-dark .lc-ov-link {

    color: #d1d5db;

}



.lc-ov-card.is-dark .lc-ov-link:hover {

    color: var(--ines-yellow);

}



.lc-popular {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.9rem;

}



@media (min-width: 640px) {

    .lc-popular {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1000px) {

    .lc-popular {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



.lc-pcard {
    position: relative;
    background: #ffffff;
    border: 1px solid #c9e6d4;
    border-radius: 8px;
    padding: 1rem 1.05rem;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 220px;
}

.lc-pcard.tone-a { border-color: #c9e6d4; }
.lc-pcard.tone-b { border-color: #cdd8f4; }
.lc-pcard.tone-c { border-color: #eee6b8; }
.lc-pcard.tone-d { border-color: #f3d3c0; }

.lc-icon-actions.lc-pcard-icons {
    flex-wrap: wrap;
    gap: 0.35rem;
}

.lc-pcard-tags {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

}



.lc-tag {

    display: inline-flex;

    align-items: center;

    padding: 0.22rem 0.55rem;

    border-radius: 999px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 0.68rem;

    font-weight: 700;

}



.lc-bookmark {

    width: 1.6rem;

    height: 1.6rem;

    display: grid;

    place-items: center;

    color: #9ca3af;

    font-size: 0.9rem;

}



.lc-pcard h3 {

    margin: 0;

    font-size: 1rem;

    font-weight: 750;

    color: #111827;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.lc-pcard-desc {

    margin: 0;

    font-size: 0.78rem;

    color: #6b7280;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    flex: 1;

}



.lc-pcard-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

}



.lc-rating {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    font-size: 0.8rem;

    font-weight: 700;

    color: #111827;

}



.lc-rating i {

    color: var(--ines-yellow);

    font-size: 0.75rem;

}



.lc-price {

    font-size: 0.9rem;

    font-weight: 800;

    color: #111827;

}



.lc-get {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.25rem;

    margin-top: 0.25rem;

    width: 100%;

    border: 0;

    border-radius: 999px;

    padding: 0.65rem 0.9rem;

    background: var(--ines-yellow);

    color: #1a2e24;

    font-size: 0.82rem;

    font-weight: 750;

    font-family: var(--font-sans);

    text-decoration: none;

    cursor: pointer;

}



.lc-get:hover {

    background: var(--ines-yellow-light);

    color: #1a2e24;

}



.lc-get.is-muted {

    background: #e5e7eb;

    color: #6b7280;

    cursor: default;

}



.lc-table-wrap {

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

    overflow: auto;

}



.lc-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 860px;

}



.lc-table th {

    text-align: left;

    padding: 0.95rem 1rem;

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: #9ca3af;

    border-bottom: 1px solid #f1f5f9;

    white-space: nowrap;

}



.lc-table td {

    padding: 0.95rem 1rem;

    font-size: 0.85rem;

    color: #374151;

    border-bottom: 1px solid #f8fafc;

    vertical-align: middle;

}



.lc-table tr:last-child td {

    border-bottom: 0;

}



.lc-course-cell {

    display: flex;

    align-items: center;

    gap: 0.7rem;

    min-width: 200px;

}



.lc-thumb {

    width: 2.4rem;

    height: 2.4rem;

    border-radius: 10px;

    object-fit: cover;

    flex: 0 0 auto;

    background: #eef6f1;

}



.lc-thumb-fallback {

    display: grid;

    place-items: center;

    font-size: 0.7rem;

    font-weight: 800;

    color: var(--ines-green-dark);

    text-transform: uppercase;

}



.lc-course-cell strong {

    display: block;

    font-size: 0.88rem;

    font-weight: 700;

    color: #111827;

    line-height: 1.25;

}



.lc-course-cell small {

    display: block;

    margin-top: 0.15rem;

    font-size: 0.72rem;

    color: #9ca3af;

}



.lc-progress {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    min-width: 110px;

}



.lc-progress-track {

    position: relative;

    flex: 1;

    height: 6px;

    border-radius: 999px;

    background: #e5e7eb;

}



.lc-progress-fill {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    border-radius: 999px;

    background: var(--ines-yellow);

    max-width: 100%;

}



.lc-progress-knob {

    position: absolute;

    top: 50%;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #fff;

    border: 3px solid var(--ines-yellow);

    transform: translate(-50%, -50%);

}



.lc-progress em {

    font-style: normal;

    font-size: 0.78rem;

    font-weight: 700;

    color: #6b7280;

}



.lc-dot {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-size: 0.8rem;

    font-weight: 650;

    color: #374151;

    white-space: nowrap;

}



.lc-dot::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #9ca3af;

}



.lc-dot.status-published::before { background: var(--ines-green); }

.lc-dot.status-pending_approval::before { background: #f59e0b; }

.lc-dot.status-draft::before { background: #3b82f6; }

.lc-dot.status-rejected::before { background: #ef4444; }

.lc-dot.status-archived::before { background: #9ca3af; }



.lc-icon-actions {

    display: flex;

    align-items: center;

    gap: 0.35rem;

}



.lc-icon-actions form {

    display: inline;

    margin: 0;

}



.lc-ia {

    width: 1.85rem;

    height: 1.85rem;

    border-radius: 999px;

    display: inline-grid;

    place-items: center;

    border: 0;

    font-size: 0.75rem;

    text-decoration: none;

    cursor: pointer;

    padding: 0;

    line-height: 1;

}



.lc-ia.go {

    background: #dcfce7;

    color: var(--ines-green-dark);

}



.lc-ia.view {

    background: #dbeafe;

    color: #1d4ed8;

}



.lc-ia.del {

    background: #fee2e2;

    color: #b91c1c;

}



.lc-empty {

    text-align: center;

    padding: 3rem 1.5rem;

    border-radius: 20px;

    background: #ffffff;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.lc-empty i {

    font-size: 2rem;

    color: #9ca3af;

    margin-bottom: 0.75rem;

    display: block;

}



.lc-empty h2 {

    margin: 0 0 0.4rem;

    color: #111827;

    font-size: 1.15rem;

    font-weight: 750;

}



.lc-empty p {

    margin: 0 auto 1.15rem;

    max-width: 28rem;

    color: #6b7280;

    font-size: 0.9rem;

}



.lc-btn-ghost {

    background: #ffffff;

    color: #1a2e24;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);

}



.lc-btn-ghost:hover {

    color: var(--ines-green-dark);

}



.lc-btn-danger {

    background: #fee2e2;

    color: #b91c1c;

}



.lc-btn-danger:hover {

    background: #fecaca;

    color: #991b1b;

}



.lc-form-lead {

    margin: -0.35rem 0 1.15rem;

    max-width: 42rem;

    color: #6b7280;

    font-size: 0.9rem;

    line-height: 1.45;

}



.lc-form-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 1.35rem 1.35rem 1.25rem;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.lc-form-card .form-control,

.lc-form-card .form-select,

.lc-form-card .auth-input {

    min-height: 48px;

    border-radius: 12px;

    border: 1.5px solid #e5e7eb;

    background: #fff;

}



.lc-form-card .form-control:focus,

.lc-form-card .form-select:focus,

.lc-form-card .auth-input:focus {

    border-color: var(--ines-green);

    box-shadow: 0 0 0 2px rgba(19, 182, 82, 0.15);

}



.lc-form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

    margin-top: 1.35rem;

}



.lc-confirm {

    max-width: 520px;

    margin: 1rem auto 0;

    background: #ffffff;

    border-radius: 20px;

    padding: 2rem 1.5rem;

    text-align: center;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.lc-confirm-icon {

    width: 3.2rem;

    height: 3.2rem;

    border-radius: 999px;

    display: inline-grid;

    place-items: center;

    margin-bottom: 0.85rem;

    background: #fff7e0;

    color: #92400e;

    font-size: 1.25rem;

}



.lc-confirm-icon.is-danger {

    background: #fee2e2;

    color: #b91c1c;

}



.lc-confirm h1 {

    margin: 0 0 0.45rem;

    font-size: 1.15rem;

    font-weight: 750;

    color: #111827;

}



.lc-confirm p {

    margin: 0 0 1.25rem;

    color: #6b7280;

    font-size: 0.9rem;

}



.lc-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-bottom: 0.25rem;

}



.lc-chips-scroll {

    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 0.25rem;

}



.lc-chip {

    display: inline-flex;

    align-items: center;

    padding: 0.45rem 0.9rem;

    border-radius: 999px;

    background: #ffffff;

    color: #374151;

    text-decoration: none;

    font-size: 0.8rem;

    font-weight: 650;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);

    white-space: nowrap;

}



.lc-chip.is-active,

.lc-chip:hover {

    background: var(--ines-yellow);

    color: #1a2e24;

}



.lc-chip.is-static {

    pointer-events: none;

    background: #f3f4f6;

    box-shadow: none;

    color: #6b7280;

}



.lc-hint {

    background: #ffffff;

    border-radius: 20px;

    padding: 1.25rem 1.2rem;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.lc-hint h2 {

    margin: 0 0 0.75rem;

    font-size: 1rem;

    font-weight: 750;

    color: #111827;

}



.lc-hint ol {

    margin: 0 0 0.85rem;

    padding-left: 1.1rem;

    color: #4b5563;

    font-size: 0.85rem;

}



.lc-hint li + li {

    margin-top: 0.35rem;

}



.lc-hint p {

    margin: 0;

    font-size: 0.82rem;

    color: #6b7280;

}



.lc-pcard-link {

    text-decoration: none;

    color: inherit;

}



.lc-pcard-link:hover {

    color: inherit;

}



.lc-pcard-mini-actions {

    display: flex;

    gap: 0.45rem;

    margin-top: 0.35rem;

}



.lc-pcard-mini-actions a {

    width: 1.85rem;

    height: 1.85rem;

    border-radius: 999px;

    display: inline-grid;

    place-items: center;

    background: #eff6ff;

    color: #1d4ed8;

    font-size: 0.75rem;

    text-decoration: none;

}



.lc-pcard-mini-actions a.is-danger {

    background: #fee2e2;

    color: #b91c1c;

}



/* ---- Advanced course module studio ---- */

body.app-shell.lm-modules-page {

    overflow: hidden;

    height: 100vh;

    height: 100dvh;

}

.lm-modules-page .app-main {

    height: 100vh;

    height: 100dvh;

    max-height: 100vh;

    max-height: 100dvh;

    overflow: hidden;

    min-height: 0;

}

.lm-modules-page .app-content {

    background:

        radial-gradient(circle at top left, rgba(19, 182, 82, 0.06), transparent 28%),

        #f3f5f4;

    padding: 0 !important;

    margin: 0 !important;

    flex: 1 1 auto;

    min-height: 0;

    height: auto !important;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.lm-modules-page .mx-page-shell.container-fluid,

.lm-modules-page .app-content > .container-fluid.lecturer-dash.mx-page-shell,

.lm-modules-page .app-content .container-fluid.lecturer-dash.mx-page-shell {

    max-width: none !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.lm-modules-page .lc-shell.mx-page-shell {

    max-width: none;

    margin: 0;

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.app-shell.lm-modules-page .lecturer-dash {

    padding-top: 0 !important;

}



.lm-modules-page .mx-studio {

    max-width: none;

    margin: 0;

    padding: 0;

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.lm-modules-page .mx-toolbar {

    margin: 0;

    padding: 0.85rem 1rem;

    border-bottom: 1px solid #e5ebe7;

    background: #fff;

    flex-shrink: 0;

}



.lm-modules-page .mx-layout {

    gap: 0;

    margin: 0;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    align-items: stretch;

    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);

}

.lm-modules-page .mx-rail {

    overflow: hidden;

    min-height: 0;

    height: 100%;

    overscroll-behavior: none;

}

.lm-modules-page .mx-rail-card {

    position: static;

    border-radius: 0;

    border: 0;

    border-right: 1px solid #e5ebe7;

    box-shadow: none;

    height: 100%;

    max-height: 100%;

    min-height: 0;

    overflow: hidden;

    overscroll-behavior: none;

}

.lm-modules-page .mx-main {

    padding: 1rem;

    margin: 0;

    overflow-y: auto;

    overflow-x: hidden;

    min-height: 0;

    height: 100%;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

}

.lm-modules-page .mx-main-head {

    position: sticky;

    top: 0;

    z-index: 2;

    background: #f3f5f4;

    padding-bottom: 0.75rem;

    margin-bottom: 0.25rem;

}

@media (max-width: 991.98px) {

    body.app-shell.lm-modules-page {

        overflow: auto;

        height: auto;

    }

    .lm-modules-page .app-main {

        height: auto;

        max-height: none;

        overflow: visible;

    }

    .lm-modules-page .app-content {

        height: auto;

        overflow: visible;

    }

    .lm-modules-page .lc-shell.mx-page-shell,

    .lm-modules-page .mx-studio {

        overflow: visible;

        min-height: auto;

    }

    .lm-modules-page .mx-layout {

        overflow: visible;

        min-height: auto;

    }

    .lm-modules-page .mx-rail,

    .lm-modules-page .mx-rail-card {

        height: auto;

        max-height: none;

        overflow: visible;

    }

    .lm-modules-page .mx-main {

        overflow-y: visible;

        height: auto;

    }

}



.lm-modules-page .mx-table-wrap {

    border-radius: 0;

    box-shadow: none;

    border-left: 0;

    border-right: 0;

}



.mx-studio {

    max-width: 1280px;

    margin: 0 auto;

}



.mx-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 1.15rem;

}



.mx-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    flex-wrap: wrap;

    font-size: 0.82rem;

    color: #6b7280;

}



.mx-breadcrumb a {

    color: var(--ines-green-dark);

    text-decoration: none;

    font-weight: 700;

}



.mx-breadcrumb i {

    font-size: 0.7rem;

    opacity: 0.55;

}



.mx-breadcrumb strong {

    color: #111827;

}



.mx-toolbar-actions {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    flex-wrap: wrap;

}



.mx-view-toggle {

    display: inline-flex;

    padding: 0.18rem;

    border-radius: 0.75rem;

    background: #fff;

    border: 1px solid #e2e8e4;

    gap: 0.15rem;

}



.mx-view-btn {

    width: 2.1rem;

    height: 2.1rem;

    border: 0;

    border-radius: 0.6rem;

    background: transparent;

    color: #6b7280;

    display: grid;

    place-items: center;

    cursor: pointer;

}



.mx-view-btn.is-active {

    background: #eef6f1;

    color: var(--ines-green-dark);

}



.mx-table-wrap {

    overflow-x: auto;

    border-radius: 1.1rem;

    background: #fff;

    border: 1px solid #e5ebe7;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);

}



.mx-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 760px;

}



.mx-table th {

    text-align: left;

    padding: 0.85rem 1rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: #6b7280;

    background: #f7faf8;

    border-bottom: 1px solid #e5ebe7;

    white-space: nowrap;

}



.mx-table td {

    padding: 0.95rem 1rem;

    border-bottom: 1px solid #eef2f0;

    vertical-align: middle;

    font-size: 0.9rem;

    color: #374151;

}



.mx-table tbody tr:last-child td {

    border-bottom: 0;

}



.mx-table tbody tr:hover td {

    background: #f9fcfa;

}



.mx-col-num {

    width: 4rem;

}



.mx-num {

    display: inline-grid;

    place-items: center;

    min-width: 2.1rem;

    height: 2.1rem;

    padding: 0 0.35rem;

    border-radius: 999px;

    background: #0f5230;

    color: #fff;

    font-size: 0.75rem;

    font-weight: 800;

}



.mx-mod-cell {

    display: grid;

    gap: 0.2rem;

    min-width: 180px;

}



.mx-mod-cell strong {

    color: #111827;

    font-weight: 750;

}



.mx-mod-cell small {

    color: #6b7280;

    font-size: 0.78rem;

    line-height: 1.4;

}



.mx-ready-cell {

    min-width: 110px;

}



.mx-ready-label {

    display: block;

    margin-bottom: 0.35rem;

    font-size: 0.75rem;

    font-weight: 700;

    color: #0f5230;

}



.mx-col-actions {

    width: 1%;

    white-space: nowrap;

}



.mx-col-actions .mx-icon-row {

    justify-content: flex-end;

}



.mx-layout {

    display: grid;

    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);

    gap: 1.15rem;

    align-items: start;

}



@media (max-width: 991.98px) {

    .mx-layout {

        grid-template-columns: 1fr;

    }

}



.mx-rail-card {

    position: sticky;

    top: 1rem;

    border-radius: 1.35rem;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e5ebe7;

    box-shadow: 0 18px 40px rgba(15, 82, 48, 0.08);

}



.mx-rail-media {

    position: relative;

    height: 150px;

    background: linear-gradient(145deg, #0f5230, #13b652);

}



.mx-rail-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.92;

}



.mx-rail-fallback {

    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 2rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    background:

        radial-gradient(circle at 80% 20%, rgba(240, 192, 32, 0.35), transparent 45%),

        linear-gradient(145deg, #0f5230, #13b652);

}



.mx-rail-status {

    position: absolute;

    left: 0.9rem;

    bottom: 0.9rem;

    padding: 0.28rem 0.65rem;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.55);

    color: #fff;

    font-size: 0.7rem;

    font-weight: 700;

    backdrop-filter: blur(6px);

}



.mx-rail-status.status-published { background: rgba(16, 185, 129, 0.85); }

.mx-rail-status.status-pending_approval { background: rgba(201, 146, 0, 0.9); }



.mx-rail-body {

    padding: 1.15rem 1.15rem 0.35rem;

}



.mx-rail-code {

    margin: 0 0 0.35rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--ines-green);

}



.mx-rail-body h1 {

    margin: 0 0 0.5rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.35rem;

    font-weight: 700;

    line-height: 1.25;

    color: #10261a;

}



.mx-rail-desc {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.55;

    color: #5b6b62;

}



.mx-kpi-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.55rem;

    padding: 1rem 1.15rem;

}



.mx-kpi {

    padding: 0.7rem 0.75rem;

    border-radius: 0.9rem;

    background: #f4f8f5;

    border: 1px solid #e7efe9;

}



.mx-kpi em {

    display: block;

    font-style: normal;

    font-size: 1.15rem;

    font-weight: 800;

    color: #0f5230;

    line-height: 1.1;

}



.mx-kpi span {

    font-size: 0.7rem;

    font-weight: 700;

    color: #6b7280;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.mx-readiness {

    padding: 0 1.15rem 1rem;

}



.mx-readiness-head {

    display: flex;

    justify-content: space-between;

    gap: 0.5rem;

    margin-bottom: 0.45rem;

    font-size: 0.78rem;

    font-weight: 700;

    color: #4b5563;

}



.mx-readiness-head strong {

    color: #0f5230;

}



.mx-readiness-track {

    height: 0.45rem;

    border-radius: 999px;

    background: #e8efeA;

    overflow: hidden;

}



.mx-readiness-track span {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(90deg, #0f5230, #13b652 60%, #f0c020);

    transition: width 0.35s ease;

}



.mx-readiness-note {

    margin: 0.55rem 0 0;

    font-size: 0.78rem;

    color: #6b7280;

    line-height: 1.45;

}



.mx-rail-actions {

    padding: 0 1.15rem 1.2rem;

    display: grid;

    gap: 0.55rem;

}



.mx-rail-cta {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    padding: 0.8rem 0.9rem;

    border-radius: 0.95rem;

    background: linear-gradient(135deg, #c99200, #f0c020);

    color: #1a2e24;

    text-decoration: none;

    font-weight: 750;

    font-size: 0.88rem;

}



.mx-rail-cta:hover {

    filter: brightness(1.03);

    color: #1a2e24;

}



.mx-rail-link {

    font-size: 0.82rem;

    font-weight: 700;

    color: var(--ines-green-dark);

    text-decoration: none;

    text-align: center;

}



.mx-main {

    min-width: 0;

}



.mx-main-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 1rem;

}



.mx-main-head h2 {

    margin: 0 0 0.2rem;

    font-size: 1.2rem;

    font-weight: 800;

    color: #111827;

}



.mx-main-head p {

    margin: 0;

    font-size: 0.88rem;

    color: #6b7280;

}



.mx-search {

    display: flex;

    align-items: center;

    gap: 0.45rem;

    min-width: min(280px, 100%);

    padding: 0.55rem 0.85rem;

    border-radius: 0.9rem;

    background: #fff;

    border: 1px solid #e2e8e4;

}



.mx-search i { color: #9ca3af; }



.mx-search input {

    border: 0;

    outline: 0;

    width: 100%;

    background: transparent;

    font-size: 0.9rem;

    color: #111827;

}



.mx-module-board.is-list {

    display: grid;

    gap: 0.9rem;

}



.mx-module-board.is-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 0.9rem;

}



.mx-module-board.is-grid .mx-module {

    grid-template-columns: 1fr;

}



.mx-module-board.is-grid .mx-module-index {

    display: none;

}



.mx-module-board.is-grid .mx-module-top {

    flex-direction: column;

    align-items: stretch;

}



.mx-module-board.is-grid .mx-module-cta {

    width: 100%;

}



.mx-module {

    display: grid;

    grid-template-columns: 2.4rem minmax(0, 1fr);

    gap: 0.75rem;

    animation: mxIn 0.35s ease both;

}



@keyframes mxIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: none; }

}



.mx-module-index {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 1.15rem;

}



.mx-module-index span {

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: #0f5230;

    color: #fff;

    font-size: 0.72rem;

    font-weight: 800;

    z-index: 1;

}



.mx-module-rail {

    flex: 1;

    width: 2px;

    margin-top: 0.35rem;

    background: linear-gradient(#0f5230, rgba(15, 82, 48, 0.08));

    border-radius: 999px;

    min-height: 2rem;

}



.mx-module-panel {

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1.2rem;

    padding: 1.1rem 1.15rem 1rem;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.mx-module:hover .mx-module-panel {

    border-color: #cfe3d6;

    box-shadow: 0 16px 34px rgba(15, 82, 48, 0.08);

}



.mx-module-top {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    align-items: flex-start;

    margin-bottom: 0.95rem;

}



.mx-module-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

    margin-bottom: 0.45rem;

}



.mx-chip {

    display: inline-flex;

    align-items: center;

    padding: 0.2rem 0.55rem;

    border-radius: 999px;

    background: #eef6f1;

    color: #0f5230;

    font-size: 0.68rem;

    font-weight: 750;

}



.mx-chip.is-accent {

    background: #fff4cc;

    color: #8a6a00;

}



.mx-chip.is-soft {

    background: #f3f4f6;

    color: #6b7280;

}



.mx-chip.status-published { background: #dcfce7; color: #166534; }

.mx-chip.status-pending_approval { background: #fef3c7; color: #92400e; }

.mx-chip.status-draft { background: #f3f4f6; color: #4b5563; }



.mx-module-titles h3 {

    margin: 0 0 0.35rem;

    font-size: 1.08rem;

    font-weight: 800;

    color: #111827;

    line-height: 1.3;

}



.mx-module-titles p {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.5;

    color: #5b6b62;

}



.mx-module-titles p.is-muted {

    color: #9ca3af;

    font-style: italic;

}



.mx-module-cta {

    display: grid;

    gap: 0.5rem;

    justify-items: end;

    flex-shrink: 0;

}



.mx-primary {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.65rem 0.95rem;

    border-radius: 0.85rem;

    background: linear-gradient(135deg, #0f5230, #13b652);

    color: #fff;

    text-decoration: none;

    font-size: 0.84rem;

    font-weight: 750;

    white-space: nowrap;

}



.mx-primary:hover {

    filter: brightness(1.05);

    color: #fff;

}



.mx-icon-row {

    display: inline-flex;

    gap: 0.35rem;

}



.mx-icon-row a {

    width: 2rem;

    height: 2rem;

    border-radius: 0.65rem;

    display: grid;

    place-items: center;

    background: #f4f8f5;

    color: #0f5230;

    text-decoration: none;

    font-size: 0.85rem;

}



.mx-icon-row a:hover {

    background: #e5f3ea;

}



.mx-icon-row a.is-danger {

    background: #fee2e2;

    color: #b91c1c;

}



.mx-module-metrics {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.55rem;

    margin-bottom: 0.85rem;

}



@media (min-width: 720px) {

    .mx-module-board.is-list .mx-module-metrics {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



.mx-metric {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    padding: 0.65rem 0.7rem;

    border-radius: 0.85rem;

    background: #f7faf8;

    border: 1px solid #e8efeA;

}



.mx-metric i {

    width: 1.85rem;

    height: 1.85rem;

    border-radius: 0.55rem;

    display: grid;

    place-items: center;

    background: #fff;

    color: var(--ines-green);

    border: 1px solid #e5ebe7;

    font-size: 0.9rem;

}



.mx-metric strong {

    display: block;

    font-size: 0.95rem;

    font-weight: 800;

    color: #111827;

    line-height: 1.1;

}



.mx-metric span {

    font-size: 0.68rem;

    font-weight: 700;

    color: #6b7280;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}



.mx-complete-label {

    display: flex;

    justify-content: space-between;

    gap: 0.5rem;

    margin-bottom: 0.4rem;

    font-size: 0.75rem;

    font-weight: 700;

    color: #6b7280;

}



.mx-complete-label strong {

    color: #0f5230;

}



.mx-complete-bar {

    height: 0.38rem;

    border-radius: 999px;

    background: #eef2f0;

    overflow: hidden;

}



.mx-complete-bar span {

    display: block;

    height: 100%;

    border-radius: inherit;

}



.mx-complete-bar span.is-empty { background: #d1d5db; }

.mx-complete-bar span.is-low { background: #f0c020; }

.mx-complete-bar span.is-mid { background: #13b652; }

.mx-complete-bar span.is-high { background: #0f5230; }



.mx-empty-filter {

    margin: 1rem 0 0;

    text-align: center;

    color: #6b7280;

    font-size: 0.9rem;

}



.mx-empty {

    text-align: center;

    padding: 3rem 1.25rem;

    border-radius: 1.25rem;

    background: #fff;

    border: 1px dashed #d5e3da;

}



.mx-empty-visual {

    width: 72px;

    height: 72px;

    margin: 0 auto 1rem;

    border-radius: 1.1rem;

    display: grid;

    place-items: center;

    background: linear-gradient(145deg, #eef6f1, #fff4cc);

    color: #0f5230;

    font-size: 1.7rem;

}



.mx-empty h3 {

    margin: 0 0 0.4rem;

    font-size: 1.2rem;

    font-weight: 800;

}



.mx-empty p {

    margin: 0 auto 1.1rem;

    max-width: 28rem;

    color: #6b7280;

}



.mx-empty-steps {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.55rem;

    margin-bottom: 1.25rem;

}



.mx-empty-steps span {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.45rem 0.75rem;

    border-radius: 999px;

    background: #f4f8f5;

    font-size: 0.78rem;

    font-weight: 700;

    color: #374151;

}



.mx-empty-steps em {

    width: 1.25rem;

    height: 1.25rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: #0f5230;

    color: #fff;

    font-style: normal;

    font-size: 0.68rem;

}



.mx-picker {

    max-width: 880px;

    margin: 0 auto;

}



.mx-picker-head {

    margin-bottom: 1.35rem;

}



.mx-picker-head .lc-btn {

    margin-bottom: 1rem;

}



.mx-picker-eyebrow {

    margin: 0 0 0.35rem;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--ines-green);

}



.mx-picker-head h1 {

    margin: 0 0 0.45rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.85rem;

    font-weight: 700;

    color: #10261a;

}



.mx-picker-head p {

    margin: 0;

    color: #6b7280;

    max-width: 36rem;

}



.mx-picker-grid {

    display: grid;

    gap: 0.75rem;

}



.mx-picker-card {

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 0.95rem;

    align-items: center;

    padding: 0.95rem 1rem;

    border-radius: 1.1rem;

    background: #fff;

    border: 1px solid #e5ebe7;

    text-decoration: none;

    color: inherit;

    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);

    transition: transform 0.15s ease, border-color 0.15s ease;

}



.mx-picker-card:hover {

    transform: translateY(-2px);

    border-color: #13b652;

    color: inherit;

}



.mx-picker-thumb {

    width: 56px;

    height: 56px;

    border-radius: 0.9rem;

    overflow: hidden;

    display: grid;

    place-items: center;

    background: #eef6f1;

    color: #0f5230;

    font-weight: 800;

}



.mx-picker-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.mx-picker-meta {

    display: grid;

    gap: 0.25rem;

    min-width: 0;

}



.mx-picker-meta strong {

    font-size: 1rem;

    color: #111827;

}



.mx-picker-meta small {

    color: #6b7280;

    font-weight: 650;

}



.mx-picker-go {

    width: 2.2rem;

    height: 2.2rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: #eef6f1;

    color: #0f5230;

}



.lc-topbar-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-left: auto;

}



.lc-crumb {

    margin: 0 0 0.3rem;

    font-size: 0.75rem;

    color: #9ca3af;

}



.lc-side-card {

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

    overflow: hidden;

}



.lc-side-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 1rem 1.15rem;

    border-bottom: 1px solid #f1f5f9;

}



.lc-side-head h3 {

    margin: 0;

    font-size: 0.95rem;

    font-weight: 750;

    color: #111827;

}



.lc-side-head span {

    font-size: 0.78rem;

    color: #9ca3af;

    font-weight: 650;

}



.lc-side-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.lc-side-list li {

    padding: 0.85rem 1.15rem;

    border-bottom: 1px solid #f8fafc;

}



.lc-side-list li:last-child {

    border-bottom: 0;

}



.lc-side-list strong {

    display: block;

    font-size: 0.88rem;

    color: #111827;

}



.lc-side-list span {

    display: block;

    margin-top: 0.2rem;

    font-size: 0.75rem;

    color: #9ca3af;

}



.lc-side-list .empty {

    color: #9ca3af;

    font-size: 0.85rem;

}



.lc-side-list li.is-editing {

    background: #fffbeb;

}



.lc-side-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

}



.lc-side-footer {

    padding: 1rem 1.15rem;

    border-top: 1px solid #f1f5f9;

}



.lc-tip {

    display: flex;

    gap: 0.55rem;

    align-items: flex-start;

    padding: 0.75rem 0.9rem;

    margin: 0 0 1rem;

    border-radius: 14px;

    background: #fff7e0;

    color: #92400e;

    font-size: 0.82rem;

}



.lc-tip i {

    margin-top: 0.1rem;

}



.lc-page .module-builder-title,

.lc-page .module-builder-eyebrow,

.lc-page .module-builder-lead {

    color: inherit;

}



.lc-page .module-builder-eyebrow {

    color: #9ca3af;

    font-size: 0.75rem;

    font-weight: 650;

}



.lc-page .module-builder-title {

    font-size: 1.2rem;

    font-weight: 750;

    color: #111827;

}



.lc-page .module-builder-lead {

    color: #6b7280;

    font-size: 0.9rem;

}



.lc-page .module-builder-progress {

    height: 8px;

    background: #e5e7eb;

    border-radius: 999px;

    overflow: hidden;

    margin: 1rem 0 1.15rem;

}



.lc-page .module-builder-progress-bar {

    height: 100%;

    background: var(--ines-yellow);

    border-radius: inherit;

}



.lc-page .module-builder-steps {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

    list-style: none;

    margin: 0 0 1.25rem;

    padding: 0;

}



.lc-page .module-builder-step {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.4rem 0.75rem;

    border-radius: 999px;

    background: #ffffff;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);

    font-size: 0.78rem;

    font-weight: 650;

    color: #6b7280;

}



.lc-page .module-builder-step.active {

    background: var(--ines-yellow);

    color: #1a2e24;

}



.lc-page .module-builder-step.done {

    background: #dcfce7;

    color: var(--ines-green-dark);

}



.lc-page .module-builder-stat {

    background: #f9fafb;

    border-radius: 14px;

    padding: 0.85rem;

    text-align: center;

}



.lc-page .module-builder-stat strong {

    display: block;

    font-size: 1.25rem;

    color: #111827;

}



.lc-page .module-builder-stat span {

    font-size: 0.75rem;

    color: #9ca3af;

}



/* ---- New module create studio ---- */

.mb-create-page .app-content {

    background: #f3f5f4;

    padding: 0 !important;

    margin: 0 !important;

}



.mb-create-page .mb-create-shell.container-fluid,

.mb-create-page .app-content > .container-fluid.lecturer-dash.mb-create-shell,

.mb-create-page .app-content .container-fluid.lecturer-dash.mb-create-shell {

    max-width: none !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}



.app-shell.mb-create-page .lecturer-dash {

    padding-top: 0 !important;

}



.mb-create-page .lc-shell.mb-create-shell {

    max-width: none;

    margin: 0;

}



.mb-create-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    flex-wrap: wrap;

    padding: 0.85rem 1rem;

    background: #fff;

    border-bottom: 1px solid #e5ebe7;

}



.mb-create-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);

    align-items: stretch;

    min-height: calc(100vh - 7.5rem);

}



@media (max-width: 991.98px) {

    .mb-create-layout {

        grid-template-columns: 1fr;

        min-height: 0;

    }

}



.mb-create-rail-card {

    height: 100%;

    padding: 1.25rem 1.15rem;

    background:

        radial-gradient(circle at top right, rgba(240, 192, 32, 0.16), transparent 42%),

        linear-gradient(160deg, #0f5230 0%, #157a42 55%, #13b652 100%);

    color: #fff;

}



.mb-create-course {

    display: flex;

    gap: 0.85rem;

    align-items: flex-start;

    margin-bottom: 1.15rem;

}



.mb-create-course-thumb {

    width: 56px;

    height: 56px;

    border-radius: 0.9rem;

    overflow: hidden;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.18);

    font-weight: 800;

    letter-spacing: 0.04em;

}



.mb-create-course-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.mb-create-course-thumb.is-empty {

    font-size: 1.25rem;

}



.mb-create-eyebrow {

    margin: 0 0 0.25rem;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.mb-create-rail-card .mb-create-eyebrow {

    color: rgba(240, 192, 32, 0.95);

}



.mb-create-course h2 {

    margin: 0 0 0.25rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.15rem;

    font-weight: 700;

    line-height: 1.25;

    color: #fff;

}



.mb-create-course-meta {

    margin: 0;

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.78);

    font-weight: 650;

}



.mb-create-kpis {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.55rem;

    margin-bottom: 1.15rem;

}



.mb-create-kpis > div {

    padding: 0.75rem 0.8rem;

    border-radius: 0.9rem;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.12);

}



.mb-create-kpis em {

    display: block;

    font-style: normal;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1.1;

}



.mb-create-kpis span {

    font-size: 0.68rem;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.72);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.mb-create-steps {

    list-style: none;

    margin: 0 0 1.15rem;

    padding: 0;

    display: grid;

    gap: 0.45rem;

}



.mb-create-steps li {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.65rem 0.75rem;

    border-radius: 0.85rem;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 0.86rem;

    font-weight: 650;

    color: rgba(255, 255, 255, 0.72);

}



.mb-create-steps li.is-active {

    background: rgba(255, 255, 255, 0.16);

    color: #fff;

    border-color: rgba(255, 255, 255, 0.22);

}



.mb-create-steps em {

    width: 1.55rem;

    height: 1.55rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: rgba(15, 23, 42, 0.25);

    font-style: normal;

    font-size: 0.72rem;

    font-weight: 800;

}



.mb-create-steps li.is-active em {

    background: #f0c020;

    color: #1a2e24;

}



.mb-create-tip {

    display: flex;

    gap: 0.65rem;

    align-items: flex-start;

    padding: 0.85rem 0.9rem;

    border-radius: 0.95rem;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.12);

}



.mb-create-tip i {

    color: #f0c020;

    margin-top: 0.1rem;

}



.mb-create-tip p {

    margin: 0;

    font-size: 0.82rem;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.88);

}



.mb-create-main {

    padding: 1.15rem 1.15rem 1.5rem;

    background: #f3f5f4;

}



.mb-create-panel {

    max-width: 760px;

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1.15rem;

    padding: 1.35rem 1.35rem 1.2rem;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);

}



.mb-create-panel-head {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    align-items: flex-start;

    margin-bottom: 1.25rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid #eef2f0;

}



.mb-create-panel-head .mb-create-eyebrow {

    color: var(--ines-green);

}



.mb-create-panel-head h1 {

    margin: 0 0 0.35rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.55rem;

    font-weight: 700;

    color: #10261a;

}



.mb-create-panel-head p {

    margin: 0;

    color: #6b7280;

    font-size: 0.92rem;

    max-width: 36rem;

}



.mb-create-order-badge {

    flex-shrink: 0;

    min-width: 3rem;

    height: 3rem;

    padding: 0 0.7rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: #0f5230;

    color: #fff;

    font-size: 0.9rem;

    font-weight: 800;

}



.mb-create-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem 0.9rem;

}



.mb-field-full,

.mb-field-check {

    grid-column: 1 / -1;

}



@media (max-width: 640px) {

    .mb-create-grid {

        grid-template-columns: 1fr;

    }

}



.mb-label {

    display: flex;

    align-items: baseline;

    gap: 0.45rem;

    margin-bottom: 0.4rem;

    font-size: 0.82rem;

    font-weight: 750;

    color: #1f2937;

}



.mb-label span {

    font-size: 0.72rem;

    font-weight: 650;

    color: #9ca3af;

    text-transform: lowercase;

}



.mb-create-form .form-control,

.mb-create-form .form-select,

.mb-create-form .auth-input {

    min-height: 48px;

    border-radius: 0.85rem;

    border: 1.5px solid #e5e7eb;

    background: #fff;

}



.mb-create-form textarea.form-control,

.mb-create-form textarea.auth-input {

    min-height: 110px;

}



.mb-create-form .form-control:focus,

.mb-create-form .form-select:focus,

.mb-create-form .auth-input:focus {

    border-color: var(--ines-green);

    box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);

}



.mb-locked-course {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    min-height: 48px;

    padding: 0.65rem 0.85rem;

    border-radius: 0.85rem;

    background: #f4f8f5;

    border: 1.5px solid #d7e4db;

}



.mb-locked-code {

    display: inline-flex;

    align-items: center;

    padding: 0.25rem 0.55rem;

    border-radius: 999px;

    background: #0f5230;

    color: #fff;

    font-size: 0.72rem;

    font-weight: 800;

}



.mb-locked-course strong {

    font-size: 0.92rem;

    color: #111827;

}



.mb-help {

    margin: 0.35rem 0 0;

    font-size: 0.75rem;

    color: #6b7280;

}



.mb-error {

    margin-top: 0.35rem;

    font-size: 0.8rem;

    color: #b91c1c;

}



.mb-check {

    display: flex;

    gap: 0.75rem;

    align-items: flex-start;

    padding: 0.95rem 1rem;

    border-radius: 0.95rem;

    background: #f7faf8;

    border: 1px solid #e5ebe7;

    cursor: pointer;

}



.mb-check .form-check-input {

    margin-top: 0.2rem;

    width: 1.1rem;

    height: 1.1rem;

}



.mb-check strong {

    display: block;

    font-size: 0.9rem;

    color: #111827;

}



.mb-check small {

    display: block;

    margin-top: 0.2rem;

    font-size: 0.78rem;

    color: #6b7280;

    line-height: 1.4;

}



.mb-create-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

    margin-top: 1.35rem;

    padding-top: 1.1rem;

    border-top: 1px solid #eef2f0;

}



.mb-kind-grid {

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 0.55rem;

}



.mb-kind-select {

    margin-bottom: 0.75rem;

}



@media (max-width: 900px) {

    .mb-kind-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (max-width: 560px) {

    .mb-kind-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.mb-kind-card {

    display: grid;

    justify-items: center;

    gap: 0.35rem;

    padding: 0.85rem 0.5rem;

    border-radius: 0.9rem;

    border: 1.5px solid #e5ebe7;

    background: #f8faf9;

    cursor: pointer;

    text-align: center;

    transition: border-color 0.15s ease, background 0.15s ease;

}



.mb-kind-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}



.mb-kind-card i {

    font-size: 1.15rem;

    color: #0f5230;

}



.mb-kind-card strong {

    font-size: 0.78rem;

    color: #111827;

}



.mb-kind-card:has(input:checked) {

    border-color: #13b652;

    background: #eef8f1;

    box-shadow: 0 0 0 2px rgba(19, 182, 82, 0.12);

}



.mb-create-layout.is-compose {

    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);

}



.mb-create-layout.is-compose .mb-create-main.is-side {

    order: 1;

    padding: 1.15rem;

    background: #f3f5f4;

}



.mb-create-layout.is-compose .mb-create-rail.is-compose-rail {

    order: 2;

    background: #fff;

    border-left: 1px solid #e5ebe7;

}



.mb-summary-panel h1 {

    margin: 0 0 0.35rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.45rem;

    color: #10261a;

}



.mb-summary-meta {

    margin: 0 0 0.75rem;

    font-size: 0.85rem;

    font-weight: 700;

    color: #6b7280;

}



.mb-summary-desc {

    margin: 0 0 1rem;

    color: #4b5563;

    font-size: 0.9rem;

    line-height: 1.5;

}



.mb-summary-stats {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.55rem;

    margin-bottom: 1.15rem;

}



.mb-summary-stats > div {

    padding: 0.75rem;

    border-radius: 0.85rem;

    background: #f4f8f5;

    border: 1px solid #e5ebe7;

}



.mb-summary-stats em {

    display: block;

    font-style: normal;

    font-size: 1.2rem;

    font-weight: 800;

    color: #0f5230;

}



.mb-summary-stats span {

    font-size: 0.7rem;

    font-weight: 700;

    color: #6b7280;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.mb-summary-list-title {

    margin: 0 0 0.55rem;

    font-size: 0.92rem;

    font-weight: 800;

    color: #111827;

}



.mb-added-list {

    list-style: none;

    margin: 0 0 1rem;

    padding: 0;

    display: grid;

    gap: 0.45rem;

}



.mb-added-list li {

    display: grid;

    gap: 0.15rem;

    padding: 0.7rem 0.8rem;

    border-radius: 0.75rem;

    background: #f8faf9;

    border: 1px solid #e5ebe7;

}



.mb-added-type {

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--ines-green);

}



.mb-added-list strong {

    font-size: 0.9rem;

    color: #111827;

}



.mb-compose-panel {

    padding: 1.25rem 1.15rem 1.5rem;

    height: 100%;

    overflow-y: auto;

}



.mb-compose-head .mb-create-eyebrow {

    color: var(--ines-green);

}



.mb-compose-head h2 {

    margin: 0 0 0.35rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.35rem;

    color: #10261a;

}



.mb-compose-head p {

    margin: 0 0 1rem;

    color: #6b7280;

    font-size: 0.9rem;

}



.mb-compose-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-bottom: 1rem;

}



.mb-compose-tab {

    padding: 0.45rem 0.8rem;

    border-radius: 999px;

    background: #f3f5f4;

    border: 1px solid #e5ebe7;

    color: #4b5563;

    text-decoration: none;

    font-size: 0.8rem;

    font-weight: 750;

}



.mb-compose-tab.is-active,

.mb-compose-tab:hover {

    background: #0f5230;

    border-color: #0f5230;

    color: #fff;

}



.mb-single-form,

.mb-single-panel {

    max-width: 760px;

    margin: 0 auto;

    padding: 1.15rem;

}



.mb-create-page .mb-single-panel {

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1.15rem;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);

}



.mb-inline-content {

    margin-top: 1.25rem;

    padding-top: 1.15rem;

    border-top: 1px solid #eef2f0;

}



.mb-inline-content-head h2 {

    margin: 0 0 0.25rem;

    font-size: 1.1rem;

    font-weight: 800;

    color: #10261a;

}



.mb-inline-content-head p {

    margin: 0 0 1rem;

    color: #6b7280;

    font-size: 0.88rem;

}



.mb-preview-kind .mb-field {

    margin-bottom: 0.85rem;

}



@media (max-width: 991.98px) {

    .mb-create-layout.is-compose {

        grid-template-columns: 1fr;

    }



    .mb-create-layout.is-compose .mb-create-rail.is-compose-rail {

        border-left: 0;

        border-top: 1px solid #e5ebe7;

        order: 1;

    }



    .mb-create-layout.is-compose .mb-create-main.is-side {

        order: 2;

    }

}



/* ---- Module content builder (notes / videos / …) ---- */

.mb-content-page .app-content {

    background: #f3f5f4;

    padding: 0 !important;

    margin: 0 !important;

}



.mb-content-page .mb-content-shell.container-fluid,

.mb-content-page .app-content > .container-fluid.lecturer-dash.mb-content-shell,

.mb-content-page .app-content .container-fluid.lecturer-dash.mb-content-shell {

    max-width: none !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}



.app-shell.mb-content-page .lecturer-dash {

    padding-top: 0 !important;

}



.mb-content-page .lc-shell.mb-content-shell {

    max-width: none;

    margin: 0;

}



.mb-content-wrap {

    padding: 1.15rem 1.15rem 1.75rem;

}



.mb-content-typebar {

    margin-bottom: 1rem;

}



.mb-content-typebar .mb-create-eyebrow {

    color: var(--ines-green);

}



.mb-content-typebar .mb-compose-tabs {

    margin-bottom: 0;

}



.mb-compose-tab em {

    display: inline-grid;

    place-items: center;

    min-width: 1.25rem;

    height: 1.25rem;

    margin-left: 0.35rem;

    padding: 0 0.35rem;

    border-radius: 999px;

    background: rgba(15, 82, 48, 0.12);

    color: #0f5230;

    font-style: normal;

    font-size: 0.7rem;

    font-weight: 800;

}



.mb-compose-tab.is-active em {

    background: rgba(255, 255, 255, 0.22);

    color: #fff;

}



.mb-content-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);

    gap: 1rem;

    align-items: start;

}



@media (max-width: 991.98px) {

    .mb-content-grid {

        grid-template-columns: 1fr;

    }

}



.mb-content-panel {

    max-width: none;

}



.mb-content-tip {

    margin-bottom: 1.15rem;

}



.mb-side-card {

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1.15rem;

    padding: 1.1rem 1.05rem 1rem;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);

    position: sticky;

    top: 1rem;

}



.mb-side-head {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 0.75rem;

    margin-bottom: 0.9rem;

    padding-bottom: 0.85rem;

    border-bottom: 1px solid #eef2f0;

}



.mb-side-head h3 {

    margin: 0 0 0.2rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.15rem;

    font-weight: 700;

    color: #10261a;

}



.mb-side-head p {

    margin: 0;

    font-size: 0.8rem;

    color: #6b7280;

}



.mb-side-count {

    flex-shrink: 0;

    min-width: 2.25rem;

    height: 2.25rem;

    padding: 0 0.55rem;

    border-radius: 999px;

    display: grid;

    place-items: center;

    background: #0f5230;

    color: #fff;

    font-size: 0.85rem;

    font-weight: 800;

}



.mb-side-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.5rem;

    max-height: min(52vh, 28rem);

    overflow-y: auto;

}



.mb-side-list > li {

    border-radius: 0.85rem;

    border: 1px solid #e5ebe7;

    background: #f8faf9;

}



.mb-side-list > li.is-editing {

    border-color: #13b652;

    background: #eef8f1;

    box-shadow: 0 0 0 2px rgba(19, 182, 82, 0.12);

}



.mb-side-list > li.is-empty {

    padding: 1rem 0.9rem;

    color: #6b7280;

    font-size: 0.86rem;

    line-height: 1.45;

    background: #f3f5f4;

    border-style: dashed;

}



.mb-side-item {

    display: flex;

    justify-content: space-between;

    gap: 0.65rem;

    align-items: flex-start;

    padding: 0.75rem 0.8rem;

}



.mb-side-item strong {

    display: block;

    font-size: 0.88rem;

    color: #111827;

    margin-bottom: 0.2rem;

}



.mb-side-item span {

    display: block;

    font-size: 0.75rem;

    color: #6b7280;

    line-height: 1.4;

}



.mb-side-item span.is-ok {

    color: #0f5230;

    font-weight: 700;

}



.mb-side-foot {

    margin-top: 0.9rem;

    padding-top: 0.85rem;

    border-top: 1px solid #eef2f0;

}



/* ---- Lecturer Dashboard (full-width on large screens) ---- */

.lecturer-dash {

    max-width: none;

    width: 100%;

}



/* Use the full main area; keep only a light edge inset */

.app-shell .app-content > .container-fluid.lecturer-dash,

.app-shell .app-content .container-fluid.lecturer-dash {

    padding-left: 1rem !important;

    padding-right: 1rem !important;

}



@media (min-width: 1200px) {

    .app-shell .app-content > .container-fluid.lecturer-dash,

    .app-shell .app-content .container-fluid.lecturer-dash {

        padding-left: 1.25rem !important;

        padding-right: 1.25rem !important;

    }

}



.lecturer-stats {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.75rem;

    margin-bottom: 1.5rem;

}



.lecturer-stat {

    background: #ffffff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 14px;

    padding: 1rem 0.85rem;

    text-align: center;

    min-height: 88px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.lecturer-stat.highlight {

    border-color: rgba(240, 192, 32, 0.55);

    background: rgba(240, 192, 32, 0.08);

}



.lecturer-stat-value {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--ines-green-dark);

    line-height: 1.2;

}



.lecturer-stat-label {

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    margin-top: 0.25rem;

    font-weight: 600;

}



.lecturer-quick {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.65rem;

}



.lecturer-quick-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    min-height: 48px;

    padding: 0.65rem 0.75rem;

    background: var(--ines-green-dark);

    color: #ffffff !important;

    text-decoration: none;

    border-radius: 12px;

    font-size: 0.875rem;

    font-weight: 600;

    position: relative;

}



.lecturer-quick-btn .badge {

    position: absolute;

    top: -6px;

    right: -6px;

    background: var(--ines-yellow);

    color: var(--ines-green-dark);

    font-size: 0.7rem;

    border-radius: 999px;

    padding: 0.2rem 0.45rem;

}



.lecturer-section-head {

    margin-bottom: 0.85rem;

}



.lecturer-section-head h2 {

    font-family: var(--font-sans);

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--ines-green);

    margin: 0;

}



.lecturer-action-grid {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

}



.lecturer-action-card {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.95rem 1rem;

    background: #ffffff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 14px;

    text-decoration: none;

    color: inherit;

    min-height: 72px;

    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);

}



.lecturer-action-card:hover {

    border-color: var(--ines-green);

    box-shadow: var(--shadow-sm);

    transform: translateY(-1px);

    color: inherit;

}



.lecturer-action-icon {

    width: 44px;

    height: 44px;

    min-width: 44px;

    border-radius: 12px;

    background: rgba(26, 122, 62, 0.1);

    color: var(--ines-green-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

}



.lecturer-action-body {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.lecturer-action-body strong {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--color-text);

}



.lecturer-action-body small {

    font-size: 0.8rem;

    color: var(--color-text-muted);

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.lecturer-action-arrow {

    color: var(--ines-gray-400);

    font-size: 0.9rem;

}



.lecturer-side-card {

    background: #ffffff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 16px;

    overflow: hidden;

}



.lecturer-side-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 1rem 1.15rem;

    border-bottom: 1px solid var(--ines-gray-200);

}



.lecturer-side-head h3 {

    font-family: var(--font-sans);

    font-size: 0.95rem;

    font-weight: 700;

    margin: 0;

}



.lecturer-side-head a {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--ines-green);

    text-decoration: none;

}



.lecturer-side-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.lecturer-side-list li {

    padding: 0.9rem 1.15rem;

    border-bottom: 1px solid var(--ines-gray-100);

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.lecturer-side-list li:last-child {

    border-bottom: none;

}



.lecturer-side-list li.empty {

    color: var(--color-text-muted);

    text-align: center;

    padding: 1.5rem 1rem;

    font-size: 0.9rem;

}



.lecturer-side-list a {

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

    gap: 0.1rem;

}



.lecturer-side-list strong {

    font-size: 0.9rem;

}



.lecturer-side-list span {

    font-size: 0.82rem;

    color: var(--color-text-muted);

}



.lecturer-tip {

    background: rgba(26, 122, 62, 0.08);

    border-radius: 14px;

    padding: 1.15rem;

    font-size: 0.9rem;

    color: var(--color-text-muted);

    line-height: 1.55;

}



.lecturer-tip i {

    display: block;

    font-size: 1.4rem;

    color: var(--ines-green);

    margin-bottom: 0.5rem;

}



.structure-flow {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.35rem 0.5rem;

    padding: 0.85rem 1rem;

    background: rgba(26, 122, 62, 0.08);

    border-radius: 12px;

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--ines-green-dark);

}



.structure-flow i {

    font-size: 0.7rem;

    color: var(--ines-gray-400);

}



.structure-tabs {

    gap: 0.4rem;

    padding-bottom: 0.25rem;

}



.structure-tabs .nav-link {

    white-space: nowrap;

    border-radius: 999px;

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--color-text-muted);

    background: #ffffff;

    border: 1px solid var(--ines-gray-200);

    min-height: 40px;

}



.structure-tabs .nav-link.active {

    background: var(--ines-green-dark);

    border-color: var(--ines-green-dark);

    color: #ffffff;

}



.structure-node {

    padding: 0.85rem 1.15rem;

    border-bottom: 1px solid var(--ines-gray-100);

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}

.structure-node-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.structure-node-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.structure-edit-link {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ines-green-dark, #0f5230);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    background: rgba(19, 182, 82, 0.1);
}

.structure-edit-link:hover {
    color: #fff;
    background: var(--ines-green, #13b652);
}



.structure-node.nested {

    margin-left: 1rem;

    border-left: 2px solid rgba(26, 122, 62, 0.2);

    border-bottom: none;

    padding: 0.55rem 0.85rem;

}



.structure-empty {

    color: var(--color-text-muted);

    font-size: 0.85rem;

    padding: 0.5rem 1.15rem;

}



.structure-empty.nested {

    margin-left: 1rem;

}



.analytics-kpis {

    margin-bottom: 1.5rem;

}



.analytics-card {

    background: #ffffff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 16px;

    padding: 1.15rem 1.15rem 1rem;

    height: 100%;

}



.analytics-card-head {

    margin-bottom: 0.75rem;

}



.analytics-card-head h3 {

    font-family: var(--font-sans);

    font-size: 1rem;

    font-weight: 700;

    margin: 0 0 0.2rem;

    color: var(--ines-green-dark);

}



.analytics-card-head p {

    margin: 0;

    font-size: 0.8125rem;

    color: var(--color-text-muted);

}



.analytics-chart-wrap {

    position: relative;

    width: 100%;

    min-height: 200px;

}



.analytics-chart-sm {

    min-height: 220px;

    max-width: 320px;

    margin: 0 auto;

}



[data-bs-theme="dark"] .analytics-card {

    background: #1e293b;

    border-color: rgba(255, 255, 255, 0.08);

}



[data-bs-theme="dark"] .analytics-card-head h3 {

    color: #f1f5f9;

}



@media (max-width: 575.98px) {

    .analytics-chart-wrap {

        min-height: 180px;

    }

}



.lecturer-form-card {

    background: #ffffff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 16px;

    padding: 1.25rem 1.15rem;

    position: sticky;

    top: calc(var(--navbar-height) + 1rem);

}



.lecturer-form-title {

    font-family: var(--font-sans);

    font-size: 1.05rem;

    font-weight: 700;

    margin: 0 0 0.35rem;

}



.lecturer-form .auth-input,

.lecturer-form .form-control,

.lecturer-form .form-select {

    min-height: 48px;

    border-radius: 10px;

    border: 1.5px solid var(--ines-gray-200);

    font-size: 1rem;

}



.lecturer-form textarea.auth-input,

.lecturer-form textarea.form-control {

    min-height: 110px;

}



.lecturer-filter-chips {

    display: flex;

    flex-wrap: nowrap;

    gap: 0.5rem;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    padding-bottom: 0.25rem;

    scrollbar-width: thin;

}



.lecturer-chip {

    flex: 0 0 auto;

    padding: 0.45rem 0.9rem;

    border-radius: 999px;

    border: 1.5px solid var(--ines-gray-200);

    background: #ffffff;

    color: var(--color-text);

    text-decoration: none;

    font-size: 0.8125rem;

    font-weight: 600;

    min-height: 40px;

    display: inline-flex;

    align-items: center;

}



.lecturer-chip.active,

.lecturer-chip:hover {

    background: var(--ines-green-dark);

    border-color: var(--ines-green-dark);

    color: #ffffff;

}



.lecturer-module-item {

    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

}



.lecturer-module-main {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    min-width: 0;

    flex: 1;

}



.lecturer-module-main > div {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

    min-width: 0;

}



.lecturer-module-order {

    width: 32px;

    height: 32px;

    min-width: 32px;

    border-radius: 8px;

    background: rgba(26, 122, 62, 0.12);

    color: var(--ines-green-dark);

    font-weight: 700;

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    justify-content: center;

}



.lecturer-module-actions {

    display: flex;

    gap: 0.4rem;

    flex-shrink: 0;

}



.lecturer-module-actions .btn {

    min-height: 40px;

    min-width: 40px;

}



[data-bs-theme="dark"] .lecturer-form-card,

[data-bs-theme="dark"] .lecturer-chip {

    background: #1e293b;

    border-color: rgba(255, 255, 255, 0.08);

}



@media (max-width: 991.98px) {

    .lecturer-form-card {

        position: static;

    }

}



[data-bs-theme="dark"] .lecturer-stat,

[data-bs-theme="dark"] .lecturer-action-card,

[data-bs-theme="dark"] .lecturer-side-card {

    background: #1e293b;

    border-color: rgba(255, 255, 255, 0.08);

}



[data-bs-theme="dark"] .lecturer-stat-value,

[data-bs-theme="dark"] .lecturer-action-body strong {

    color: #f1f5f9;

}



@media (min-width: 576px) {

    .lecturer-stats {

        grid-template-columns: repeat(3, 1fr);

    }



    .lecturer-quick {

        grid-template-columns: repeat(4, 1fr);

    }

}



@media (min-width: 768px) {

    .lecturer-stats {

        grid-template-columns: repeat(6, 1fr);

        gap: 0.85rem;

    }



    .lecturer-action-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 0.85rem;

    }



    .lecturer-action-body small {

        -webkit-line-clamp: 2;

    }

}



@media (min-width: 992px) {

    .lecturer-action-card {

        padding: 1.1rem 1.15rem;

    }

}



/* ---- Utility ---- */

.section-padding {

    padding: var(--section-padding) 0;

}



.bg-ines-surface {

    background: var(--ines-gray-100);

}



[data-bs-theme="dark"] .bg-ines-surface {

    background: #1e293b;

}



.text-ines-orange { color: var(--ines-yellow-dark) !important; }

.text-ines-navy { color: var(--ines-green-dark) !important; }

.text-ines-green { color: var(--ines-green) !important; }

.text-ines-yellow { color: var(--ines-yellow-dark) !important; }



.border-ines { border-color: var(--ines-gray-200) !important; }



/* ---- Module workspace & create ---- */

.module-builder-eyebrow {

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--ines-green);

}



.module-create-intro {

    max-width: none;

    margin-bottom: 1.75rem;

}



.module-create-intro h1 {

    font-size: clamp(1.5rem, 3vw, 1.9rem);

    font-weight: 700;

    margin: 0 0 0.5rem;

}



.module-create-intro p {

    color: var(--ines-gray-600);

    margin: 0;

    line-height: 1.55;

}



.module-panel {

    background: #fff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 18px;

    padding: 1.35rem 1.25rem;

}



.module-panel-head h1,

.module-panel-head h2 {

    font-size: 1.15rem;

    font-weight: 700;

    margin: 0 0 0.25rem;

}



.module-panel-head p {

    color: var(--ines-gray-600);

    font-size: 0.92rem;

    margin: 0 0 1.15rem;

}



.module-create-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.65rem;

    margin-top: 1.5rem;

}



.module-create-actions .btn {

    min-height: 44px;

}



.module-hint-card {

    background: linear-gradient(165deg, rgba(45, 106, 79, 0.08), rgba(45, 106, 79, 0.02));

    border: 1px solid rgba(45, 106, 79, 0.15);

    border-radius: 18px;

    padding: 1.35rem 1.25rem;

}



.module-hint-card h2 {

    font-size: 1rem;

    font-weight: 700;

    margin: 0 0 0.85rem;

}



.module-hint-card ol {

    padding-left: 1.1rem;

    margin: 0 0 1rem;

    color: var(--ines-gray-700);

}



.module-hint-card li {

    margin-bottom: 0.45rem;

    line-height: 1.45;

}



.module-hint-card p {

    font-size: 0.9rem;

    color: var(--ines-gray-600);

}



.module-workspace-hero {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.5rem;

    padding: 1.35rem 1.25rem;

    border-radius: 18px;

    background:

        linear-gradient(120deg, rgba(45, 106, 79, 0.1), transparent 55%),

        #fff;

    border: 1px solid var(--ines-gray-200);

}



.module-workspace-hero h1 {

    font-size: clamp(1.4rem, 2.8vw, 1.85rem);

    font-weight: 700;

    margin: 0 0 0.4rem;

}



.module-workspace-hero > div > p {

    color: var(--ines-gray-600);

    max-width: none;

    margin: 0 0 0.75rem;

    line-height: 1.5;

}



.module-workspace-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.module-workspace-meta span {

    font-size: 0.78rem;

    font-weight: 600;

    padding: 0.3rem 0.65rem;

    border-radius: 999px;

    background: var(--ines-gray-100);

    color: var(--ines-gray-700);

}



.module-workspace-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    align-items: flex-start;

}



.module-content-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 1.15rem;

    border-radius: 16px;

    border: 1px solid var(--ines-gray-200);

    background: #fff;

    text-decoration: none;

    color: inherit;

    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.module-content-card:hover {

    border-color: rgba(45, 106, 79, 0.45);

    transform: translateY(-2px);

    box-shadow: 0 10px 28px rgba(15, 40, 28, 0.08);

    color: inherit;

}



.module-content-card-icon {

    width: 2.5rem;

    height: 2.5rem;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(45, 106, 79, 0.1);

    color: var(--ines-green-dark);

    font-size: 1.15rem;

    margin-bottom: 0.85rem;

}



.module-content-card-body p {

    font-size: 0.86rem;

    color: var(--ines-gray-600);

    margin: 0.35rem 0 0;

    line-height: 1.45;

}



.module-content-count {

    min-width: 1.6rem;

    height: 1.6rem;

    padding: 0 0.4rem;

    border-radius: 999px;

    background: var(--ines-gray-100);

    font-size: 0.78rem;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.module-content-card-cta {

    margin-top: auto;

    padding-top: 0.9rem;

    font-size: 0.86rem;

    font-weight: 650;

    color: var(--ines-green-dark);

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

}



.module-content-nav {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1.25rem;

}



.module-content-tabs {

    display: flex;

    flex-wrap: nowrap;

    gap: 0.35rem;

    overflow-x: auto;

    scrollbar-width: thin;

}



.module-content-tab {

    flex: 0 0 auto;

    padding: 0.4rem 0.75rem;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--ines-gray-600);

    background: var(--ines-gray-100);

    text-decoration: none;

}



.module-content-tab.active,

.module-content-tab:hover {

    background: rgba(45, 106, 79, 0.12);

    color: var(--ines-green-dark);

}



.module-item-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.module-item-list li {

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--ines-gray-200);

}



.module-item-list li.is-editing {

    background: rgba(45, 106, 79, 0.06);

    margin: 0 -0.75rem;

    padding: 0.75rem;

    border-radius: 10px;

    border-bottom-color: transparent;

}



.module-item-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

}



.module-item-actions {

    display: flex;

    gap: 0.35rem;

    flex-shrink: 0;

}



.module-item-list li:last-child {

    border-bottom: 0;

}



.module-item-list strong {

    display: block;

    font-size: 0.95rem;

}



.module-item-list span,

.module-item-list .empty {

    display: block;

    font-size: 0.82rem;

    color: var(--ines-gray-600);

    margin-top: 0.15rem;

}



.module-list-card {

    height: 100%;

    background: #fff;

    border: 1px solid var(--ines-gray-200);

    border-radius: 16px;

    padding: 1.15rem;

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

}



.module-list-card-top {

    display: flex;

    gap: 0.75rem;

    align-items: flex-start;

}



.module-list-order {

    width: 2rem;

    height: 2rem;

    border-radius: 10px;

    background: rgba(45, 106, 79, 0.1);

    color: var(--ines-green-dark);

    font-weight: 700;

    font-size: 0.85rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.module-list-card h2 {

    font-size: 1.05rem;

    font-weight: 700;

    margin: 0 0 0.2rem;

}



.module-list-card-top p {

    margin: 0;

    font-size: 0.84rem;

    color: var(--ines-gray-600);

}



.module-list-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    font-size: 0.82rem;

    color: var(--ines-gray-600);

}



.module-list-stats i {

    margin-right: 0.2rem;

    color: var(--ines-green);

}



.module-list-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-top: auto;

}



@media (max-width: 575.98px) {

    .module-create-actions .btn {

        width: 100%;

    }

}



.module-richtext-tip {

    display: flex;

    gap: 0.55rem;

    align-items: flex-start;

    padding: 0.7rem 0.85rem;

    margin: 0 0 0.25rem;

    border-radius: 12px;

    background: rgba(45, 106, 79, 0.08);

    color: var(--ines-green-dark);

    font-size: 0.86rem;

    line-height: 1.45;

}



.module-richtext-tip i {

    margin-top: 0.15rem;

}



.module-upload-field {

    padding: 0.85rem;

    border-radius: 14px;

    background: linear-gradient(135deg, rgba(45, 106, 79, 0.06), rgba(212, 160, 23, 0.08));

    border: 1px dashed rgba(45, 106, 79, 0.35);

}



.module-upload-field .form-label {

    display: flex;

    align-items: center;

    gap: 0.35rem;

}



.module-upload-field .form-label::before {

    content: "\F34E";

    font-family: "bootstrap-icons";

    color: var(--ines-green-dark);

}



.module-file-input {

    cursor: pointer;

}



.module-file-input::file-selector-button {

    border: 0;

    border-radius: 8px;

    padding: 0.45rem 0.85rem;

    margin-right: 0.75rem;

    background: var(--ines-green);

    color: #fff;

    font-weight: 600;

    cursor: pointer;

}



.module-rich-field .django_ckeditor_5,

.module-rich-field .ck-editor {

    width: 100%;

}



.module-rich-form .ck-editor__editable {

    min-height: 260px;

    font-size: 1rem;

    line-height: 1.65;

}



.module-rich-form .ck.ck-editor {

    border-radius: 10px;

    overflow: hidden;

}



.module-rich-form .ck-toolbar {

    border-color: var(--ines-gray-200) !important;

}



.module-rich-form .ck-editor__editable_inline {

    border-color: var(--ines-gray-200) !important;

}



/* Student-facing rich content */

.rich-content {

    font-size: 1.02rem;

    line-height: 1.75;

    color: var(--ines-gray-800, #1f2937);

}



.rich-content h2,

.rich-content h3,

.rich-content h4 {

    font-weight: 700;

    margin: 1.25rem 0 0.65rem;

    line-height: 1.3;

}



.rich-content p {

    margin: 0 0 0.9rem;

}



.rich-content ul,

.rich-content ol {

    padding-left: 1.25rem;

    margin: 0 0 1rem;

}



.rich-content li {

    margin-bottom: 0.35rem;

}



.rich-content blockquote {

    margin: 1rem 0;

    padding: 0.65rem 1rem;

    border-left: 3px solid var(--ines-green);

    background: rgba(45, 106, 79, 0.06);

    color: var(--ines-gray-700);

}



.rich-content img {

    max-width: 100%;

    height: auto;

    border-radius: 10px;

    margin: 0.75rem 0;

}



.rich-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 1rem 0;

}



.rich-content th,

.rich-content td {

    border: 1px solid var(--ines-gray-200);

    padding: 0.5rem 0.65rem;

}



.rich-content a {

    color: var(--ines-green-dark);

    font-weight: 600;

}



.rich-content mark,

.rich-content .marker-yellow { background: #fef08a; padding: 0.05em 0.2em; }

.rich-content .marker-green { background: #bbf7d0; padding: 0.05em 0.2em; }

.rich-content .marker-pink { background: #fbcfe8; padding: 0.05em 0.2em; }

.rich-content .marker-blue { background: #bfdbfe; padding: 0.05em 0.2em; }



/* ---- Certificate verify + student cert cards (green & gold) ---- */

.cert-verify-page .app-content,

.cert-verify {

    background: #f4f5f7;

}



.cert-verify {

    max-width: 980px;

    margin: 0 auto;

    font-family: var(--font-sans);

}



.cert-verify-badge {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    background: #ffffff;

    border-radius: 16px;

    padding: 0.9rem 1.15rem;

    margin-bottom: 1.15rem;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.cert-verify-badge i {

    font-size: 1.6rem;

    color: var(--ines-green);

}



.cert-verify-badge strong {

    display: block;

    color: #111827;

    font-weight: 750;

}



.cert-verify-badge span {

    display: block;

    font-size: 0.85rem;

    color: #6b7280;

}



.cert-preview {

    display: grid;

    grid-template-columns: 34% 1fr;

    min-height: 420px;

    background: #fffcf8;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 18px 48px rgba(15, 82, 48, 0.12);

    position: relative;

}



.cert-preview::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 34%;

    width: 3px;

    background: linear-gradient(180deg, var(--ines-yellow), var(--ines-yellow-dark));

    transform: none;

    z-index: 2;

}



.cert-preview-side {

    background: var(--ines-green-dark);

    color: #fff;

    padding: 1.6rem 1.35rem 1.25rem;

    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    position: relative;

    z-index: 1;

}



.cert-preview.is-professional {

    background: #f6f3ea;

}



.cert-preview.is-professional::before {

    background: linear-gradient(180deg, #d4af37, #8a6d12);

}



.cert-preview.is-professional .cert-preview-side {

    background: #1b365d;

}



.cert-preview.is-professional .cert-preview-kicker {

    color: #8a6d12;

}



.cert-preview-logo {

    width: 64px;

    height: 64px;

    border-radius: 999px;

    background: #fff;

    display: grid;

    place-items: center;

    margin-bottom: 0.5rem;

}



.cert-preview-logo img {

    width: 42px;

    height: 42px;

    object-fit: contain;

}



.cert-preview-by {

    margin: 0;

    font-size: 0.8rem;

    font-style: italic;

    opacity: 0.85;

}



.cert-preview-side h2 {

    margin: 0;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



.cert-preview-org {

    margin: 0;

    font-size: 0.78rem;

    line-height: 1.45;

    opacity: 0.88;

}



.cert-preview-qr {

    margin-top: auto;

    background: #fff;

    border-radius: 12px;

    padding: 0.55rem;

    width: fit-content;

    text-align: center;

}



.cert-preview-qr img {

    width: 88px;

    height: 88px;

    display: block;

}



.cert-preview-qr span {

    display: block;

    margin-top: 0.25rem;

    font-size: 0.65rem;

    color: var(--ines-green-dark);

    font-weight: 650;

}



.cert-preview-est {

    margin: 0.5rem 0 0;

    font-size: 0.68rem;

    letter-spacing: 0.04em;

    opacity: 0.7;

}



.cert-preview-main {

    padding: 1.75rem 1.75rem 1.4rem 2.2rem;

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.cert-preview-kicker {

    margin: 0;

    font-family: var(--font-display);

    font-size: 1rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--ines-green-dark);

}



.cert-preview-main h1 {

    margin: 0.15rem 0 1.15rem;

    font-family: var(--font-display);

    font-size: clamp(1.8rem, 4vw, 2.6rem);

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--ines-yellow-dark);

}



.cert-preview-label {

    margin: 0 0 0.35rem;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #9ca3af;

}



.cert-preview-name {

    margin: 0 0 0.55rem;

    font-family: var(--font-display);

    font-size: clamp(1.6rem, 3.5vw, 2.2rem);

    font-style: italic;

    font-weight: 600;

    color: #111827;

    line-height: 1.15;

    padding-bottom: 0.55rem;

    border-bottom: 2px solid var(--ines-yellow);

    display: inline-block;

    width: fit-content;

    max-width: 100%;

    min-width: 0;

}



.cert-preview-body {

    margin: 1rem auto 1.5rem;

    max-width: 36rem;

    color: #6b7280;

    font-size: 0.92rem;

    line-height: 1.55;

    text-align: center;

}



.cert-preview-foot {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    align-items: flex-end;

    margin-top: auto;

    margin-bottom: 1rem;

    width: 100%;

    text-align: left;

}



.cert-preview-sign {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 160px;

    text-align: left;

}



.cert-preview-sig-img {

    max-height: 52px;

    max-width: 180px;

    width: auto;

    height: auto;

    object-fit: contain;

    margin-bottom: 0.15rem;

}



.cert-preview-line {

    display: block;

    width: 140px;

    height: 1px;

    background: #c4c8cc;

    margin-bottom: 0.35rem;

}



.cert-preview-lecturer {

    display: block;

    font-size: 0.78rem;

    font-weight: 700;

    color: #374151;

    margin-bottom: 0.1rem;

}



.cert-preview-foot em {

    display: block;

    font-style: normal;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #9ca3af;

}



.cert-preview-date {

    text-align: right;

}



.cert-preview-date strong {

    display: block;

    font-size: 1rem;

    color: #111827;

    margin-bottom: 0.25rem;

}



.cert-preview-id {

    margin: 0 0 1rem;

    font-size: 0.72rem;

    color: #9ca3af;

    word-break: break-all;

    text-align: center;

    width: 100%;

}



.cert-preview-download {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.65rem 1.1rem;

    border-radius: 999px;

    background: var(--ines-yellow);

    color: #1a2e24;

    font-weight: 750;

    font-size: 0.85rem;

    text-decoration: none;

}



.cert-preview-download:hover {

    background: var(--ines-yellow-light);

    color: #1a2e24;

}



.cert-verify-invalid {

    text-align: center;

    background: #fff;

    border-radius: 20px;

    padding: 3rem 1.5rem;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.cert-verify-invalid i {

    font-size: 2.5rem;

    color: #ef4444;

}



.cert-verify-invalid h1 {

    margin: 0.75rem 0 0.4rem;

    font-size: 1.35rem;

    font-weight: 750;

}



.cert-verify-invalid p {

    margin: 0;

    color: #6b7280;

}



.cert-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.9rem;

}



@media (min-width: 768px) {

    .cert-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.cert-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);

}



.cert-card-banner {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.85rem 1rem;

    background: linear-gradient(120deg, var(--ines-green-dark), #147a45);

    color: #fff;

}



.cert-card-banner img {

    width: 28px;

    height: 28px;

    object-fit: contain;

    background: #fff;

    border-radius: 999px;

    padding: 3px;

}



.cert-card-banner span {

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.cert-card-body {

    padding: 1rem 1.1rem 1.15rem;

}



.cert-card-body h3 {

    margin: 0 0 0.3rem;

    font-size: 1rem;

    font-weight: 750;

    color: #111827;

}



.cert-card-body > p {

    margin: 0 0 0.9rem;

    font-size: 0.8rem;

    color: #6b7280;

}



.cert-card-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

}



@media (max-width: 767.98px) {

    .cert-preview {

        grid-template-columns: 1fr;

    }



    .cert-preview::before {

        display: none;

    }

}



/* ---- Micro-credential badge verify + PDF ---- */

.badge-preview {
    display: grid;
    grid-template-columns: 32% 1fr;
    max-width: 720px;
    margin: 0 auto 1.5rem;
    border-radius: 18px;
    overflow: hidden;
    background: #fffcf8;
    box-shadow: 0 18px 40px rgba(15, 61, 46, 0.12);
    position: relative;
    font-family: var(--font-sans);
    color: #111827;
}
.badge-preview::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 32%;
    width: 3px;
    background: linear-gradient(180deg, var(--ines-yellow), var(--ines-yellow-dark));
    z-index: 2;
}
.badge-preview-side {
    background: var(--ines-green-dark);
    color: #fff;
    padding: 1.35rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.badge-preview-logo {
    width: 52px; height: 52px;
    border-radius: 999px;
    background: #fff;
    display: grid;
    place-items: center;
}
.badge-preview-logo img { width: 38px; height: 38px; object-fit: contain; }
.badge-preview-org { margin: 0; font-weight: 800; font-size: 0.9rem; }
.badge-preview-platform { margin: 0; font-size: 0.72rem; opacity: 0.85; }
.badge-preview-qr { margin-top: auto; text-align: center; }
.badge-preview-qr img {
    width: 72px; height: 72px;
    background: #fff; padding: 4px; border-radius: 8px;
}
.badge-preview-qr span { display: block; font-size: 0.65rem; margin-top: 0.3rem; opacity: 0.85; }
.badge-preview-id { margin: 0.4rem 0 0; font-size: 0.65rem; opacity: 0.75; word-break: break-all; }
.badge-preview-main { padding: 1.35rem 1.25rem 1rem; }
.badge-preview-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ines-green-dark);
}
.badge-preview-main h1 {
    margin: 0 0 0.65rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
    line-height: 1.15;
}
.badge-preview-label {
    margin: 0;
    font-size: 0.68rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.badge-preview-name {
    margin: 0.15rem 0 0.65rem;
    font-size: 1.25rem;
    font-weight: 800;
}
.badge-preview-body {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #374151;
}
.badge-preview-task { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: #6b7280; }
.badge-preview-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(15, 61, 46, 0.12);
    padding-top: 0.65rem;
}
.badge-preview-foot strong { display: block; font-size: 0.88rem; }
.badge-preview-foot em {
    font-style: normal;
    font-size: 0.65rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.badge-preview-actions { margin-top: 0.85rem; }
.badge-preview-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--ines-yellow);
    color: #1a2e24;
    font-weight: 750;
    font-size: 0.82rem;
    text-decoration: none;
}
.badge-share-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: #f7fbf8;
    border: 1px solid rgba(15, 61, 46, 0.1);
}
.badge-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
@media (max-width: 767.98px) {
    .badge-preview { grid-template-columns: 1fr; }
    .badge-preview::before { display: none; }
}


.as-page .app-content {

    background: #f3f5f4;

    padding: 0 !important;

    margin: 0 !important;

}



.as-page-wrap {

    max-width: none !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}



.as-shell {

    display: grid;

    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);

    min-height: calc(100vh - 4.5rem);

    align-items: stretch;

}



@media (max-width: 991.98px) {

    .as-shell {

        grid-template-columns: 1fr;

        min-height: 0;

    }

}



.as-rail {

    padding: 1.35rem 1.15rem 1.5rem;

    background:

        radial-gradient(circle at top right, rgba(240, 192, 32, 0.18), transparent 42%),

        linear-gradient(165deg, #0f5230 0%, #157a42 52%, #13b652 100%);

    color: #fff;

}



.as-identity {

    display: flex;

    gap: 0.85rem;

    align-items: flex-start;

    margin-bottom: 1.35rem;

}



.as-avatar {

    width: 56px;

    height: 56px;

    border-radius: 1rem;

    overflow: hidden;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.2);

    font-weight: 800;

    font-size: 1.25rem;

    color: #fff;

}



.as-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.as-avatar-lg {

    width: 72px;

    height: 72px;

    border-radius: 1.1rem;

    background: #e8f3ec;

    border: 1px solid #d7e4db;

    color: #0f5230;

}



.as-eyebrow {

    margin: 0 0 0.2rem;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(240, 192, 32, 0.95);

}



.as-identity-text h2 {

    margin: 0 0 0.2rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.15rem;

    font-weight: 700;

    line-height: 1.25;

    color: #fff;

}



.as-identity-text > p {

    margin: 0 0 0.45rem;

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.78);

    word-break: break-word;

}



.as-role {

    display: inline-flex;

    padding: 0.2rem 0.55rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.16);

    font-size: 0.7rem;

    font-weight: 750;

    letter-spacing: 0.03em;

    text-transform: uppercase;

}



.as-nav {

    display: grid;

    gap: 0.45rem;

}



.as-nav-link {

    display: flex;

    gap: 0.75rem;

    align-items: flex-start;

    padding: 0.75rem 0.85rem;

    border-radius: 0.95rem;

    text-decoration: none;

    color: rgba(255, 255, 255, 0.78);

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.as-nav-link i {

    margin-top: 0.15rem;

    font-size: 1.05rem;

}



.as-nav-link strong {

    display: block;

    font-size: 0.9rem;

    font-weight: 750;

    color: inherit;

}



.as-nav-link small {

    display: block;

    margin-top: 0.12rem;

    font-size: 0.72rem;

    opacity: 0.78;

}



.as-nav-link:hover,

.as-nav-link.is-active {

    color: #fff;

    background: rgba(255, 255, 255, 0.18);

    border-color: rgba(255, 255, 255, 0.22);

}



.as-nav-link.is-active {

    box-shadow: inset 3px 0 0 #f0c020;

}



.as-nav-link.is-access {

    margin-top: 0.45rem;

}



.as-panel-head-split {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 1rem;

}



.as-access-cta {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    flex-shrink: 0;

    padding: 0.55rem 0.9rem;

    border-radius: 999px;

    background: #0f5230;

    color: #fff;

    font-weight: 700;

    font-size: 0.82rem;

    text-decoration: none;

}



.as-access-cta:hover {

    color: #fff;

    background: #137a45;

}



.as-main {

    padding: 1.25rem 1.15rem 1.75rem;

    background: #f3f5f4;

}



.as-panel {

    max-width: 720px;

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1.15rem;

    padding: 1.35rem 1.35rem 1.2rem;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);

}



.as-panel-narrow {

    max-width: 560px;

}



.as-panel-head {

    margin-bottom: 1.25rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid #eef2f0;

}



.as-panel-head .as-eyebrow {

    color: var(--ines-green);

}



.as-panel-head h1 {

    margin: 0 0 0.35rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.55rem;

    font-weight: 700;

    color: #10261a;

}



.as-panel-head p {

    margin: 0;

    color: #6b7280;

    font-size: 0.92rem;

}



.as-tip {

    display: flex;

    gap: 0.65rem;

    align-items: flex-start;

    padding: 0.85rem 0.95rem;

    margin-bottom: 1.15rem;

    border-radius: 0.95rem;

    background: #f4f8f5;

    border: 1px solid #e5ebe7;

    color: #374151;

    font-size: 0.86rem;

    line-height: 1.45;

}



.as-tip i {

    color: #0f5230;

    margin-top: 0.1rem;

}



.as-avatar-row {

    display: flex;

    gap: 1rem;

    align-items: center;

    margin-bottom: 1.15rem;

}



.as-field-grow {

    flex: 1;

    min-width: 0;

}



.as-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem 0.9rem;

}



.as-grid-one,

.as-field-full {

    grid-column: 1 / -1;

}



.as-grid-one {

    display: grid;

    gap: 1rem;

}



@media (max-width: 640px) {

    .as-grid {

        grid-template-columns: 1fr;

    }



    .as-avatar-row {

        flex-direction: column;

        align-items: flex-start;

    }

}



.as-label {

    display: block;

    margin-bottom: 0.4rem;

    font-size: 0.82rem;

    font-weight: 750;

    color: #1f2937;

}



.as-form input[type="text"],

.as-form input[type="email"],

.as-form input[type="password"],

.as-form input[type="url"],

.as-form input[type="file"],

.as-form textarea,

.as-form select,

.as-form .form-control,

.as-form .form-select,

.as-form .auth-input {

    width: 100%;

    min-height: 48px;

    border-radius: 0.85rem;

    border: 1.5px solid #e5e7eb;

    background: #fff;

    padding: 0.65rem 0.9rem;

    font-size: 0.95rem;

}



.as-form textarea {

    min-height: 110px;

}



.as-form input:focus,

.as-form textarea:focus,

.as-form select:focus,

.as-form .form-control:focus,

.as-form .form-select:focus,

.as-form .auth-input:focus {

    border-color: var(--ines-green);

    box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);

    outline: none;

}



.as-help {

    margin: 0.35rem 0 0;

    font-size: 0.75rem;

    color: #6b7280;

}



.as-error {

    margin-top: 0.35rem;

    font-size: 0.8rem;

    color: #b91c1c;

}



.as-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

    margin-top: 1.35rem;

    padding-top: 1.1rem;

    border-top: 1px solid #eef2f0;

}



.as-actions-wrap {

    align-items: center;

}



.lc-btn-ghost.is-danger {

    color: #b91c1c;

}



.lc-btn-ghost.is-danger:hover {

    background: #fef2f2;

    border-color: #fecaca;

    color: #991b1b;

}



.as-email-list {

    display: grid;

    gap: 0.55rem;

}



.as-email-item {

    display: flex;

    gap: 0.75rem;

    align-items: flex-start;

    padding: 0.9rem 1rem;

    border-radius: 0.95rem;

    background: #f8faf9;

    border: 1.5px solid #e5ebe7;

    cursor: pointer;

}



.as-email-item.is-primary,

.as-email-item:has(input:checked) {

    border-color: #13b652;

    background: #eef8f1;

    box-shadow: 0 0 0 2px rgba(19, 182, 82, 0.1);

}



.as-email-item input {

    margin-top: 0.25rem;

    accent-color: #0f5230;

}



.as-email-body strong {

    display: block;

    font-size: 0.92rem;

    color: #111827;

    word-break: break-word;

}



.as-email-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

    margin-top: 0.4rem;

}



.as-email-badges em {

    font-style: normal;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    padding: 0.2rem 0.45rem;

    border-radius: 999px;

    background: #e5ebe7;

    color: #4b5563;

}



.as-email-badges em.is-ok {

    background: #dcfce7;

    color: #166534;

}



.as-email-badges em.is-warn {

    background: #fef3c7;

    color: #92400e;

}



.as-email-badges em.is-primary {

    background: #0f5230;

    color: #fff;

}



.as-divider {

    margin: 1.5rem 0 1rem;

    padding-top: 1.15rem;

    border-top: 1px solid #eef2f0;

}



.as-divider h2 {

    margin: 0 0 0.25rem;

    font-size: 1.05rem;

    font-weight: 800;

    color: #10261a;

}



.as-divider p {

    margin: 0;

    font-size: 0.86rem;

    color: #6b7280;

}



.as-empty {

    display: grid;

    justify-items: center;

    gap: 0.5rem;

    padding: 1.5rem 1rem;

    text-align: center;

    color: #6b7280;

    border: 1px dashed #d7e4db;

    border-radius: 0.95rem;

    background: #f8faf9;

}



.as-empty i {

    font-size: 1.4rem;

    color: #0f5230;

}



.as-empty p {

    margin: 0;

    font-size: 0.9rem;

}



@media (max-width: 991.98px) {

    .as-rail {

        border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    }



    .as-nav {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }



    .as-nav-link {

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 0.35rem;

        padding: 0.65rem 0.4rem;

    }



    .as-nav-link small {

        display: none;

    }



    .as-nav-link.is-active {

        box-shadow: inset 0 -3px 0 #f0c020;

    }

}



/* ---- Sign-out confirmation (light) ---- */

.lo-simple {

    display: flex;

    justify-content: center;

    padding: 1.5rem 0 2rem;

}



.lo-simple-card {

    width: min(100%, 420px);

    padding: 1.5rem 1.35rem 1.25rem;

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1rem;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);

    text-align: center;

}



.lo-simple-icon {

    width: 2.75rem;

    height: 2.75rem;

    margin: 0 auto 0.85rem;

    border-radius: 0.85rem;

    display: grid;

    place-items: center;

    background: #f4f8f5;

    border: 1px solid #e5ebe7;

    color: #0f5230;

    font-size: 1.15rem;

}



.lo-simple-card h1 {

    margin: 0 0 0.4rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 1.35rem;

    font-weight: 700;

    color: #10261a;

}



.lo-simple-card > p {

    margin: 0 0 0.35rem;

    color: #4b5563;

    font-size: 0.92rem;

}



.lo-simple-user {

    margin-bottom: 1.15rem !important;

    font-size: 0.8rem !important;

    color: #6b7280 !important;

    word-break: break-word;

}



.lo-simple-actions {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 0.35rem;

    padding-top: 1rem;

    border-top: 1px solid #eef2f0;

}



/* ---- Legal / Help pages ---- */

.legal-page .app-content,

body.legal-page > main {

    background: #f3f5f4;

}



.legal-shell {

    padding: 2rem 0 3.5rem;

}



.legal-wrap {

    max-width: 880px;

}



.legal-nav {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-bottom: 1.25rem;

}



.legal-nav a {

    padding: 0.45rem 0.85rem;

    border-radius: 999px;

    border: 1px solid #e5ebe7;

    background: #fff;

    color: #4b5563;

    text-decoration: none;

    font-size: 0.82rem;

    font-weight: 700;

}



.legal-nav a.is-active,

.legal-nav a:hover {

    background: #0f5230;

    border-color: #0f5230;

    color: #fff;

}



.legal-doc {

    background: #fff;

    border: 1px solid #e5ebe7;

    border-radius: 1.15rem;

    padding: 1.75rem 1.5rem 1.35rem;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);

}



.legal-eyebrow {

    margin: 0 0 0.35rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--ines-green);

}



.legal-doc-head h1 {

    margin: 0 0 0.4rem;

    font-family: Fraunces, Georgia, serif;

    font-size: 2rem;

    font-weight: 700;

    color: #10261a;

}



.legal-updated {

    margin: 0;

    color: #6b7280;

    font-size: 0.88rem;

}



.legal-doc-body {

    margin-top: 1.35rem;

    color: #374151;

    font-size: 0.98rem;

    line-height: 1.7;

}



.legal-doc-body h2 {

    margin: 1.6rem 0 0.65rem;

    font-size: 1.15rem;

    font-weight: 800;

    color: #10261a;

}



.legal-doc-body p,

.legal-doc-body ul {

    margin: 0 0 0.95rem;

}



.legal-doc-body ul {

    padding-left: 1.2rem;

}



.legal-doc-body li {

    margin-bottom: 0.4rem;

}



.legal-doc-body a {

    color: #0f5230;

    font-weight: 700;

}



.legal-doc-foot {

    margin-top: 1.75rem;

    padding-top: 1rem;

    border-top: 1px solid #eef2f0;

    font-size: 0.86rem;

    color: #6b7280;

}



.legal-doc-foot a {

    color: #0f5230;

    font-weight: 800;

    text-decoration: none;

}



.legal-doc-foot a:hover {

    text-decoration: underline;

}



.help-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.75rem;

    margin-bottom: 1.5rem;

}



.help-card {

    display: grid;

    gap: 0.3rem;

    padding: 1rem 1.05rem;

    border-radius: 1rem;

    border: 1px solid #e5ebe7;

    background: #f8faf9;

    text-decoration: none;

    color: inherit;

    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;

}



.help-card i {

    color: #0f5230;

    font-size: 1.2rem;

}



.help-card strong {

    color: #10261a;

    font-size: 0.95rem;

}



.help-card span {

    color: #6b7280;

    font-size: 0.84rem;

    line-height: 1.4;

}



.help-card:hover {

    border-color: #13b652;

    background: #eef8f1;

    transform: translateY(-2px);

}



.help-faq {

    border: 1px solid #e5ebe7;

    border-radius: 0.85rem;

    background: #f8faf9;

    margin-bottom: 0.55rem;

    padding: 0.75rem 0.95rem;

}



.help-faq summary {

    cursor: pointer;

    font-weight: 750;

    color: #10261a;

}



.help-faq p {

    margin: 0.55rem 0 0;

    color: #4b5563;

    font-size: 0.92rem;

}



@media (max-width: 640px) {

    .help-grid {

        grid-template-columns: 1fr;

    }



    .legal-doc {

        padding: 1.25rem 1.05rem 1.1rem;

    }



    .legal-doc-head h1 {

        font-size: 1.55rem;

    }

}



.faq-groups {

    display: grid;

    gap: 1.5rem;

}



.faq-group h2 {

    margin: 0 0 0.75rem;

}



.help-faq-lead {

    margin: -0.35rem 0 0.85rem;

    color: #6b7280;

    font-size: 0.92rem;

}



.notify-pref-list {

    display: grid;

    gap: 0.75rem;

}



.notify-pref-row {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    padding: 0.85rem 0.95rem;

    border: 1px solid var(--ines-gray-200, #e5e7eb);

    border-radius: 10px;

    background: #f8faf9;

    cursor: pointer;

}



.notify-pref-row strong {

    display: block;

    font-size: 0.92rem;

    color: #10261a;

}



.notify-pref-row small {

    display: block;

    margin-top: 0.2rem;

    color: #6b7280;

    font-size: 0.8rem;

}



.notify-pref-row .form-check-input {

    margin-top: 0.2rem;

    flex-shrink: 0;

}



/* Student dashboard: career, reminders, recommendations */

.sd-remind-list,

.sd-reco-list,

.sd-career-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.75rem;

}



.sd-remind-list li,

.sd-reco-list li {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 0.85rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid var(--ines-gray-200);

}



.sd-remind-list li:last-child,

.sd-reco-list li:last-child,

.sd-career-list li:last-child {

    border-bottom: 0;

    padding-bottom: 0;

}



.sd-remind-list strong,

.sd-reco-list strong,

.sd-career-list strong {

    display: block;

    font-size: 0.92rem;

    color: var(--ines-gray-800);

}



.sd-remind-list span,

.sd-reco-list span,

.sd-career-list span,

.sd-remind-list em,

.sd-career-list em {

    display: block;

    margin-top: 0.2rem;

    font-size: 0.78rem;

    color: var(--ines-gray-600);

    font-style: normal;

}



.sd-empty-inline {

    font-size: 0.88rem;

    color: var(--ines-gray-600);

}



/* Assignment / quiz mark results */

.mark-hero-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 1.25rem;

}



.mark-eyebrow {

    margin: 0;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--ines-gray-600);

}



.mark-score {

    margin: 0.2rem 0;

    font-size: 2rem;

    font-weight: 800;

    color: var(--ines-green-dark);

    line-height: 1.1;

}



.mark-score small {

    font-size: 1rem;

    font-weight: 600;

    color: var(--ines-gray-600);

}



.mark-score.is-warn {

    color: #b45309;

}



.mark-score-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

    gap: 0.65rem;

}



.mark-chip {

    border: 1px solid var(--ines-gray-200);

    border-radius: 10px;

    padding: 0.7rem 0.8rem;

    background: #f7faf8;

}



.mark-chip span {

    display: block;

    font-size: 0.72rem;

    color: var(--ines-gray-600);

    margin-bottom: 0.25rem;

}



.mark-chip strong {

    font-size: 1.05rem;

    color: var(--ines-gray-800);

}



.mark-chip.is-accent {

    background: rgba(19, 182, 82, 0.1);

    border-color: rgba(19, 182, 82, 0.28);

}



.mark-list {

    margin: 0.35rem 0 0;

    padding-left: 1.1rem;

}



.mark-q {

    border: 1px solid var(--ines-gray-200);

    border-radius: 10px;

    padding: 0.85rem 0.95rem;

    margin-bottom: 0.7rem;

}



.mark-q.is-ok { border-left: 3px solid var(--ines-green); }

.mark-q.is-bad { border-left: 3px solid #dc2626; }

.mark-q.is-soft { border-left: 3px solid #d97706; }



.mark-q header {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 0.5rem;

    margin-bottom: 0.45rem;

}



.mark-q-pts {

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--ines-gray-600);

}

/* —— Learning studio (professional) —— */
.learn-studio-page .app-content {
    background:
        radial-gradient(900px 420px at 8% -10%, rgba(19, 182, 82, 0.08), transparent 60%),
        radial-gradient(700px 380px at 100% 0%, rgba(240, 192, 32, 0.08), transparent 55%),
        #f4f7f5;
}

.ls-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1.15rem 2.5rem;
    display: grid;
    gap: 1.25rem;
    font-family: var(--font-sans);
}

.ls-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.1rem;
}

.ls-kicker,
.ls-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7c72;
}

.ls-header-copy h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.7rem, 2.4vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ines-green-dark);
}

.ls-header-copy p {
    margin: 0;
    max-width: 36rem;
    color: #5b6b63;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ls-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.ls-header-toolbar {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: stretch;
    min-width: 0;
}

.ls-search-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.ls-header-toolbar-btns {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
}

.ls-header-toolbar-btns .ls-btn {
    white-space: nowrap;
}

.llc-modules-multi {
    min-height: 7.5rem;
}

.llc-meeting-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(19, 182, 82, 0.12);
    color: var(--ines-green-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.llc-dept-note {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgba(19, 182, 82, 0.08);
    color: #3d4f46;
    font-size: 0.88rem;
}

@media (max-width: 767.98px) {
    .ls-header-toolbar {
        flex-wrap: wrap;
    }
    .ls-header-toolbar-btns {
        width: 100%;
        justify-content: flex-end;
    }
}

.ls-search {
    position: relative;
    min-width: min(100%, 260px);
}

.ls-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7a8a82;
    font-size: 0.9rem;
}

.ls-search input {
    width: 100%;
    border: 1px solid #d7e0da;
    background: #fff;
    border-radius: 12px;
    padding: 0.7rem 0.9rem 0.7rem 2.2rem;
    font: inherit;
    font-size: 0.88rem;
    color: #1f2a24;
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 82, 48, 0.03);
}

.ls-search input:focus {
    border-color: rgba(19, 182, 82, 0.55);
    box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);
}

.ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 11px;
    padding: 0.68rem 1rem;
    font-size: 0.86rem;
    font-weight: 720;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.ls-btn:hover { transform: translateY(-1px); }

.ls-btn-primary {
    background: var(--ines-green);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(19, 182, 82, 0.22);
}

.ls-btn-primary:hover { background: #10a049; color: #fff !important; }

.ls-btn-ghost {
    background: #fff;
    border-color: #d7e0da;
    color: var(--ines-green-dark) !important;
}

.ls-btn-dark {
    background: var(--ines-green-dark);
    color: #fff !important;
}

.ls-btn-dark:hover { background: #0c4126; color: #fff !important; }

.ls-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 800px) {
    .ls-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ls-stats article {
    background: rgba(255,255,255,0.82);
    border: 1px solid #e2ebe5;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    backdrop-filter: blur(6px);
}

.ls-stats span {
    display: block;
    font-size: 0.75rem;
    font-weight: 650;
    color: #6b7c72;
    margin-bottom: 0.2rem;
}

.ls-stats strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ines-green-dark);
    letter-spacing: -0.02em;
}

.ls-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.28rem;
    width: fit-content;
    max-width: 100%;
    background: #e8efe9;
    border-radius: 14px;
}

.ls-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 11px;
    color: #5b6b63;
    font-weight: 650;
    font-size: 0.88rem;
    text-decoration: none;
}

.ls-tabs a em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 750;
    color: #7a8a82;
    background: rgba(255,255,255,0.7);
    border-radius: 999px;
    padding: 0.08rem 0.42rem;
}

.ls-tabs a.is-active {
    background: #fff;
    color: var(--ines-green-dark);
    box-shadow: 0 4px 14px rgba(15, 82, 48, 0.08);
}

.ls-tabs a.is-active em {
    background: rgba(19, 182, 82, 0.12);
    color: var(--ines-green-dark);
}

.ls-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.15rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .ls-layout { grid-template-columns: 1fr; }
}

.ls-main {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.ls-continue {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.25fr);
    gap: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #dfe8e2;
    box-shadow: 0 18px 40px rgba(15, 82, 48, 0.06);
}

@media (max-width: 860px) {
    .ls-continue { grid-template-columns: 1fr; }
}

.ls-continue-media {
    min-height: 240px;
    position: relative;
    overflow: hidden;
}

.ls-continue-media img,
.ls-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ls-continue-fallback,
.ls-card-mark {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    font-size: 2.8rem;
    color: var(--ines-green-dark);
    opacity: 0.72;
}

.ls-continue-body {
    padding: 1.45rem 1.5rem 1.4rem;
    display: grid;
    align-content: center;
    gap: 0.55rem;
}

.ls-continue-body h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #12261b;
    line-height: 1.25;
}

.ls-continue-desc {
    margin: 0;
    color: #5b6b63;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ls-continue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ls-continue-meta span,
.ls-code,
.ls-dept {
    font-size: 0.72rem;
    font-weight: 700;
    color: #5b6b63;
    background: #eef4f0;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
}

.ls-continue-progress,
.ls-card-progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ls-bar {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: #e8efe9;
    overflow: hidden;
}

.ls-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ines-green-dark), var(--ines-green));
}

.ls-continue-progress em,
.ls-card-progress em {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    color: #5b6b63;
    white-space: nowrap;
}

.ls-continue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.25rem;
}

.ls-lecturer {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #5b6b63;
    font-weight: 600;
}

.ls-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ines-green-dark);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 750;
    overflow: hidden;
    flex-shrink: 0;
}

.ls-avatar.sm { width: 24px; height: 24px; font-size: 0.65rem; }

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

.ls-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.4rem;
    border-radius: 20px;
    border: 1px solid #dfe8e2;
    background:
        linear-gradient(115deg, rgba(19, 182, 82, 0.1), rgba(255,255,255,0.92) 48%),
        #fff;
}

.ls-banner h2 {
    margin: 0 0 0.3rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ines-green-dark);
}

.ls-banner p {
    margin: 0;
    color: #5b6b63;
    font-size: 0.9rem;
}

.ls-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.ls-section-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 780;
    color: #12261b;
}

.ls-section-head p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #6b7c72;
}

.ls-view {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 10px;
    background: #e8efe9;
}

.ls-view button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7c72;
}

.ls-view button.is-active {
    background: #fff;
    color: var(--ines-green-dark);
    box-shadow: 0 1px 3px rgba(15, 82, 48, 0.08);
}

.ls-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .ls-rail { grid-template-columns: 1fr; }
}

.ls-rail-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2ebe5;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}

.ls-rail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 82, 48, 0.08);
    color: inherit;
}

.ls-rail-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 1.35rem;
    color: var(--ines-green-dark);
}

.ls-rail-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ls-rail-card strong {
    display: block;
    font-size: 0.9rem;
    color: #12261b;
    margin-bottom: 0.15rem;
}

.ls-rail-card span {
    display: block;
    font-size: 0.75rem;
    color: #6b7c72;
    margin-bottom: 0.4rem;
}

.ls-mini-bar {
    height: 4px;
    border-radius: 999px;
    background: #e8efe9;
    overflow: hidden;
}

.ls-mini-bar i {
    display: block;
    height: 100%;
    background: var(--ines-green);
    font-style: normal;
}

/* ── Next in your path ──────────────────────────────────────────────── */
.ls-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .ls-path-grid { grid-template-columns: 1fr; }
}

.ls-path-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed #cfdcd3;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ls-path-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 82, 48, 0.08);
    border-color: var(--ines-green);
    color: inherit;
}

.ls-path-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #7d8f84;
    background: #f1f6f2;
}

.ls-path-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ls-path-thumb i {
    font-size: 1.4rem;
}

.ls-path-body {
    min-width: 0;
}

.ls-path-code {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #7d8f84;
    margin-bottom: 0.15rem;
}

.ls-path-body strong {
    display: block;
    font-size: 0.9rem;
    color: #12261b;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.ls-path-lock,
.ls-path-ready {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.ls-path-lock {
    color: #a8791b;
    background: #fff7e4;
    border: 1px solid #f3e0ae;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ls-path-ready {
    color: var(--ines-green-dark);
    background: #e7f4ec;
    border: 1px solid #cfe8d9;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
}

.ls-path-card.is-locked {
    background: #fafcfa;
}

.ls-path-card.is-locked .ls-path-body strong {
    color: #5d6e64;
}

.ls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) {
    .ls-grid:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .ls-grid:not(.is-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .ls-grid:not(.is-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .ls-grid:not(.is-list) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Public course catalog (/courses/) — three cards per row on desktop */
.catalog-studio-page .ls-grid:not(.is-list) {
    grid-template-columns: 1fr;
}
@media (min-width: 576px) {
    .catalog-studio-page .ls-grid:not(.is-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .catalog-studio-page .ls-grid:not(.is-list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ls-grid.is-list {
    grid-template-columns: 1fr;
}

.ls-grid.is-list .ls-card-link {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

.ls-grid.is-list .ls-card-media {
    aspect-ratio: auto;
    min-height: 160px;
}

.ls-card {
    position: relative;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2ebe5;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 82, 48, 0.045);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ls-wish {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
}
.ls-wish-btn {
    width: 2.15rem;
    height: 2.15rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: #5c6f64;
    box-shadow: 0 6px 16px rgba(15, 82, 48, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ls-wish-btn.is-on,
.ls-wish-btn.is-on i { color: #c62828; }

.ls-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(15, 82, 48, 0.1);
}

.ls-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.ls-card-media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.ls-card-media .ls-card-img {
    transition: transform .35s ease;
}

.ls-card:hover .ls-card-img {
    transform: scale(1.04);
}

.ls-chip {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 750;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--ines-green-dark);
    border: 1px solid rgba(15, 82, 48, 0.08);
}

.ls-chip.is-new {
    background: rgba(240, 192, 32, 0.92);
    color: #5c4500;
    border-color: transparent;
}

.ls-chip.is-done {
    background: rgba(19, 182, 82, 0.95);
    color: #fff;
    border-color: transparent;
}

.ls-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.85rem;
    background: linear-gradient(transparent, rgba(12, 40, 24, 0.72));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.ls-card:hover .ls-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

.ls-card-body {
    padding: 1rem 1.05rem 1.1rem;
    display: grid;
    gap: 0.45rem;
}

.ls-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ls-card-body h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 780;
    color: #12261b;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.ls-card-body > p {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7c72;
}

.ls-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.ls-go {
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--ines-green-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.tint-mint { background: linear-gradient(165deg, #dff5e8, #f5fbf7); }
.tint-sage { background: linear-gradient(165deg, #dce8e0, #f4f8f5); }
.tint-cream { background: linear-gradient(165deg, #fff4d4, #fffdf6); }
.tint-olive { background: linear-gradient(165deg, #e4ebd4, #f7f9f1); }
.tint-fog { background: linear-gradient(165deg, #e4ece8, #f7faf8); }

.ls-side {
    display: grid;
    gap: 0.9rem;
}

.ls-side-panel,
.ls-side-cta {
    background: #fff;
    border: 1px solid #e2ebe5;
    border-radius: 18px;
    padding: 1.05rem 1.1rem;
}

.ls-side-panel h3,
.ls-side-cta h3 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    font-weight: 780;
    color: #12261b;
}

.ls-side-panel ul {
    margin: 0;
    padding-left: 1.05rem;
    color: #5b6b63;
    font-size: 0.84rem;
    line-height: 1.55;
}

.ls-side-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.85rem;
    font-size: 0.84rem;
    font-weight: 720;
    color: var(--ines-green-dark);
    text-decoration: none;
}

.ls-side-cta {
    background:
        linear-gradient(160deg, rgba(15, 82, 48, 0.96), #0f5230 55%, #146338);
    border-color: transparent;
    color: #fff;
}

.ls-side-cta .ls-eyebrow { color: rgba(240, 192, 32, 0.95); }
.ls-side-cta h3 { color: #fff; }
.ls-side-cta p {
    margin: 0 0 0.95rem;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.5;
}

.ls-side-links {
    display: grid;
    gap: 0.35rem;
}

.ls-side-links a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.45rem;
    border-radius: 10px;
    color: #2d3d34;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 650;
}

.ls-side-links a:hover {
    background: #eef4f0;
    color: var(--ines-green-dark);
}

.ls-side-links i { color: var(--ines-green); }

.ls-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.8rem 1.25rem;
    border-radius: 20px;
    border: 1px dashed #cfdad3;
    background: rgba(255,255,255,0.7);
}

.ls-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(19, 182, 82, 0.12);
    color: var(--ines-green-dark);
    font-size: 1.4rem;
}

.ls-empty h4 {
    margin: 0 0 0.35rem;
    font-weight: 780;
    color: #12261b;
}

.ls-empty p {
    margin: 0 auto 1rem;
    max-width: 28rem;
    color: #6b7c72;
}

.ls-cover-img,
.ls-continue-media img,
.ls-rail-icon img,
.ls-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ls-continue-media {
    background: #dfe8e2;
}

.ls-rail-icon {
    background: #dfe8e2;
}

.ls-card-media {
    background: #dfe8e2;
}

.ls-card-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7c72;
    line-height: 1.45;
}

.ls-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1.35rem;
    font-size: 0.88rem;
    color: #5b6b63;
}

.ls-pager a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #d7e0da;
    color: var(--ines-green-dark);
    font-weight: 700;
    text-decoration: none;
}

.ls-pager a:hover {
    background: #eef4f0;
}

/* Lecturer live classes studio */
.llc-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
}

@media (max-width: 1100px) {
    .llc-layout {
        grid-template-columns: 1fr;
    }
}

.llc-side {
    position: sticky;
    top: 1rem;
}

.llc-form-hint {
    margin: 0 0 0.85rem;
    color: #4a6356;
    font-size: 0.88rem;
    line-height: 1.45;
}

.llc-form-panel h3 {
    margin-bottom: 1rem;
}

.llc-form {
    display: grid;
    gap: 0.75rem;
}

.llc-field {
    display: grid;
    gap: 0.28rem;
}

.llc-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #3d4f45;
}

.llc-field small {
    color: #6b7c72;
    font-size: 0.72rem;
}

.llc-field .form-control,
.llc-field .form-select,
.llc-field .auth-input,
.llc-form .form-control,
.llc-form .form-select,
.llc-form .auth-input {
    border-radius: 10px;
    border-color: #d7e0da;
    font-size: 0.88rem;
}

.llc-field-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

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

@media (max-width: 520px) {
    .llc-field-row,
    .llc-field-row-2 {
        grid-template-columns: 1fr;
    }
}

.llc-checks {
    display: grid;
    gap: 0.35rem;
    margin: 0.15rem 0 0.35rem;
}

.llc-checks label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #3d4f45;
    font-weight: 600;
}

.llc-error {
    color: #b42318;
    font-size: 0.75rem;
}

.llc-card-actions {
    gap: 0.65rem;
}

.llc-action-btns {
    display: inline-flex;
    gap: 0.3rem;
}

.llc-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e0da;
    color: var(--ines-green-dark);
    background: #fff;
    text-decoration: none;
}

.llc-icon-btn:hover {
    background: #eef4f0;
    color: var(--ines-green-dark);
}

.llc-icon-btn.is-danger {
    color: #b42318;
}

.llc-icon-btn.is-danger:hover {
    background: #fef3f2;
    color: #912018;
}

.llc-edit-wrap {
    max-width: 820px;
}

.llc-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

/* ---- Live classroom YouTube-style (stream left, chat right) ---- */
.lcr-yt-page .lcr-yt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 72px);
    height: calc(100vh - 72px);
    margin: 0;
    background: #0b1210;
    border-top: 1px solid #1a2e24;
    overflow: hidden;
    box-sizing: border-box;
}
.lcr-yt-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0b1210;
}
@media (max-width: 960px) {
    .lcr-yt-page .lcr-yt {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
        height: auto;
        margin: 0;
        overflow: visible;
    }
    .lcr-yt-page .lcr-yt > .lcr-yt-chat {
        /* drawer handled separately on mobile */
        position: fixed;
    }
}
.lcr-yt-player {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    background: #0b1210;
    padding: 0.65rem 0.85rem 0.85rem;
    flex: 1;
    overflow-x: hidden;
}
.lcr-stage-top {
    display: none;
    justify-content: flex-end;
    margin-bottom: 0.45rem;
}
.lcr-chat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #2a4035;
    background: #15241d;
    color: #dff3e8;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.lcr-chat-toggle.is-open {
    background: #13b652;
    border-color: #13b652;
    color: #fff;
}
.lcr-yt-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 0.85rem;
    overflow: hidden;
    background: #000;
    border: 1px solid #1f3329;
    height: min(52vh, 520px);
    min-height: 260px;
    max-height: 560px;
    aspect-ratio: auto;
}
.lcr-stage-layout {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.lcr-stage-main {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #000;
    overflow: visible;
}
.lcr-participant-rail {
    width: 196px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.45rem;
    background: #0a1410;
    border-left: 1px solid #1f3329;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.lcr-participant-rail::-webkit-scrollbar {
    width: 4px;
}
.lcr-participant-rail::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}
.lcr-participant-rail .lcr-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 72px;
    margin: 0;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    overflow: hidden;
    background: #04150c;
    flex-shrink: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lcr-participant-rail .lcr-tile.is-speaking {
    border-color: #f0c020;
    box-shadow: 0 0 0 1px rgba(240, 192, 32, 0.35);
}
.lcr-participant-rail .lcr-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #04150c;
}
.lcr-participant-rail .lcr-tile figcaption {
    position: absolute;
    left: 0.35rem;
    top: 0.3rem;
    bottom: auto;
    padding: 0.12rem 0.4rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    z-index: 2;
    max-width: calc(100% - 0.7rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lcr-speak-badge {
    position: absolute;
    left: 0.35rem;
    bottom: 0.3rem;
    z-index: 3;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #f0c020;
    color: #111827;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lcr-tile.is-speaking .lcr-speak-badge {
    display: inline-flex;
}
.lcr-present-label.is-speaking {
    background: #f0c020;
    color: #111827;
}
.lcr-audio-unlock { display: none !important; }
.lcr-mic-status {
    position: absolute;
    left: 0.35rem;
    bottom: 0.3rem;
    z-index: 3;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #9fd9b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}
.lcr-tile.is-mic-muted .lcr-mic-status {
    color: #fda4af;
    background: rgba(127, 29, 29, 0.75);
}
.lcr-tile.is-focused {
    border-color: #f0c020 !important;
    box-shadow: 0 0 0 1px rgba(240, 192, 32, 0.45);
}
.lcr-participant-rail .lcr-tile {
    cursor: pointer;
}
.lcr-person-mic {
    display: inline-flex;
    margin-left: 0.25rem;
    color: #13b652;
    font-size: 0.78rem;
    vertical-align: middle;
}
.lcr-person-card.is-muted .lcr-person-mic { color: #f87171; }
.lcr-person-actions {
    display: inline-flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.lcr-icon-btn {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border-radius: 0.45rem;
    border: 1px solid #2a4035;
    background: #15241d;
    color: #9fd9b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
}
.lcr-icon-btn:hover { background: #1c3228; color: #fff; }
.lcr-icon-btn.is-danger { color: #fda4af; }
.lcr-yt.chat-disabled .lcr-composer { display: none !important; }
.lcr-yt.chat-disabled .lcr-disabled { display: block; }
.lcr-yt.hide-peer-names .lcr-participant-rail figcaption { display: none; }
.lcr-host-settings {
    position: absolute;
    right: 0.75rem;
    bottom: 4.2rem;
    z-index: 12;
    width: min(360px, calc(100% - 1.5rem));
    max-height: min(72vh, 560px);
    overflow: auto;
    background: linear-gradient(180deg, #15241d 0%, #0f1a15 100%);
    border: 1px solid #2a4035;
    border-radius: 1rem;
    padding: 0.85rem 0.95rem 1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color: #dff3e8;
}
.lcr-host-settings[hidden] { display: none !important; }
.lcr-host-settings header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    position: sticky;
    top: 0;
    background: #15241d;
    z-index: 1;
    padding-bottom: 0.45rem;
}
.lcr-host-settings header strong { font-size: 0.95rem; display: block; }
.lcr-setting-lede {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: #8aa897;
}
.lcr-host-settings header button {
    width: 2rem; height: 2rem;
    border: 0; border-radius: 50%;
    background: #13b652; color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lcr-setting-grid section {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #1f3329;
    border-radius: 0.75rem;
    background: rgba(0,0,0,0.18);
}
.lcr-setting-grid h4 {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7ea892;
}
.lcr-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
    margin: 0.35rem 0;
}
.lcr-setting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.lcr-share-menu {
    position: absolute;
    left: 50%;
    bottom: 4.25rem;
    transform: translateX(-50%);
    z-index: 25;
    width: min(320px, calc(100% - 1.5rem));
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem;
    background: #12201a;
    border: 1px solid #2a4035;
    border-radius: 0.85rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.lcr-share-menu-title {
    margin: 0 0 0.35rem;
    padding: 0.15rem 0.55rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7ea892;
}
.lcr-share-menu[hidden] { display: none !important; }
.lcr-share-menu button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    background: transparent;
    color: #dff3e8;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.lcr-share-menu button span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}
.lcr-share-menu button span strong {
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff;
}
.lcr-share-menu button span small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #8aa897;
    line-height: 1.25;
}
.lcr-share-menu button i {
    flex-shrink: 0;
    width: 1.35rem;
    text-align: center;
    font-size: 1.05rem;
    color: #9fd9b5;
}
.lcr-share-menu button:hover { background: #1c3228; }
.lcr-share-menu button.is-stop { color: #fda4af; }
.lcr-share-menu button.is-stop span strong { color: #fda4af; }
.lcr-share-menu button.is-stop i { color: #fda4af; }
.lcr-tile.is-pip {
    border-color: #13b652;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.lcr-yt-stage .lcr-share-menu {
    /* keep above controls */
}
.lcr-yt-controls .lcr-ctrl {
    position: relative;
}
.lcr-ctrl-wave {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding-bottom: 0.35rem;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.lcr-ctrl-wave.is-active { opacity: 1; }
.lcr-ctrl-wave span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: #13b652;
    height: calc(4px + (var(--lcr-level, 0) * 10px));
    transition: height 80ms linear;
}
.lcr-ctrl-wave span:nth-child(3) { height: calc(6px + (var(--lcr-level, 0) * 14px)); }
.lcr-yt-controls .lcr-ctrl i { position: relative; z-index: 1; }
.lcr-person-card.is-muted { opacity: 0.75; }
.lcr-present-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 1;
}
.lcr-present-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* never crop — full frame like Google Meet */
    background: #000;
}
/* Google Meet-style: shared screen owns the stage; full desktop visible */
.lcr-yt-stage.is-presenting {
    aspect-ratio: auto;
    height: min(58vh, 560px);
    min-height: 280px;
    max-height: 600px;
    border-radius: 0.5rem;
}
.lcr-yt-stage.is-presenting .lcr-present-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0a0a0a;
}
.lcr-yt-page.is-presenting-mode .lcr-yt-extras {
    display: none;
}
.lcr-yt-page.is-presenting-mode .lcr-yt-meta {
    padding-top: 0.45rem;
    padding-bottom: 0.35rem;
}
.lcr-yt-page.is-presenting-mode .lcr-yt-meta h1 {
    font-size: 1rem;
}
.lcr-yt-page.is-presenting-mode .lcr-yt {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
}
.lcr-present-label {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 4;
    padding: 0.25rem 0.55rem;
    border-radius: 0.35rem;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.lcr-yt-stage.is-presenting .lcr-present-label {
    background: #13b652;
}
.lcr-session-ended {
    position: absolute; inset: 0; z-index: 12;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.55rem; padding: 1.25rem; text-align: center;
    background: rgba(8, 14, 11, 0.92); color: #e8f0eb;
}
.lcr-session-ended[hidden] { display: none !important; }
.lcr-session-ended .lcr-kicker { margin: 0; color: #7ea892; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.lcr-session-ended h2 { margin: 0; font-size: 1.25rem; color: #fff; }
.lcr-session-ended p { margin: 0; color: #9bb5a6; font-size: 0.9rem; }
.lcr-pip-tray {
    display: none;
}
.lcr-yt-player .lcr-video-grid {
    display: contents;
}
.lcr-yt-controls {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.45rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.88));
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.lcr-yt-controls .lcr-ctrl.is-menu-open {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.lcr-yt-controls::-webkit-scrollbar { display: none; }
.lcr-yt-controls .lcr-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(20,30,26,0.92);
    color: #fff;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.lcr-yt-controls .lcr-ctrl:hover {
    transform: translateY(-1px);
    background: rgba(35, 55, 45, 0.95);
}
.lcr-yt-controls .lcr-ctrl span { display: none; }
.lcr-yt-controls .lcr-ctrl.is-accent {
    background: #13b652;
    border-color: #13b652;
    color: #fff;
}
.lcr-yt-controls .lcr-ctrl.is-danger {
    background: rgba(127, 29, 29, 0.55);
    border-color: rgba(248, 113, 113, 0.45);
}
.lcr-yt-controls .lcr-ctrl.is-off {
    background: #b91c1c;
    border-color: #ef4444;
    color: #fff;
    opacity: 1;
    text-decoration: none;
}
.lcr-yt-controls .lcr-ctrl.is-on {
    background: #f59e0b;
    border-color: #fbbf24;
    color: #111827;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}
.lcr-yt-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 0.85rem;
    color: #e8f0eb;
}
.lcr-yt-meta-main { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; }
.lcr-yt-meta .lcr-back-mini {
    width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #1a2e24; color: #9fd9b5; text-decoration: none;
}
.lcr-yt-meta .lcr-kicker {
    margin: 0; font-size: 0.72rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: #7ea892; font-weight: 700;
}
.lcr-yt-meta h1 {
    margin: 0.2rem 0 0.4rem;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    color: #fff;
}
.lcr-yt-sub {
    margin: 0; display: flex; flex-wrap: wrap; gap: 0.65rem;
    align-items: center; color: #9bb5a6; font-size: 0.82rem; font-weight: 600;
}
.lcr-yt-sub .lcr-status {
    display: inline-flex; padding: 0.18rem 0.5rem; border-radius: 999px;
    background: #1a2e24; color: #9fd9b5; font-size: 0.72rem; font-weight: 800;
}
.lcr-yt-sub .lcr-status.is-live { background: #13b652; color: #fff; }
.lcr-yt-meta-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lcr-yt-meta-actions .lcr-btn {
    border-radius: 0.65rem; border: 1px solid #2a4035; background: #15241d;
    color: #dff3e8; font-weight: 700; font-size: 0.82rem;
    padding: 0.45rem 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
    text-decoration: none;
}
.lcr-file-btn {
    border-radius: 0.65rem; border: 1px solid #2a4035; background: #15241d;
    color: #dff3e8; font-weight: 700; font-size: 0.95rem;
    width: 2.35rem; height: 2.35rem; padding: 0;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.lcr-btn-primary { background: #13b652 !important; border-color: #13b652 !important; color: #fff !important; }
.lcr-btn-end {
    border-radius: 0.65rem !important;
    border: 1px solid #ef4444 !important;
    background: #dc2626 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 0.45rem 0.8rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}
.lcr-btn-end:hover { background: #b91c1c !important; border-color: #f87171 !important; }
.lcr-yt-extras {
    margin-top: 0.85rem;
    border: 1px solid #1f3329;
    border-radius: 0.75rem;
    background: #101a16;
    color: #c5d8cc;
    overflow: hidden;
}
.lcr-yt-extras summary {
    cursor: pointer; list-style: none;
    padding: 0.7rem 0.9rem; font-weight: 800; color: #dff3e8;
}
.lcr-yt-extras summary::-webkit-details-marker { display: none; }
.lcr-yt-extras summary::after {
    content: '▾'; float: right; color: #7ea892; font-weight: 700;
}
.lcr-yt-extras:not([open]) summary::after { content: '▸'; }
.lcr-yt-extras[open] summary { border-bottom: 1px solid #1f3329; }
.lcr-yt-extras-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
    padding: 0.75rem 0.9rem 0.9rem;
}
.lcr-yt-extras-grid.has-poll {
    grid-template-columns: 1fr 1fr minmax(220px, 1.1fr);
}
@media (max-width: 1100px) {
    .lcr-yt-extras-grid.has-poll { grid-template-columns: 1fr 1fr; }
    .lcr-poll-col { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .lcr-yt-extras-grid,
    .lcr-yt-extras-grid.has-poll { grid-template-columns: 1fr; }
}
.lcr-poll-col {
    min-width: 0;
}
.lcr-poll-field {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    color: #8aa897;
}
.lcr-poll-field input,
.lcr-poll-opt {
    width: 100%;
    border: 1px solid #2a4035;
    border-radius: 0.55rem;
    background: #0f1a15;
    color: #dff3e8;
    padding: 0.45rem 0.55rem;
    font: inherit;
    font-size: 0.82rem;
}
.lcr-poll-options {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}
.lcr-poll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}
.lcr-poll-card {
    border: 1px solid #2a4035;
    border-radius: 0.75rem;
    padding: 0.65rem 0.7rem;
    background: #15241d;
}
.lcr-poll-q {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
}
.lcr-poll-row {
    margin-bottom: 0.45rem;
}
.lcr-poll-row-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #dff3e8;
    margin-bottom: 0.2rem;
}
.lcr-poll-bar {
    height: 0.35rem;
    border-radius: 999px;
    background: #0a1410;
    overflow: hidden;
    margin-bottom: 0.25rem;
}
.lcr-poll-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #13b652, #86efac);
    border-radius: 999px;
    transition: width 0.25s ease;
}
.lcr-poll-row.is-voted .lcr-poll-bar span {
    background: linear-gradient(90deg, #d4a017, #fcd34d);
}
.lcr-poll-vote {
    border: 0;
    background: #13b652;
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.lcr-poll-meta {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: #8aa897;
}
.lcr-poll-close {
    border: 0;
    background: transparent;
    color: #fda4af;
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
@media (max-width: 960px) {
    .lcr-host-settings {
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-width: none;
        bottom: 4.5rem;
    }
    .lcr-share-menu {
        left: 0.5rem;
        right: 0.5rem;
        transform: none;
        min-width: 0;
    }
}
.lcr-yt-extras h3 { margin: 0 0 0.45rem; font-size: 0.85rem; color: #9fd9b5; }
.lcr-yt-extras .lcr-people-list,
.lcr-yt-extras .lcr-docs {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem;
    max-height: 140px; overflow: auto;
}
.lcr-yt-extras .lcr-person-card,
.lcr-yt-extras .lcr-docs li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.45rem; align-items: center;
    padding: 0.45rem 0.55rem; border-radius: 0.55rem; background: #15241d;
}
.lcr-yt-extras .lcr-person-meta strong { display: block; font-size: 0.82rem; color: #fff; }
.lcr-yt-extras .lcr-person-meta span,
.lcr-yt-extras .lcr-docs span { font-size: 0.7rem; color: #8aa897; }
.lcr-yt-extras .lcr-person-card.is-away { opacity: 0.72; }
.lcr-person-card.is-focusable {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lcr-person-card.is-focusable:hover {
    background: #1a2f26;
}
.lcr-person-card.is-focused {
    outline: 2px solid rgba(74, 222, 128, 0.65);
    outline-offset: 1px;
    background: #1e3a2c;
}
.lcr-present-wrap:fullscreen {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcr-present-wrap:fullscreen .lcr-present-video {
    max-height: 100vh;
    max-width: 100vw;
}
.lcr-dept-host-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.lcr-attend-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.12rem 0.5rem; border-radius: 999px;
    background: rgba(15, 82, 48, 0.35); color: #9fd9b5;
    font-size: 0.72rem; font-weight: 600;
}
.lcr-timeline {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem;
    align-items: center; padding: 0.55rem 1rem 0;
    background: #0c1410; border-bottom: 1px solid #1f3329;
}
.lcr-tl-step {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: #6f8578;
}
.lcr-tl-step::after {
    content: '→'; margin-left: 0.55rem; color: #31453a; font-weight: 400;
}
.lcr-tl-step:last-child::after { content: none; }
.lcr-tl-step.is-done { color: #7cbc95; }
.lcr-tl-step.is-current { color: #f0c674; }
.lcr-exam-bar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.45rem 1rem; background: #14201a;
    border-bottom: 1px solid #1f3329; color: #e8f0eb;
}
.lcr-exam-type { font-size: 0.72rem; font-weight: 700; color: #9fd9b5; text-transform: uppercase; }
.lcr-exam-timer {
    font-variant-numeric: tabular-nums; font-size: 1.15rem;
    font-weight: 800; letter-spacing: 0.04em; color: #fff;
}
.lcr-exam-timer.is-urgent { color: #f0a0a0; }
.lcr-exam-hint { font-size: 0.72rem; color: #8aa897; }
.lcr-monitor-pill {
    margin-left: auto; font-size: 0.68rem; font-weight: 700;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: rgba(180, 83, 9, 0.25); color: #f0c674;
}
.lcr-face-pill {
    font-size: 0.68rem; font-weight: 700;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: rgba(15, 82, 48, 0.35); color: #9fd9b5;
}
.lcr-face-pill.is-bad { background: rgba(127, 29, 29, 0.35); color: #fecaca; }
.lcr-fs-nudge {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.55rem 1rem; background: #3b2210; border-bottom: 1px solid #6b3e1a; color: #ffe8c7;
}
.lcr-fs-nudge[hidden] { display: none !important; }
.lcr-fs-nudge p { margin: 0; font-size: 0.85rem; font-weight: 600; }
.lcr-alert-tray {
    position: absolute; right: 0.75rem; top: 4.5rem; z-index: 30;
    width: min(320px, calc(100% - 1.5rem));
    background: #15241d; border: 1px solid #274336; border-radius: 0.65rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35); color: #e8f0eb;
    max-height: 280px; display: flex; flex-direction: column;
}
.lcr-alert-tray[hidden] { display: none !important; }
.lcr-alert-tray header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.45rem 0.65rem; border-bottom: 1px solid #274336; font-size: 0.75rem;
}
.lcr-alert-tray header button {
    border: 0; background: transparent; color: #8aa897; font-size: 0.7rem;
    font-weight: 700; cursor: pointer;
}
.lcr-alert-tray ul {
    list-style: none; margin: 0; padding: 0.35rem; overflow: auto; display: grid; gap: 0.3rem;
}
.lcr-alert-tray li {
    font-size: 0.72rem; line-height: 1.35; padding: 0.35rem 0.45rem;
    border-radius: 0.4rem; background: #0f1a15; color: #c5d6cb;
}
.lcr-alert-tray li.is-high { background: rgba(127, 29, 29, 0.35); color: #fecaca; }
.lcr-alert-tray li.is-warn { background: rgba(120, 53, 15, 0.3); color: #fde68a; }
.lcr-alert-tray li time { color: #8aa897; margin-right: 0.25rem; }
.lcr-device-ready {
    border-top: 1px solid #274336; padding: 0.45rem 0.55rem 0.55rem;
    font-size: 0.7rem; color: #c5d6cb;
}
.lcr-device-ready[hidden] { display: none !important; }
.lcr-device-ready strong { display: block; margin-bottom: 0.3rem; color: #9fd9b5; }
.lcr-device-ready ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; max-height: 120px; overflow: auto; }
.lcr-device-ready li { padding: 0.25rem 0.35rem; border-radius: 0.35rem; background: #0f1a15; }
.lcr-device-ready li.is-ok { color: #9fd9b5; }
.lcr-device-ready li.is-bad { color: #fde68a; }
.lcr-device-ready li span { display: block; color: #8aa897; font-size: 0.65rem; }
.lcr-self-alert {
    position: absolute; left: 50%; bottom: 5.5rem; z-index: 35;
    transform: translateX(-50%);
    max-width: min(420px, calc(100% - 2rem));
    padding: 0.55rem 0.85rem; border-radius: 0.55rem;
    font-size: 0.82rem; font-weight: 600; text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.lcr-self-alert[hidden] { display: none !important; }
.lcr-self-alert.is-warn { background: #3b2210; color: #ffe8c7; border: 1px solid #6b3e1a; }
.lcr-self-alert.is-high { background: #3b1212; color: #fecaca; border: 1px solid #7f1d1d; }
.lcr-alert-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem; margin-left: 0.35rem; padding: 0 0.28rem;
    border-radius: 999px; background: #7f1d1d; color: #fecaca;
    font-size: 0.65rem; font-weight: 700; vertical-align: middle;
}
.lcr-person-card.has-alerts { border-color: rgba(127, 29, 29, 0.35); }
.lcr-device-gate {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 14, 11, 0.88); padding: 1rem;
}
.lcr-yt { position: relative; }
.lcr-device-gate[hidden] { display: none !important; }
.lcr-device-panel {
    width: min(100%, 420px); background: #15241d; border: 1px solid #274336;
    border-radius: 0.85rem; padding: 1.15rem 1.2rem; color: #e8f0eb;
}
.lcr-device-panel h2 { margin: 0.15rem 0 0.35rem; font-size: 1.2rem; }
.lcr-device-lede { margin: 0 0 0.85rem; color: #8aa897; font-size: 0.85rem; }
.lcr-device-list { list-style: none; margin: 0 0 0.85rem; padding: 0; display: grid; gap: 0.4rem; }
.lcr-device-list li {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.88rem; font-weight: 600; color: #c5d6cb;
}
.lcr-device-list li.is-ok { color: #9fd9b5; }
.lcr-device-list li.is-bad { color: #f0a0a0; }
.lcr-device-preview {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 0.55rem; background: #0c1410; margin-bottom: 0.65rem;
}
.lcr-device-msg { min-height: 1.2em; font-size: 0.78rem; color: #b7c9bd; margin: 0 0 0.75rem; }
.lcr-device-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lcr-yt-extras .lcr-docs a { color: #9fd9b5; font-weight: 700; text-decoration: none; font-size: 0.82rem; }
.lcr-yt-extras button {
    border: 0; background: transparent; color: #f0a0a0; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.lcr-avatar {
    width: 1.85rem; height: 1.85rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0f5230; color: #fff; font-size: 0.72rem; font-weight: 700;
}
.lcr-yt-chat {
    display: flex; flex-direction: column; min-height: 0;
    height: 100%;
    background: #111a16; border-left: 1px solid #1f3329; color: #e8f0eb;
}
.lcr-yt-chat-head-actions {
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.lcr-chat-close {
    display: none;
    width: 2rem; height: 2rem; border: 0; border-radius: 50%;
    background: #1a2e24; color: #dff3e8; cursor: pointer;
    align-items: center; justify-content: center;
}
.lcr-chat-scrim {
    display: none;
}
.lcr-whiteboard {
    position: absolute; inset: 0; z-index: 8;
    display: flex; flex-direction: column;
    background: #0f172a;
}
.lcr-whiteboard[hidden] { display: none !important; }
.lcr-wb-toolbar {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.55rem; background: #15241d; border-bottom: 1px solid #274336;
    color: #dff3e8; flex-shrink: 0;
}
.lcr-wb-title { font-size: 0.78rem; font-weight: 700; margin-right: auto; }
.lcr-wb-color input {
    width: 1.7rem; height: 1.7rem; border: 0; padding: 0; background: transparent; cursor: pointer;
}
.lcr-wb-btn {
    border: 1px solid #2a4035; background: #0f1a15; color: #dff3e8;
    border-radius: 0.45rem; padding: 0.25rem 0.55rem; font-size: 0.72rem;
    font-weight: 700; cursor: pointer;
}
.lcr-wb-btn.is-active {
    background: #13b652; border-color: #13b652; color: #fff;
}
.lcr-wb-btn#lcrWbEraser.is-active {
    background: #b45309; border-color: #f59e0b; color: #fff;
}
#lcrWbCanvas {
    flex: 1; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair;
    background: #111827;
}
.lcr-yt-stage.is-board-open .lcr-present-wrap { opacity: 0.18; }
.lcr-yt-stage.is-board-open .lcr-stage-main .lcr-present-wrap { opacity: 0.18; }
.lcr-ctrl.is-board-on {
    background: #2563eb !important;
    border-color: #3b82f6 !important;
}
@media (max-width: 960px) {
    .lcr-stage-top { display: flex; }
    .lcr-yt-controls {
        gap: 0.28rem;
        padding: 0.45rem 0.35rem;
        justify-content: space-evenly;
    }
    .lcr-yt-controls .lcr-ctrl {
        width: 2.35rem;
        height: 2.35rem;
        min-width: 2.35rem;
        font-size: 1rem;
    }
    .lcr-chat-scrim {
        display: block;
        position: fixed; inset: 0; z-index: 80;
        background: rgba(0, 0, 0, 0.45);
    }
    .lcr-chat-scrim[hidden] { display: none !important; }
    .lcr-yt-chat {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: calc(100% - 56px);
        max-width: 420px;
        height: 100%;
        z-index: 90;
        border-left: 1px solid #1f3329;
        box-shadow: -12px 0 30px rgba(0,0,0,0.35);
        transform: translateX(105%);
        transition: transform 0.28s ease;
    }
    .lcr-yt.chat-open .lcr-yt-chat {
        transform: translateX(0);
    }
    .lcr-chat-close { display: inline-flex; }
    .lcr-yt-stage.is-presenting {
        height: min(42vh, 360px);
        min-height: 200px;
    }
    .lcr-stage-layout {
        flex-direction: column;
    }
    .lcr-participant-rail {
        width: 100%;
        flex-direction: row;
        max-height: 118px;
        border-left: none;
        border-top: 1px solid #1f3329;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .lcr-participant-rail .lcr-tile {
        width: 132px;
        min-height: 74px;
    }
    .lcr-yt-page.is-presenting-mode .lcr-yt {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 961px) {
    .lcr-chat-scrim { display: none !important; }
    .lcr-chat-close { display: none !important; }
}
.lcr-yt-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem; border-bottom: 1px solid #1f3329;
}
.lcr-yt-chat-head h2 { margin: 0; font-size: 1rem; color: #fff; }
.lcr-live-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #13b652;
    box-shadow: 0 0 0 0 rgba(19,182,82,0.45);
    animation: lcrPulse 1.8s ease-out infinite;
}
@keyframes lcrPulse {
    0% { box-shadow: 0 0 0 0 rgba(19,182,82,0.45); }
    70% { box-shadow: 0 0 0 8px rgba(19,182,82,0); }
    100% { box-shadow: 0 0 0 0 rgba(19,182,82,0); }
}
.lcr-yt-chat .lcr-messages {
    flex: 1; overflow-y: auto; padding: 0.85rem;
    display: flex; flex-direction: column; gap: 0.65rem;
    background: #0e1613;
}
.lcr-yt-chat .lcr-msg { display: flex; gap: 0.45rem; max-width: 100%; align-items: flex-start; }
.lcr-yt-chat .lcr-msg.is-mine { align-self: stretch; }
.lcr-yt-chat .lcr-msg.is-system { justify-content: center; }
.lcr-yt-chat .lcr-bubble {
    background: #1a2a22; border: 1px solid #243830; border-radius: 0.7rem;
    padding: 0.45rem 0.65rem; color: #e8f0eb; min-width: 0; flex: 1;
}
.lcr-yt-chat .lcr-msg.is-mine .lcr-bubble { background: #0f5230; border-color: #147a40; }
.lcr-yt-chat .lcr-msg.is-host .lcr-avatar { background: #f0c020; color: #1a3326; }
.lcr-yt-chat .lcr-bubble header {
    display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.1rem;
}
.lcr-yt-chat .lcr-bubble strong { font-size: 0.72rem; color: #9fd9b5; }
.lcr-yt-chat .lcr-msg.is-mine .lcr-bubble strong { color: rgba(255,255,255,0.85); }
.lcr-yt-chat .lcr-bubble time { font-size: 0.65rem; color: #7a9587; }
.lcr-yt-chat .lcr-bubble p { margin: 0; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.lcr-msg-del {
    border: 0; background: transparent; color: #e09090;
    font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0 0; cursor: pointer;
}
.lcr-system {
    margin: 0; padding: 0.25rem 0.6rem; border-radius: 999px;
    background: #1a2a22; color: #9bb5a6; font-size: 0.72rem; font-weight: 600;
}
.lcr-yt-chat .lcr-composer {
    display: grid; grid-template-columns: 1fr auto; gap: 0.45rem;
    padding: 0.75rem; border-top: 1px solid #1f3329; background: #111a16;
}
.lcr-yt-chat .lcr-composer input {
    border: 1px solid #2a4035; border-radius: 999px;
    padding: 0.65rem 0.95rem; font: inherit; color: #fff; background: #0b1210;
}
.lcr-yt-chat .lcr-composer input:focus {
    outline: 2px solid rgba(19,182,82,0.35); border-color: #13b652;
}
.lcr-send {
    border: 0; border-radius: 50%; width: 2.55rem; height: 2.55rem; padding: 0;
    background: #13b652; color: #fff; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.lcr-empty, .lcr-disabled, .lcr-empty-inline {
    color: #7a9587; font-size: 0.85rem; text-align: center; padding: 0.75rem;
}



/* AI review: cover + rich edit modal */
.ai-review-cover {
    flex: 0 1 280px;
    max-width: 320px;
    min-height: 140px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.15);
}
.ai-review-cover img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
}
.ai-nested-thumb {
    margin: 0.35rem 0 0.55rem;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e8efe9;
}
.ai-nested-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ai-nested-excerpt {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.45;
}
.ai-nested-excerpt p { margin: 0 0 0.35rem; }
.ai-nested-excerpt img,
.ai-nested-excerpt figure { display: none; }
.ai-edit-rich .ck-editor { border-radius: 12px; overflow: hidden; }
.ai-edit-rich .ck-editor__editable {
    min-height: 280px;
    max-height: 55vh;
    overflow-y: auto;
}
.ai-edit-rich .ck-toolbar {
    flex-wrap: wrap !important;
}
.ai-prose.rich-content img,
.ai-lesson-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 0.75rem 0;
}
.ai-lesson-figure {
    margin: 0 0 1rem;
}
.ai-lesson-figure figcaption {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* -- Lecturer announcements (lan-*) -- */
.lan-page .app-content {
    background:
        radial-gradient(900px 420px at 0% -10%, rgba(19, 182, 82, 0.07), transparent 55%),
        radial-gradient(700px 360px at 100% 0%, rgba(245, 196, 0, 0.07), transparent 50%),
        #f3f5f4;
}
.lan-shell { max-width: 1180px; margin: 0 auto; }
.lan-top {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.lan-kicker, .ms-kicker, .scd-kicker {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: #5a7a68;
}
.lan-top h1, .ms-top h1, .scd-top h1 {
    margin: 0; font-family: Fraunces, Georgia, serif;
    font-size: clamp(1.6rem, 2.5vw, 2rem); color: #0f2920; font-weight: 700;
}
.lan-sub, .ms-sub {
    margin: 0.35rem 0 0; color: #6b7280; font-size: 0.95rem; max-width: 42rem;
}
.lan-top-actions, .ms-top-actions, .scd-top-actions {
    display: flex; flex-wrap: wrap; gap: 0.55rem;
}
.lan-stats, .ms-kpi-row, .scd-kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin-bottom: 1.25rem;
}
.lan-stat, .ms-kpi, .scd-kpi {
    background: #fff; border: 1px solid #e5efe8; border-radius: 16px;
    padding: 0.9rem 1rem; box-shadow: 0 8px 22px rgba(15, 41, 32, 0.04);
}
.lan-stat span, .ms-kpi span, .scd-kpi span {
    display: block; font-size: 0.75rem; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.lan-stat strong, .ms-kpi strong, .scd-kpi strong {
    display: block; margin-top: 0.2rem; font-size: 1.45rem; color: #0f2920;
}
.lan-stat.is-pin strong { color: #b45309; }
.lan-stat.is-ok strong { color: #0f6b3c; }
.ms-kpi.is-active strong { color: #0f9f4f; }
.ms-kpi.is-done strong { color: #1b6b3a; }
.scd-kpi em {
    display: block; margin-top: 0.25rem; font-size: 0.78rem;
    font-style: normal; color: #8a9a90;
}
.lan-layout, .scd-layout {
    display: grid; gap: 1.1rem;
}
@media (min-width: 992px) {
    .lan-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .scd-layout { grid-template-columns: 1.15fr 0.85fr; }
}
.lan-list-panel, .lan-side-card, .ms-table-card, .scd-panel {
    background: #fff; border: 1px solid #e5efe8; border-radius: 20px;
    box-shadow: 0 10px 28px rgba(15, 41, 32, 0.05);
}
.lan-panel-head, .scd-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; padding: 1rem 1.15rem 0.65rem;
}
.lan-panel-head h2, .scd-panel-head h2 {
    margin: 0; font-size: 1.05rem; color: #0f2920;
}
.lan-panel-head span, .scd-panel-head span {
    font-size: 0.8rem; color: #8a9a90;
}
.lan-feed { list-style: none; margin: 0; padding: 0.25rem 0.85rem 1rem; }
.lan-card {
    padding: 0.95rem 1rem; border-radius: 14px; margin-bottom: 0.65rem;
    background: #f7faf8; border: 1px solid #eef2f0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lan-card:hover {
    border-color: #d5e6db;
    box-shadow: 0 6px 18px rgba(15, 41, 32, 0.05);
}
.lan-card.is-pinned {
    background: linear-gradient(135deg, #fffbeb, #f7faf8);
    border-color: rgba(212, 160, 23, 0.35);
}
.lan-card-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem;
    margin-bottom: 0.35rem; font-size: 0.78rem; color: #6b7280;
}
.lan-course {
    font-weight: 800; color: #0f5230; background: #d8f3dc;
    padding: 0.15rem 0.5rem; border-radius: 999px;
}
.lan-pin { color: #b45309; font-weight: 700; }
.lan-card h3 {
    margin: 0 0 0.35rem; font-size: 1rem; color: #111827;
}
.lan-card > p {
    margin: 0; font-size: 0.88rem; color: #4b5563; line-height: 1.45;
}
.lan-card-foot {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.65rem; margin-top: 0.7rem;
}
.lan-card-meta {
    font-size: 0.78rem; color: #8a9a90;
}
.lan-actions {
    display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
}
.lan-icon-btn {
    width: 2rem; height: 2rem; border-radius: 0.55rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #dce8e1; background: #fff; color: #3d5a4c;
    cursor: pointer; padding: 0; font-size: 0.9rem;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lan-icon-btn:hover { background: #eef5f0; border-color: #b7d9c4; color: #0f5230; }
.lan-icon-btn.is-active {
    background: #fff4e5; border-color: #f0d2a0; color: #b45309;
}
.lan-icon-btn.is-danger:hover {
    background: #fde8e8; border-color: #f0b4b4; color: #9b1c1c;
}
.lan-empty, .ms-empty-state, .scd-empty {
    text-align: center; padding: 2.5rem 1.25rem; color: #6b7280;
}
.lan-empty-icon {
    width: 3.25rem; height: 3.25rem; margin: 0 auto 0.75rem;
    border-radius: 1rem; display: grid; place-items: center;
    background: #e8f6ec; color: #0f6b3c; font-size: 1.35rem;
    border: 1px solid #cfe6d7;
}
.lan-empty i, .ms-empty-state i, .scd-empty i, .ms-no-results i {
    font-size: 1.8rem; color: #0f9f4f; display: block; margin-bottom: 0.6rem;
}
.lan-empty .lan-empty-icon i { font-size: 1.35rem; margin: 0; color: inherit; }
.lan-empty h3, .scd-empty h1 { color: #0f2920; margin-bottom: 0.35rem; }
.lan-side { display: grid; gap: 0.85rem; align-content: start; }
.lan-side-card { padding: 1rem 1.1rem; }
.lan-side-card h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.lan-side-card p { margin: 0; font-size: 0.85rem; color: #6b7280; line-height: 1.45; }
.lan-tip {
    background: linear-gradient(180deg, #ffffff, #f7fbf8);
    border-color: #cfe6d7;
}
.lan-course-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.lan-course-list li {
    display: grid; gap: 0.1rem; padding: 0.55rem 0;
    border-bottom: 1px solid #eef2f0; font-size: 0.85rem;
}
.lan-course-list li:last-child { border-bottom: 0; }
.lan-course-list strong { color: #0f5230; }
.lan-course-list span { color: #6b7280; }
.lan-course-list .is-empty { color: #9ca3af; }
.lan-label {
    display: block; margin-bottom: 0.35rem;
    font-size: 0.8rem; font-weight: 700; color: #374151;
}
.lan-modal {
    border: 0; border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}
.lan-view-meta {
    display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem;
    align-items: center; margin-bottom: 0.55rem; font-size: 0.82rem; color: #6b7280;
}
.lan-view-course { font-size: 0.85rem; color: #6b7280; margin-bottom: 0.75rem; }
.lan-view-body {
    background: #f7faf8; border: 1px solid #e5efe8; border-radius: 12px;
    padding: 0.9rem 1rem; font-size: 0.92rem; line-height: 1.55; color: #2c3d34;
}

/* -- Lecturer students table (ms-*) -- */
.ms-shell { max-width: 1180px; }
.ms-top {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.ms-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center;
    padding: 0.9rem 1rem; border-bottom: 1px solid #eef2f0;
}
.ms-search-wrap {
    position: relative; flex: 1 1 220px; min-width: 180px;
}
.ms-search-icon {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none;
}
.ms-search-input {
    width: 100%; border: 1px solid #e5efe8; border-radius: 12px;
    background: #f7faf8; padding: 0.65rem 0.85rem 0.65rem 2.35rem;
    font-size: 0.9rem; color: #111827;
}
.ms-search-input:focus {
    outline: none; border-color: #0f9f4f; background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 159, 79, 0.12);
}
.ms-filter-select {
    border: 1px solid #e5efe8; border-radius: 12px; background: #fff;
    padding: 0.6rem 0.85rem; font-size: 0.88rem; color: #374151;
}
.ms-count { font-size: 0.8rem; color: #8a9a90; margin-left: auto; }
.ms-table-wrap { overflow-x: auto; }
.ms-table {
    width: 100%; border-collapse: collapse; min-width: 760px;
}
.ms-table thead th {
    text-align: left; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
    padding: 0.75rem 1rem; border-bottom: 1px solid #eef2f0;
    cursor: pointer; user-select: none; white-space: nowrap;
}
.ms-table thead th.ms-th-action { cursor: default; }
.ms-sort-icon { font-size: 0.7rem; opacity: 0.55; }
.ms-table tbody td {
    padding: 0.85rem 1rem; border-bottom: 1px solid #f3f6f4;
    vertical-align: middle; font-size: 0.88rem; color: #374151;
}
.ms-table tbody tr:hover { background: #f9fcfa; }
.ms-td-num, .ms-th-num { width: 3rem; color: #9ca3af; }
.ms-td-date { white-space: nowrap; color: #6b7280; }
.ms-student-cell { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.ms-avatar {
    flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: grid; place-items: center; background: #d8f3dc; color: #0f5230;
    font-size: 0.72rem; font-weight: 800;
}
.ms-student-info { min-width: 0; display: grid; gap: 0.1rem; }
.ms-student-name {
    font-weight: 700; color: #0f2920; text-decoration: none;
}
.ms-student-name:hover { color: #0f9f4f; }
.ms-student-email {
    font-size: 0.78rem; color: #8a9a90;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-course-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 800;
    color: #0f5230; background: #e8f6ec; padding: 0.12rem 0.45rem;
    border-radius: 999px; margin-right: 0.35rem;
}
.ms-course-title { font-size: 0.8rem; color: #6b7280; }
.ms-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.55rem;
    border-radius: 999px; white-space: nowrap;
}
.ms-badge i { font-size: 0.45rem; }
.ms-badge-active { background: #d8f3dc; color: #0f5230; }
.ms-badge-completed { background: #dbeafe; color: #1d4ed8; }
.ms-badge-dropped { background: #fee2e2; color: #b91c1c; }
.ms-badge-expired { background: #f3f4f6; color: #6b7280; }
.ms-progress-cell {
    display: flex; align-items: center; gap: 0.5rem; min-width: 110px;
}
.ms-progress-track {
    flex: 1; height: 0.4rem; border-radius: 999px; background: #e8efe9; overflow: hidden;
}
.ms-progress-bar {
    height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #0f5230, #0f9f4f);
}
.ms-progress-label { font-size: 0.75rem; font-weight: 700; color: #4b5563; width: 2.4rem; }
.ms-open-btn {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem;
    border-radius: 10px; color: #0f5230; background: #e8f6ec; text-decoration: none;
}
.ms-open-btn:hover { background: #0f9f4f; color: #fff; }
.ms-no-results {
    text-align: center; padding: 2rem 1rem; color: #6b7280;
}

/* -- Student course detail (scd-*) -- */
.scd-shell { max-width: 1100px; }
.scd-top {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.scd-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.scd-avatar {
    width: 4rem; height: 4rem; border-radius: 18px; overflow: hidden;
    background: #d8f3dc; display: grid; place-items: center;
    font-weight: 800; color: #0f5230; flex: 0 0 auto;
}
.scd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scd-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem;
    margin: 0.35rem 0 0; color: #6b7280; font-size: 0.9rem;
}
.scd-mini-track {
    margin-top: 0.55rem; height: 0.4rem; border-radius: 999px;
    background: #e8efe9; overflow: hidden;
}
.scd-mini-bar {
    height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #0f5230, #0f9f4f);
}
.scd-panel { padding: 0.35rem 0 0.85rem; }
.scd-modules, .scd-subs { list-style: none; margin: 0; padding: 0 1rem 0.5rem; }
.scd-modules li, .scd-subs li {
    padding: 0.85rem 0.9rem; margin-bottom: 0.55rem;
    border-radius: 14px; background: #f7faf8; border: 1px solid #eef2f0;
}
.scd-mod-top, .scd-subs li {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.scd-mod-top strong, .scd-subs strong { color: #111827; font-size: 0.92rem; }
.scd-mod-top span { font-size: 0.78rem; font-weight: 700; color: #0f9f4f; }
.scd-mod-meta {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem;
    margin-top: 0.55rem; font-size: 0.78rem; color: #6b7280;
}
.scd-subs span {
    display: block; margin-top: 0.15rem; font-size: 0.78rem; color: #8a9a90;
}
.scd-score {
    font-style: normal; font-weight: 800; color: #0f5230;
    background: #d8f3dc; padding: 0.2rem 0.55rem; border-radius: 999px;
    font-size: 0.8rem; white-space: nowrap;
}
.scd-score.is-pending { background: #f3f4f6; color: #9ca3af; }
.scd-muted { padding: 0 1.15rem 1rem; color: #8a9a90; font-size: 0.9rem; }

/* Live class type / monitoring badges (Phase 2) */
.llc-chip-monitor {
    background: rgba(180, 83, 9, 0.92) !important;
    color: #fff !important;
    left: auto !important;
    right: 0.65rem;
}
.ls-card-media { position: relative; }
.llc-monitor-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5a7a68;
}
.llc-section-label {
    margin: 1.25rem 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #3d5a4c;
    border-top: 1px solid #e5efe8;
    padding-top: 1rem;
}
.llc-form .llc-section-label:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.llc-section-hint {
    margin: 0.15rem 0 0.55rem;
    font-size: 0.82rem;
    color: #6b7c72;
    line-height: 1.4;
}
.llc-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1rem;
}
.llc-type-filters a {
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4b5563;
    background: #f3f6f4;
    border: 1px solid #e5efe8;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
}
.llc-type-filters a.is-active,
.llc-type-filters a:hover {
    color: #0f5230;
    background: #d8f3dc;
    border-color: rgba(15, 82, 48, 0.25);
}

/* Live classes — unified filter panel */
.llc-filter-panel {
    display: grid;
    gap: 0;
    margin: 0 0 1.25rem;
    background: #fff;
    border: 1px solid #dfe8e2;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 82, 48, 0.05);
    overflow: hidden;
}
.llc-filter-panel__status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0;
    border-bottom: 1px solid #e8efe9;
}
.llc-filter-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: #4b5c54;
    background: #fafcfa;
    border-right: 1px solid #e8efe9;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.llc-filter-tab:last-child { border-right: none; }
.llc-filter-tab:hover {
    background: #f3f8f4;
    color: var(--ines-green-dark);
}
.llc-filter-tab.is-active {
    background: linear-gradient(180deg, #f0faf3 0%, #fff 100%);
    color: var(--ines-green-dark);
    box-shadow: inset 0 -3px 0 var(--ines-green);
}
.llc-filter-tab__icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4f0;
    color: #5b6b63;
    font-size: 1rem;
}
.llc-filter-tab__icon.is-live { background: #fef3c7; color: #b45309; }
.llc-filter-tab__icon.is-monitor { background: #ede9fe; color: #6d28d9; }
.llc-filter-tab__icon.is-muted { background: #f3f4f6; color: #6b7280; }
.llc-filter-tab.is-active .llc-filter-tab__icon {
    background: rgba(19, 182, 82, 0.14);
    color: var(--ines-green-dark);
}
.llc-filter-tab__text {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}
.llc-filter-tab__label {
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.2;
}
.llc-filter-tab__hint {
    font-size: 0.68rem;
    font-weight: 600;
    color: #8a9a92;
    line-height: 1.2;
}
.llc-filter-tab.is-active .llc-filter-tab__hint { color: #5a7a66; }
.llc-filter-tab__count {
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    background: #eef2ef;
    color: #5b6b63;
}
.llc-filter-tab.is-active .llc-filter-tab__count {
    background: rgba(19, 182, 82, 0.16);
    color: var(--ines-green-dark);
}
.llc-filter-panel__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    padding: 0.85rem 1rem;
    background: #fbfcfb;
}
.llc-filter-panel__types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    min-width: 0;
    flex: 1 1 16rem;
}
.llc-filter-panel__types-label,
.llc-filter-panel__dates-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a8a82;
    white-space: nowrap;
}
.llc-filter-type-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.llc-filter-type {
    flex: 0 0 auto;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4b5563;
    background: #fff;
    border: 1px solid #dfe8e2;
    border-radius: 999px;
    padding: 0.38rem 0.82rem;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.llc-filter-type:hover {
    border-color: rgba(15, 82, 48, 0.28);
    color: var(--ines-green-dark);
}
.llc-filter-type.is-active {
    color: #fff;
    background: var(--ines-green);
    border-color: var(--ines-green);
}
.llc-filter-panel__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0;
    flex: 0 1 auto;
}
.llc-filter-panel__dates .desk-date-field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.llc-filter-panel__dates .desk-date-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7c72;
}
.llc-filter-panel__dates .desk-date-input {
    min-width: 9.5rem;
}
@media (max-width: 900px) {
    .llc-filter-panel__status {
        display: flex;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .llc-filter-tab {
        flex: 0 0 min(78vw, 14rem);
        border-right: 1px solid #e8efe9;
        border-bottom: none;
    }
    .llc-filter-panel__tools {
        flex-direction: column;
        align-items: stretch;
    }
    .llc-filter-panel__dates {
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 560px) {
    .llc-filter-tab__hint { display: none; }
    .llc-filter-tab { padding: 0.75rem 0.85rem; }
}

/* Live classroom Phase 3 � waves, hand, connection */
.lcr-conn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem;
    border-radius: 999px; background: #e5e7eb; color: #4b5563;
}
.lcr-conn.is-live { background: #d8f3dc; color: #0f5230; }
.lcr-conn.is-fallback { background: #fef3c7; color: #92400e; }
.lcr-yt-controls .lcr-ctrl.is-on {
    background: #f59e0b !important;
    border-color: #fbbf24 !important;
    color: #111827 !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}
.lcr-hand-badge {
    display: inline-flex; margin-left: 0.35rem; color: #b45309; font-size: 0.9rem;
}
.lcr-person-card.has-hand { border-color: rgba(180, 83, 9, 0.45); background: #fffbeb; }
.lcr-audio-wave {
    position: absolute; right: 0.35rem; bottom: 0.3rem; display: flex;
    align-items: flex-end; gap: 2px; height: 14px; opacity: 0.25;
    pointer-events: none; z-index: 2;
}
.lcr-audio-wave.is-active { opacity: 1; }
.lcr-audio-wave span {
    display: block; width: 3px; border-radius: 2px; background: #13b652;
    height: calc(4px + (var(--lcr-level, 0) * 10px));
    transition: height 80ms linear;
}
.lcr-audio-wave span:nth-child(2) { height: calc(3px + (var(--lcr-level, 0) * 12px)); }
.lcr-audio-wave span:nth-child(3) { height: calc(5px + (var(--lcr-level, 0) * 14px)); }
.lcr-audio-wave span:nth-child(4) { height: calc(3px + (var(--lcr-level, 0) * 11px)); }
.lcr-audio-wave span:nth-child(5) { height: calc(4px + (var(--lcr-level, 0) * 9px)); }
.lcr-tile { position: relative; }

/* ---- Live integrity review (lir-*) ---- */
.lir-page .app-content { background: #f4f5f7; }
.lir-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem;
    margin: 0 0 1.1rem;
}
@media (max-width: 900px) {
    .lir-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lir-kpis article {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}
.lir-kpis span { display: block; font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.lir-kpis strong { font-size: 1.45rem; color: #111827; }
.lir-kpis article.is-flag strong { color: #b45309; }
.lir-layout {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: 1rem;
}
@media (max-width: 1100px) {
    .lir-layout { grid-template-columns: 1fr; }
}
.lir-panel {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.85rem;
    padding: 0.9rem 1rem 1rem;
}
.lir-side { display: grid; gap: 1rem; align-content: start; }
.lir-panel-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.lir-panel-head h2 { margin: 0; font-size: 1.05rem; }
.lir-panel-head h3, .lir-report h3 { margin: 0.85rem 0 0.45rem; font-size: 0.92rem; }
.lir-table-wrap { overflow: auto; }
.lir-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.lir-table th, .lir-table td { padding: 0.55rem 0.45rem; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
.lir-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.lir-table tr.is-flagged { background: #fffbeb; }
.lir-table tr.is-selected { background: #ecfdf5; }
.lir-score {
    display: inline-flex; min-width: 2.4rem; justify-content: center;
    font-weight: 800; padding: 0.15rem 0.45rem; border-radius: 999px; font-size: 0.85rem;
}
.lir-score.is-low { background: #ecfdf5; color: #047857; }
.lir-score.is-medium { background: #fffbeb; color: #b45309; }
.lir-score.is-high { background: #fff1f2; color: #be123c; }
.lir-score.is-critical { background: #7f1d1d; color: #fecaca; }
.lir-flag, .lir-reviewed {
    display: inline-block; margin-left: 0.35rem; font-size: 0.65rem; font-weight: 700;
    padding: 0.1rem 0.35rem; border-radius: 999px; vertical-align: middle;
}
.lir-flag { background: #ffedd5; color: #9a3412; }
.lir-reviewed { background: #d1fae5; color: #065f46; }
.lir-row-btn { padding: 0.25rem 0.55rem !important; font-size: 0.75rem !important; }
.lir-alerts, .lir-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; max-height: 260px; overflow: auto; }
.lir-alerts li, .lir-events li {
    font-size: 0.78rem; line-height: 1.35; padding: 0.45rem 0.55rem; border-radius: 0.5rem; background: #f8fafc;
}
.lir-alerts li.is-high, .lir-events li.is-high { background: #fff1f2; color: #9f1239; }
.lir-alerts li.is-warn, .lir-events li.is-warn { background: #fffbeb; color: #92400e; }
.lir-alerts time, .lir-events time { color: #6b7280; margin-right: 0.3rem; }
.lir-summary { font-size: 0.9rem; color: #374151; line-height: 1.45; }
.lir-breakdown-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin: 0.75rem 0;
}
.lir-breakdown-grid div {
    background: #f8fafc; border-radius: 0.55rem; padding: 0.5rem 0.6rem;
}
.lir-breakdown-grid strong { display: block; font-size: 1.05rem; }
.lir-breakdown-grid span { font-size: 0.72rem; color: #6b7280; }
.lir-review-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.lir-review-msg { margin: 0.5rem 0 0; font-size: 0.8rem; color: #047857; }
.lir-empty { color: #6b7280; font-size: 0.85rem; padding: 0.5rem 0; }
.lir-report label { display: block; font-size: 0.78rem; font-weight: 700; margin: 0.75rem 0 0.3rem; }

/* ---- Live admin reports (llr-*) ---- */
.llr-page .app-content { background: #f4f5f7; }
.llr-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem;
}
@media (max-width: 900px) { .llr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.llr-kpis article, .llr-panel {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.85rem; padding: 0.9rem 1rem;
}
.llr-kpis span { display: block; font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; }
.llr-kpis strong { font-size: 1.4rem; color: #111827; }
.llr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 960px) { .llr-grid { grid-template-columns: 1fr; } }
.llr-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; }
.llr-panel-head h2 { margin: 0; font-size: 1.05rem; }
.llr-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
@media (max-width: 700px) { .llr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.llr-stat-grid div { background: #f8fafc; border-radius: 0.55rem; padding: 0.55rem 0.65rem; }
.llr-stat-grid strong { display: block; font-size: 1.15rem; }
.llr-stat-grid span { font-size: 0.72rem; color: #6b7280; }
.llr-risk-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.llr-risk-row span { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px; }
.llr-risk-row .is-critical { background: #7f1d1d; color: #fecaca; }
.llr-risk-row .is-high { background: #fff1f2; color: #be123c; }
.llr-risk-row .is-medium { background: #fffbeb; color: #b45309; }
.llr-risk-row .is-low { background: #ecfdf5; color: #047857; }
.llr-top-alerts { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.llr-top-alerts li { font-size: 0.8rem; color: #374151; }
.llr-table-wrap { overflow: auto; }
.llr-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.llr-table th, .llr-table td { padding: 0.55rem 0.4rem; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.llr-table th { font-size: 0.72rem; text-transform: uppercase; color: #6b7280; }
.llr-meta { display: block; font-size: 0.72rem; color: #6b7280; margin-top: 0.15rem; }
.llr-flag { display: inline-block; margin-left: 0.35rem; font-size: 0.68rem; font-style: normal; color: #9a3412; font-weight: 700; }
.llr-row-btn { padding: 0.25rem 0.55rem !important; font-size: 0.75rem !important; }
.llr-empty { color: #6b7280; padding: 0.75rem 0; }
.llr-sessions { margin-top: 0; }

/* �� Outside (independent) hubs �� */
.outside-hub .ox-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
}
.ox-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 1.5rem 1.5rem;
  margin: 0 -1rem 1.75rem;
  padding: 2.75rem 1.25rem 2.4rem;
  color: #f4f7f2;
  min-height: min(52vh, 420px);
  display: flex;
  align-items: flex-end;
}
.ox-hero-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(34, 120, 78, 0.55), transparent 55%),
    linear-gradient(145deg, #0c1f18 0%, #16382a 42%, #1f4d38 100%);
}
.ox-hero-student .ox-hero-wash {
  background:
    radial-gradient(100% 90% at 90% 10%, rgba(56, 140, 98, 0.4), transparent 50%),
    linear-gradient(155deg, #10261d 0%, #1a3d2e 50%, #245640 100%);
}
.ox-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}
.ox-brand {
  margin: 0 0 0.65rem;
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b7e0c6;
}
.ox-hero h1 {
  margin: 0 0 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ox-lead {
  margin: 0 0 1.25rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(244, 247, 242, 0.88);
  max-width: 34rem;
}
.ox-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.ox-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  padding: 0.65rem 1.05rem;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.ox-btn-primary {
  background: #e8f6ec;
  color: #0f2f22;
}
.ox-btn-primary:hover { background: #fff; color: #0f2f22; }
.ox-btn-ghost {
  background: transparent;
  border-color: rgba(232, 246, 236, 0.45);
  color: #e8f6ec;
}
.ox-btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ox-hero-lecturer {
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-right: 1.5rem;
}
.ox-hero-lecturer .ox-hero-inner {
  padding-bottom: 0.25rem;
}
.ox-next {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  min-width: min(18rem, 100%);
  background: rgba(8, 28, 20, 0.45);
  border: 1px solid rgba(232, 246, 236, 0.22);
  border-radius: 1rem;
  padding: 1rem 1.1rem 1.15rem;
  backdrop-filter: blur(8px);
}
.ox-next p {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b7e0c6;
}
.ox-next strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.ox-next span {
  display: block;
  color: rgba(244, 247, 242, 0.78);
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}
.ox-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.ox-stats-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ox-stats article {
  background: linear-gradient(180deg, #f7fbf8, #eef5f0);
  border: 1px solid #d9e8de;
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
}
.ox-stats p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f7568;
}
.ox-stats strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.55rem;
  color: #143528;
}
.ox-stats em, .ox-stat-link em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-size: 0.78rem;
  color: #6b7c72;
}
.ox-stats strong.is-warn { color: #b45309; }
.ox-stat-link {
  display: block;
  text-decoration: none;
  background: linear-gradient(180deg, #f7fbf8, #eef5f0);
  border: 1px solid #d9e8de;
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  color: inherit;
}
.ox-stat-link:hover { border-color: #b7d4c2; background: #eef8f1; }
.ox-stat-link p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f7568;
}
.ox-muted { font-size: 0.85rem; font-weight: 600; color: #6b7c72; }
.ox-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}
.ox-panel {
  background: #fff;
  border: 1px solid #dde8e1;
  border-radius: 1rem;
  padding: 1.15rem 1.2rem 1.3rem;
}
.ox-panel-wide { margin-top: 0.25rem; }
.ox-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.ox-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #16382a;
}
.ox-panel-head a {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f6b45;
  text-decoration: none;
}
.ox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ox-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid #e8f0eb;
}
.ox-list li:first-child { border-top: 0; padding-top: 0.15rem; }
.ox-list strong { display: block; color: #16382a; }
.ox-list span { font-size: 0.82rem; color: #6b7c72; }
.ox-list-actions {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.ox-list a, .ox-mini {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f6b45;
  text-decoration: none;
  background: #eef6f1;
  border: 1px solid #d5e8dc;
  border-radius: 0.45rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}
.ox-empty { color: #6b7c72; font-size: 0.92rem; }
.ox-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.ox-tools a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: #16382a;
  font-weight: 700;
  font-size: 0.9rem;
  background: #f4faf6;
  border: 1px solid #dce9e1;
  border-radius: 0.65rem;
  padding: 0.7rem 0.8rem;
}
.ox-tools a:hover { background: #e8f4ec; }
.ox-tools-rich {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ox-tools-rich a {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-height: 5.2rem;
}
.ox-tools-rich i { font-size: 1.15rem; color: #1f6b45; }
.ox-tools-panel { margin-bottom: 1rem; }
.ox-grid-bottom { margin-top: 1rem; }
.ox-pill {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  background: #eef6f1;
  color: #1f6b45;
}
.ox-pill.is-live { background: #dcfce7; color: #166534; }
.ox-pill.is-soon { background: #fef3c7; color: #92400e; }
.ox-suggest {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ox-suggest li { padding: 0.55rem 0; border-top: 1px solid #e8f0eb; }
.ox-suggest li:first-child { border-top: 0; padding-top: 0; }
.ox-suggest a {
  color: #16382a;
  font-weight: 650;
  text-decoration: none;
}
.ox-suggest a:hover { color: #1f6b45; }
.ox-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: #6b7c72;
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .ox-stats-4, .ox-tools-rich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-hero-lecturer { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .ox-grid, .ox-stats, .ox-stats-4, .ox-tools-rich { grid-template-columns: 1fr; }
  .ox-hero { min-height: auto; padding-top: 2.2rem; }
}

/* Lecturer action CRUD pages */
.lac-crud-page .lac-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a7a68;
  margin: 0;
}
.lac-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5a7a68;
  border-bottom-width: 1px;
}
.lac-table td { vertical-align: middle; }
.lac-card .lecturer-side-head { margin-bottom: 0.75rem; }

/* --- Marking desk --- */
.lm-marking-page .app-content {
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(19, 182, 82, 0.08), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(245, 196, 0, 0.08), transparent 50%),
    #f3f5f4;
}
.mk-desk {
  --mk-ink: #16382a;
  --mk-muted: #6b7c72;
  --mk-line: #dce8e1;
  --mk-soft: #eef5f0;
  --mk-card: #ffffff;
  --mk-warn: #b45309;
  --mk-ok: #0f6b3c;
}
.desk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px) auto;
  gap: 1rem 1.25rem;
  align-items: end;
  margin-bottom: 1.15rem;
}
.desk-hero-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}
.lth-hero.desk-hero-compact {
  grid-template-columns: minmax(0, 1fr);
}
.mk-filter-note,
.lth-filter-note {
  color: var(--ines-green, #0b6e4f);
  font-weight: 600;
}
.desk-hero-main h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mk-ink, #16382a);
}
.desk-hero-main p {
  margin: 0;
  max-width: 36rem;
  color: var(--mk-muted, #6b7c72);
  font-size: 0.95rem;
  line-height: 1.5;
}
.desk-hero-search {
  justify-self: center;
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.desk-search {
  position: relative;
  width: 100%;
}
.desk-search i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b8176;
  font-size: 0.95rem;
  pointer-events: none;
}
.desk-search input {
  width: 100%;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 999px;
  padding: 0.68rem 1.1rem 0.68rem 2.55rem;
  font: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: var(--ines-gray-800, #1a2e24);
  box-shadow: 0 6px 20px rgba(15, 82, 48, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.desk-search input:focus {
  border-color: var(--ines-green, #13b652);
  box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);
  outline: none;
}
.desk-search input::placeholder {
  color: #8a9a90;
}
.desk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-self: end;
}
@media (max-width: 992px) {
  .desk-hero {
    grid-template-columns: 1fr;
  }
  .desk-hero-search {
    justify-self: stretch;
    max-width: none;
  }
  .desk-hero-actions {
    justify-self: stretch;
  }
}
.mk-desk-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  margin-bottom: 1.15rem;
}
.mk-desk-intro h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mk-ink);
}
.mk-lede {
  margin: 0;
  max-width: 36rem;
  color: var(--mk-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.mk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d6b54;
}
.mk-desk-stats {
  display: flex;
  gap: 0.65rem;
}
.mk-stat {
  min-width: 7.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  box-shadow: 0 8px 22px rgba(15, 40, 28, 0.04);
}
.mk-stat span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-stat strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--mk-ink);
  line-height: 1.1;
}
.mk-stat.is-warn strong { color: var(--mk-warn); }
.mk-stat.is-ok strong { color: var(--mk-ok); }

.mk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.65rem;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--mk-line);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
}
.mk-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.2rem;
  background: var(--mk-soft);
  border-radius: 0.75rem;
}
.mk-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  color: #4b5c52;
}
.mk-tab em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  color: var(--mk-ink);
}
.mk-tab:hover { color: var(--mk-ink); background: rgba(255,255,255,0.65); }
.mk-tab.is-active {
  background: #143528;
  color: #f4faf6;
}
.mk-tab.is-active em {
  background: rgba(245, 196, 0, 0.95);
  color: #1a2e24;
}
.mk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.mk-filter-select {
  min-width: 11rem;
  max-width: 16rem;
}
.mk-search {
  position: relative;
  min-width: 12rem;
}
.mk-search i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8aa094;
  font-size: 0.9rem;
  pointer-events: none;
}
.mk-search .form-control {
  padding-left: 2.15rem;
}

.mk-split {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  min-height: 62vh;
}
.mk-queue {
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
  padding: 0.55rem;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(15, 40, 28, 0.04);
}
.mk-queue-label {
  padding: 0.35rem 0.55rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-queue-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.8rem 0.75rem;
  margin-bottom: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mk-queue-item:hover {
  background: var(--mk-soft);
  border-color: #d3e4da;
}
.mk-queue-item.is-active {
  background: linear-gradient(180deg, #f7fbf8, #eaf5ee);
  border-color: #b7d9c4;
  box-shadow: inset 3px 0 0 var(--ines-green, #13b652);
}
.mk-queue-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
}
.mk-queue-top strong {
  font-size: 0.92rem;
  color: var(--mk-ink);
}
.mk-queue-item p {
  margin: 0.3rem 0 0.45rem;
  font-size: 0.82rem;
  color: var(--mk-muted);
  line-height: 1.35;
}
.mk-queue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  font-size: 0.75rem;
  color: #7a8c82;
}
.mk-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: #3d5a4c;
}
.mk-score-chip {
  font-weight: 800;
  color: var(--mk-ink);
}
.mk-score-chip em {
  font-style: normal;
  font-weight: 600;
  color: var(--mk-muted);
}
.mk-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.mk-pill.is-warn {
  background: #fff4e5;
  color: var(--mk-warn);
}
.mk-pill.is-ok {
  background: #e5f6ec;
  color: var(--mk-ok);
}

.mk-detail {
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  border-radius: 1.1rem;
  box-shadow: 0 12px 32px rgba(15, 40, 28, 0.05);
  overflow: hidden;
  min-height: 28rem;
}
.mk-detail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem 1rem;
  border-bottom: 1px solid var(--mk-line);
  background:
    linear-gradient(180deg, #f9fcfa 0%, #ffffff 100%);
}
.mk-detail-head h2 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  color: var(--mk-ink);
  letter-spacing: -0.015em;
}
.mk-detail-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0;
  color: var(--mk-muted);
  font-size: 0.88rem;
}
.mk-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #143528;
  background: #e8f6ec;
  border: 1px solid #cfe6d7;
  text-transform: uppercase;
}
.mk-detail-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.mk-detail-who strong { color: var(--mk-ink); font-size: 0.9rem; }
.mk-detail-who span { font-size: 0.78rem; }
.mk-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b7c7bd;
}
.mk-score-hero {
  min-width: 7.5rem;
  text-align: center;
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid var(--mk-line);
  background: #f4faf6;
}
.mk-score-hero.is-draft {
  background: #fff8ef;
  border-color: #f3dfc2;
}
.mk-score-hero.is-live {
  background: #e8f6ec;
  border-color: #c5e6d1;
}
.mk-score-hero span {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-score-hero strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--mk-ink);
  line-height: 1.1;
  margin: 0.15rem 0;
}
.mk-score-hero em {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--mk-muted);
  font-weight: 650;
}

.mk-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
  gap: 1rem;
  padding: 1rem 1.15rem 1.25rem;
}
.mk-panel {
  background: #fbfcfb;
  border: 1px solid var(--mk-line);
  border-radius: 0.95rem;
  padding: 1rem 1.05rem;
  margin-bottom: 0.9rem;
}
.mk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.mk-panel h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--mk-ink);
}
.mk-rubric {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.mk-rubric article {
  background: #fff;
  border: 1px solid #e4eee8;
  border-radius: 0.7rem;
  padding: 0.55rem 0.65rem;
}
.mk-rubric span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mk-muted);
  margin-bottom: 0.15rem;
}
.mk-rubric strong {
  font-size: 1.05rem;
  color: var(--mk-ink);
}
.mk-ai-note {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.7rem;
  background: #fff;
  border: 1px dashed #c9ddd1;
}
.mk-ai-note p:last-child { margin-bottom: 0; color: #3d5348; font-size: 0.9rem; line-height: 1.5; }
.mk-tips {
  margin: 0.75rem 0 0;
  padding: 0 0 0 1.1rem;
  color: #3d5348;
  font-size: 0.88rem;
}
.mk-tips li { margin-bottom: 0.25rem; }
.mk-plag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #eef5f0;
  color: #3d5a4c;
}
.mk-plag.is-high {
  background: #fde8e8;
  color: #9b1c1c;
}
.mk-file-row { margin-bottom: 0.75rem; }
.mk-work {
  background: #fff;
  border: 1px solid #e4eee8;
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2c3d34;
}
.mk-answer {
  padding: 0.65rem 0;
  border-top: 1px solid #eef3f0;
}
.mk-answer:first-child { border-top: 0; padding-top: 0; }
.mk-answer strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: #3d6b54;
}
.mk-decide {
  position: sticky;
  top: 0.75rem;
  background: linear-gradient(180deg, #ffffff, #f7fbf8);
  border-color: #c5dfd0;
  box-shadow: 0 10px 24px rgba(15, 40, 28, 0.06);
}
.mk-decide .lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.mk-hint {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--mk-muted);
  line-height: 1.4;
}
.mk-released-score {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--mk-muted);
}
.mk-released-score strong {
  font-size: 1.45rem;
  color: var(--mk-ok);
}
.mk-released-score em {
  font-style: normal;
  font-weight: 650;
}
.mk-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mk-history li {
  padding: 0.65rem 0;
  border-top: 1px solid #e8f0eb;
}
.mk-history li:first-child { border-top: 0; padding-top: 0; }
.mk-history strong {
  display: block;
  color: var(--mk-ink);
  font-size: 0.88rem;
}
.mk-history span {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d6b54;
}
.mk-history em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--mk-muted);
  margin-top: 0.15rem;
}
.mk-history small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #5a6e64;
}
.mk-muted { color: var(--mk-muted); font-size: 0.9rem; }
.mk-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--mk-muted);
}
.mk-empty i { font-size: 1.6rem; color: #9bb5a5; }
.mk-empty p { margin: 0.5rem 0 0; font-size: 0.9rem; }
.mk-empty-lg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: 2.5rem 1.5rem;
}
.mk-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: #e8f6ec;
  color: #0f6b3c;
  font-size: 1.45rem;
  margin-bottom: 0.85rem;
  border: 1px solid #cfe6d7;
}
.mk-empty-lg h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  color: var(--mk-ink);
}
.mk-empty-lg p {
  margin: 0;
  max-width: 22rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .mk-detail-grid { grid-template-columns: 1fr; }
  .mk-decide { position: static; }
  .mk-rubric { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mk-split { grid-template-columns: 1fr; }
  .mk-queue {
    position: static;
    max-height: 18rem;
  }
}
@media (max-width: 576px) {
  .mk-rubric { grid-template-columns: 1fr 1fr; }
  .mk-toolbar { padding: 0.55rem; }
  .mk-filters { width: 100%; }
  .mk-search, .mk-filter-select { width: 100%; max-width: none; }
}

/* --- Assessment desks (assignments / exams / quizzes) --- */
.lad-page .app-content {
  background:
    radial-gradient(900px 420px at 0% -8%, rgba(19, 182, 82, 0.07), transparent 55%),
    #f3f5f4;
}
.lad-shell { max-width: 1180px; margin: 0 auto; }
.lad-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1rem; align-items: flex-end; margin-bottom: 1.15rem;
}
.lad-kicker {
  margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #5a7a68;
}
.lad-head h1 {
  margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 800; color: #0f2920; letter-spacing: -0.02em;
}
.lad-sub { margin: 0.35rem 0 0; color: #6b7280; font-size: 0.95rem; }
.lad-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lad-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-radius: 0.65rem; padding: 0.55rem 1rem; font-weight: 700;
  font-size: 0.88rem; border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
}
.lad-btn-primary { background: var(--ines-green-dark); color: #fff; }
.lad-btn-primary:hover { background: #0c3f26; color: #fff; }
.lad-btn-ghost {
  background: #fff; border-color: #d5e3da; color: #374151;
}
.lad-btn-ghost:hover { background: #eef5f0; color: #0f2920; }
.lad-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.lad-link {
  background: none; border: 0; color: var(--ines-green-dark);
  font-weight: 700; font-size: 0.88rem; cursor: pointer; padding: 0.25rem 0.35rem;
}
.lad-link:hover { color: var(--ines-green); text-decoration: underline; }
.lad-icon-danger {
  border: 0; background: transparent; color: #9b1c1c; cursor: pointer; padding: 0.25rem;
}
.lad-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem; margin-bottom: 1rem;
}
.lad-stat {
  background: #fff; border: 1px solid #e5efe8; border-radius: 14px;
  padding: 0.85rem 1rem; box-shadow: 0 8px 20px rgba(15,41,32,0.04);
}
.lad-stat span {
  display: block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280;
}
.lad-stat strong {
  display: block; margin-top: 0.2rem; font-size: 1.45rem; color: #0f2920;
}
.lad-stat.is-ok strong { color: #0f6b3c; }
.lad-stat.is-draft strong { color: #5b4a9a; }
.lad-stat.is-muted strong { color: #6b7280; }
.lad-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
  align-items: center; margin-bottom: 1rem; padding: 0.65rem 0.75rem;
  background: #fff; border: 1px solid #e5efe8; border-radius: 14px;
}
.lad-search { position: relative; flex: 1; min-width: 14rem; }
.lad-search i {
  position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: #8aa094;
}
.lad-search input {
  width: 100%; border: 1px solid #dce8e1; border-radius: 0.6rem;
  padding: 0.55rem 0.75rem 0.55rem 2.2rem; font-size: 0.9rem;
}
.lad-toolbar-right { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.desk-toolbar-unified {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  align-items: center; justify-content: space-between;
}
.lad-toolbar-left {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
}
.desk-date-fields {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
  margin-left: auto;
}
.desk-toolbar-unified > .lad-search { flex: 1 1 14rem; min-width: 12rem; }
.desk-toolbar-unified > .lad-toolbar-right { margin-left: auto; }
.desk-date-field {
  display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem;
}
.desk-date-label {
  font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: #6b7280;
}
.desk-date-input { min-width: 9rem; width: auto; }
.ms-toolbar.desk-toolbar-unified { gap: 0.5rem 0.65rem; }
.ms-toolbar-form {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
}
.ms-toolbar.desk-toolbar-unified .ms-search-wrap { flex: 1 1 200px; min-width: 160px; }
.ms-toolbar.desk-toolbar-unified .ms-count { margin-left: auto; }
.lad-view-toggle {
  display: inline-flex; border: 1px solid #dce8e1; border-radius: 0.6rem; overflow: hidden;
}
.lad-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; color: #6b7280; background: #fff; text-decoration: none;
}
.lad-view-btn + .lad-view-btn { border-left: 1px solid #dce8e1; }
.lad-view-btn:hover { background: #f3faf6; color: #0f5230; }
.lad-view-btn.is-active { background: #e8f6ec; color: #0f5230; }
.lad-view-panel { display: none; }
.lad-view-panel.is-active { display: block; }
.lad-select {
  border: 1px solid #dce8e1; border-radius: 0.6rem; padding: 0.5rem 0.7rem;
  background: #fff; font-size: 0.85rem; font-weight: 650; color: #374151;
}
.lad-list {
  background: #fff; border: 1px solid #e5efe8; border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15,41,32,0.04); overflow: hidden;
}
.lad-card {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.2rem; border-bottom: 1px solid #eef2f0;
}
.lad-card:last-child { border-bottom: 0; }
.lad-card-top {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 0.35rem;
}
.lad-badge {
  display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 0.4rem;
}
.lad-badge-published, .lad-badge-published { background: #e5f6ec; color: #0f6b3c; }
.lad-badge-draft { background: #efeafc; color: #5b4a9a; }
.lad-badge-closed { background: #eef0f2; color: #4b5563; }
.lad-course { font-size: 0.82rem; color: #6b7280; }
.lad-card h2 {
  margin: 0 0 0.45rem; font-size: 1.12rem; font-weight: 800; color: #0f2920;
}
.lad-meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem;
  font-size: 0.84rem; color: #6b7280;
}
.lad-meta i { margin-right: 0.25rem; }
.lad-desc { margin: 0.25rem 0 0; font-size: 0.88rem; color: #6b7280; line-height: 1.4; }
.lad-overdue {
  color: #9b1c1c; font-weight: 700; background: #fde8e8;
  padding: 0.15rem 0.45rem; border-radius: 999px; font-size: 0.75rem;
}
.lad-card-actions {
  display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center;
}
.lad-empty {
  text-align: center; padding: 2.75rem 1.25rem; color: #6b7280;
}
.lad-empty i { font-size: 1.8rem; color: var(--ines-green); display: block; margin-bottom: 0.5rem; }
.lad-empty h3 { color: #0f2920; margin-bottom: 0.35rem; }
.lad-modal { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,0.18); }

/* Scrollable modals: form wrapper must flex; body scrolls (fixes tall create/edit dialogs) */
.modal-dialog-scrollable .modal-dialog {
  max-height: calc(100% - 1rem);
}
.modal-dialog-centered.modal-dialog-scrollable {
  align-items: flex-start;
  min-height: calc(100% - 1rem);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(72vh, calc(100vh - 11rem));
}
.llc-modal .llc-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.llc-modal .llc-form .modal-body {
  display: block;
}

/* Exams scheduling */
.lex-top-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.7fr);
  gap: 1rem; margin-bottom: 1.25rem;
}
.lex-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.65rem;
}
.lex-section-head h2 {
  margin: 0; font-size: 1rem; font-weight: 800; color: #0f2920;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.lex-live-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,0.15);
  animation: lexPulse 1.6s ease-in-out infinite;
}
@keyframes lexPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
  50% { box-shadow: 0 0 0 6px rgba(220,38,38,0.08); }
}
.lex-live-list, .lex-upcoming .lex-table-wrap, .lex-aside .lex-summary-card {
  background: #fff; border: 1px solid #e5efe8; border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15,41,32,0.04);
}
.lex-live-card {
  display: flex; gap: 0.9rem; align-items: center;
  padding: 0.95rem 1rem; border-bottom: 1px solid #eef2f0;
}
.lex-live-card:last-child { border-bottom: 0; }
.lex-time-block {
  width: 3.6rem; height: 3.6rem; border-radius: 0.75rem;
  background: #fee2e2; color: #991b1b; display: grid; place-content: center;
  text-align: center; flex-shrink: 0;
}
.lex-time-block span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; }
.lex-time-block strong { font-size: 1.15rem; line-height: 1; }
.lex-live-body { flex: 1; min-width: 0; }
.lex-live-top { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 0.25rem; }
.lex-badge-live {
  background: #dc2626; color: #fff; font-size: 0.68rem; font-weight: 800;
  padding: 0.15rem 0.45rem; border-radius: 0.35rem; text-transform: uppercase;
}
.lex-live-body h3 { margin: 0 0 0.35rem; font-size: 1.02rem; color: #0f2920; }
.lex-live-empty, .lex-empty-row { padding: 1.25rem; color: #6b7280; text-align: center; }
.lex-aside { display: grid; gap: 0.75rem; align-content: start; }
.lex-summary-card { padding: 1rem 1.1rem; }
.lex-summary-card span {
  display: block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280;
}
.lex-summary-card strong {
  display: block; margin: 0.25rem 0 0.55rem; font-size: 1.45rem; color: #0f2920;
}
.lex-summary-card p { margin: 0.45rem 0 0; font-size: 0.82rem; color: #6b7280; }
.lex-summary-card p.is-ok { color: #0f6b3c; font-weight: 700; }
.lex-bar {
  height: 0.45rem; border-radius: 999px; background: #e8f0eb; overflow: hidden;
}
.lex-bar i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--ines-green), var(--ines-yellow));
}
.lex-table { width: 100%; border-collapse: collapse; }
.lex-table th {
  text-align: left; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: #6b7280; font-weight: 800; padding: 0.75rem 1rem; background: #f7faf8;
  border-bottom: 1px solid #e5efe8;
}
.lex-table td {
  padding: 0.85rem 1rem; border-bottom: 1px solid #eef2f0; vertical-align: middle;
  font-size: 0.9rem; color: #374151;
}
.lex-table td strong { display: block; color: #0f2920; font-size: 0.92rem; }
.lex-table td span { display: block; font-size: 0.78rem; color: #6b7280; }
.lex-row-actions { display: flex; gap: 0.55rem; align-items: center; white-space: nowrap; }

/* Grading center extras */
.mk-gc-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem; margin-bottom: 1rem;
}
.mk-gc-stat {
  background: #fff; border: 1px solid #e5efe8; border-radius: 14px;
  padding: 0.9rem 1rem; box-shadow: 0 8px 20px rgba(15,41,32,0.04);
}
.mk-gc-stat span {
  display: block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280;
}
.mk-gc-stat strong {
  display: block; margin-top: 0.2rem; font-size: 1.55rem; color: #0f2920;
}
.mk-gc-stat strong.is-warn { color: #b45309; }
.mk-gc-stat em {
  display: block; margin-top: 0.2rem; font-style: normal; font-size: 0.78rem; color: #8a9a90;
}
.mk-gc-bar {
  margin-top: 0.55rem; height: 0.4rem; border-radius: 999px; background: #e8f0eb; overflow: hidden;
}
.mk-gc-bar i { display: block; height: 100%; background: var(--ines-green); }
.mk-desk-actions { display: flex; gap: 0.5rem; align-items: center; }
.mk-head-filter .form-select { min-width: 10rem; }
.mk-queue-who { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.mk-queue-who strong { font-size: 0.9rem; }

@media (max-width: 992px) {
  .lad-stats, .mk-gc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lex-top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lad-stats, .mk-gc-stats { grid-template-columns: 1fr 1fr; }
  .lad-card { flex-direction: column; }
}

/* --- Exam scheduling layout (screenshot structure) --- */
.lex-page .app-content {
  background: #f4f6f5;
}
.lex-shell {
  max-width: 1200px;
  margin: 0 auto;
}
.lex-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  margin-bottom: 1.35rem;
}
.lex-hero h1 {
  margin: 0;
  font-size: clamp(1.65rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f2920;
}
.lex-hero p {
  margin: 0.4rem 0 0;
  max-width: 36rem;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.45;
}
.lex-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.lex-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.6rem;
  padding: 0.6rem 1.05rem;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.lex-btn-primary {
  background: var(--ines-green-dark);
  color: #fff;
}
.lex-btn-primary:hover { background: #0c3f26; color: #fff; }
.lex-btn-secondary {
  background: #fff;
  border-color: #d5e0da;
  color: #1f2937;
}
.lex-btn-secondary:hover { background: #f3f7f4; color: #0f2920; }
.lex-btn-sm { padding: 0.45rem 0.8rem; font-size: 0.82rem; }

.lex-board {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.75fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: start;
}
.lex-panel {
  background: #fff;
  border: 1px solid #e5ebe7;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 41, 32, 0.05);
  overflow: hidden;
}
.lex-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem 0.75rem;
}
.lex-panel-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f2920;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lex-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #e11d48;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.16);
  animation: lexPulse 1.5s ease-in-out infinite;
}
@keyframes lexPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}
.lex-view-all {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ines-green-dark);
  text-decoration: none;
}
.lex-view-all:hover { color: var(--ines-green); }

.lex-live-rows { padding: 0 0.65rem 0.75rem; }
.lex-live-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0.7rem;
  border-radius: 12px;
  border: 1px solid #eef2f0;
  background: #fbfcfb;
  margin-bottom: 0.55rem;
}
.lex-live-row:last-child { margin-bottom: 0; }
.lex-min-box {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.7rem;
  background: #ffe4e6;
  color: #9f1239;
  display: grid;
  place-content: center;
  text-align: center;
}
.lex-min-box span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.lex-min-box strong {
  font-size: 1.2rem;
  line-height: 1;
}
.lex-live-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.2rem;
}
.lex-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #e11d48;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.5rem;
  border-radius: 0.35rem;
}
.lex-live-badge i { font-size: 0.45rem; }
.lex-course-line { font-size: 0.8rem; color: #6b7280; }
.lex-live-info h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
}
.lex-live-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  font-size: 0.82rem;
  color: #6b7280;
}
.lex-live-meta i { margin-right: 0.25rem; }
.lex-live-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
.lex-avatar-stack {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lex-avatar-stack em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b7280;
}
.lex-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d8f3dc;
  color: #0f5230;
  font-size: 0.75rem;
  font-weight: 800;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cfe6d7;
}
.lex-live-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
}
.lex-live-empty i {
  display: block;
  font-size: 1.5rem;
  color: #9bb5a5;
  margin-bottom: 0.45rem;
}

.lex-side-stack {
  display: grid;
  gap: 0.85rem;
}
.lex-stat-card {
  background: #fff;
  border: 1px solid #e5ebe7;
  border-radius: 16px;
  padding: 1.05rem 1.15rem;
  box-shadow: 0 10px 28px rgba(15, 41, 32, 0.05);
}
.lex-stat-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
}
.lex-stat-hero {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.35rem 0 0.75rem;
}
.lex-stat-hero strong {
  font-size: 2rem;
  font-weight: 800;
  color: #0f2920;
  line-height: 1;
}
.lex-stat-hero span {
  font-size: 0.95rem;
  font-weight: 650;
  color: #4b5563;
}
.lex-progress {
  display: flex;
  height: 0.45rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e8eee9;
}
.lex-progress i {
  display: block;
  height: 100%;
}
.lex-progress .is-done { background: var(--ines-green-dark); }
.lex-progress .is-live { background: var(--ines-yellow); }
.lex-stat-foot {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}
.lex-stat-ok {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: #166534;
  line-height: 1.4;
}

.lex-upcoming-panel { margin-top: 0.25rem; }
.lex-upcoming-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.lex-upcoming-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f2920;
}
.lex-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lex-select {
  border: 1px solid #d5e0da;
  background: #fff;
  border-radius: 0.55rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  font-weight: 650;
  color: #374151;
}
.lex-table-card {
  background: #fff;
  border: 1px solid #e5ebe7;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 41, 32, 0.05);
  overflow: auto;
}
.lex-data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.lex-data-table th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 800;
  padding: 0.85rem 1.1rem;
  background: #f7faf8;
  border-bottom: 1px solid #e5ebe7;
}
.lex-data-table td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid #eef2f0;
  vertical-align: middle;
  font-size: 0.9rem;
  color: #374151;
}
.lex-data-table tr:last-child td { border-bottom: 0; }
.lex-data-table td strong {
  display: block;
  color: #0f2920;
  font-size: 0.92rem;
  font-weight: 750;
}
.lex-data-table td > span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #6b7280;
}
.lex-format {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.lex-format > i {
  margin-top: 0.15rem;
  color: #3d6b54;
}
.lex-host-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #374151;
}
.lex-pending-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #e8f6ec;
  color: #0f5230;
  font-size: 0.75rem;
  font-weight: 750;
}
.lex-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.lex-action-link {
  border: 0;
  background: none;
  color: var(--ines-green-dark);
  font-weight: 750;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
}
.lex-action-link:hover { color: var(--ines-green); text-decoration: underline; }
.lex-action-danger {
  border: 0;
  background: none;
  color: #9b1c1c;
  cursor: pointer;
  padding: 0.15rem;
}
.lex-table-empty {
  text-align: center;
  color: #6b7280;
  padding: 1.5rem !important;
}
.lex-past {
  margin-top: 1rem;
}
.lex-past summary {
  cursor: pointer;
  font-weight: 750;
  color: #3d5a4c;
  font-size: 0.92rem;
}

@media (max-width: 992px) {
  .lex-board { grid-template-columns: 1fr; }
  .lex-live-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .lex-live-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* --- Digital archive (past papers) --- */
.lda-page .app-content { background: #f4f6f5; }
.lda-shell { max-width: 1180px; margin: 0 auto; }
.lda-hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1.25rem; }
.lda-hero h1 { margin:0; font-size:clamp(1.6rem,2.4vw,2rem); font-weight:800; color:#0f2920; }
.lda-hero p { margin:.35rem 0 0; color:#6b7280; }
.lda-btn { display:inline-flex; align-items:center; gap:.4rem; border-radius:.6rem; padding:.55rem 1rem; font-size:.88rem; font-weight:700; border:1px solid transparent; text-decoration:none; cursor:pointer; }
.lda-btn-primary { background:var(--ines-green-dark); color:#fff; }
.lda-btn-primary:hover { background:#0c3f26; color:#fff; }
.lda-btn-outline { background:#fff; border-color:var(--ines-green-dark); color:var(--ines-green-dark); }
.lda-btn-outline.is-disabled { opacity:.55; pointer-events:none; }
.lda-filters { display:grid; grid-template-columns:minmax(0,1.6fr) auto; gap:1rem; background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1rem 1.15rem; margin-bottom:1.25rem; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.lda-label { display:block; font-size:.75rem; font-weight:700; color:#6b7280; margin-bottom:.35rem; }
.lda-search-wrap { position:relative; }
.lda-search-wrap i { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#9ca3af; }
.lda-search-wrap input { width:100%; border:1px solid #d5e0da; border-radius:.55rem; padding:.55rem .75rem .55rem 2.2rem; }
.lda-filter-selects { display:flex; flex-wrap:wrap; gap:.65rem; align-items:flex-end; }
.lda-select { border:1px solid #d5e0da; border-radius:.55rem; padding:.5rem .7rem; background:#fff; min-width:8rem; }
.lda-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr); gap:1.1rem; align-items:start; }
.lda-featured { background:#fff; border:1px solid #e5ebe7; border-radius:16px; padding:1.25rem; margin-bottom:1rem; box-shadow:0 10px 28px rgba(15,41,32,.05); position:relative; overflow:hidden; }
.lda-featured-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.lda-code { display:inline-flex; background:#e8f6ec; color:#0f5230; font-size:.72rem; font-weight:800; padding:.25rem .55rem; border-radius:.4rem; }
.lda-views { font-size:.8rem; font-weight:700; color:#0f5230; background:#e8f6ec; padding:.3rem .65rem; border-radius:999px; }
.lda-featured h2 { margin:0 0 .45rem; font-size:1.35rem; font-weight:800; color:#0f2920; }
.lda-featured > p { color:#6b7280; margin:0 0 1rem; }
.lda-featured-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:center; }
.lda-meta { display:flex; flex-wrap:wrap; gap:.75rem 1.1rem; font-size:.84rem; color:#6b7280; }
.lda-featured-actions { display:flex; gap:.45rem; }
.lda-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.lda-card { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1rem; display:flex; flex-direction:column; gap:.45rem; }
.lda-card h3 { margin:0; font-size:.98rem; font-weight:800; color:#0f2920; }
.lda-card > p { margin:0; font-size:.84rem; color:#6b7280; }
.lda-card-date { font-size:.8rem !important; }
.lda-card-actions { margin-top:auto; padding-top:.65rem; border-top:1px solid #eef2f0; display:flex; gap:.75rem; align-items:center; font-size:.84rem; font-weight:700; }
.lda-card-actions a { color:var(--ines-green-dark); text-decoration:none; }
.lda-card-actions .is-missing { color:#b91c1c; }
.lda-card-actions button { border:0; background:none; color:#6b7280; cursor:pointer; }
.lda-side { display:grid; gap:.85rem; }
.lda-stats { background:var(--ines-green-dark); color:#fff; border-radius:16px; padding:1.15rem; }
.lda-stats h3 { margin:0 0 .85rem; font-size:.95rem; }
.lda-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.lda-stat-row strong { display:block; font-size:1.55rem; font-weight:800; line-height:1.1; }
.lda-stat-row span { font-size:.78rem; opacity:.85; }
.lda-quick { background:#e8f6ec; border-radius:16px; padding:1.05rem; }
.lda-quick h3 { margin:0 0 .65rem; font-size:.95rem; color:#0f5230; }
.lda-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.lda-tag { background:#fff; border-radius:999px; padding:.35rem .7rem; font-size:.78rem; font-weight:700; color:#0f2920; text-decoration:none; }
.lda-empty { grid-column:1/-1; text-align:center; color:#6b7280; padding:2rem; background:#fff; border-radius:14px; border:1px dashed #d5e0da; }
@media (max-width:992px) {
  .lda-layout, .lda-filters { grid-template-columns:1fr; }
  .lda-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) { .lda-grid { grid-template-columns:1fr; } }

/* --- Marking schemes / rubrics --- */
.lsc-page .app-content { background:#f4f6f5; }
.lsc-shell { max-width:1120px; margin:0 auto; }
.lsc-hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.lsc-hero h1 { margin:0; font-size:clamp(1.55rem,2.3vw,1.95rem); font-weight:800; color:#0f2920; }
.lsc-hero p { margin:.35rem 0 0; color:#6b7280; }
.lsc-btn { display:inline-flex; align-items:center; gap:.4rem; border-radius:.6rem; padding:.55rem 1rem; font-weight:700; border:0; cursor:pointer; }
.lsc-btn-primary { background:var(--ines-green-dark); color:#fff; }
.lsc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.lsc-card { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem; display:flex; flex-direction:column; }
.lsc-card-top { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; }
.lsc-code { background:#e8f6ec; color:#0f5230; font-size:.72rem; font-weight:800; padding:.22rem .5rem; border-radius:.35rem; }
.lsc-badge { font-size:.7rem; font-weight:800; padding:.2rem .5rem; border-radius:.35rem; }
.lsc-badge.is-final { background:#dcfce7; color:#166534; }
.lsc-badge.is-draft { background:#e8f6ec; color:#0f5230; }
.lsc-card h2 { margin:0 0 .85rem; font-size:1.05rem; font-weight:800; color:#0f2920; }
.lsc-criteria { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; flex:1; }
.lsc-crit-row { display:flex; justify-content:space-between; font-size:.84rem; color:#374151; font-weight:650; }
.lsc-bar { height:.35rem; background:#e8eee9; border-radius:999px; overflow:hidden; margin-top:.25rem; }
.lsc-bar i { display:block; height:100%; background:var(--ines-green-dark); }
.lsc-card-actions { display:flex; justify-content:flex-end; gap:.35rem; margin-top:.9rem; }
.lsc-icon-btn { border:0; background:none; color:#6b7280; cursor:pointer; padding:.25rem; text-decoration:none; }
.lsc-new { border:2px dashed #b7d4c2; background:#e8f6ec; border-radius:14px; padding:1.5rem 1rem; text-align:center; cursor:pointer; color:#0f5230; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; }
.lsc-new-icon { width:2.4rem; height:2.4rem; border-radius:.55rem; background:#fff; display:grid; place-content:center; font-size:1.1rem; }
.lsc-new strong { font-size:1rem; }
.lsc-new span { font-size:.82rem; color:#3d6b54; max-width:14rem; }
.lsc-section-title { margin:0 0 .75rem; font-size:1.15rem; font-weight:800; color:#0f2920; }
.lsc-pending-list { background:#fff; border:1px solid #e5ebe7; border-radius:14px; overflow:hidden; }
.lsc-pending-row { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid #eef2f0; align-items:center; }
.lsc-pending-row:last-child { border-bottom:0; }
.lsc-pending-row span { display:block; font-size:.8rem; color:#6b7280; }
.lsc-link { border:0; background:none; color:var(--ines-green-dark); font-weight:750; cursor:pointer; }
.lsc-table-wrap { background:#fff; border:1px solid #e5ebe7; border-radius:14px; overflow:auto; }
.lsc-table { width:100%; border-collapse:collapse; min-width:560px; }
.lsc-table th { text-align:left; background:#f7faf8; color:#0f5230; font-size:.82rem; padding:.75rem 1rem; border-bottom:1px solid #e5ebe7; }
.lsc-table td { padding:.8rem 1rem; border-bottom:1px solid #eef2f0; font-size:.9rem; }
.lsc-table a { color:var(--ines-green-dark); font-weight:700; }
.lsc-empty { text-align:center; color:#6b7280; padding:1.25rem !important; }
@media (max-width:900px) { .lsc-grid { grid-template-columns:1fr; } }

/* --- Analytics --- */
.lan-page .app-content { background:#f4f6f5; }
.lan-shell { max-width:1120px; margin:0 auto; }
.lan-hero { margin-bottom:1.2rem; }
.lan-hero h1 { margin:0; font-size:clamp(1.55rem,2.3vw,1.95rem); font-weight:800; color:#0f2920; }
.lan-hero p { margin:.35rem 0 0; color:#6b7280; }
.lan-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; }
.lan-kpi { background:#fff; border:1px solid #e5ebe7; border-radius:12px; padding:.75rem .9rem; box-shadow:0 6px 16px rgba(15,41,32,.04); }
.lan-kpi-label { display:block; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; font-weight:800; }
.lan-kpi strong { display:block; margin:.2rem 0 .25rem; font-size:1.35rem; font-weight:800; color:#0f2920; }
.lan-charts-compact {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.75rem;
  margin-bottom:1rem;
}
.lan-charts-quad {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
  margin-bottom:1rem;
}
.lan-chart-sm { height: 148px; position: relative; }
.lan-chart-md { height: 188px; position: relative; }
.lan-chart-sm canvas, .lan-chart-md canvas { width:100% !important; height:100% !important; }
.lan-split { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr); gap:.75rem; margin-bottom:1rem; align-items:start; }
.lan-panel-head h2, .lan-risk-head h2 { font-size:.95rem !important; }
.lan-table th { padding:.55rem .75rem; }
.lan-table td { padding:.55rem .75rem; font-size:.84rem; }
.lan-charts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.15rem; }
.lan-charts-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lan-kpi { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem 1.15rem; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.lan-kpi.is-alert { border-left:4px solid #e11d48; }
.lan-kpi-label { display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; font-weight:800; }
.lan-kpi strong { display:block; margin:.35rem 0 .4rem; font-size:1.75rem; font-weight:800; color:#0f2920; }
.lan-kpi strong.is-danger { color:#be123c; }
.lan-kpi em { font-style:normal; font-size:.82rem; color:#6b7280; }
.lan-kpi em.is-ok { color:#166534; }
.lan-kpi em.is-danger { color:#be123c; }
.lan-bar { height:.4rem; background:#e8eee9; border-radius:999px; overflow:hidden; margin:.45rem 0; }
.lan-bar i { display:block; height:100%; background:var(--ines-green); }
.lan-charts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.15rem; }
.lan-panel, .lan-risk { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.lan-panel-head, .lan-risk-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.lan-panel-head h2, .lan-risk-head h2 { margin:0; font-size:1.05rem; font-weight:800; color:#0f2920; }
.lan-chip { font-size:.78rem; font-weight:700; background:#f3f7f4; border:1px solid #d5e0da; border-radius:.45rem; padding:.3rem .55rem; }
.lan-btn { background:var(--ines-green-dark); color:#fff; border-radius:.5rem; padding:.45rem .85rem; font-size:.84rem; font-weight:700; text-decoration:none; }
.lan-table-wrap { overflow:auto; }
.lan-table { width:100%; border-collapse:collapse; min-width:640px; }
.lan-table th { text-align:left; background:#e8f6ec; color:#0f5230; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:.7rem .9rem; }
.lan-table td { padding:.8rem .9rem; border-bottom:1px solid #eef2f0; font-size:.9rem; }
.lan-student { display:flex; align-items:center; gap:.55rem; }
.lan-avatar { width:2rem; height:2rem; border-radius:999px; background:#d8f3dc; color:#0f5230; display:grid; place-content:center; font-size:.75rem; font-weight:800; }
.lan-muted { color:#6b7280; }
.lan-table .is-danger { color:#be123c; }
.lan-table .is-ok { color:#166534; }
.lan-table a { color:var(--ines-green-dark); font-weight:750; }
.lan-empty { text-align:center; color:#6b7280; padding:1.25rem !important; }
@media (max-width:1200px) { .lan-kpis, .lan-charts-compact { grid-template-columns:repeat(2, minmax(0,1fr)); } .lan-split { grid-template-columns:1fr; } }
@media (max-width:1100px) { .lan-kpis, .lan-charts, .lan-charts-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) { .lan-kpis, .lan-charts, .lan-charts-3, .lan-charts-compact, .lan-charts-quad { grid-template-columns:1fr; } }

/* --- Thesis review --- */
.lth-page .app-content { background:#f4f6f5; }
.lth-shell { width: 100%; }
.lth-hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; }
.lth-hero h1 { margin:0; font-size:clamp(1.55rem,2.3vw,1.95rem); font-weight:800; color:#0f2920; }
.lth-hero p { margin:.35rem 0 0; color:#6b7280; max-width:36rem; }
.lth-select { border:1px solid #d5e0da; border-radius:.55rem; padding:.5rem .75rem; background:#fff; }
.lth-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1.15rem; }
.lth-kpi { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.lth-kpi-top { display:flex; justify-content:space-between; align-items:center; color:#6b7280; font-size:.82rem; font-weight:700; }
.lth-ico { width:2rem; height:2rem; border-radius:.55rem; display:grid; place-content:center; }
.lth-ico.is-blue { background:#e8f6ec; color:#0f5230; }
.lth-ico.is-warn { background:#fff7ed; color:#c2410c; }
.lth-ico.is-ok { background:#dcfce7; color:#166534; }
.lth-kpi strong { display:block; font-size:1.8rem; font-weight:800; color:#0f2920; margin:.35rem 0; }
.lth-kpi em { font-style:normal; font-size:.82rem; color:#6b7280; }
.lth-kpi em.is-ok { color:#166534; }
.lth-kpi em.is-danger { color:#be123c; }
.lth-bar { height:.4rem; background:#e8eee9; border-radius:999px; overflow:hidden; margin:.35rem 0; }
.lth-bar i { display:block; height:100%; background:var(--ines-green); }
.lth-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,.75fr); gap:1rem; align-items:start; }
.lth-panel { background:#fff; border:1px solid #e5ebe7; border-radius:14px; box-shadow:0 8px 24px rgba(15,41,32,.04); overflow:hidden; }
.lth-panel-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:1rem 1.1rem .5rem; }
.lth-panel-head h2 { margin:0; font-size:1.05rem; font-weight:800; }
.lth-stages { display:inline-flex; background:#f3f7f4; border-radius:.55rem; padding:.15rem; gap:.1rem; }
.lth-stages a { text-decoration:none; color:#4b5563; font-size:.8rem; font-weight:700; padding:.35rem .65rem; border-radius:.4rem; }
.lth-stages a.is-active { background:#fff; color:#0f5230; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.lth-table { width:100%; border-collapse:collapse; }
.lth-table th { text-align:left; font-size:.72rem; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; padding:.65rem 1.1rem; border-bottom:1px solid #eef2f0; }
.lth-table td { padding:.85rem 1.1rem; border-bottom:1px solid #eef2f0; vertical-align:middle; }
.lth-student { display:flex; gap:.65rem; align-items:center; }
.lth-avatar { width:2.2rem; height:2.2rem; border-radius:999px; background:#d8f3dc; color:#0f5230; display:grid; place-content:center; font-weight:800; flex-shrink:0; }
.lth-student strong { display:block; color:#0f2920; }
.lth-student span { display:block; font-size:.8rem; color:#6b7280; }
.lth-badge { display:inline-flex; padding:.22rem .55rem; border-radius:999px; font-size:.72rem; font-weight:750; background:#e5e7eb; color:#374151; }
.lth-badge-submitted, .lth-badge-under_review { background:#e8f6ec; color:#0f5230; }
.lth-badge-approved { background:#dcfce7; color:#166534; }
.lth-badge-changes_requested { background:#fff7ed; color:#c2410c; }
.lth-badge-rejected { background:#fee2e2; color:#b91c1c; }
.lth-muted { color:#6b7280; font-size:.85rem; }
.lth-table .is-ok { color:#166534; font-weight:750; }
.lth-table .is-danger { color:#be123c; font-weight:750; }
.lth-badge-draft { background:#e5e7eb; color:#4b5563; }
.lth-link { color:var(--ines-green-dark); font-weight:750; text-decoration:none; }
.lth-empty { text-align:center; color:#6b7280; padding:1.5rem !important; }
.lth-side { display:grid; gap:.85rem; }
.lth-widget { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem; }
.lth-widget h3 { margin:0 0 .75rem; font-size:.98rem; font-weight:800; }
.lth-deadlines { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.75rem; }
.lth-deadlines li { display:flex; gap:.55rem; }
.lth-dot { width:.55rem; height:.55rem; border-radius:999px; background:var(--ines-yellow); margin-top:.4rem; flex-shrink:0; }
.lth-deadlines strong { display:block; font-size:.88rem; }
.lth-deadlines span { font-size:.78rem; color:#6b7280; }
.lth-btn-block { display:block; text-align:center; background:#f3f7f4; border:1px solid #d5e0da; border-radius:.55rem; padding:.55rem; font-weight:750; color:#0f5230; text-decoration:none; }
.lth-resources { background:linear-gradient(145deg,#e8f6ec,#f7faf8); border-radius:14px; padding:1.1rem; color:#0f5230; }
.lth-resources i { font-size:1.35rem; }
.lth-resources strong { display:block; margin:.35rem 0; }
.lth-resources p { margin:0; font-size:.84rem; color:#3d6b54; }
@media (max-width:992px) { .lth-layout, .lth-kpis { grid-template-columns:1fr; } }

/* --- Quiz builder canvas --- */
.lqz-page .app-content { background:#f4f6f5; }
.lqz-shell { max-width:1180px; margin:0 auto; }
.lqz-hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.lqz-crumb { margin:0; font-size:.82rem; color:#6b7280; }
.lqz-crumb span { margin:0 .2rem; color:#9ca3af; }
.lqz-hero h1 { margin:.25rem 0 0; font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:800; color:#0f2920; }
.lqz-hero-actions { display:flex; gap:.5rem; }
.lqz-btn { display:inline-flex; align-items:center; gap:.35rem; border-radius:.55rem; padding:.5rem .95rem; font-weight:750; font-size:.88rem; border:1px solid transparent; cursor:pointer; }
.lqz-btn-ghost { background:#fff; border-color:#d5e0da; color:#1f2937; }
.lqz-btn-primary { background:var(--ines-green-dark); color:#fff; }
.lqz-steps { display:flex; gap:0; align-items:center; margin-bottom:1.15rem; background:#fff; border:1px solid #e5ebe7; border-radius:999px; padding:.55rem 1rem; overflow:auto; }
.lqz-step { display:flex; align-items:center; gap:.45rem; flex:1; min-width:9rem; position:relative; color:#9ca3af; font-size:.84rem; font-weight:700; }
.lqz-step span { width:1.6rem; height:1.6rem; border-radius:999px; background:#e5e7eb; color:#6b7280; display:grid; place-content:center; font-size:.78rem; }
.lqz-step.is-done span, .lqz-step.is-active span { background:var(--ines-green-dark); color:#fff; }
.lqz-step.is-done, .lqz-step.is-active { color:#0f2920; }
.lqz-builder { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,.7fr); gap:1rem; align-items:start; }
.lqz-canvas { background:#fff; border:1px solid #e5ebe7; border-radius:16px; padding:1.1rem; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.lqz-canvas-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.85rem; }
.lqz-canvas-head h2 { margin:0; font-size:1.05rem; font-weight:800; }
.lqz-points { font-size:.82rem; font-weight:750; color:#0f5230; background:#e8f6ec; padding:.3rem .6rem; border-radius:.4rem; }
.lqz-create-card { border:1px solid #cfe6d7; border-left:4px solid var(--ines-green-dark); border-radius:12px; padding:1rem; background:#fbfcfb; margin-bottom:1rem; }
.lqz-q-toolbar { display:grid; grid-template-columns:1fr auto; gap:.75rem; margin-bottom:.75rem; }
.lqz-q-toolbar label, .lqz-field { display:block; }
.lqz-q-toolbar span, .lqz-field span { display:block; font-size:.78rem; font-weight:700; color:#4b5563; margin-bottom:.3rem; }
.lqz-field em { font-style:normal; font-weight:500; color:#9ca3af; }
.lqz-input, .lqz-textarea { width:100%; border:1px solid #d5e0da; border-radius:.55rem; padding:.5rem .7rem; background:#fff; }
.lqz-textarea { resize:vertical; min-height:7rem; }
.lqz-add-types { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin: .85rem 0; font-size:.84rem; color:#6b7280; }
.lqz-type { border:1px dashed #b7d4c2; background:#fff; border-radius:.55rem; padding:.45rem .7rem; font-weight:700; color:#0f5230; cursor:pointer; }
.lqz-create-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:center; }
.lqz-check { display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; font-weight:650; }
.lqz-existing h3 { margin:0 0 .65rem; font-size:.95rem; font-weight:800; }
.lqz-q-row { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; padding:.7rem .75rem; border:1px solid #eef2f0; border-radius:10px; margin-bottom:.45rem; background:#fafbfa; }
.lqz-q-row-main { display:flex; gap:.55rem; align-items:center; flex:1; min-width:12rem; }
.lqz-q-row-main strong { display:block; font-size:.84rem; }
.lqz-q-row-main span { display:block; font-size:.8rem; color:#6b7280; }
.lqz-q-row > em { font-style:normal; font-size:.8rem; font-weight:750; color:#4b5563; }
.lqz-icon { border:0; background:none; color:#6b7280; cursor:pointer; padding:.2rem; }
.lqz-icon.is-danger { color:#b91c1c; }
.lqz-empty { color:#6b7280; }
.lqz-side { display:grid; gap:.85rem; }
.lqz-settings { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem; }
.lqz-settings h3 { margin:0 0 .35rem; font-size:1rem; font-weight:800; }
.lqz-settings > p { margin:0 0 .85rem; font-size:.84rem; color:#6b7280; }
.lqz-setting { padding:.65rem 0; border-top:1px solid #eef2f0; }
.lqz-setting-row { display:flex; justify-content:space-between; align-items:center; }
.lqz-toggle { width:2.2rem; height:1.2rem; border-radius:999px; background:#d1d5db; position:relative; }
.lqz-toggle.is-on { background:var(--ines-green); }
.lqz-toggle.is-on::after { content:""; position:absolute; width:.9rem; height:.9rem; border-radius:999px; background:#fff; top:.15rem; right:.15rem; }
.lqz-info { display:flex; gap:.55rem; background:#e8f6ec; border-radius:12px; padding:.9rem; color:#0f5230; }
.lqz-info p { margin:.2rem 0 0; font-size:.82rem; color:#3d6b54; }
.lqz-side-stats { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.lqz-side-stats div { background:#fff; border:1px solid #e5ebe7; border-radius:12px; padding:.75rem; text-align:center; }
.lqz-side-stats strong { display:block; font-size:1.3rem; font-weight:800; color:#0f2920; }
.lqz-side-stats span { font-size:.78rem; color:#6b7280; }
@media (max-width:992px) { .lqz-builder { grid-template-columns:1fr; } .lqz-q-toolbar { grid-template-columns:1fr; } }

/* --- Assignments table desk --- */
.las-table-wrap { background:#fff; border:1px solid #e5ebe7; border-radius:14px; overflow:auto; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.las-table { width:100%; border-collapse:collapse; min-width:720px; }
.las-table th { text-align:left; background:#e8f6ec; color:#0f5230; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:.75rem 1rem; }
.las-table td { padding:.9rem 1rem; border-bottom:1px solid #eef2f0; vertical-align:middle; font-size:.9rem; }
.las-muted { color:#6b7280; }
.las-overdue { display:inline-block; margin-left:.4rem; font-size:.72rem; font-weight:800; color:#b91c1c; }
.las-sub { font-weight:750; }
.las-bar { height:.35rem; background:#e8eee9; border-radius:999px; overflow:hidden; margin-top:.3rem; max-width:6rem; }
.las-bar i { display:block; height:100%; background:var(--ines-green); }
.las-actions { display:flex; align-items:center; gap:.65rem; }
.las-actions a, .las-actions .lad-link { color:var(--ines-green-dark); font-weight:750; text-decoration:none; border:0; background:none; cursor:pointer; }
.las-empty { text-align:center; color:#6b7280; padding:1.5rem !important; }

/* --- Video library (screenshot card grid) --- */
.lvid-page .app-content { background:#f8faf9; }
.lvid-shell { max-width:1200px; margin:0 auto; }
.lvid-hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1.25rem; }
.lvid-hero h1 { margin:0; font-size:clamp(1.65rem,2.4vw,2.05rem); font-weight:800; letter-spacing:-0.02em; color:#0f2920; }
.lvid-hero p { margin:.4rem 0 0; color:#6b7280; font-size:.95rem; max-width:36rem; line-height:1.45; }
.lvid-btn { display:inline-flex; align-items:center; gap:.45rem; border-radius:.55rem; padding:.62rem 1.15rem; font-weight:750; font-size:.9rem; border:1px solid transparent; cursor:pointer; }
.lvid-btn-primary { background:var(--ines-green-dark); color:#fff; box-shadow:0 4px 12px rgba(15,82,48,.22); }
.lvid-btn-primary:hover { background:#0c3f26; color:#fff; }
.lvid-toolbar {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.85rem;
  background:#fff; border:1px solid #e2e8e4; border-radius:12px; padding:.9rem 1.05rem; margin-bottom:1.35rem;
  box-shadow:0 1px 2px rgba(15,41,32,.03);
}
.lvid-filters { display:flex; flex-wrap:wrap; gap:.55rem; }
.lvid-select {
  appearance:none; border:1px solid #d7e0db; border-radius:.5rem; padding:.52rem 2rem .52rem .8rem;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right .7rem center;
  font-size:.88rem; font-weight:600; color:#374151; min-width:8.5rem;
}
.lvid-search { position:relative; min-width:min(100%,17.5rem); flex:0 1 17.5rem; }
.lvid-search i { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:.95rem; }
.lvid-search input {
  width:100%; border:1px solid #d7e0db; border-radius:.5rem; padding:.52rem .8rem .52rem 2.25rem;
  font-size:.88rem; background:#fff;
}
.lvid-search input::placeholder { color:#9ca3af; }
.lvid-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}
@media (min-width: 576px) {
  .lvid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .lvid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .lvid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lvid-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.lvid-card {
  background:#fff; border:1px solid #e5ebe8; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(15,41,32,.05); display:flex; flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.lvid-card:hover {
  border-color:#cfe0d5; box-shadow:0 10px 28px rgba(15,41,32,.1); transform:translateY(-2px);
}
.lvid-thumb { position:relative; aspect-ratio:16/10; background:#111827; overflow:hidden; }
.lvid-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lvid-thumb-fallback {
  width:100%; height:100%; display:grid; place-content:center;
  color:rgba(255,255,255,.45); font-size:2.4rem;
  background:linear-gradient(160deg,#1a3d2e 0%, #0f5230 45%, #0a2e1c 100%);
}
.lvid-play {
  position:absolute; inset:0; display:grid; place-content:center; pointer-events:none;
  opacity:0; transition:opacity .18s ease; background:rgba(0,0,0,.28);
}
.lvid-card:hover .lvid-play { opacity:1; }
.lvid-play span {
  width:3rem; height:3rem; border-radius:999px; background:rgba(255,255,255,.94);
  display:grid; place-content:center; color:#0f5230; font-size:1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.lvid-badge {
  position:absolute; top:.65rem; left:.65rem; z-index:2;
  background:#e11d48; color:#fff; font-size:.62rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:.28rem .5rem; border-radius:.35rem;
  box-shadow:0 2px 6px rgba(225,29,72,.35);
}
.lvid-badge.is-preview { background:var(--ines-yellow); color:#0f2920; box-shadow:0 2px 6px rgba(240,192,32,.35); }
.lvid-dur {
  position:absolute; right:.6rem; bottom:.6rem; z-index:2;
  background:rgba(0,0,0,.82); color:#fff; font-size:.72rem; font-weight:750;
  font-variant-numeric:tabular-nums; padding:.2rem .45rem; border-radius:.3rem;
}
.lvid-body { padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.lvid-body-top { display:flex; justify-content:space-between; gap:.55rem; align-items:flex-start; }
.lvid-body h2 {
  margin:0; font-size:.95rem; font-weight:800; color:#111827; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lvid-more {
  border:0; background:none; color:#9ca3af; cursor:pointer; padding:.1rem .15rem; line-height:1;
  border-radius:.35rem; flex-shrink:0;
}
.lvid-more:hover { color:#374151; background:#f3f7f4; }
.lvid-course {
  color:var(--ines-green-dark); font-size:.82rem; font-weight:700; text-decoration:none;
  display:inline-block; line-height:1.35;
}
.lvid-course:hover { color:var(--ines-green); text-decoration:underline; }
.lvid-foot {
  margin-top:auto; padding-top:.7rem; border-top:1px solid #f0f3f1;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  font-size:.78rem; color:#6b7280; font-weight:600;
}
.lvid-foot i { margin-right:.25rem; }
.lvid-empty {
  grid-column:1/-1; text-align:center; background:#fff; border:1px solid #e5ebe8;
  border-radius:12px; padding:3rem 1.25rem; color:#6b7280; box-shadow:0 2px 8px rgba(15,41,32,.04);
}
.lvid-empty i { font-size:2rem; color:#9bb5a5; display:block; margin-bottom:.55rem; }
.lvid-empty h3 { margin:0 0 .35rem; color:#0f2920; font-weight:800; }

/* --- Lecture notes --- */
.lnote-page .app-content { background:#f4f6f5; }
.lnote-shell { max-width:1180px; margin:0 auto; }
.lnote-hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.lnote-hero h1 { margin:0; font-size:clamp(1.55rem,2.3vw,1.95rem); font-weight:800; color:#0f2920; }
.lnote-hero p { margin:.35rem 0 0; color:#6b7280; }
.lnote-hero-actions { display:flex; gap:.5rem; }
.lnote-btn { display:inline-flex; align-items:center; gap:.35rem; border-radius:.55rem; padding:.5rem .95rem; font-weight:750; border:1px solid transparent; cursor:pointer; }
.lnote-btn-primary { background:var(--ines-green-dark); color:#fff; }
.lnote-btn-ghost { background:#fff; border-color:#d5e0da; color:#1f2937; }
.lnote-filters { display:flex; flex-wrap:wrap; gap:.5rem; background:#fff; border:1px solid #e5ebe7; border-radius:12px; padding:.75rem; margin-bottom:1rem; }
.lnote-select { border:1px solid #d5e0da; border-radius:.5rem; padding:.45rem .65rem; background:#fff; }
.lnote-search { position:relative; flex:1; min-width:12rem; }
.lnote-search i { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:#9ca3af; }
.lnote-search input { width:100%; border:1px solid #d5e0da; border-radius:.5rem; padding:.45rem .65rem .45rem 2rem; }
.lnote-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(220px,.7fr); gap:1rem; align-items:start; }
.lnote-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-content: start;
}
.lnote-modules-grid .lnote-group { margin-bottom: 0; height: 100%; }
.lnote-group { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1rem; margin-bottom:.85rem; box-shadow:0 8px 22px rgba(15,41,32,.04); }
.lnote-group-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.65rem; }
.lnote-group-head h2 { margin:0; font-size:1rem; font-weight:800; color:#0f2920; }
.lnote-count { background:#e8f6ec; color:#0f5230; font-size:.72rem; font-weight:800; padding:.22rem .55rem; border-radius:.4rem; }
.lnote-rows { list-style:none; margin:0; padding:0; }
.lnote-row { display:flex; align-items:center; gap:.75rem; padding:.7rem 0; border-top:1px solid #eef2f0; }
.lnote-icon { width:2.4rem; height:2.4rem; border-radius:.55rem; display:grid; place-content:center; flex-shrink:0; }
.lnote-icon.is-pdf { background:#fee2e2; color:#b91c1c; }
.lnote-icon.is-doc { background:#e8f6ec; color:#0f5230; }
.lnote-icon.is-other { background:#fff7ed; color:#c2410c; }
.lnote-info { flex:1; min-width:0; }
.lnote-info strong { display:block; color:#0f2920; font-size:.92rem; }
.lnote-info span { display:block; font-size:.78rem; color:#6b7280; }
.lnote-status { font-size:.72rem; font-weight:800; padding:.22rem .55rem; border-radius:999px; }
.lnote-status.is-pub { background:#dcfce7; color:#166534; }
.lnote-status.is-draft { background:#e5e7eb; color:#4b5563; }
.lnote-more { border:0; background:none; color:#6b7280; cursor:pointer; }
.lnote-side .lnote-overview { background:#fff; border:1px solid #e5ebe7; border-radius:14px; padding:1.05rem; box-shadow:0 8px 22px rgba(15,41,32,.04); }
.lnote-overview h3 { margin:0 0 .85rem; font-size:.98rem; font-weight:800; }
.lnote-stat { background:#f7faf8; border-radius:10px; padding:.85rem; margin-bottom:.55rem; }
.lnote-stat span { display:block; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:#6b7280; font-weight:800; }
.lnote-stat strong { display:block; margin-top:.25rem; font-size:1.55rem; font-weight:800; color:var(--ines-green-dark); }
.lnote-stat.is-draft strong { color:#92400e; }
.lnote-empty { text-align:center; background:#fff; border:1px dashed #d5e0da; border-radius:14px; padding:2.5rem 1rem; color:#6b7280; }
.lnote-empty i { font-size:1.8rem; color:#9bb5a5; display:block; margin-bottom:.5rem; }
@media (max-width:992px) { .lnote-layout { grid-template-columns:1fr; } }
@media (max-width:767.98px) { .lnote-modules-grid { grid-template-columns:1fr; } }

/* --- Course announcements --- */
.lann-page .app-content { background:#f4f6f5; }
.lann-shell { max-width:1100px; margin:0 auto; }
.lann-hero {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:1rem; margin-bottom:1.2rem;
}
.lann-hero h1 { margin:0; font-size:clamp(1.55rem,2.3vw,1.95rem); font-weight:800; color:#0f2920; }
.lann-hero p { margin:.35rem 0 0; color:#6b7280; max-width:36rem; }
.lann-toolbar { margin-bottom:1rem; }
.lann-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.85fr); gap:1.1rem; align-items:start; }
.lann-compose, .lann-recent { background:#fff; border:1px solid #e5ebe7; border-radius:16px; padding:1.15rem; box-shadow:0 8px 24px rgba(15,41,32,.04); }
.lann-compose-head { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.lann-compose-head h2 { margin:0; font-size:1.05rem; font-weight:800; color:#0f2920; }
.lann-compose-head i { color:var(--ines-green-dark); }
.lann-field { margin-bottom:.9rem; }
.lann-field label { display:block; font-size:.84rem; font-weight:700; color:#374151; margin-bottom:.35rem; }
.lann-field .form-control, .lann-field .form-select, .lann-field select, .lann-field input, .lann-field textarea {
  width:100%; border:1px solid #d5e0da; border-radius:.55rem; padding:.55rem .75rem; background:#fff;
}
.lann-error { color:#b91c1c; font-size:.8rem; margin-top:.25rem; }
.lann-editor { border:1px solid #d5e0da; border-radius:.65rem; overflow:hidden; }
.lann-toolbar { display:flex; gap:.15rem; background:#e8f6ec; padding:.4rem .5rem; border-bottom:1px solid #d5e0da; }
.lann-toolbar span { width:1.7rem; height:1.7rem; display:grid; place-content:center; border-radius:.35rem; font-size:.82rem; color:#0f5230; }
.lann-editor textarea, .lann-editor .form-control { border:0 !important; border-radius:0 !important; min-height:9rem; }
.lann-compose-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:center; margin-top:.35rem; }
.lann-check { display:inline-flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:650; color:#374151; }
.lann-actions { display:flex; gap:.45rem; }
.lann-btn { display:inline-flex; align-items:center; gap:.35rem; border-radius:.55rem; padding:.5rem .95rem; font-weight:750; font-size:.88rem; border:1px solid transparent; cursor:pointer; }
.lann-btn-ghost { background:#f3f7f4; border-color:#d5e0da; color:#1f2937; }
.lann-btn-primary { background:var(--ines-green-dark); color:#fff; }
.lann-recent-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.85rem; }
.lann-recent-head h2 { margin:0; font-size:1.02rem; font-weight:800; }
.lann-recent-head a { font-size:.84rem; font-weight:750; color:var(--ines-green-dark); text-decoration:none; }
.lann-feed { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.lann-card { border:1px solid #eef2f0; border-radius:12px; padding:.85rem; background:#fbfcfb; }
.lann-card-top { display:flex; justify-content:space-between; gap:.5rem; align-items:center; margin-bottom:.35rem; }
.lann-badge { font-size:.65rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:.18rem .45rem; border-radius:.3rem; }
.lann-badge.is-pinned { background:#fef3c7; color:#92400e; margin-left:.35rem; }
.lann-badge.is-sent { background:#dcfce7; color:#166534; }
.lann-badge.is-draft { background:#ede9fe; color:#5b21b6; }
.lann-card-top time { font-size:.75rem; color:#6b7280; }
.lann-card h3 { margin:0 0 .3rem; font-size:.92rem; font-weight:800; color:#0f2920; }
.lann-card p { margin:0; font-size:.82rem; color:#6b7280; line-height:1.4; }
.lann-card-foot { margin-top:.55rem; display:flex; justify-content:space-between; gap:.5rem; align-items:center; font-size:.78rem; color:#6b7280; }
.lann-card-actions { display:flex; gap:.15rem; }
.lann-icon { border:0; background:none; color:#6b7280; cursor:pointer; padding:.2rem; }
.lann-icon.is-danger { color:#b91c1c; }
.lann-empty { text-align:center; color:#6b7280; padding:1.25rem .5rem; }
.lann-meta { margin:.85rem 0 0; font-size:.8rem; color:#6b7280; }
@media (max-width:900px) { .lann-layout { grid-template-columns:1fr; } }

/* ============================================================
   SYSTEM-WIDE DARK MODE
   Covers lecturer, student, admin, dept admin, super admin
   ============================================================ */
html[data-bs-theme="dark"],
html[data-theme="dark"] {
  color-scheme: dark;
}

[data-bs-theme="dark"] body,
[data-theme="dark"] body,
[data-bs-theme="dark"] .app-shell,
[data-theme="dark"] .app-shell {
  background-color: var(--color-surface) !important;
  color: var(--color-text);
}

[data-bs-theme="dark"] .app-content,
[data-theme="dark"] .app-content,
[data-bs-theme="dark"] .app-main,
[data-theme="dark"] .app-main {
  background: var(--color-surface) !important;
  color: var(--color-text);
}

/* Hard-coded light page backgrounds ? dark */
[data-bs-theme="dark"] .hub-page .app-content,
[data-bs-theme="dark"] .student-dash-page .app-content,
[data-bs-theme="dark"] .lecturer-monitor-page .app-content,
[data-bs-theme="dark"] .lad-page .app-content,
[data-bs-theme="dark"] .lex-page .app-content,
[data-bs-theme="dark"] .lda-page .app-content,
[data-bs-theme="dark"] .lsc-page .app-content,
[data-bs-theme="dark"] .lan-page .app-content,
[data-bs-theme="dark"] .lth-page .app-content,
[data-bs-theme="dark"] .lqz-page .app-content,
[data-bs-theme="dark"] .lvid-page .app-content,
[data-bs-theme="dark"] .lnote-page .app-content,
[data-bs-theme="dark"] .lann-page .app-content,
[data-bs-theme="dark"] .lc-page .app-content,
[data-bs-theme="dark"] .lm-modules-page .app-content,
[data-bs-theme="dark"] .mb-create-page .app-content,
[data-bs-theme="dark"] .mb-content-page .app-content,
[data-bs-theme="dark"] .lm-marking-page .app-content,
[data-bs-theme="dark"] .lir-page .app-content,
[data-bs-theme="dark"] .llr-page .app-content,
[data-bs-theme="dark"] .study-workspace-page .app-content,
[data-bs-theme="dark"] .sm-marks-page .app-content,
[data-bs-theme="dark"] .learn-desk-page .app-content,
[data-bs-theme="dark"] .ai-studio-page .app-content,
[data-bs-theme="dark"] .as-page .app-content,
[data-bs-theme="dark"] .legal-page .app-content,
[data-bs-theme="dark"] .cert-verify-page .app-content,
[data-bs-theme="dark"] .learn-studio-page .app-content,
[data-theme="dark"] .hub-page .app-content,
[data-theme="dark"] .student-dash-page .app-content,
[data-theme="dark"] .lecturer-monitor-page .app-content,
[data-theme="dark"] .lad-page .app-content,
[data-theme="dark"] .lex-page .app-content,
[data-theme="dark"] .lda-page .app-content,
[data-theme="dark"] .lsc-page .app-content,
[data-theme="dark"] .lan-page .app-content,
[data-theme="dark"] .lth-page .app-content,
[data-theme="dark"] .lqz-page .app-content,
[data-theme="dark"] .lvid-page .app-content,
[data-theme="dark"] .lnote-page .app-content,
[data-theme="dark"] .lann-page .app-content,
[data-theme="dark"] .lc-page .app-content,
[data-theme="dark"] .lm-modules-page .app-content,
[data-theme="dark"] .mb-create-page .app-content,
[data-theme="dark"] .mb-content-page .app-content,
[data-theme="dark"] .lm-marking-page .app-content,
[data-theme="dark"] .lir-page .app-content,
[data-theme="dark"] .llr-page .app-content,
[data-theme="dark"] .study-workspace-page .app-content,
[data-theme="dark"] .sm-marks-page .app-content,
[data-theme="dark"] .learn-desk-page .app-content,
[data-theme="dark"] .ai-studio-page .app-content,
[data-theme="dark"] .as-page .app-content,
[data-theme="dark"] .legal-page .app-content,
[data-theme="dark"] .cert-verify-page .app-content,
[data-theme="dark"] .learn-studio-page .app-content {
  background: var(--color-surface) !important;
}

/* Typography */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] .app-page-title h1,
[data-bs-theme="dark"] .lecturer-dash h1,
[data-bs-theme="dark"] .lecturer-dash h2,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] .app-page-title h1,
[data-theme="dark"] .lecturer-dash h1,
[data-theme="dark"] .lecturer-dash h2 {
  color: #f3faf6;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .lad-sub,
[data-bs-theme="dark"] .mk-lede,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .lad-sub,
[data-theme="dark"] .mk-lede {
  color: var(--color-text-muted) !important;
}

/* Cards / panels / white surfaces */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .lecturer-stat,
[data-bs-theme="dark"] .lecturer-action-card,
[data-bs-theme="dark"] .lecturer-side-card,
[data-bs-theme="dark"] .lecturer-form-card,
[data-bs-theme="dark"] .module-list-card,
[data-bs-theme="dark"] .module-panel,
[data-bs-theme="dark"] .sd-metric,
[data-bs-theme="dark"] .sd-panel,
[data-bs-theme="dark"] .lad-card,
[data-bs-theme="dark"] .lad-stat,
[data-bs-theme="dark"] .lad-toolbar,
[data-bs-theme="dark"] .lad-empty,
[data-bs-theme="dark"] .lad-modal,
[data-bs-theme="dark"] .lex-panel,
[data-bs-theme="dark"] .lex-stat-card,
[data-bs-theme="dark"] .lex-table-card,
[data-bs-theme="dark"] .lda-featured,
[data-bs-theme="dark"] .lda-card,
[data-bs-theme="dark"] .lda-filters,
[data-bs-theme="dark"] .lda-quick,
[data-bs-theme="dark"] .lsc-card,
[data-bs-theme="dark"] .lsc-new,
[data-bs-theme="dark"] .lsc-table-wrap,
[data-bs-theme="dark"] .lsc-pending-list,
[data-bs-theme="dark"] .lan-kpi,
[data-bs-theme="dark"] .lan-panel,
[data-bs-theme="dark"] .lan-risk,
[data-bs-theme="dark"] .lth-kpi,
[data-bs-theme="dark"] .lth-panel,
[data-bs-theme="dark"] .lth-widget,
[data-bs-theme="dark"] .lvid-card,
[data-bs-theme="dark"] .lvid-toolbar,
[data-bs-theme="dark"] .lvid-empty,
[data-bs-theme="dark"] .lnote-group,
[data-bs-theme="dark"] .lnote-overview,
[data-bs-theme="dark"] .lnote-filters,
[data-bs-theme="dark"] .lnote-empty,
[data-bs-theme="dark"] .lann-compose,
[data-bs-theme="dark"] .lann-recent,
[data-bs-theme="dark"] .lann-card,
[data-bs-theme="dark"] .lann-modal,
[data-bs-theme="dark"] .las-table-wrap,
[data-bs-theme="dark"] .mk-gc-stat,
[data-bs-theme="dark"] .mk-queue,
[data-bs-theme="dark"] .mk-detail,
[data-bs-theme="dark"] .mk-panel,
[data-bs-theme="dark"] .sm-stat,
[data-bs-theme="dark"] .sm-list-item,
[data-bs-theme="dark"] .sm-panel,
[data-bs-theme="dark"] .sm-score-card,
[data-bs-theme="dark"] .asn-section,
[data-bs-theme="dark"] .si-item,
[data-bs-theme="dark"] .si-banner,
[data-bs-theme="dark"] .ai-card,
[data-bs-theme="dark"] .ai-panel,
[data-bs-theme="dark"] .da-priority-card,
[data-theme="dark"] .card,
[data-theme="dark"] .lecturer-stat,
[data-theme="dark"] .lecturer-action-card,
[data-theme="dark"] .lecturer-side-card,
[data-theme="dark"] .lecturer-form-card,
[data-theme="dark"] .module-list-card,
[data-theme="dark"] .module-panel,
[data-theme="dark"] .sd-metric,
[data-theme="dark"] .sd-panel,
[data-theme="dark"] .lad-card,
[data-theme="dark"] .lad-stat,
[data-theme="dark"] .lad-toolbar,
[data-theme="dark"] .lad-empty,
[data-theme="dark"] .lad-modal,
[data-theme="dark"] .lex-panel,
[data-theme="dark"] .lex-stat-card,
[data-theme="dark"] .lex-table-card,
[data-theme="dark"] .lda-featured,
[data-theme="dark"] .lda-card,
[data-theme="dark"] .lda-filters,
[data-theme="dark"] .lda-quick,
[data-theme="dark"] .lsc-card,
[data-theme="dark"] .lsc-new,
[data-theme="dark"] .lsc-table-wrap,
[data-theme="dark"] .lsc-pending-list,
[data-theme="dark"] .lan-kpi,
[data-theme="dark"] .lan-panel,
[data-theme="dark"] .lan-risk,
[data-theme="dark"] .lth-kpi,
[data-theme="dark"] .lth-panel,
[data-theme="dark"] .lth-widget,
[data-theme="dark"] .lvid-card,
[data-theme="dark"] .lvid-toolbar,
[data-theme="dark"] .lvid-empty,
[data-theme="dark"] .lnote-group,
[data-theme="dark"] .lnote-overview,
[data-theme="dark"] .lnote-filters,
[data-theme="dark"] .lnote-empty,
[data-theme="dark"] .lann-compose,
[data-theme="dark"] .lann-recent,
[data-theme="dark"] .lann-card,
[data-theme="dark"] .lann-modal,
[data-theme="dark"] .las-table-wrap,
[data-theme="dark"] .mk-gc-stat,
[data-theme="dark"] .mk-queue,
[data-theme="dark"] .mk-detail,
[data-theme="dark"] .mk-panel,
[data-theme="dark"] .sm-stat,
[data-theme="dark"] .sm-list-item,
[data-theme="dark"] .sm-panel,
[data-theme="dark"] .sm-score-card,
[data-theme="dark"] .asn-section,
[data-theme="dark"] .si-item,
[data-theme="dark"] .si-banner,
[data-theme="dark"] .ai-card,
[data-theme="dark"] .ai-panel,
[data-theme="dark"] .da-priority-card {
  background: #121c17 !important;
  border-color: #2a3a32 !important;
  color: var(--color-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

[data-bs-theme="dark"] .lda-stats,
[data-theme="dark"] .lda-stats {
  background: #0f5230 !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .lda-quick,
[data-bs-theme="dark"] .lsc-new,
[data-bs-theme="dark"] .lann-toolbar,
[data-bs-theme="dark"] .lann-editor .lann-toolbar,
[data-theme="dark"] .lda-quick,
[data-theme="dark"] .lsc-new,
[data-theme="dark"] .lann-toolbar {
  background: #1a2e24 !important;
  color: #d8f3dc !important;
  border-color: #2a3a32 !important;
}

/* Tables */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .las-table,
[data-bs-theme="dark"] .lex-data-table,
[data-bs-theme="dark"] .lsc-table,
[data-bs-theme="dark"] .lan-table,
[data-bs-theme="dark"] .lth-table,
[data-bs-theme="dark"] .lac-table,
[data-theme="dark"] .table,
[data-theme="dark"] .las-table,
[data-theme="dark"] .lex-data-table,
[data-theme="dark"] .lsc-table,
[data-theme="dark"] .lan-table,
[data-theme="dark"] .lth-table,
[data-theme="dark"] .lac-table {
  color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-border-color: #2a3a32;
}

[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .las-table th,
[data-bs-theme="dark"] .lex-data-table th,
[data-bs-theme="dark"] .lsc-table th,
[data-bs-theme="dark"] .lan-table th,
[data-bs-theme="dark"] .lth-table th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .las-table th,
[data-theme="dark"] .lex-data-table th,
[data-theme="dark"] .lsc-table th,
[data-theme="dark"] .lan-table th,
[data-theme="dark"] .lth-table th {
  background: #1a2620 !important;
  color: #cfe6d7 !important;
  border-color: #2a3a32 !important;
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .las-table td,
[data-bs-theme="dark"] .lex-data-table td,
[data-bs-theme="dark"] .lsc-table td,
[data-bs-theme="dark"] .lan-table td,
[data-bs-theme="dark"] .lth-table td,
[data-theme="dark"] .table td,
[data-theme="dark"] .las-table td,
[data-theme="dark"] .lex-data-table td,
[data-theme="dark"] .lsc-table td,
[data-theme="dark"] .lan-table td,
[data-theme="dark"] .lth-table td {
  border-color: #2a3a32 !important;
  color: var(--color-text);
}

/* Forms / inputs */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .auth-input,
[data-bs-theme="dark"] .lad-select,
[data-bs-theme="dark"] .lad-search input,
[data-bs-theme="dark"] .lvid-select,
[data-bs-theme="dark"] .lvid-search input,
[data-bs-theme="dark"] .lnote-select,
[data-bs-theme="dark"] .lnote-search input,
[data-bs-theme="dark"] .lda-select,
[data-bs-theme="dark"] .lda-search-wrap input,
[data-bs-theme="dark"] .lex-select,
[data-bs-theme="dark"] .lth-select,
[data-bs-theme="dark"] .lqz-input,
[data-bs-theme="dark"] .lqz-textarea,
[data-bs-theme="dark"] .app-topbar-search,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .auth-input,
[data-theme="dark"] .lad-select,
[data-theme="dark"] .lad-search input,
[data-theme="dark"] .lvid-select,
[data-theme="dark"] .lvid-search input,
[data-theme="dark"] .lnote-select,
[data-theme="dark"] .lnote-search input,
[data-theme="dark"] .lda-select,
[data-theme="dark"] .lda-search-wrap input,
[data-theme="dark"] .lex-select,
[data-theme="dark"] .lth-select,
[data-theme="dark"] .lqz-input,
[data-theme="dark"] .lqz-textarea,
[data-theme="dark"] .app-topbar-search {
  background: #1a2620 !important;
  border-color: #2a3a32 !important;
  color: #e8f0eb !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .auth-input::placeholder,
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .auth-input::placeholder {
  color: #7f9488 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .auth-input:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .auth-input:focus {
  border-color: #2ac56b !important;
  box-shadow: 0 0 0 0.2rem rgba(42, 197, 107, 0.2) !important;
}

/* Buttons (ghost / outline) */
[data-bs-theme="dark"] .lad-btn-ghost,
[data-bs-theme="dark"] .lvid-btn-ghost,
[data-bs-theme="dark"] .lnote-btn-ghost,
[data-bs-theme="dark"] .lann-btn-ghost,
[data-bs-theme="dark"] .lex-btn-secondary,
[data-bs-theme="dark"] .lqz-btn-ghost,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .lm-btn-ghost,
[data-theme="dark"] .lad-btn-ghost,
[data-theme="dark"] .lvid-btn-ghost,
[data-theme="dark"] .lnote-btn-ghost,
[data-theme="dark"] .lann-btn-ghost,
[data-theme="dark"] .lex-btn-secondary,
[data-theme="dark"] .lqz-btn-ghost,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .lm-btn-ghost {
  background: #1a2620 !important;
  border-color: #2a3a32 !important;
  color: #e8f0eb !important;
}

/* Modals / dropdowns */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
  background: #121c17 !important;
  border-color: #2a3a32 !important;
  color: var(--color-text);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #2a3a32 !important;
}

[data-bs-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-item {
  color: #e8f0eb;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: #1a2620 !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .btn-close,
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%);
}

/* Nested rows / chips / soft fills */
[data-bs-theme="dark"] .lex-live-row,
[data-bs-theme="dark"] .lnote-stat,
[data-bs-theme="dark"] .lth-stages,
[data-bs-theme="dark"] .lann-editor,
[data-bs-theme="dark"] .mk-queue-item,
[data-bs-theme="dark"] .lad-search,
[data-theme="dark"] .lex-live-row,
[data-theme="dark"] .lnote-stat,
[data-theme="dark"] .lth-stages,
[data-theme="dark"] .lann-editor,
[data-theme="dark"] .mk-queue-item,
[data-theme="dark"] .lad-search {
  background: #1a2620 !important;
  border-color: #2a3a32 !important;
}

[data-bs-theme="dark"] .lda-code,
[data-bs-theme="dark"] .lda-views,
[data-bs-theme="dark"] .lda-tag,
[data-bs-theme="dark"] .lsc-code,
[data-bs-theme="dark"] .lnote-count,
[data-theme="dark"] .lda-code,
[data-theme="dark"] .lda-views,
[data-theme="dark"] .lda-tag,
[data-theme="dark"] .lsc-code,
[data-theme="dark"] .lnote-count {
  background: #1a2e24 !important;
  color: #9be7b0 !important;
}

/* Progress / muted bars */
[data-bs-theme="dark"] .lex-progress,
[data-bs-theme="dark"] .lan-bar,
[data-bs-theme="dark"] .lth-bar,
[data-bs-theme="dark"] .las-bar,
[data-bs-theme="dark"] .lsc-bar,
[data-bs-theme="dark"] .mk-gc-bar,
[data-theme="dark"] .lex-progress,
[data-theme="dark"] .lan-bar,
[data-theme="dark"] .lth-bar,
[data-theme="dark"] .las-bar,
[data-theme="dark"] .lsc-bar,
[data-theme="dark"] .mk-gc-bar {
  background: #2a3a32 !important;
}

/* Public navbar (guest) */
[data-bs-theme="dark"] .navbar-ines,
[data-theme="dark"] .navbar-ines {
  background: #0b1410 !important;
  border-bottom-color: #2a3a32 !important;
}

[data-bs-theme="dark"] .nav-link-ines,
[data-theme="dark"] .nav-link-ines {
  color: #d8f3dc !important;
}

[data-bs-theme="dark"] .brand-name,
[data-theme="dark"] .brand-name {
  color: #f3faf6 !important;
}

/* Auth / account pages */
[data-bs-theme="dark"] .auth-page,
[data-bs-theme="dark"] .auth-card,
[data-theme="dark"] .auth-page,
[data-theme="dark"] .auth-card {
  background: #121c17 !important;
  color: var(--color-text);
  border-color: #2a3a32 !important;
}

/* Super admin / department admin panels */
[data-bs-theme="dark"] .admin-card,
[data-bs-theme="dark"] .sa-card,
[data-bs-theme="dark"] .sa-panel,
[data-bs-theme="dark"] .da-card,
[data-bs-theme="dark"] .lm-more-body,
[data-bs-theme="dark"] .lm-kpi-simple,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .sa-card,
[data-theme="dark"] .sa-panel,
[data-theme="dark"] .da-card,
[data-theme="dark"] .lm-more-body,
[data-theme="dark"] .lm-kpi-simple {
  background: #121c17 !important;
  border-color: #2a3a32 !important;
  color: var(--color-text);
}

/* Chart canvases sit on dark cards � fine as-is */
[data-bs-theme="dark"] canvas,
[data-theme="dark"] canvas {
  filter: none;
}

/* Resources / soft green boxes */
[data-bs-theme="dark"] .lth-resources,
[data-bs-theme="dark"] .lqz-info,
[data-bs-theme="dark"] .lann-info,
[data-theme="dark"] .lth-resources,
[data-theme="dark"] .lqz-info {
  background: linear-gradient(145deg, #1a2e24, #121c17) !important;
  color: #d8f3dc !important;
}

/* Keep primary green actions readable */
[data-bs-theme="dark"] .lad-btn-primary,
[data-bs-theme="dark"] .lvid-btn-primary,
[data-bs-theme="dark"] .lnote-btn-primary,
[data-bs-theme="dark"] .lann-btn-primary,
[data-bs-theme="dark"] .lex-btn-primary,
[data-bs-theme="dark"] .lsc-btn-primary,
[data-bs-theme="dark"] .lda-btn-primary,
[data-bs-theme="dark"] .btn-ines-primary,
[data-theme="dark"] .lad-btn-primary,
[data-theme="dark"] .lvid-btn-primary,
[data-theme="dark"] .lnote-btn-primary,
[data-theme="dark"] .lann-btn-primary,
[data-theme="dark"] .lex-btn-primary,
[data-theme="dark"] .lsc-btn-primary,
[data-theme="dark"] .lda-btn-primary,
[data-theme="dark"] .btn-ines-primary {
  background: var(--ines-green) !important;
  color: #062214 !important;
  border-color: transparent !important;
}

[data-bs-theme="dark"] .lad-btn-primary:hover,
[data-bs-theme="dark"] .btn-ines-primary:hover,
[data-theme="dark"] .lad-btn-primary:hover,
[data-theme="dark"] .btn-ines-primary:hover {
  background: var(--ines-green-light) !important;
  color: #062214 !important;
}

/* ============================================================
   DARK MODE � readable labels & secondary text
   ============================================================ */
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .lan-label,
[data-bs-theme="dark"] .lda-label,
[data-bs-theme="dark"] .lann-field label,
[data-bs-theme="dark"] .lqz-field span,
[data-bs-theme="dark"] .lqz-q-toolbar span,
[data-bs-theme="dark"] .llc-field label,
[data-bs-theme="dark"] .as-form label,
[data-bs-theme="dark"] .lecturer-form label,
[data-bs-theme="dark"] .mb-create-form label,
[data-bs-theme="dark"] .module-upload-field .form-label,
[data-bs-theme="dark"] .auth-form label,
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] .lan-label,
[data-theme="dark"] .lda-label,
[data-theme="dark"] .lann-field label,
[data-theme="dark"] .lqz-field span,
[data-theme="dark"] .lqz-q-toolbar span,
[data-theme="dark"] .llc-field label,
[data-theme="dark"] .as-form label,
[data-theme="dark"] .lecturer-form label,
[data-theme="dark"] .mb-create-form label,
[data-theme="dark"] .module-upload-field .form-label,
[data-theme="dark"] .auth-form label {
  color: #e5f2ea !important;
}

/* Small / helper / muted copy still readable */
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .small,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .lad-sub,
[data-bs-theme="dark"] .lad-kicker,
[data-bs-theme="dark"] .lad-course,
[data-bs-theme="dark"] .lad-meta,
[data-bs-theme="dark"] .lad-desc,
[data-bs-theme="dark"] .mk-lede,
[data-bs-theme="dark"] .mk-kicker,
[data-bs-theme="dark"] .mk-muted,
[data-bs-theme="dark"] .lex-hero p,
[data-bs-theme="dark"] .lda-hero p,
[data-bs-theme="dark"] .lsc-hero p,
[data-bs-theme="dark"] .lan-hero p,
[data-bs-theme="dark"] .lth-hero p,
[data-bs-theme="dark"] .lvid-hero p,
[data-bs-theme="dark"] .lnote-hero p,
[data-bs-theme="dark"] .lann-hero p,
[data-bs-theme="dark"] .app-page-title p,
[data-bs-theme="dark"] .app-topbar-eyebrow,
[data-bs-theme="dark"] .asn-kicker,
[data-bs-theme="dark"] .asn-header-note,
[data-bs-theme="dark"] .lac-kicker,
[data-theme="dark"] .form-text,
[data-theme="dark"] .small,
[data-theme="dark"] small,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .lad-sub,
[data-theme="dark"] .lad-kicker,
[data-theme="dark"] .lad-course,
[data-theme="dark"] .lad-meta,
[data-theme="dark"] .lad-desc,
[data-theme="dark"] .mk-lede,
[data-theme="dark"] .mk-kicker,
[data-theme="dark"] .mk-muted,
[data-theme="dark"] .lex-hero p,
[data-theme="dark"] .lda-hero p,
[data-theme="dark"] .lsc-hero p,
[data-theme="dark"] .lan-hero p,
[data-theme="dark"] .lth-hero p,
[data-theme="dark"] .lvid-hero p,
[data-theme="dark"] .lnote-hero p,
[data-theme="dark"] .lann-hero p,
[data-theme="dark"] .app-page-title p,
[data-theme="dark"] .app-topbar-eyebrow,
[data-theme="dark"] .asn-kicker,
[data-theme="dark"] .asn-header-note,
[data-theme="dark"] .lac-kicker {
  color: #c5d9cc !important;
}

/* Stat / KPI labels (often uppercase gray) */
[data-bs-theme="dark"] .lad-stat span,
[data-bs-theme="dark"] .lex-stat-label,
[data-bs-theme="dark"] .lan-kpi-label,
[data-bs-theme="dark"] .lan-stat span,
[data-bs-theme="dark"] .lth-kpi-top span,
[data-bs-theme="dark"] .lth-kpi em,
[data-bs-theme="dark"] .lnote-stat span,
[data-bs-theme="dark"] .mk-gc-stat span,
[data-bs-theme="dark"] .mk-gc-stat em,
[data-bs-theme="dark"] .lecturer-stat-label,
[data-bs-theme="dark"] .sm-stat span,
[data-bs-theme="dark"] .lda-stat-row span,
[data-theme="dark"] .lad-stat span,
[data-theme="dark"] .lex-stat-label,
[data-theme="dark"] .lan-kpi-label,
[data-theme="dark"] .lan-stat span,
[data-theme="dark"] .lth-kpi-top span,
[data-theme="dark"] .lth-kpi em,
[data-theme="dark"] .lnote-stat span,
[data-theme="dark"] .mk-gc-stat span,
[data-theme="dark"] .mk-gc-stat em,
[data-theme="dark"] .lecturer-stat-label,
[data-theme="dark"] .sm-stat span,
[data-theme="dark"] .lda-stat-row span {
  color: #b7cec0 !important;
}

/* Strong values stay bright */
[data-bs-theme="dark"] .lad-stat strong,
[data-bs-theme="dark"] .lex-stat-hero strong,
[data-bs-theme="dark"] .lan-kpi strong,
[data-bs-theme="dark"] .lth-kpi strong,
[data-bs-theme="dark"] .lnote-stat strong,
[data-bs-theme="dark"] .mk-gc-stat strong,
[data-bs-theme="dark"] .lecturer-stat-value,
[data-bs-theme="dark"] .sm-stat strong,
[data-theme="dark"] .lad-stat strong,
[data-theme="dark"] .lex-stat-hero strong,
[data-theme="dark"] .lan-kpi strong,
[data-theme="dark"] .lth-kpi strong,
[data-theme="dark"] .lnote-stat strong,
[data-theme="dark"] .mk-gc-stat strong,
[data-theme="dark"] .lecturer-stat-value,
[data-theme="dark"] .sm-stat strong {
  color: #f5fbf7 !important;
}

/* Card titles / body text */
[data-bs-theme="dark"] .lad-card h2,
[data-bs-theme="dark"] .lvid-body h2,
[data-bs-theme="dark"] .lda-card h3,
[data-bs-theme="dark"] .lda-featured h2,
[data-bs-theme="dark"] .lsc-card h2,
[data-bs-theme="dark"] .lann-card h3,
[data-bs-theme="dark"] .lnote-info strong,
[data-bs-theme="dark"] .lex-live-info h3,
[data-bs-theme="dark"] .lth-student strong,
[data-bs-theme="dark"] .lan-student strong,
[data-bs-theme="dark"] .table strong,
[data-theme="dark"] .lad-card h2,
[data-theme="dark"] .lvid-body h2,
[data-theme="dark"] .lda-card h3,
[data-theme="dark"] .lda-featured h2,
[data-theme="dark"] .lsc-card h2,
[data-theme="dark"] .lann-card h3,
[data-theme="dark"] .lnote-info strong,
[data-theme="dark"] .lex-live-info h3,
[data-theme="dark"] .lth-student strong,
[data-theme="dark"] .lan-student strong,
[data-theme="dark"] .table strong {
  color: #f5fbf7 !important;
}

[data-bs-theme="dark"] .lvid-foot,
[data-bs-theme="dark"] .lnote-info span,
[data-bs-theme="dark"] .lda-card > p,
[data-bs-theme="dark"] .lda-card-date,
[data-bs-theme="dark"] .lda-meta,
[data-bs-theme="dark"] .lann-card p,
[data-bs-theme="dark"] .lann-card-foot,
[data-bs-theme="dark"] .lann-meta,
[data-bs-theme="dark"] .lex-live-meta,
[data-bs-theme="dark"] .lex-course-line,
[data-bs-theme="dark"] .lex-stat-foot,
[data-bs-theme="dark"] .lan-muted,
[data-bs-theme="dark"] .lth-muted,
[data-bs-theme="dark"] .las-muted,
[data-bs-theme="dark"] .lsc-pending-row span,
[data-theme="dark"] .lvid-foot,
[data-theme="dark"] .lnote-info span,
[data-theme="dark"] .lda-card > p,
[data-theme="dark"] .lda-card-date,
[data-theme="dark"] .lda-meta,
[data-theme="dark"] .lann-card p,
[data-theme="dark"] .lann-card-foot,
[data-theme="dark"] .lann-meta,
[data-theme="dark"] .lex-live-meta,
[data-theme="dark"] .lex-course-line,
[data-theme="dark"] .lex-stat-foot,
[data-theme="dark"] .lan-muted,
[data-theme="dark"] .lth-muted,
[data-theme="dark"] .las-muted,
[data-theme="dark"] .lsc-pending-row span {
  color: #c5d9cc !important;
}

/* Select options readable in dark */
[data-bs-theme="dark"] option,
[data-theme="dark"] option {
  background: #121c17;
  color: #e8f0eb;
}

/* Placeholder still visible but softer than labels */
[data-bs-theme="dark"] ::placeholder,
[data-theme="dark"] ::placeholder {
  color: #9bb5a5 !important;
  opacity: 1;
}

/* Checkbox / radio labels next to controls */
[data-bs-theme="dark"] .form-check,
[data-bs-theme="dark"] .lann-check,
[data-bs-theme="dark"] .lqz-check,
[data-bs-theme="dark"] .lex-check,
[data-theme="dark"] .form-check,
[data-theme="dark"] .lann-check,
[data-theme="dark"] .lqz-check,
[data-theme="dark"] .lex-check {
  color: #e5f2ea !important;
}

/* Modal titles */
[data-bs-theme="dark"] .modal-title,
[data-theme="dark"] .modal-title {
  color: #f5fbf7 !important;
}

/* Empty-state copy */
[data-bs-theme="dark"] .lad-empty,
[data-bs-theme="dark"] .lad-empty p,
[data-bs-theme="dark"] .lvid-empty,
[data-bs-theme="dark"] .lvid-empty p,
[data-bs-theme="dark"] .lnote-empty,
[data-bs-theme="dark"] .lnote-empty p,
[data-bs-theme="dark"] .lann-empty,
[data-bs-theme="dark"] .lex-live-empty,
[data-bs-theme="dark"] .lex-live-empty p,
[data-theme="dark"] .lad-empty,
[data-theme="dark"] .lad-empty p,
[data-theme="dark"] .lvid-empty,
[data-theme="dark"] .lvid-empty p,
[data-theme="dark"] .lnote-empty,
[data-theme="dark"] .lnote-empty p,
[data-theme="dark"] .lann-empty,
[data-theme="dark"] .lex-live-empty,
[data-theme="dark"] .lex-live-empty p {
  color: #c5d9cc !important;
}

[data-bs-theme="dark"] .lad-empty h3,
[data-bs-theme="dark"] .lvid-empty h3,
[data-bs-theme="dark"] .lnote-empty h3,
[data-theme="dark"] .lad-empty h3,
[data-theme="dark"] .lvid-empty h3,
[data-theme="dark"] .lnote-empty h3 {
  color: #f5fbf7 !important;
}

/* ============================================================
   Sharper corners � cards, grids, tables (system-wide)
   ============================================================ */
:root {
  --radius-card: 7px;
  --radius-panel: 7px;
  --radius-table: 6px;
  --radius-control: 5px;
  --bs-border-radius: 7px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 7px;
  --bs-border-radius-xl: 7px;
  --bs-border-radius-2xl: 8px;
  --bs-card-border-radius: 7px;
  --bs-modal-border-radius: 7px;
}

.card,
.lecturer-stat,
.lecturer-action-card,
.lecturer-side-card,
.lecturer-form-card,
.module-list-card,
.module-panel,
.sd-metric,
.sd-panel,
.lad-card,
.lad-stat,
.lad-toolbar,
.lad-empty,
.lad-modal,
.lad-list,
.lex-panel,
.lex-stat-card,
.lex-table-card,
.lex-live-row,
.lda-featured,
.lda-card,
.lda-filters,
.lda-quick,
.lda-stats,
.lsc-card,
.lsc-new,
.lsc-table-wrap,
.lsc-pending-list,
.lan-kpi,
.lan-panel,
.lan-risk,
.lan-stat,
.lth-kpi,
.lth-panel,
.lth-widget,
.lth-resources,
.lvid-card,
.lvid-toolbar,
.lvid-empty,
.lnote-group,
.lnote-overview,
.lnote-filters,
.lnote-empty,
.lnote-stat,
.lann-compose,
.lann-recent,
.lann-card,
.lann-modal,
.las-table-wrap,
.mk-gc-stat,
.mk-queue,
.mk-detail,
.mk-panel,
.mk-queue-item,
.sm-stat,
.sm-list-item,
.sm-panel,
.sm-score-card,
.asn-section,
.si-item,
.si-banner,
.ai-card,
.ai-panel,
.da-priority-card,
.admin-card,
.sa-card,
.sa-panel,
.da-card,
.lm-more-body,
.lm-kpi-simple,
.auth-card,
.modal-content,
.dropdown-menu,
.sh-signal,
.sh-section,
.sh-course {
  border-radius: var(--radius-card) !important;
}

/* Tables: slight outer radius only on wrappers */
.table-responsive,
.las-table-wrap,
.lex-table-card,
.lsc-table-wrap,
.lan-table-wrap,
.lth-table-wrap,
.lac-card {
  border-radius: var(--radius-table) !important;
}

.las-table,
.lex-data-table,
.lsc-table,
.lan-table,
.lth-table,
.lac-table,
.table {
  border-radius: 0;
}

.table-responsive > .table thead th:first-child,
.las-table th:first-child,
.lex-data-table th:first-child,
.lsc-table th:first-child,
.lan-table th:first-child,
.lth-table th:first-child {
  border-top-left-radius: var(--radius-table);
}

.table-responsive > .table thead th:last-child,
.las-table th:last-child,
.lex-data-table th:last-child,
.lsc-table th:last-child,
.lan-table th:last-child,
.lth-table th:last-child {
  border-top-right-radius: var(--radius-table);
}

/* Grid cards / media thumbs � match card radius */
.lvid-thumb,
.lda-featured,
.lvid-card,
.lda-card,
.lsc-card,
.lad-card {
  border-radius: var(--radius-card) !important;
}

.lvid-thumb,
.lvid-thumb img,
.lvid-thumb-fallback {
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}

/* Form controls / filters � slightly tighter */
.form-control,
.form-select,
.auth-input,
.lad-select,
.lad-search,
.lad-search input,
.lvid-select,
.lvid-search input,
.lnote-select,
.lnote-search input,
.lda-select,
.lda-search-wrap input,
.lex-select,
.lth-select,
.lqz-input,
.lqz-textarea {
  border-radius: var(--radius-control) !important;
}
.app-topbar-search {
  border-radius: 999px !important;
}
.app-topbar-search input {
  border-radius: 999px !important;
}

/* Buttons � keep modest radius */
.btn,
.lad-btn,
.lvid-btn,
.lnote-btn,
.lann-btn,
.lex-btn,
.lsc-btn,
.lda-btn,
.lqz-btn,
.lm-btn,
.btn-ines-primary,
.btn-ines-accent {
  border-radius: var(--radius-control) !important;
}

/* Pills / avatars stay round (do not flatten) */
.rounded-circle,
.badge.rounded-pill,
.lth-avatar,
.lan-avatar,
.mk-avatar,
.lex-avatar,
.lvid-play span,
.app-topbar-user-fallback,
.app-topbar-avatar-img {
  border-radius: 999px !important;
}

/* Lecturer desk: pager, rich text, calendar, archive tags */
.lad-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--ines-gray-100, #eef4f0);
}
.structure-list-panel .lad-pager,
.structure-hub .lad-pager {
  margin-top: 1rem;
}
.lad-pager-meta { font-size: .85rem; color: var(--text-muted, #6b7280); }
.lad-pager-links { display: flex; gap: .5rem; align-items: center; }
.lad-pager-links a,
.lad-pager-current {
  padding: .35rem .7rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 5px;
  text-decoration: none;
  font-size: .85rem;
  color: inherit;
  background: #fff;
}
.lad-pager-current {
  background: var(--ines-green, #0f5230);
  color: #fff;
  border-color: transparent;
}
.lad-rich-wrap { border: 1px solid rgba(0,0,0,.12); border-radius: 5px; overflow: hidden; }
.lad-rich-bar {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  padding: .35rem .5rem;
  background: #f3f6f4;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.lad-rich-bar button {
  border: 0;
  background: #fff;
  border-radius: 4px;
  padding: .2rem .45rem;
  font-size: .78rem;
  cursor: pointer;
}
.lad-rich-editor {
  min-height: 120px;
  max-height: 280px;
  overflow: auto;
  border: 0 !important;
  border-radius: 0 !important;
  padding: .65rem .75rem;
}
.lda-tag.is-active {
  background: var(--ines-green-dark, #0f5230);
  color: #fff;
}
.lex-calendar {
  background: #fff;
  border: 1px solid #e5ebe7;
  border-radius: 7px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.lex-calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.lex-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
}
.lex-calendar-grid > span {
  font-size: .72rem;
  font-weight: 700;
  color: #6b7280;
  text-align: center;
  padding: .25rem;
}
.lex-cal-day {
  min-height: 4.2rem;
  border: 1px solid #eef2f0;
  border-radius: 5px;
  padding: .25rem;
  background: #fafcfa;
  font-size: .72rem;
}
.lex-cal-day strong { display: block; font-size: .78rem; margin-bottom: .15rem; }
.lex-cal-day em {
  display: block;
  font-style: normal;
  background: #e8f6ec;
  color: #0f5230;
  border-radius: 3px;
  padding: .1rem .25rem;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lex-cal-day.is-today { border-color: var(--ines-green, #0f5230); background: #fff; }
.lad-q-builder {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 7px;
  padding: .75rem;
  margin-bottom: .75rem;
}
.lad-q-row {
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: 5px;
  padding: .65rem;
  margin-bottom: .5rem;
  background: rgba(0,0,0,.02);
}
@media (max-width: 767.98px) {
  .lda-grid { grid-template-columns: 1fr; }
  .lex-calendar-grid { gap: .2rem; }
  .lex-cal-day { min-height: 3.2rem; }
}

/* Card grid view (assignments, quizzes, announcements desks) */
.lad-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 640px) {
  .lad-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .lad-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lad-cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.lad-cards-grid .lad-card-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  height: 100%;
  margin: 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid #e5efe8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 41, 32, 0.04);
}
.lad-cards-grid .lad-card-main { flex: 1 1 auto; min-width: 0; }
.lad-cards-grid .lad-card-actions {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #eef2f0;
  width: 100%;
}
.lad-cards-grid .lad-empty {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px dashed #d5e0da;
  border-radius: 14px;
  padding: 2.5rem 1rem;
  text-align: center;
}

/* Full-width page shells — use available content area like lecturer/courses */
.app-shell .container-fluid.lecturer-dash,
.app-shell .ls-shell,
.app-shell .lad-shell,
.app-shell .lvid-shell,
.app-shell .mk-desk,
.app-shell .lth-shell,
.app-shell .as-shell,
.app-shell .legal-shell,
.app-shell .ox-shell,
.app-shell .student-hub.study-shell {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Wallet actions + channel fields */
.le-wallet-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.le-wallet-charts { grid-template-columns:repeat(3, minmax(0,1fr)); }
.le-wallet-charts .lan-chart-sm { height: 128px; }
.le-channel-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.le-channel-pill { cursor:pointer; }
.le-channel-pill input { position:absolute; opacity:0; pointer-events:none; }
.le-channel-pill span {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid #d5e0da; border-radius:.65rem; padding:.5rem .85rem;
  background:#fff; font-weight:700; font-size:.88rem; color:#374151;
}
.le-channel-pill input:checked + span {
  background:#e8f6ec; border-color:#0f5230; color:#0f5230;
}
.le-channel-fields { margin-top:.25rem; }
.le-course-earn-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.le-course-earn-list li { display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; }
.le-course-earn-list strong { display:block; }
.le-course-earn-list span { display:block; font-size:.8rem; color:#6b7280; }
.le-ledger-badge {
  display:inline-flex; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; padding:.18rem .5rem; border-radius:.35rem; background:#eef2f0; color:#374151;
}
.le-ledger-badge.is-credit, .le-ledger-badge.is-topup { background:#dcfce7; color:#166534; }
.le-ledger-badge.is-payout, .le-ledger-badge.is-debit { background:#fee2e2; color:#b91c1c; }
.le-ledger-badge.is-transfer { background:#ede9fe; color:#5b21b6; }
.le-wallet-ledger .is-ok { color:#166534; font-weight:700; }
.le-wallet-ledger .is-danger { color:#be123c; font-weight:700; }
@media (max-width:992px) { .le-wallet-charts { grid-template-columns:1fr; } }

/* ── Professional wallet (wl-*) ── */
.le-wallet-page .app-content {
  background: inherit;
}

/* Profile — full-width hub layout */
.profile-page .app-content {
  background: inherit;
}
.pf-wrap {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.le-pending-card { max-width: 720px; margin: 0 auto; }
.le-pending-body { padding: 0 0.15rem; }
.le-pending-steps {
  list-style: none;
  margin: 1rem 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.le-pending-steps li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: #334155;
}
.le-pending-steps i { color: var(--ines-green, #0B6E4F); }
.pf-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.pf-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ines-green, #13b652);
}
.pf-page-head h1 {
  margin: 0 0 0.35rem;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: #10261a;
}
.pf-lead {
  margin: 0;
  color: #64748b;
  font-size: 0.92rem;
  max-width: 36rem;
}
.pf-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid #d5e0da;
  background: #fff;
  color: #374151;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.pf-back-btn:hover {
  color: var(--ines-green-dark, #0f5230);
  border-color: rgba(19, 182, 82, 0.35);
  box-shadow: 0 4px 14px rgba(19, 182, 82, 0.08);
}

/* Hero strip — simple green */
.pf-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  border-radius: 1.15rem;
  background: #157a42;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15, 82, 48, 0.12);
}
.pf-hero-photo {
  width: 88px;
  height: 88px;
  border-radius: 1.15rem;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.28);
  font-size: 2rem;
  font-weight: 800;
}
.pf-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-hero-body { min-width: 0; flex: 1; }
.pf-hero-body .pf-kicker { color: rgba(255, 255, 255, 0.72); }
.pf-hero-body h2 {
  margin: 0 0 0.2rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}
.pf-hero-email {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  word-break: break-word;
}
.pf-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.pf-tag {
  display: inline-flex;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pf-tag-role {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.pf-hero-scope {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 42rem;
  line-height: 1.45;
}

/* Form sections */
.pf-form {
  display: grid;
  gap: 1rem;
}
.pf-card {
  background: #fff;
  border: 1px solid #e5ebe7;
  border-radius: 1.15rem;
  padding: 1.25rem 1.35rem 1.35rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.pf-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid #eef2f0;
}
.pf-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #e8f6ec;
  color: var(--ines-green-dark, #0f5230);
  font-size: 1.1rem;
}
.pf-section-head h3 {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 750;
  color: #10261a;
}
.pf-section-head p {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

/* Responsive grid: 1 col mobile, 2 cols tablet, 3 cols large */
.pf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.15rem;
}
@media (min-width: 768px) {
  .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .pf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pf-span-full { grid-column: 1 / -1; }

/* Fields */
.pf-field { min-width: 0; }
.pf-label {
  display: block;
  margin-bottom: 0.42rem;
  font-size: 0.8rem;
  font-weight: 750;
  color: #374151;
  letter-spacing: 0.01em;
}
.pf-form input[type="text"],
.pf-form input[type="email"],
.pf-form input[type="url"],
.pf-form input[type="file"],
.pf-form textarea,
.pf-form select,
.pf-form .form-control,
.pf-form .form-select {
  width: 100%;
  min-height: 46px;
  border-radius: 0.8rem;
  border: 1.5px solid #e2e8f0;
  background: #fafbfa;
  padding: 0.62rem 0.88rem;
  font-size: 0.92rem;
  color: #111827;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pf-form textarea {
  min-height: 108px;
  resize: vertical;
}
.pf-form input:focus,
.pf-form textarea:focus,
.pf-form select:focus,
.pf-form .form-control:focus,
.pf-form .form-select:focus {
  border-color: var(--ines-green, #13b652);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);
  outline: none;
}
.pf-form input[type="file"] {
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
}
.pf-help {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: #94a3b8;
}
.pf-error {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #be123c;
}

/* Photo studio */
.pf-photo-studio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.35rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1rem;
  background: #f8fbf9;
  border: 1px solid #e5ebe7;
}
.pf-photo-preview {
  width: 108px;
  height: 108px;
  border-radius: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid #d5e8dc;
  box-shadow: 0 6px 18px rgba(15, 82, 48, 0.08);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ines-green-dark, #0f5230);
}
.pf-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-photo-body {
  flex: 1;
  min-width: min(100%, 260px);
}
.pf-photo-name {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 750;
  color: #10261a;
}
.pf-photo-hint {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: #64748b;
}
.pf-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.pf-upload-btn,
.pf-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.pf-upload-btn {
  margin: 0;
  position: relative;
  background: var(--ines-green-dark, #0f5230);
  border: 1px solid var(--ines-green-dark, #0f5230);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 82, 48, 0.18);
}
.pf-upload-btn input[type="file"],
.pf-form .pf-upload-btn input[type="file"] {
  /* Cover the whole button so clicks reliably open the file picker */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  font-size: 0;
}
.pf-upload-btn:hover {
  background: #137a45;
  border-color: #137a45;
  color: #fff;
}
.pf-delete-btn {
  background: #fff;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.pf-delete-btn:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
}
.pf-remove-flag {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.pf-photo-status {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ines-green-dark, #0f5230);
}
.pf-upload-btn-sm,
.pf-save-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.84rem;
}
.pf-hero-compact {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.pf-hero-photo-sm {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  border-radius: 0.95rem;
}
.pf-hero-compact h2 {
  font-size: 1.2rem;
}
.pf-settings-page .pf-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5ebe7;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.pf-settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 750;
  color: #475569;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pf-settings-tab:hover {
  color: var(--ines-green-dark, #0f5230);
  background: #f0f7f2;
}
.pf-settings-tab.is-active {
  background: var(--ines-green-dark, #0f5230);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 82, 48, 0.18);
}
.pf-form-inner { margin-top: 0.15rem; }
.pf-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.pf-security-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.95rem;
  background: #f8fbf9;
  border: 1px solid #e5ebe7;
}
.pf-security-item strong { font-size: 0.92rem; color: #10261a; }
.pf-security-item span { font-size: 0.82rem; color: #64748b; }
.pf-security-item { display: flex; flex-direction: column; gap: 0.15rem; }
.pf-security-card.is-expanded {
  border-color: rgba(19, 182, 82, 0.28);
  box-shadow: 0 10px 28px rgba(15, 82, 48, 0.08);
}
.pf-password-panel {
  margin-top: 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid #eef2f0;
}
.pf-password-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: #f4f8f5;
  border: 1px solid #e5ebe7;
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.45;
}
.pf-password-tip i {
  color: var(--ines-green, #13b652);
  margin-top: 0.1rem;
}
.pf-access-groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 992px) {
  .pf-access-groups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pf-access-groups-grid .pf-card-nested {
  margin-bottom: 0;
  height: 100%;
}
.pf-form .pw-toggle-wrap input.pf-input,
.pf-form .pw-toggle-wrap input[type="password"],
.pf-form .pw-toggle-wrap input[type="text"] {
  width: 100%;
  min-height: 46px;
  border-radius: 0.8rem;
  border: 1.5px solid #e2e8f0;
  background: #fafbfa;
  padding: 0.62rem 2.5rem 0.62rem 0.88rem;
  font-size: 0.92rem;
}

/* Notes & alerts */
.pf-divider {
  margin: 1.25rem 0 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid #eef2f0;
}
.pf-divider h4 { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 750; }
.pf-divider p { margin: 0 0 0.85rem; font-size: 0.82rem; color: #64748b; }
.pf-card-nested { box-shadow: none; background: #f8fbf9; border-color: #e8efea; }
.pf-section-head-compact { margin-bottom: 0.85rem; padding-bottom: 0.65rem; }
.pf-section-head-compact h4 { margin: 0 0 0.15rem; font-size: 0.92rem; font-weight: 750; }
.pf-section-head-compact p { margin: 0; font-size: 0.78rem; color: #64748b; }
.pf-access-role-tabs { margin-bottom: 1rem; }
.pf-access-note { margin: 0 0 1rem; }
.pf-form .pf-input,
.pf-form select.pf-input,
.pf-form input.pf-input {
  width: 100%;
  min-height: 46px;
  border-radius: 0.8rem;
  border: 1.5px solid #e2e8f0;
  background: #fafbfa;
  padding: 0.62rem 0.88rem;
  font-size: 0.92rem;
}
@media (max-width: 767.98px) {
  .pf-settings-page .pf-settings-tabs { border-radius: 1rem; flex-direction: column; }
  .pf-settings-tab { justify-content: center; width: 100%; }
}

/* Notes & alerts */
.pf-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: 0.95rem;
  background: #f4f8f5;
  border: 1px solid #e5ebe7;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}
.pf-note i {
  color: var(--ines-green, #13b652);
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.pf-alert {
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  font-size: 0.88rem;
}
.pf-alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Save bar */
.pf-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid #e5ebe7;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  position: sticky;
  bottom: 1rem;
  z-index: 10;
}
.pf-save-bar p {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
  max-width: 28rem;
}
.pf-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--ines-green-dark, #0f5230);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(15, 82, 48, 0.22);
}
.pf-save-btn:hover {
  background: #137a45;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(15, 82, 48, 0.28);
}

@media (max-width: 767.98px) {
  .pf-hero { padding: 1.15rem; }
  .pf-hero-photo { width: 72px; height: 72px; font-size: 1.65rem; }
  .pf-card { padding: 1rem 1.05rem 1.15rem; }
  .pf-save-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .pf-save-btn { justify-content: center; width: 100%; }
}

[data-bs-theme="dark"] .profile-page .app-content,
[data-theme="dark"] .profile-page .app-content {
  background: #0f1a14;
}
[data-bs-theme="dark"] .pf-card,
[data-bs-theme="dark"] .pf-save-bar,
[data-bs-theme="dark"] .pf-back-btn,
[data-theme="dark"] .pf-card,
[data-theme="dark"] .pf-save-bar,
[data-theme="dark"] .pf-back-btn {
  background: #152820;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .pf-section-head,
[data-theme="dark"] .pf-section-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .pf-section-head h3,
[data-bs-theme="dark"] .pf-page-head h1,
[data-theme="dark"] .pf-section-head h3,
[data-theme="dark"] .pf-page-head h1 {
  color: #ecfdf3;
}
[data-bs-theme="dark"] .pf-form input,
[data-bs-theme="dark"] .pf-form textarea,
[data-bs-theme="dark"] .pf-form select,
[data-theme="dark"] .pf-form input,
[data-theme="dark"] .pf-form textarea,
[data-theme="dark"] .pf-form select {
  background: #0f1a14;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ecfdf3;
}

.wl-page { max-width: 1280px; margin: 0 auto; }
.wl-hero { margin-bottom: 1rem; }
.wl-balance-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  color: var(--ines-green-dark, #0f5230);
  background: #fff;
  border: 1px solid rgba(19, 182, 82, 0.2);
  box-shadow: 0 12px 40px rgba(19, 182, 82, 0.08), 0 4px 16px rgba(15, 23, 42, 0.04);
}
.wl-balance-inner { position: relative; z-index: 1; padding: 1.35rem 1.5rem 1.25rem; }
.wl-balance-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.25rem;
}
.wl-eyebrow {
  margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ines-green, #13b652);
}
.wl-lead { margin: 0.25rem 0 0; font-size: 0.82rem; color: #4b6358; max-width: 28rem; line-height: 1.45; }
.wl-currency-switch {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(19, 182, 82, 0.12); border: 1px solid rgba(19, 182, 82, 0.2);
}
.wl-currency-btn {
  padding: 0.38rem 0.95rem; font-size: 0.82rem; font-weight: 700;
  color: var(--ines-green-dark, #0f5230); text-decoration: none; border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.wl-currency-btn:hover { background: rgba(19, 182, 82, 0.1); color: var(--ines-green-dark, #0f5230); }
.wl-currency-btn.is-active {
  background: rgba(19, 182, 82, 0.85); color: #fff;
  box-shadow: 0 2px 8px rgba(19, 182, 82, 0.25);
}
.wl-balance-body {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; align-items: end;
}
.wl-balance-label {
  display: block; font-size: 0.78rem; font-weight: 600; color: #5a7268; margin-bottom: 0.2rem;
}
.wl-balance-amount {
  display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 0.35rem;
  color: var(--ines-green-dark, #0f5230);
}
.wl-balance-sub, .wl-balance-fx {
  display: block; font-size: 0.78rem; color: #64748b; font-style: normal;
}
.wl-balance-fx { margin-top: 0.15rem; font-size: 0.72rem; }
.wl-balance-secondary {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem;
}
.wl-mini-stat {
  border-radius: 12px; padding: 0.65rem 0.75rem;
  border: 1px solid rgba(19, 182, 82, 0.15);
  background: rgba(19, 182, 82, 0.08);
}
.wl-mini-stat--processing {
  border-color: rgba(240, 192, 32, 0.45);
  background: rgba(240, 192, 32, 0.16);
}
.wl-mini-stat--processing strong { color: #8a6d00; }
.wl-mini-stat:nth-child(3) {
  border-color: rgba(240, 192, 32, 0.35);
  background: rgba(240, 192, 32, 0.14);
}
.wl-mini-stat:nth-child(4) {
  border-color: rgba(19, 182, 82, 0.2);
  background: rgba(19, 182, 82, 0.1);
}
.wl-mini-stat span {
  display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: #64748b; margin-bottom: 0.2rem;
}
.wl-mini-stat strong {
  display: block; font-size: 0.95rem; font-weight: 800;
  color: var(--ines-green-dark, #0f5230);
}
.wl-mini-stat:nth-child(3) strong { color: #8a6d00; }
.wl-mini-stat em {
  display: block; font-size: 0.68rem; font-style: normal; color: #64748b; margin-top: 0.15rem;
}
.wl-quick-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem;
  padding-top: 1rem; border-top: 1px solid rgba(19, 182, 82, 0.15);
  justify-content: center;
}

/* Wallet action cards */
.wl-actions-section {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wl-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.wl-op-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(19, 182, 82, 0.2);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 22px rgba(19, 182, 82, 0.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wl-op-card:hover {
  border-color: rgba(19, 182, 82, 0.45);
  box-shadow: 0 10px 28px rgba(19, 182, 82, 0.1);
  transform: translateY(-1px);
}
.wl-op-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.wl-op-card--topup .wl-op-card__icon {
  background: rgba(19, 182, 82, 0.14);
  color: var(--ines-green-dark, #0f5230);
}
.wl-op-card--withdraw .wl-op-card__icon {
  background: rgba(240, 192, 32, 0.18);
  color: #8a6d00;
}
.wl-op-card--transfer .wl-op-card__icon {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.wl-op-card__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.wl-op-card__body strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ines-green-dark, #0f5230);
}
.wl-op-card__body span {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
}
.wl-op-card__arrow {
  color: #94a3b8;
  font-size: 0.9rem;
}
.wl-methods-block {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(19, 182, 82, 0.14);
}
.wl-methods-title {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.wl-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.wl-method-grid--transfer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wl-method-card {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(19, 182, 82, 0.16);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wl-method-card:hover {
  border-color: rgba(19, 182, 82, 0.4);
  background: rgba(19, 182, 82, 0.04);
}
.wl-method-card strong {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ines-green-dark, #0f5230);
}
.wl-method-card em {
  font-style: normal;
  font-size: 0.7rem;
  color: #64748b;
}
.wl-method-card__icon {
  font-size: 1.25rem;
  color: var(--ines-green, #13b652);
  margin-bottom: 0.15rem;
}
.wl-method-card__logo {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}
.wl-method-card--mtn .wl-method-card__logo {
  background: #ffcc00;
  color: #1a1a1a;
}
.wl-method-card--airtel .wl-method-card__logo {
  background: #e40000;
  color: #fff;
}
.wl-transfer-quick {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(19, 182, 82, 0.18);
}
.wl-transfer-quick-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.wl-transfer-quick-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.wl-transfer-chip {
  border: 1px solid rgba(19, 182, 82, 0.22);
  background: rgba(19, 182, 82, 0.06);
  color: var(--ines-green-dark, #0f5230);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.wl-transfer-chip:hover {
  background: rgba(19, 182, 82, 0.14);
}
@media (max-width: 992px) {
  .wl-actions-grid { grid-template-columns: 1fr; }
  .wl-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-method-grid--transfer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wl-method-grid { grid-template-columns: 1fr; }
}

.wl-action {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.84rem; font-weight: 700;
  border: 1px solid rgba(19, 182, 82, 0.35);
  background: rgba(19, 182, 82, 0.08); color: var(--ines-green-dark, #0f5230);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.wl-action:hover {
  background: rgba(19, 182, 82, 0.16); color: var(--ines-green-dark, #0f5230);
}
.wl-action--primary {
  background: rgba(19, 182, 82, 0.88); color: #fff;
  border-color: var(--ines-green, #13b652);
  box-shadow: 0 4px 14px rgba(19, 182, 82, 0.28);
}
.wl-action--primary:hover {
  background: var(--ines-green, #13b652); color: #fff;
}
.wl-split-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.65rem 1rem; margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(19, 182, 82, 0.16);
  border-radius: 12px;
  font-size: 0.8rem; color: #64748b;
  backdrop-filter: blur(8px);
}
.wl-split-pills { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.wl-split-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 700; color: #374151; font-size: 0.78rem;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(240, 192, 32, 0.12);
  border: 1px solid rgba(240, 192, 32, 0.25);
}
.wl-split-pill:first-child {
  background: rgba(19, 182, 82, 0.1);
  border-color: rgba(19, 182, 82, 0.22);
}
.wl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wl-dot--creator { background: var(--ines-green, #13b652); }
.wl-dot--ines { background: var(--ines-green-dark, #0f5230); }
.wl-dot--platform { background: var(--ines-yellow, #f0c020); }
.wl-charts {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.85rem; margin-bottom: 1rem;
}
.wl-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(19, 182, 82, 0.14);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(19, 182, 82, 0.05);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.wl-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.15rem 0.5rem;
}
.wl-panel-head h2 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--ines-green-dark, #0f5230); }
.wl-panel-head p { margin: 0.15rem 0 0; font-size: 0.75rem; color: #64748b; }
.wl-chip {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.25rem 0.55rem; border-radius: 999px;
  background: rgba(240, 192, 32, 0.2); color: #8a6d00;
  border: 1px solid rgba(240, 192, 32, 0.35);
}
.wl-chart { height: 200px; padding: 0 0.75rem 0.75rem; }
.wl-chart--sm { height: 180px; }
.wl-panel--wide .wl-chart { height: 220px; }
.wl-course-list { list-style: none; margin: 0; padding: 0 1rem 1rem; display: grid; gap: 0.5rem; }
.wl-course-list li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(19, 182, 82, 0.06);
  border: 1px solid rgba(19, 182, 82, 0.12);
}
.wl-course-list li:nth-child(even) {
  background: rgba(240, 192, 32, 0.08);
  border-color: rgba(240, 192, 32, 0.2);
}
.wl-course-rank {
  width: 1.65rem; height: 1.65rem; border-radius: 8px;
  background: rgba(19, 182, 82, 0.15); color: var(--ines-green-dark, #0f5230);
  font-size: 0.78rem; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}
.wl-course-info { flex: 1; min-width: 0; }
.wl-course-info strong { display: block; font-size: 0.88rem; color: var(--ines-green-dark, #0f5230); }
.wl-course-info span { display: block; font-size: 0.72rem; color: #64748b; }
.wl-course-list em {
  font-style: normal; font-weight: 800; font-size: 0.88rem;
  color: var(--ines-green, #13b652); white-space: nowrap;
}
.wl-table-wrap { padding: 0 0.5rem 0.5rem; }
.wl-ledger thead th {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748b; border-bottom: 1px solid rgba(19, 182, 82, 0.12);
  padding: 0.65rem 0.85rem; background: rgba(19, 182, 82, 0.05);
}
.wl-ledger tbody td {
  padding: 0.75rem 0.85rem; border-bottom: 1px solid rgba(19, 182, 82, 0.08);
  vertical-align: middle; font-size: 0.84rem;
}
.wl-ledger tbody tr:hover { background: rgba(240, 192, 32, 0.06); }
.wl-date { color: #64748b; font-size: 0.8rem; white-space: nowrap; }
.wl-desc { max-width: 280px; color: #374151; }
.wl-badge {
  display: inline-flex; font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.2rem 0.5rem; border-radius: 6px;
  background: rgba(240, 192, 32, 0.15); color: #8a6d00;
}
.wl-badge--credit, .wl-badge--topup {
  background: rgba(19, 182, 82, 0.15); color: var(--ines-green-dark, #0f5230);
}
.wl-badge--payout, .wl-badge--debit { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.wl-badge--transfer { background: rgba(240, 192, 32, 0.2); color: #8a6d00; }
.wl-amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.wl-amount small { font-weight: 600; font-size: 0.72rem; color: #94a3b8; }
.wl-amount.is-in { color: var(--ines-green-dark, #0f5230); }
.wl-amount.is-out { color: #be123c; }
.wl-balance-after { font-variant-numeric: tabular-nums; font-weight: 600; color: #374151; }
.wl-empty {
  text-align: center; color: #64748b; padding: 2rem 1rem !important; font-size: 0.88rem;
}
.wl-modal { border: none; border-radius: 16px; overflow: hidden; }
.wl-modal-dialog { max-width: 520px; }
.wl-modal-form { display: flex; flex-direction: column; }
.wl-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.35rem 0.75rem; border-bottom: 1px solid rgba(19, 182, 82, 0.12);
  background: linear-gradient(180deg, rgba(19, 182, 82, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}
.wl-modal-head-main { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; }
.wl-modal-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(19, 182, 82, 0.12); color: var(--ines-green-dark, #0f5230);
  font-size: 1.1rem; border: 1px solid rgba(19, 182, 82, 0.2);
}
.wl-modal-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ines-green-dark, #0f5230); }
.wl-modal-hint { margin: 0.2rem 0 0; font-size: 0.82rem; color: #64748b; line-height: 1.45; }
.wl-modal-body { padding: 1rem 1.35rem 0.5rem; }
.wl-form-section { margin-bottom: 1.1rem; }
.wl-form-section-title {
  margin: 0 0 0.65rem; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: #64748b;
}
.wl-form-panel {
  padding: 0.85rem; border-radius: 12px;
  background: rgba(19, 182, 82, 0.04);
  border: 1px solid rgba(19, 182, 82, 0.12);
}
.wl-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 0.85rem;
}
.wl-field { display: flex; flex-direction: column; gap: 0.35rem; }
.wl-field--full { grid-column: 1 / -1; }
.wl-field label {
  font-size: 0.82rem; font-weight: 700; color: #374151; margin: 0;
}
.wl-input {
  border-radius: 10px; border: 1px solid rgba(19, 182, 82, 0.22);
  padding: 0.55rem 0.75rem; font-size: 0.9rem;
}
.wl-input:focus {
  border-color: var(--ines-green, #13b652);
  box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);
}
.wl-field-note { font-size: 0.72rem; color: #64748b; line-height: 1.4; }
.wl-amount-input {
  display: flex; align-items: stretch;
  border: 1px solid rgba(19, 182, 82, 0.22); border-radius: 10px; overflow: hidden;
  background: #fff;
}
.wl-amount-input:focus-within {
  border-color: var(--ines-green, #13b652);
  box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);
}
.wl-amount-currency {
  display: flex; align-items: center; padding: 0 0.75rem;
  font-size: 0.78rem; font-weight: 800; color: var(--ines-green-dark, #0f5230);
  background: rgba(19, 182, 82, 0.08); border-right: 1px solid rgba(19, 182, 82, 0.15);
  white-space: nowrap;
}
.wl-amount-input .wl-input {
  border: none; border-radius: 0; box-shadow: none !important; flex: 1;
}
.wl-channel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.wl-channel-option { cursor: pointer; margin: 0; }
.wl-channel-option input { position: absolute; opacity: 0; pointer-events: none; }
.wl-channel-option-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem;
  padding: 0.75rem 0.5rem; border-radius: 12px; height: 100%;
  border: 1px solid rgba(19, 182, 82, 0.18); background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.wl-channel-option-inner i { font-size: 1.15rem; color: var(--ines-green, #13b652); }
.wl-channel-option-inner strong { font-size: 0.78rem; color: var(--ines-green-dark, #0f5230); }
.wl-channel-option-inner em { font-size: 0.65rem; font-style: normal; color: #64748b; }
.wl-channel-option input:checked + .wl-channel-option-inner {
  border-color: var(--ines-green, #13b652);
  background: rgba(19, 182, 82, 0.08);
  box-shadow: 0 0 0 1px rgba(19, 182, 82, 0.15);
}
.wl-network-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wl-network-pill { cursor: pointer; margin: 0; }
.wl-network-pill input { position: absolute; opacity: 0; pointer-events: none; }
.wl-network-pill span {
  display: inline-flex; align-items: center; padding: 0.45rem 0.85rem;
  border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  border: 1px solid rgba(19, 182, 82, 0.2); background: #fff; color: #374151;
}
.wl-network-pill input:checked + span {
  background: rgba(19, 182, 82, 0.12); border-color: var(--ines-green, #13b652);
  color: var(--ines-green-dark, #0f5230);
}
.wl-modal-footer {
  display: flex; justify-content: center; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1.35rem 1.25rem; border-top: 1px solid rgba(19, 182, 82, 0.1);
}
.wl-modal-footer .wl-action { min-width: 7rem; justify-content: center; }
@media (max-width: 992px) {
  .wl-balance-body { grid-template-columns: 1fr; }
  .wl-balance-secondary { grid-template-columns: 1fr; }
  .wl-charts { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .wl-balance-secondary { grid-template-columns: 1fr; }
  .wl-form-grid { grid-template-columns: 1fr; }
  .wl-channel-grid { grid-template-columns: 1fr; }
  .wl-channel-option-inner { flex-direction: row; text-align: left; padding: 0.65rem 0.85rem; }
  .wl-quick-actions .wl-action { flex: 0 1 auto; }
}

.app-topbar-inbox { display: inline-flex; align-items: center; }
.app-topbar-badge.is-wide {
  min-width: 18px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  font-size: 0.6rem;
}
.app-alerts-drop { width: min(360px, calc(100vw - 1.5rem)); right: 0; }
.app-alerts-drop-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem .9rem; border-bottom: 1px solid var(--ines-gray-200, #e5e7eb);
}
.app-alerts-drop-head strong { font-size: .92rem; }
.app-alerts-mark {
  border: 0; background: none; color: var(--ines-green-dark, #0f7a3a);
  font-size: .75rem; font-weight: 700; padding: 0;
}
.app-alerts-drop-list { max-height: 360px; overflow-y: auto; }
.app-alerts-row {
  display: flex; gap: .7rem; width: 100%; text-align: left; border: 0; background: #fff;
  padding: .75rem .9rem; color: inherit; font: inherit; cursor: pointer;
  border-bottom: 1px solid #f1f5f4; text-decoration: none;
}
.app-alerts-row i { color: var(--ines-green-dark, #0f7a3a); margin-top: .15rem; }
.app-alerts-row span { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.app-alerts-row strong { font-size: .82rem; line-height: 1.3; }
.app-alerts-row small, .app-alerts-row em { font-size: .74rem; color: #6b7280; font-style: normal; }
.app-alerts-row.is-unread { background: #f0fdf4; }
.app-alerts-row:hover { background: #f8faf9; }
.app-alerts-empty { margin: 0; padding: 1.25rem .9rem; color: #6b7280; font-size: .85rem; }
.app-alerts-all {
  display: block; text-align: center; padding: .7rem; font-size: .8rem; font-weight: 700;
  color: var(--ines-green-dark, #0f7a3a); text-decoration: none;
  border-top: 1px solid var(--ines-gray-200, #e5e7eb);
}
.app-alerts-all:hover { background: #f8faf9; }
.alerts-detail {
  margin: 0 0 1rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid rgba(19, 182, 82, .35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(19, 182, 82, .08), rgba(240, 192, 32, .05));
}
.alerts-detail h2 { margin: 0; font-size: 1.15rem; color: var(--ines-gray-800, #1a2e24); }
.alerts-detail-meta { margin: .35rem 0 .65rem; font-size: .8rem; color: var(--ines-gray-600, #4a6356); }
.alerts-detail-msg { margin: 0 0 .85rem; color: var(--ines-gray-700, #3d5248); }
.alerts-item-form { margin: 0; }
.alerts-item {
  display: flex; align-items: flex-start; gap: .85rem; width: 100%; text-align: left;
  border: 1px solid var(--ines-gray-200, #e5e7eb); background: var(--ines-white, #fff); border-radius: 14px;
  padding: .95rem 1rem; color: inherit; font: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
a.alerts-item:hover {
  border-color: rgba(19, 182, 82, .45);
  box-shadow: 0 8px 22px rgba(15, 82, 48, .08);
  color: inherit;
}
.alerts-item-form .alerts-item { cursor: pointer; }
.alerts-item-form .alerts-item:hover {
  border-color: rgba(19, 182, 82, .45);
  box-shadow: 0 8px 22px rgba(15, 82, 48, .08);
}
.alerts-item.is-unread {
  border-color: rgba(19, 182, 82, .35);
  background: linear-gradient(135deg, rgba(19, 182, 82, .08), rgba(240, 192, 32, .05));
}
.alerts-item-icon {
  width: 40px; height: 40px; min-width: 40px; border-radius: 12px;
  background: rgba(19, 182, 82, .12); color: var(--ines-green-dark, #0f5230);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.alerts-item-icon.is-announcement,
.alerts-item-icon.is-course,
.alerts-item-icon.is-forum {
  background: rgba(240, 192, 32, .18);
  color: var(--ines-yellow-dark, #c99200);
}
.alerts-item-main { flex: 1; min-width: 0; }
.alerts-item-top { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline; }
.alerts-item-top strong { color: var(--ines-gray-800, #1a2e24); font-weight: 700; }
.alerts-item-type {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ines-gray-600, #4a6356);
  background: var(--ines-gray-100, #eef4f0);
  border-radius: 999px; padding: .15rem .5rem;
}
.alerts-item-msg { margin: .28rem 0 0; color: var(--ines-gray-600, #4a6356); font-size: .88rem; }
.alerts-item-meta {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; color: var(--ines-gray-600, #4a6356); white-space: nowrap;
}
.alerts-item-chevron { color: var(--ines-green, #13b652); opacity: .7; }
.alerts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ines-yellow-dark, #c99200); box-shadow: 0 0 0 3px rgba(240, 192, 32, .25); }
.alerts-empty {
  text-align: center; padding: 2.75rem 1rem;
  color: var(--ines-gray-600, #4a6356);
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
}
.alerts-empty-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(19, 182, 82, .12); color: var(--ines-green-dark, #0f5230); font-size: 1.35rem;
}
.alerts-empty i { font-size: inherit; display: block; margin: 0; }
.alerts-empty p { margin: 0; }

/* ---- Notifications page (system green / yellow) ---- */
.alerts-page .alerts-eyebrow {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ines-green, #13b652);
}
.alerts-kpi-row .alerts-kpi {
  position: relative;
  gap: .35rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 250, 248, .96)),
    var(--ines-white, #fff);
  box-shadow: 0 10px 24px rgba(15, 82, 48, .05);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.alerts-kpi-row .alerts-kpi:hover {
  border-color: rgba(19, 182, 82, .4);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15, 82, 48, .1);
}
.alerts-kpi-row .alerts-kpi.is-active {
  border-color: var(--ines-green, #13b652);
  background:
    linear-gradient(135deg, rgba(19, 182, 82, .12), rgba(240, 192, 32, .08)),
    var(--ines-white, #fff);
  box-shadow: 0 0 0 1px rgba(19, 182, 82, .15), 0 14px 28px rgba(15, 82, 48, .1);
}
.alerts-kpi-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .15rem; font-size: 1rem;
}
.alerts-kpi-icon.is-total {
  background: rgba(19, 182, 82, .14);
  color: var(--ines-green-dark, #0f5230);
}
.alerts-kpi-icon.is-unread {
  background: rgba(240, 192, 32, .22);
  color: var(--ines-yellow-dark, #c99200);
}
.alerts-kpi-icon.is-alerts {
  background: rgba(19, 182, 82, .14);
  color: var(--ines-green, #13b652);
}
.alerts-kpi-icon.is-updates {
  background: rgba(240, 192, 32, .2);
  color: var(--ines-yellow-dark, #c99200);
}
.alerts-kpi-row .alerts-kpi p {
  color: var(--ines-gray-600, #4a6356);
}
.alerts-kpi-row .alerts-kpi strong {
  color: var(--ines-gray-800, #1a2e24);
  font-size: 1.55rem;
}
.alerts-kpi-row .alerts-kpi strong.is-warn {
  color: var(--ines-yellow-dark, #c99200);
}
.alerts-kpi-row .alerts-kpi em {
  color: var(--ines-gray-600, #4a6356);
}
.alerts-panel {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background: var(--ines-white, #fff);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: 0 12px 28px rgba(15, 82, 48, .05);
}
.alerts-panel-head {
  align-items: flex-start;
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--ines-gray-100, #eef4f0);
}
.alerts-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ines-gray-800, #1a2e24);
}
.alerts-panel-sub {
  margin: .2rem 0 0;
  font-size: .8rem;
  color: var(--ines-gray-600, #4a6356);
}
.alerts-filter-pills {
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.alerts-pill {
  display: inline-flex;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ines-gray-600, #4a6356);
  background: var(--ines-gray-100, #eef4f0);
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.alerts-pill:hover {
  color: var(--ines-green-dark, #0f5230);
  border-color: rgba(19, 182, 82, .3);
}
.alerts-pill.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--ines-green, #13b652), var(--ines-green-dark, #0f5230));
  border-color: transparent;
}

[data-bs-theme="dark"] .app-alerts-row,
[data-theme="dark"] .app-alerts-row,
[data-bs-theme="dark"] .alerts-item,
[data-theme="dark"] .alerts-item { background: transparent; }
[data-bs-theme="dark"] .app-alerts-row.is-unread,
[data-theme="dark"] .app-alerts-row.is-unread,
[data-bs-theme="dark"] .alerts-item.is-unread,
[data-theme="dark"] .alerts-item.is-unread { background: rgba(19, 182, 82, .08); }
[data-bs-theme="dark"] .alerts-kpi-row .alerts-kpi,
[data-theme="dark"] .alerts-kpi-row .alerts-kpi,
[data-bs-theme="dark"] .alerts-panel,
[data-theme="dark"] .alerts-panel {
  background: var(--ines-white, #121c17);
  border-color: var(--ines-gray-200, #2a3a32);
}
[data-bs-theme="dark"] .alerts-kpi-row .alerts-kpi.is-active,
[data-theme="dark"] .alerts-kpi-row .alerts-kpi.is-active {
  background: linear-gradient(135deg, rgba(19, 182, 82, .16), rgba(240, 192, 32, .08));
}
[data-bs-theme="dark"] .alerts-item-type,
[data-theme="dark"] .alerts-item-type,
[data-bs-theme="dark"] .alerts-pill:not(.is-active),
[data-theme="dark"] .alerts-pill:not(.is-active) {
  background: var(--ines-gray-100, #1a2620);
}




/* ---- Structure hub (3 tabs) ---- */
.structure-hub-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.structure-eyebrow {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ines-green, #13b652);
}
.structure-hub-top h1 { margin: 0; }
.structure-add-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
}
.structure-kpi-row .structure-kpi {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background: linear-gradient(180deg, #fff, var(--ines-off-white, #f7faf8));
  box-shadow: 0 10px 24px rgba(15, 82, 48, .05);
  transition: border-color .15s ease, transform .15s ease;
}
.structure-kpi-row .structure-kpi:hover {
  border-color: rgba(19, 182, 82, .4);
  transform: translateY(-2px);
}
.structure-kpi-row .structure-kpi.is-active {
  border-color: var(--ines-green, #13b652);
  background: linear-gradient(135deg, rgba(19, 182, 82, .12), rgba(240, 192, 32, .08));
}
.structure-kpi-row .structure-kpi.is-static { cursor: default; }
.structure-kpi-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .15rem;
}
.structure-kpi-icon.is-faculty { background: rgba(19, 182, 82, .14); color: var(--ines-green-dark, #0f5230); }
.structure-kpi-icon.is-dept { background: rgba(19, 182, 82, .12); color: var(--ines-green, #13b652); }
.structure-kpi-icon.is-prog { background: rgba(240, 192, 32, .2); color: var(--ines-yellow-dark, #c99200); }
.structure-kpi-icon.is-cal { background: var(--ines-gray-100, #eef4f0); color: var(--ines-gray-600, #4a6356); }
.structure-main-tabs .nav-link {
  font-weight: 700;
  color: var(--ines-gray-600, #4a6356);
  border-radius: 999px;
  padding: .45rem 1rem;
}
.structure-main-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--ines-green, #13b652), var(--ines-green-dark, #0f5230));
  color: #fff;
}
.structure-add-panel,
.structure-list-panel {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background: var(--ines-white, #fff);
  padding: 1rem 1.15rem 1.2rem;
  box-shadow: 0 12px 28px rgba(15, 82, 48, .05);
}
.structure-add-panel-head,
.structure-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .9rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ines-gray-100, #eef4f0);
}
.structure-add-panel-head h2,
.structure-list-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ines-gray-800, #1a2e24);
}
.structure-add-panel-head p {
  margin: .25rem 0 0;
  font-size: .82rem;
  color: var(--ines-gray-600, #4a6356);
}
.structure-list-head span {
  font-size: .8rem;
  color: var(--ines-gray-600, #4a6356);
}
.structure-add-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 .9rem;
}
.structure-add-form .mb-3,
.structure-add-form .form-check,
.structure-add-form .d-flex { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .structure-add-form .mb-3:not(:has(textarea)) { grid-column: span 1; }
}
.structure-table-wrap { overflow-x: auto; }
.structure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.structure-table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ines-gray-600, #4a6356);
  padding: .55rem .4rem;
  border-bottom: 1px solid var(--ines-gray-200, #dce8e0);
  white-space: nowrap;
}
.structure-table td {
  padding: .75rem .4rem;
  border-bottom: 1px solid var(--ines-gray-100, #eef4f0);
  vertical-align: middle;
  color: var(--ines-gray-800, #1a2e24);
}
.structure-code {
  display: inline-block;
  font-weight: 700;
  font-size: .78rem;
  padding: .15rem .45rem;
  border-radius: 8px;
  background: var(--ines-gray-100, #eef4f0);
  color: var(--ines-green-dark, #0f5230);
}
.structure-actions {
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
  white-space: nowrap;
}
.structure-actions form { margin: 0; }
.structure-action {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 182, 82, .12);
  color: var(--ines-green-dark, #0f5230);
  text-decoration: none;
}
.structure-action:hover { background: var(--ines-green, #13b652); color: #fff; }
.structure-action.is-danger {
  background: rgba(185, 28, 28, .08);
  color: #b91c1c;
}
.structure-action.is-danger:hover { background: #b91c1c; color: #fff; }
.structure-empty-row {
  text-align: center;
  color: var(--ines-gray-600, #4a6356);
  padding: 1.5rem .5rem !important;
}
[data-bs-theme="dark"] .structure-add-panel,
[data-theme="dark"] .structure-add-panel,
[data-bs-theme="dark"] .structure-list-panel,
[data-theme="dark"] .structure-list-panel,
[data-bs-theme="dark"] .structure-kpi-row .structure-kpi,
[data-theme="dark"] .structure-kpi-row .structure-kpi {
  background: var(--ines-white, #121c17);
  border-color: var(--ines-gray-200, #2a3a32);
}

/* ---- School admin shared surface ---- */
.sa-page .sa-eyebrow {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ines-green, #13b652);
}
.sa-page-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.sa-page-top h1 { margin: 0; color: var(--ines-gray-800, #1a2e24); }
.sa-page-top .lm-sub,
.sa-page-top p {
  margin: .35rem 0 0;
  color: var(--ines-gray-600, #4a6356);
  max-width: 42rem;
}
.sa-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .sa-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sa-kpi {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: var(--radius-card, 14px);
  background: linear-gradient(180deg, #fff, var(--ines-off-white, #f7faf8));
  box-shadow: 0 10px 24px rgba(15, 82, 48, .05);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.sa-kpi:hover { border-color: rgba(19, 182, 82, .4); transform: translateY(-2px); color: inherit; }
.sa-kpi.is-active {
  border-color: var(--ines-green, #13b652);
  background: linear-gradient(135deg, rgba(19, 182, 82, .12), rgba(240, 192, 32, .08));
}
.sa-kpi-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(19, 182, 82, .14);
  color: var(--ines-green-dark, #0f5230);
  margin-bottom: .1rem;
}
.sa-kpi-icon.is-warn { background: rgba(240, 192, 32, .22); color: var(--ines-yellow-dark, #c99200); }
.sa-kpi-icon.is-muted { background: var(--ines-gray-100, #eef4f0); color: var(--ines-gray-600, #4a6356); }
.sa-kpi p {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ines-gray-600, #4a6356);
}
.sa-kpi strong {
  font-size: 1.5rem;
  font-weight: 750;
  color: var(--ines-gray-800, #1a2e24);
  line-height: 1.15;
}
.sa-kpi em {
  font-style: normal;
  font-size: .78rem;
  color: var(--ines-gray-600, #4a6356);
}
.sa-panel {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: var(--radius-card, 14px);
  background: var(--ines-white, #fff);
  padding: 1rem 1.15rem 1.2rem;
  box-shadow: 0 12px 28px rgba(15, 82, 48, .05);
  height: 100%;
}
.sa-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .9rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ines-gray-100, #eef4f0);
}
.sa-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ines-gray-800, #1a2e24);
}
.sa-panel-head p,
.sa-panel-sub {
  margin: .2rem 0 0;
  font-size: .8rem;
  color: var(--ines-gray-600, #4a6356);
}
.sa-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}
.sa-pill {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ines-gray-600, #4a6356);
  background: var(--ines-gray-100, #eef4f0);
  border: 1px solid transparent;
}
.sa-pill:hover { color: var(--ines-green-dark, #0f5230); border-color: rgba(19, 182, 82, .3); }
.sa-pill.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--ines-green, #13b652), var(--ines-green-dark, #0f5230));
}
.sa-filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .sa-filter-bar { grid-template-columns: 1.4fr 1fr auto; }
}
.sa-filter-bar .form-control,
.sa-filter-bar .form-select,
.sa-panel .form-control,
.sa-panel .form-select {
  border-radius: 12px;
  border-color: var(--ines-gray-200, #dce8e0);
}
.sa-table-wrap { overflow-x: auto; }
.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.sa-table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ines-gray-600, #4a6356);
  padding: .55rem .4rem;
  border-bottom: 1px solid var(--ines-gray-200, #dce8e0);
  white-space: nowrap;
}
.sa-table td {
  padding: .8rem .4rem;
  border-bottom: 1px solid var(--ines-gray-100, #eef4f0);
  vertical-align: middle;
  color: var(--ines-gray-800, #1a2e24);
}
.sa-table a { color: var(--ines-green-dark, #0f5230); font-weight: 700; text-decoration: none; }
.sa-table a:hover { color: var(--ines-green, #13b652); }
.sa-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.sa-badge.is-ok { background: rgba(19, 182, 82, .14); color: var(--ines-green-dark, #0f5230); }
.sa-badge.is-muted { background: var(--ines-gray-100, #eef4f0); color: var(--ines-gray-600, #4a6356); }
.sa-badge.is-warn { background: rgba(240, 192, 32, .22); color: var(--ines-yellow-dark, #c99200); }
.sa-badge.is-danger { background: rgba(185, 28, 28, .1); color: #b91c1c; }
.sa-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem .75rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.sa-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ines-green, #13b652), var(--ines-green-dark, #0f5230));
}
.sa-btn-ghost {
  color: var(--ines-green-dark, #0f5230);
  background: rgba(19, 182, 82, .1);
}
.sa-btn-ghost:hover { background: var(--ines-green, #13b652); color: #fff; }
.sa-btn-danger {
  color: #b91c1c;
  background: rgba(185, 28, 28, .08);
}
.sa-btn-danger:hover { background: #b91c1c; color: #fff; }
.sa-btn-outline {
  color: var(--ines-gray-600, #4a6356);
  background: transparent;
  border-color: var(--ines-gray-200, #dce8e0);
}
.sa-btn-outline:hover { border-color: var(--ines-green, #13b652); color: var(--ines-green-dark, #0f5230); }
.sa-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.sa-queue-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(19, 182, 82, .04), rgba(240, 192, 32, .03));
}
.sa-queue-main { display: flex; gap: .75rem; min-width: 0; flex: 1; }
.sa-queue-icon {
  width: 40px; height: 40px; min-width: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(240, 192, 32, .22);
  color: var(--ines-yellow-dark, #c99200);
}
.sa-queue-main strong { display: block; color: var(--ines-gray-800, #1a2e24); }
.sa-queue-main span { display: block; font-size: .82rem; color: var(--ines-gray-600, #4a6356); margin-top: .2rem; }
.sa-queue-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sa-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ines-gray-600, #4a6356);
}
.sa-empty i {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(19, 182, 82, .12);
  color: var(--ines-green-dark, #0f5230);
  font-size: 1.25rem;
  margin-bottom: .65rem;
}
.sa-chart-card canvas { max-width: 100%; }
.sa-chart-frame {
  position: relative;
  height: 280px;
  padding: .25rem .15rem .5rem;
}
.sa-chart-3d .sa-chart-frame {
  background:
    linear-gradient(180deg, rgba(19, 182, 82, .04), transparent 40%),
    linear-gradient(135deg, rgba(15, 82, 48, .03), transparent);
  border-radius: 12px;
}
.sa-settings-page .sa-settings-top { margin-bottom: .75rem; }
.sa-settings-page .sa-settings-top h1 { font-size: 1.35rem; }
.sa-settings-page .sa-settings-top .lm-sub { font-size: .85rem; max-width: 42rem; }
.sa-settings-panel { padding: .7rem .85rem .85rem; }
.sa-settings-head { margin-bottom: .5rem; padding-bottom: .45rem; }
.sa-settings-head h2 { font-size: .95rem; }
.sa-settings-head p { font-size: .75rem; margin: .1rem 0 0; }
.sa-role-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .9rem;
}
.sa-role-tab {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background: #fff;
  color: var(--ines-gray-700, #3d5248);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sa-role-tab:hover { color: var(--ines-green-dark, #0f5230); border-color: var(--ines-green, #13b652); }
.sa-people-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  max-width: 44rem;
}
.sa-people-filter .form-control { flex: 1; min-width: 14rem; }
.sa-role-tab.is-active {
  background: var(--ines-green, #13b652);
  border-color: var(--ines-green, #13b652);
  color: #fff;
}
.sa-perm-list { display: flex; flex-direction: column; gap: .45rem; }
.sa-perm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem .9rem;
  padding: .55rem .65rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 10px;
  background: #fff;
}
.sa-perm-row.is-off { opacity: .55; }
.sa-perm-main {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 14rem;
  flex: 1;
}
.sa-perm-main strong { display: block; font-size: .84rem; }
.sa-perm-main p { margin: .1rem 0 0; font-size: .72rem; color: var(--ines-gray-500, #6b8176); }
.sa-perm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
}
.sa-perm-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(19, 182, 82, .12);
  color: #0f6b38;
}
.sa-perm-check {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .75rem;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 999px;
  padding: .18rem .5rem .18rem .35rem;
  background: #f7faf8;
}
.sa-perm-check input { margin: 0; accent-color: #13b652; }
.sa-settings-note {
  font-size: .75rem;
  color: var(--ines-gray-500, #6b8176);
  margin: 0 0 .85rem;
  max-width: 44rem;
}
.sa-perm-table th,
.sa-perm-table td {
  vertical-align: middle;
  padding: .35rem .5rem;
  font-size: .8rem;
}
.sa-perm-table th { font-size: .72rem; font-weight: 700; }
.sa-na { color: var(--ines-gray-400, #9bb3a5); font-weight: 600; font-size: .75rem; }
.sa-btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.sa-switch {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 18px;
  cursor: pointer;
  vertical-align: middle;
}
.sa-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sa-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ines-gray-200, #dce8e0);
  transition: background .15s ease;
}
.sa-switch span::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 82, 48, .2);
  transition: transform .15s ease;
}
.sa-switch input:checked + span {
  background: var(--ines-green, #13b652);
}
.sa-switch input:checked + span::after {
  transform: translateX(14px);
}
.sa-form .form-label { font-size: .8rem; font-weight: 700; color: var(--ines-gray-600, #4a6356); }
.sa-form .form-control,
.sa-form .form-select,
.sa-form textarea {
  border-radius: 12px;
  border-color: var(--ines-gray-200, #dce8e0);
}
[data-bs-theme="dark"] .sa-kpi,
[data-theme="dark"] .sa-kpi,
[data-bs-theme="dark"] .sa-panel,
[data-theme="dark"] .sa-panel,
[data-bs-theme="dark"] .sa-queue-item,
[data-theme="dark"] .sa-queue-item {
  background: var(--ines-white, #121c17);
  border-color: var(--ines-gray-200, #2a3a32);
}

/* ---- Super Admin platform surface ---- */
.su-page .sa-eyebrow { color: #1e3a5f; }
.su-page .sa-kpi-icon { background: rgba(30, 58, 95, .12); color: #1e3a5f; }
.su-page .sa-kpi:hover { border-color: rgba(30, 58, 95, .35); }
@media (min-width: 1200px) {
  .sa-kpi-row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.su-field { margin-bottom: 1rem; }
.su-field .form-label { font-size: .8rem; font-weight: 700; color: var(--ines-gray-600, #4a6356); }
.su-field .form-control,
.su-field .form-select,
.su-field textarea {
  border-radius: 12px;
  border-color: var(--ines-gray-200, #dce8e0);
}
.su-field input[type="color"] { min-height: 42px; padding: .2rem .35rem; }
.su-color-grid { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.su-keep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}
@media (min-width: 768px) {
  .su-keep-grid { grid-template-columns: 1fr 1fr; }
}
.su-keep-card {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 12px;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, #fff, #f7faf8);
}
.su-backup-apps {
  max-height: 280px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .75rem;
  padding: .25rem 0;
}
.sa-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.su-page .da-priority-icon { background: rgba(30, 58, 95, .12); color: #1e3a5f; }

.su-settings-page { padding-bottom: 5.5rem !important; }
.su-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
}
.su-settings-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background: #fff;
  color: var(--ines-gray-700, #3d5248);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.su-settings-tab:hover {
  color: #1e3a5f;
  border-color: #1e3a5f;
}
.su-settings-tab.is-active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}
.su-tab-panel[hidden] { display: none !important; }
.su-subhead {
  margin: 1.25rem 0 .75rem;
  font-size: .92rem;
  font-weight: 750;
  color: var(--ines-gray-800, #1a2e24);
}
.su-swatch-list-wide { max-width: 36rem; }
.su-panel .sa-panel-head { align-items: flex-start; }
.su-panel-icon {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  margin-bottom: .45rem;
  background: rgba(30, 58, 95, .12);
  color: #1e3a5f;
}
.su-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 .85rem;
}
@media (min-width: 768px) {
  .su-field-grid { grid-template-columns: 1fr 1fr; }
}
.su-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 768px) {
  .su-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.su-media-card {
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 12px;
  padding: .85rem;
  background: #f8fbf9;
}
.su-media-label {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ines-gray-600, #4a6356);
}
.su-media-preview {
  height: 88px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed #d5e4db;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .65rem;
  overflow: hidden;
  color: #7a9184;
  font-size: 1.4rem;
}
.su-media-preview.is-small { height: 64px; }
.su-media-preview img { max-height: 100%; max-width: 100%; object-fit: contain; }
.su-media-card .su-field { margin-bottom: 0; }
.su-media-card .su-field .form-label { display: none; }
.su-swatch-list { display: flex; flex-direction: column; gap: .65rem; }
.su-swatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .8rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 12px;
  background: #fff;
}
.su-swatch-meta label {
  display: block;
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ines-gray-800, #1a2e24);
}
.su-hex {
  font-size: .75rem;
  color: var(--ines-gray-600, #4a6356);
}
.su-color-input,
.su-swatch input[type="color"] {
  width: 52px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.su-theme-preview {
  display: flex;
  gap: .4rem;
  margin-top: .85rem;
}
.su-theme-chip {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #dce8e0;
}
.su-social-field {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.su-social-field > i {
  margin-top: 1.85rem;
  width: 1.2rem;
  color: #1e3a5f;
}
.su-social-field .su-field { flex: 1; margin-bottom: .75rem; }
.su-switch-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 12px;
  background: #fff;
  margin-bottom: .55rem;
}
.su-switch-card strong { display: block; font-size: .92rem; color: var(--ines-gray-800, #1a2e24); }
.su-switch-card span { display: block; font-size: .78rem; color: var(--ines-gray-600, #4a6356); }
.su-split-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef4f0;
  margin-bottom: .9rem;
}
.su-split-bar span:nth-child(1) { background: #13b652; }
.su-split-bar span:nth-child(2) { background: #1e3a5f; }
.su-split-bar span:nth-child(3) { background: #d4a017; }
.su-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 .65rem;
}
@media (min-width: 576px) {
  .su-split-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.su-sticky-bar {
  position: sticky;
  bottom: .75rem;
  z-index: 8;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 32px rgba(15, 82, 48, .12);
  backdrop-filter: blur(8px);
}
.su-sticky-bar p {
  margin: 0;
  font-size: .85rem;
  color: var(--ines-gray-600, #4a6356);
}
.su-settings-page .sa-btn-primary {
  padding: .55rem 1.1rem;
  font-size: .9rem;
}
[data-bs-theme="dark"] .su-media-card,
[data-theme="dark"] .su-media-card,
[data-bs-theme="dark"] .su-swatch,
[data-theme="dark"] .su-swatch,
[data-bs-theme="dark"] .su-switch-card,
[data-theme="dark"] .su-switch-card,
[data-bs-theme="dark"] .su-sticky-bar,
[data-theme="dark"] .su-sticky-bar {
  background: var(--ines-white, #121c17);
  border-color: var(--ines-gray-200, #2a3a32);
}
[data-bs-theme="dark"] .su-keep-card,
[data-theme="dark"] .su-keep-card {
  background: var(--ines-white, #121c17);
  border-color: var(--ines-gray-200, #2a3a32);
}

.cms-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 768px) {
  .cms-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cms-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cms-hub-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f7faf8);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 24px rgba(15, 82, 48, .05);
  transition: border-color .15s ease, transform .15s ease;
}
.cms-hub-card:hover {
  border-color: rgba(19, 182, 82, .4);
  transform: translateY(-2px);
  color: inherit;
}
.cms-hub-icon {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(19, 182, 82, .14);
  color: var(--ines-green-dark, #0f5230);
  font-size: 1.15rem;
}
.su-page .cms-hub-icon {
  background: rgba(30, 58, 95, .12);
  color: #1e3a5f;
}
.cms-hub-body { min-width: 0; flex: 1; }
.cms-hub-body strong {
  display: block;
  color: var(--ines-gray-800, #1a2e24);
  font-size: 1rem;
}
.cms-hub-body span {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--ines-gray-600, #4a6356);
  line-height: 1.4;
}
.cms-hub-card em {
  font-style: normal;
  font-weight: 750;
  font-size: 1.15rem;
  color: var(--ines-gray-800, #1a2e24);
}
[data-bs-theme="dark"] .cms-hub-card,
[data-theme="dark"] .cms-hub-card {
  background: var(--ines-white, #141e19);
  border-color: var(--ines-gray-200, #2c3d34);
}

/* ============================================================
   DARK MODE — cards, grids, headers, labels, icons (global)
   ============================================================ */
html[data-bs-theme="dark"],
html[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: #3d5348 transparent;
}

html[data-bs-theme="dark"] body,
html[data-theme="dark"] body {
  background: #0a110e;
  color: #eef6f1;
}

html[data-bs-theme="dark"] .app-content,
html[data-theme="dark"] .app-content,
html[data-bs-theme="dark"] .lecturer-dash,
html[data-theme="dark"] .lecturer-dash,
html[data-bs-theme="dark"] .student-hub,
html[data-theme="dark"] .student-hub,
html[data-bs-theme="dark"] .study-shell,
html[data-theme="dark"] .study-shell {
  background: #0a110e !important;
  color: #eef6f1;
}

/* Bootstrap light utilities that stay white in dark mode */
html[data-bs-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body {
  background-color: #141e19 !important;
  color: #eef6f1 !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-body,
html[data-theme="dark"] .text-body,
html[data-bs-theme="dark"] .text-black,
html[data-theme="dark"] .text-black {
  color: #f3faf6 !important;
}

html[data-bs-theme="dark"] .border,
html[data-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-bottom {
  border-color: #2c3d34 !important;
}

html[data-bs-theme="dark"] .list-group-item,
html[data-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-button,
html[data-bs-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .pagination .page-link {
  background: #141e19 !important;
  border-color: #2c3d34 !important;
  color: #eef6f1 !important;
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed),
html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: #1c2822 !important;
  color: #f6fcf8 !important;
}

/* Remaining white cards / grids / widgets */
html[data-bs-theme="dark"] .app-content [class*="-card"],
html[data-theme="dark"] .app-content [class*="-card"],
html[data-bs-theme="dark"] .app-content [class*="-panel"],
html[data-theme="dark"] .app-content [class*="-panel"],
html[data-bs-theme="dark"] .app-content [class*="-kpi"],
html[data-theme="dark"] .app-content [class*="-kpi"],
html[data-bs-theme="dark"] .app-content [class*="-widget"],
html[data-theme="dark"] .app-content [class*="-widget"],
html[data-bs-theme="dark"] .app-content [class*="-toolbar"],
html[data-theme="dark"] .app-content [class*="-toolbar"],
html[data-bs-theme="dark"] .app-content [class*="-empty"],
html[data-theme="dark"] .app-content [class*="-empty"],
html[data-bs-theme="dark"] .app-content [class*="-stat"]:not(strong):not(span),
html[data-theme="dark"] .app-content [class*="-stat"]:not(strong):not(span),
html[data-bs-theme="dark"] .ths-paper,
html[data-theme="dark"] .ths-paper,
html[data-bs-theme="dark"] .asn-header,
html[data-theme="dark"] .asn-header,
html[data-bs-theme="dark"] .asn-list-panel,
html[data-theme="dark"] .asn-list-panel,
html[data-bs-theme="dark"] .mark-hero,
html[data-theme="dark"] .mark-hero,
html[data-bs-theme="dark"] .feature-card,
html[data-theme="dark"] .feature-card,
html[data-bs-theme="dark"] .course-card,
html[data-theme="dark"] .course-card,
html[data-bs-theme="dark"] .help-card,
html[data-theme="dark"] .help-card,
html[data-bs-theme="dark"] .forum-card,
html[data-theme="dark"] .forum-card,
html[data-bs-theme="dark"] .lib-card,
html[data-theme="dark"] .lib-card,
html[data-bs-theme="dark"] .pp-card,
html[data-theme="dark"] .pp-card,
html[data-bs-theme="dark"] .filter-card,
html[data-theme="dark"] .filter-card {
  background-color: #141e19 !important;
  border-color: #2c3d34 !important;
  color: #eef6f1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

/* Keep branded dark-green rails dark (do not flatten them) */
html[data-bs-theme="dark"] .ai-studio-rail,
html[data-theme="dark"] .ai-studio-rail,
html[data-bs-theme="dark"] .ai-studio-rail-inner,
html[data-theme="dark"] .ai-studio-rail-inner,
html[data-bs-theme="dark"] .ths-outline,
html[data-theme="dark"] .ths-outline,
html[data-bs-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-sidebar {
  background: inherit;
  color: inherit;
  box-shadow: none;
}

html[data-bs-theme="dark"] .ai-studio-rail-inner,
html[data-theme="dark"] .ai-studio-rail-inner,
html[data-bs-theme="dark"] .ths-outline,
html[data-theme="dark"] .ths-outline {
  background: linear-gradient(165deg, #0c3d24 0%, #0f5230 45%, #117a3c 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35) !important;
}

html[data-bs-theme="dark"] .ai-studio-rail [class*="-toolbar"],
html[data-theme="dark"] .ai-studio-rail [class*="-toolbar"],
html[data-bs-theme="dark"] .ai-studio-rail [class*="-card"],
html[data-theme="dark"] .ai-studio-rail [class*="-card"],
html[data-bs-theme="dark"] .ai-studio-rail [class*="-icon"],
html[data-theme="dark"] .ai-studio-rail [class*="-icon"],
html[data-bs-theme="dark"] .app-sidebar [class*="-icon"],
html[data-theme="dark"] .app-sidebar [class*="-icon"],
html[data-bs-theme="dark"] .app-sidebar [class*="-card"],
html[data-theme="dark"] .app-sidebar [class*="-card"] {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  border-color: transparent !important;
}

/* Page / section headers */
html[data-bs-theme="dark"] .app-page-title h1,
html[data-theme="dark"] .app-page-title h1,
html[data-bs-theme="dark"] .asn-header h1,
html[data-theme="dark"] .asn-header h1,
html[data-bs-theme="dark"] [class*="-hero"] h1,
html[data-theme="dark"] [class*="-hero"] h1,
html[data-bs-theme="dark"] [class*="-header"] h1,
html[data-theme="dark"] [class*="-header"] h1 {
  color: #f6fcf8 !important;
}

html[data-bs-theme="dark"] [class*="-hero"] p,
html[data-theme="dark"] [class*="-hero"] p,
html[data-bs-theme="dark"] [class*="-kicker"],
html[data-theme="dark"] [class*="-kicker"],
html[data-bs-theme="dark"] [class*="-eyebrow"],
html[data-theme="dark"] [class*="-eyebrow"],
html[data-bs-theme="dark"] [class*="-lede"],
html[data-theme="dark"] [class*="-lede"],
html[data-bs-theme="dark"] .form-label,
html[data-theme="dark"] .form-label,
html[data-bs-theme="dark"] label,
html[data-theme="dark"] label {
  color: #cfe0d6 !important;
}

html[data-bs-theme="dark"] [class*="-muted"],
html[data-theme="dark"] [class*="-muted"] {
  color: #adc2b6 !important;
}

/* Icon tiles / avatars / KPI glyphs */
html[data-bs-theme="dark"] [class*="-ico"],
html[data-theme="dark"] [class*="-ico"],
html[data-bs-theme="dark"] [class*="-icon"]:not(.app-topbar-icon-btn):not(.app-nav-link),
html[data-theme="dark"] [class*="-icon"]:not(.app-topbar-icon-btn):not(.app-nav-link),
html[data-bs-theme="dark"] [class*="-avatar"],
html[data-theme="dark"] [class*="-avatar"],
html[data-bs-theme="dark"] .cms-hub-icon,
html[data-theme="dark"] .cms-hub-icon {
  background: rgba(61, 220, 122, 0.16) !important;
  color: #7ee0a2 !important;
  border-color: rgba(61, 220, 122, 0.22);
}

html[data-bs-theme="dark"] [class*="-ico"].is-warn,
html[data-theme="dark"] [class*="-ico"].is-warn {
  background: rgba(251, 146, 60, 0.18) !important;
  color: #fdba74 !important;
}

html[data-bs-theme="dark"] [class*="-ico"].is-ok,
html[data-theme="dark"] [class*="-ico"].is-ok {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}

html[data-bs-theme="dark"] .app-topbar-icon-btn,
html[data-theme="dark"] .app-topbar-icon-btn,
html[data-bs-theme="dark"] .app-menu-btn,
html[data-theme="dark"] .app-menu-btn {
  color: #d8efe2 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #2c3d34 !important;
}

html[data-bs-theme="dark"] .app-topbar-icon-btn:hover,
html[data-theme="dark"] .app-topbar-icon-btn:hover,
html[data-bs-theme="dark"] .app-menu-btn:hover,
html[data-theme="dark"] .app-menu-btn:hover {
  background: rgba(61, 220, 122, 0.14) !important;
  color: #fff !important;
}

html[data-bs-theme="dark"] .app-nav-link i,
html[data-theme="dark"] .app-nav-link i,
html[data-bs-theme="dark"] .sb-group-toggle i,
html[data-theme="dark"] .sb-group-toggle i {
  color: #9be7b0 !important;
  background: transparent !important;
}

/* Soft chips / badges sitting on white */
html[data-bs-theme="dark"] .badge.bg-secondary,
html[data-theme="dark"] .badge.bg-secondary {
  background: #2c3d34 !important;
  color: #d8efe2 !important;
}

html[data-bs-theme="dark"] [class*="-chip"],
html[data-theme="dark"] [class*="-chip"],
html[data-bs-theme="dark"] [class*="-pill"]:not(.btn),
html[data-theme="dark"] [class*="-pill"]:not(.btn),
html[data-bs-theme="dark"] [class*="-badge"],
html[data-theme="dark"] [class*="-badge"] {
  background: #1c2822 !important;
  color: #d8efe2 !important;
  border-color: #2c3d34 !important;
}

html[data-bs-theme="dark"] [class*="-badge"][class*="approved"],
html[data-theme="dark"] [class*="-badge"][class*="approved"],
html[data-bs-theme="dark"] [class*="-badge"][class*="ok"] {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}

html[data-bs-theme="dark"] [class*="-badge"][class*="reject"],
html[data-theme="dark"] [class*="-badge"][class*="reject"],
html[data-bs-theme="dark"] [class*="-badge"][class*="danger"] {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

/* Tables / grids */
html[data-bs-theme="dark"] table,
html[data-theme="dark"] table {
  color: #eef6f1;
}

html[data-bs-theme="dark"] thead th,
html[data-theme="dark"] thead th {
  background: #1c2822 !important;
  color: #cfe0d6 !important;
  border-color: #2c3d34 !important;
}

html[data-bs-theme="dark"] tbody td,
html[data-theme="dark"] tbody td {
  border-color: #2c3d34 !important;
  color: #e8f2ec;
}

html[data-bs-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] tbody tr:hover td {
  background: rgba(61, 220, 122, 0.06);
}

/* CKEditor (thesis / modules) */
html[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
html[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
html[data-bs-theme="dark"] .ck.ck-toolbar,
html[data-theme="dark"] .ck.ck-toolbar {
  background: #1c2822 !important;
  color: #eef6f1 !important;
  border-color: #2c3d34 !important;
}

html[data-bs-theme="dark"] .ck.ck-button,
html[data-theme="dark"] .ck.ck-button,
html[data-bs-theme="dark"] .ck.ck-icon,
html[data-theme="dark"] .ck.ck-icon {
  color: #d8efe2 !important;
}

html[data-bs-theme="dark"] .ai-studio-chat,
html[data-theme="dark"] .ai-studio-chat,
html[data-bs-theme="dark"] .ai-chat-composer,
html[data-theme="dark"] .ai-chat-composer,
html[data-bs-theme="dark"] .ai-studio-top,
html[data-theme="dark"] .ai-studio-top,
html[data-bs-theme="dark"] .ai-msg--assistant .ai-msg-prose,
html[data-theme="dark"] .ai-msg--assistant .ai-msg-prose {
  background: #141e19 !important;
  border-color: #2c3d34 !important;
  color: #eef6f1;
}

html[data-bs-theme="dark"] .ai-chat-form,
html[data-theme="dark"] .ai-chat-form,
html[data-bs-theme="dark"] .ai-chat-input,
html[data-theme="dark"] .ai-chat-input {
  background: #1c2822 !important;
  color: #eef6f1 !important;
  border-color: #2c3d34 !important;
}

html[data-bs-theme="dark"] .footer,
html[data-theme="dark"] .footer,
html[data-bs-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer {
  background: #0a110e !important;
  color: #c5d9cc !important;
  border-color: #2c3d34 !important;
}



/* — CMS public: announcements, partners, testimonials, news/events — */
.site-announce-bar {
  background: linear-gradient(
    90deg,
    var(--ines-green-dark, #0f5230) 0%,
    var(--ines-green, #13b652) 100%
  );
  color: #fff;
  border-bottom: 2px solid color-mix(in srgb, var(--ines-gold, #f0c020) 45%, transparent);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.site-announce-bar .container {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.site-announce-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
  padding: 0.35rem 0;
}
.site-announce-item + .site-announce-item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 0.15rem;
  padding-top: 0.5rem;
}
.site-announce-item strong {
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.site-announce-item strong::after {
  content: "—";
  margin-left: 0.45rem;
  font-weight: 500;
  opacity: 0.75;
}
.site-announce-item span {
  color: rgba(255, 255, 255, 0.95);
  flex: 1 1 12rem;
  min-width: 0;
}
@media (max-width: 575.98px) {
  .site-announce-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .site-announce-item strong::after {
    display: none;
  }
  .site-announce-item span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.site-announce-bar .alert {
  background: transparent;
  border: 0;
  color: inherit;
  margin: 0;
  padding: 0.55rem 0;
  border-radius: 0;
}
.site-announce-bar .btn-close {
  filter: invert(1);
  opacity: 0.75;
}

.cms-partners-section {
  overflow: hidden;
}
.cms-partners-stage {
  position: relative;
  padding: 0.5rem 0 1rem;
}
.cms-partners-stage::before,
.cms-partners-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(80px, 8vw);
  z-index: 2;
  pointer-events: none;
}
.cms-partners-stage::before {
  left: 0;
  background: linear-gradient(to right, var(--ines-surface, #f4f7f5) 0%, transparent 100%);
}
.cms-partners-stage::after {
  right: 0;
  background: linear-gradient(to left, var(--ines-surface, #f4f7f5) 0%, transparent 100%);
}
.cms-partners-marquee {
  overflow: hidden;
  width: 100%;
}
.cms-partners-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: max-content;
  animation: cms-partners-scroll 38s linear infinite;
  will-change: transform;
}
.cms-partners-stage[data-partner-count="1"] .cms-partners-track {
  animation: none;
  width: 100%;
  justify-content: center;
}
.cms-partners-stage[data-partner-count="2"] .cms-partners-track {
  animation: cms-partners-scroll 28s linear infinite;
}
.cms-partners-marquee:hover .cms-partners-track {
  animation-play-state: paused;
}
.cms-partner-card {
  flex: 0 0 auto;
  animation: cms-partner-float 5s ease-in-out infinite;
}
.cms-partner-card:nth-child(2n) { animation-delay: -1.2s; }
.cms-partner-card:nth-child(3n) { animation-delay: -2.4s; }
.cms-partner-card:nth-child(4n) { animation-delay: -0.6s; }
.cms-partners-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 2.5rem;
}
.cms-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 120px;
  padding: 1.35rem 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(19, 182, 82, 0.14);
  box-shadow: 0 10px 30px rgba(15, 61, 46, 0.07);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.cms-partner-logo:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: rgba(19, 182, 82, 0.35);
  box-shadow: 0 18px 40px rgba(19, 182, 82, 0.14);
}
.cms-partner-logo img {
  max-height: 80px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.1);
  transition: filter 0.35s ease, transform 0.35s ease;
}
.cms-partner-logo:hover img {
  filter: grayscale(0);
  transform: scale(1.06);
}
.cms-partner-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ines-green-dark, #0f5230);
  text-align: center;
  line-height: 1.3;
}
@keyframes cms-partners-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes cms-partner-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .cms-partners-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .cms-partners-stage[data-partner-count] .cms-partners-track > .cms-partner-card[aria-hidden="true"] {
    display: none;
  }
  .cms-partner-card {
    animation: none;
  }
  .cms-partner-logo:hover {
    transform: none;
  }
}
@media (max-width: 768px) {
  .cms-partner-logo {
    min-width: 160px;
    min-height: 100px;
    padding: 1rem 1.25rem;
  }
  .cms-partner-logo img {
    max-height: 64px;
    max-width: 140px;
  }
}

.cms-testimonial-card {
  height: 100%;
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 61, 46, 0.06);
  overflow: hidden;
}
.cms-testimonial-body {
  margin: 0;
  padding: 1.25rem 1.35rem 0.75rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #2c3a45;
}
.cms-testimonial-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.35rem 1.25rem;
  border-top: 1px solid rgba(15, 61, 46, 0.06);
}
.cms-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.cms-testimonial-name {
  font-weight: 700;
  color: var(--ines-primary);
  font-size: 0.95rem;
}
.cms-testimonial-role {
  font-size: 0.8rem;
  color: var(--ines-muted, #5c6b7a);
}

.cms-news-card,
.cms-event-card {
  border: 1px solid rgba(15, 61, 46, 0.1);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 61, 46, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  color: inherit;
}
.cms-news-card:hover,
.cms-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 61, 46, 0.12);
  border-color: rgba(19, 182, 82, 0.22);
}

/* News cards */
.cms-news-card--grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cms-news-card--row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.cms-news-card-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #e8f5ec, #d4ebe0);
}
.cms-news-card--grid .cms-news-card-media {
  aspect-ratio: 16 / 10;
}
.cms-news-card--row .cms-news-card-media {
  min-height: 100%;
}
.cms-news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.cms-news-card:hover .cms-news-card-img {
  transform: scale(1.04);
}
.cms-news-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 88px;
  color: rgba(15, 82, 48, 0.45);
  font-size: 1.65rem;
}
.cms-news-card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.cms-news-card--row .cms-news-card-body {
  padding: 0.85rem 1rem;
}
.cms-news-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  font-size: 0.72rem;
}
.cms-news-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(19, 182, 82, 0.12);
  color: var(--ines-green-dark, #0f5230);
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cms-news-card-meta time {
  color: #64748b;
  font-weight: 600;
}
.cms-news-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ines-green-dark, #0f5230);
}
.cms-news-card--grid .cms-news-card-title {
  font-size: 1.08rem;
}
.cms-news-card-excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b6358;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cms-news-card-link {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ines-green, #13b652);
}
.cms-news-card--row .cms-news-card-link {
  display: none;
}

/* Event cards */
.cms-event-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.cms-event-card--grid .cms-event-card-link {
  display: flex;
  flex-direction: column;
}
.cms-event-card--row .cms-event-card-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 1rem;
}
.cms-event-card-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #edf4f8, #dce8ef);
}
.cms-event-card--grid .cms-event-card-media {
  aspect-ratio: 16 / 9;
}
.cms-event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.cms-event-card:hover .cms-event-card-img {
  transform: scale(1.04);
}
.cms-event-date-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(15, 61, 46, 0.12);
  line-height: 1.05;
}
.cms-event-date-badge strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ines-green-dark, #0f5230);
}
.cms-event-date-badge span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ines-gold-dark, #8a6a12);
}
.cms-event-date-badge--solo {
  position: static;
  flex-shrink: 0;
  align-self: start;
}
.cms-event-card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.cms-event-card--row .cms-event-card-body {
  padding: 0;
}
.cms-event-status {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cms-event-status.is-upcoming {
  background: rgba(19, 182, 82, 0.14);
  color: #0f5230;
}
.cms-event-status.is-past {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}
.cms-event-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ines-green-dark, #0f5230);
}
.cms-event-card-meta {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #64748b;
}
.cms-event-card-meta i {
  color: var(--ines-green, #13b652);
}
.cms-event-loc {
  display: block;
  margin-top: 0.15rem;
}
.cms-event-card-excerpt {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #4b6358;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cms-event-card-more {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ines-green, #13b652);
}
.cms-event-card--row .cms-event-card-more {
  display: none;
}

/* Homepage stacks */
.cms-home-feed-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.cms-home-news-stack,
.cms-home-events-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cms-page-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ines-primary) 92%, #000), var(--ines-primary));
  color: #fff;
  padding: 2.75rem 0 2.25rem;
}
.cms-page-hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* List / detail pages */
.cms-page-hero--compact {
  padding: 2.35rem 0 2rem;
}

/* CMS list heroes (news, events) — visible in app shell and public nav */
.cms-list-hero {
  position: relative;
  min-height: min(44vh, 420px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: 100%;
}
.cms-list-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}
.cms-list-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 61, 46, 0.82) 0%,
    rgba(11, 110, 79, 0.62) 42%,
    rgba(8, 20, 14, 0.78) 100%
  );
}
.cms-list-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  width: 100%;
  padding: 3.5rem 0 2.35rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cms-list-hero-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.cms-list-hero-content h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: none;
}
.cms-list-hero-lead {
  margin: 0;
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}
.cms-list-hero-breadcrumb {
  margin-bottom: 0.85rem;
}
.cms-list-hero-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.cms-list-hero-breadcrumb .breadcrumb-item a:hover {
  color: #fff;
}
.cms-list-hero-breadcrumb .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.92);
}
.cms-list-hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.45);
}
.cms-list-hero-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.35rem;
  max-width: 34rem;
  width: 100%;
}
.cms-list-hero-search-field {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}
.cms-list-hero-search-field i {
  color: rgba(255, 255, 255, 0.82);
}
.cms-list-hero-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font-size: 0.92rem;
}
.cms-list-hero-search-field input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}
.cms-list-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.35rem;
}
.cms-list-hero-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 6.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}
.cms-list-hero-stat strong {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}
.cms-list-hero-stat span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.cms-list-body {
  padding-top: 0.85rem;
}
.cms-list-page .cms-list-section {
  padding-top: 0 !important;
}
@media (max-width: 767.98px) {
  .cms-list-hero-content {
    padding: 2.75rem 0 1.85rem;
  }
  .cms-list-hero-content h1 {
    max-width: none;
  }
}

.cms-list-section {
  padding-top: 2.5rem !important;
}
.cms-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed rgba(15, 61, 46, 0.18);
  border-radius: 1rem;
  color: #64748b;
}
.cms-empty-state i {
  font-size: 2rem;
  color: rgba(19, 182, 82, 0.45);
  display: block;
  margin-bottom: 0.65rem;
}
.cms-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.cms-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.cms-page-hero--compact .cms-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.cms-article-hero {
  position: relative;
  min-height: min(52vh, 420px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.cms-article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 14, 0.15) 0%, rgba(8, 20, 14, 0.78) 72%, rgba(8, 20, 14, 0.92) 100%);
}
.cms-article-hero-copy {
  position: relative;
  z-index: 1;
  padding: 2.5rem 0 2rem;
  color: #fff;
  max-width: 760px;
}
.cms-article-hero-copy h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}
.cms-article-meta {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
}
.cms-article-body-section {
  padding-top: 2rem !important;
}
.cms-article-layout {
  max-width: 760px;
}
.cms-article-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 1.35rem;
}
.cms-event-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}
.cms-event-detail-facts div {
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: #f4f8f5;
  border: 1px solid rgba(15, 61, 46, 0.08);
}
.cms-event-detail-facts span {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.2rem;
}
.cms-event-detail-facts strong {
  font-size: 0.92rem;
  color: #0f5230;
  line-height: 1.35;
}

.cms-page-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2c3a45;
}
.cms-page-body.cms-prose.rich-content,
.cms-public-page .cms-page-body.rich-content {
  font-size: 1.05rem;
}
.cms-page-body img,
.cms-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.65rem;
  margin: 1rem 0;
  box-shadow: 0 8px 24px rgba(15, 61, 46, 0.08);
}
.cms-page-body figure,
.cms-prose figure {
  margin: 1.25rem 0;
}
.cms-page-body figcaption,
.cms-prose figcaption {
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 0.45rem;
}
.cms-page-body blockquote,
.cms-prose blockquote {
  border-left: 4px solid var(--ines-green, #13b652);
  padding: 0.65rem 0 0.65rem 1rem;
  margin: 1rem 0;
  background: rgba(19, 182, 82, 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
}
.cms-page-body table,
.cms-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.cms-page-body th,
.cms-page-body td,
.cms-prose th,
.cms-prose td {
  border: 1px solid rgba(15, 61, 46, 0.12);
  padding: 0.55rem 0.65rem;
}
.cms-page-body th,
.cms-prose th {
  background: rgba(19, 182, 82, 0.08);
}

@media (max-width: 575.98px) {
  .cms-news-card--row {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .cms-event-card--row .cms-event-card-link {
    grid-template-columns: 1fr;
  }
  .cms-event-date-badge--solo {
    margin-bottom: -0.35rem;
  }
}

/* Dual-currency wallet switcher */
.le-currency-switch {
  display: inline-flex;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.le-currency-btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #3d5248;
  text-decoration: none;
  line-height: 1.2;
}
.le-currency-btn:hover { color: var(--ines-primary, #0B6E4F); background: rgba(11,110,79,0.06); }
.le-currency-btn.is-active {
  background: var(--ines-primary, #0B6E4F);
  color: #fff;
}
.le-fx-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #5c6b7a !important;
}

.mx-mod-cell { display:flex; align-items:flex-start; gap:.75rem; }
.mx-mod-thumb {
  width:56px; height:36px; object-fit:cover; border-radius:6px;
  flex-shrink:0; background:#e8eee9;
}

/* Course cover studio (create / edit) */
.lc-cover-studio {
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 1rem;
  background: #f7faf8;
  padding: 1.1rem 1.2rem 1.25rem;
}
.lc-cover-studio.is-review {
  border-color: color-mix(in srgb, var(--ines-gold, #d4a017) 55%, #0b6e4f);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}
.lc-cover-studio-body {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 1.1rem;
  align-items: start;
  margin-top: 0.85rem;
}
.lc-cover-preview {
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #e6eee9;
  border: 1px solid rgba(15, 61, 46, 0.1);
}
.lc-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lc-cover-placeholder {
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #5c6b7a;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}
.lc-cover-placeholder i { font-size: 1.6rem; opacity: 0.7; }
.lc-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.lc-cover-file-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.lc-cover-actions .form-text { flex-basis: 100%; }
.ai-review-cover-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 220px;
  max-width: 280px;
}
.ai-review-cover-empty {
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #e8eee9;
  border-radius: 0.75rem;
  color: #5c6b7a;
  font-size: 0.85rem;
}
.ai-cover-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
@media (max-width: 768px) {
  .lc-cover-studio-body { grid-template-columns: 1fr; }
  .ai-review-cover-panel { max-width: none; }
}

/* Student learning desk */
.learn-pro-page .study-shell { max-width: 1280px; }
.lp-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 0.35rem 0 0.95rem;
  border-bottom: 1px solid #e6ece8;
  margin-bottom: 1rem;
}
.lp-topbar-main { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1; }
.lp-back {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dce6e0;
  background: #fff; color: #0f5230; text-decoration: none; flex-shrink: 0;
}
.lp-back:hover { background: #f4f7f5; color: #0b3d28; }
.lp-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7a8a82;
}
.lp-topbar-copy h1 {
  margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 720; color: #12261c; line-height: 1.3; letter-spacing: -0.015em;
}
.lp-crumb {
  margin: 0.28rem 0 0; font-size: 0.84rem; color: #5c6b7a;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
}
.lp-crumb strong { color: #1f3a2b; font-weight: 650; }
.lp-topbar-meta { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.lp-course-pct {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
}
.lp-course-pct span { font-size: 0.92rem; font-weight: 750; color: #0f5230; }
.lp-course-pct em { font-style: normal; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: #7a8a82; }
.lp-progress-ring {
  --pct: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#0f6b3c calc(var(--pct) * 1%), #e6eee9 0);
  font-size: 0.68rem; font-weight: 800; color: #0f5230;
}
.lp-progress-ring span {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
}
.lp-topbar-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.42rem 0.85rem; border-radius: 8px; font-size: 0.84rem; font-weight: 650;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.lp-btn-primary { background: #0f5230; color: #fff; }
.lp-btn-primary:hover { background: #0c4227; color: #fff; }
.lp-btn-ghost { background: #fff; border-color: #dce6e0; color: #1f3a2b; }
.lp-btn-ghost:hover { background: #f4f7f5; color: #0b3d28; }
.is-focus-mode .lp-btn-ghost { background: #0f5230; border-color: #0f5230; color: #fff; }
.is-focus-mode .lp-btn-ghost:hover { background: #0c4227; border-color: #0c4227; color: #fff; }
.lp-btn-block { width: 100%; margin-top: 0.65rem; }
.lp-btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

.lp-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(248px, 300px);
  gap: 1rem;
  min-height: calc(100vh - 210px);
  align-items: stretch;
}
.is-focus-mode .lp-workspace { grid-template-columns: minmax(0, 1fr); }
.lp-stage {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff;
  border: 1px solid #e4ebe6;
  border-radius: 10px;
  overflow: hidden;
}
.lp-read-meter {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  align-items: center;
  padding: 0.7rem 1.25rem 0.65rem;
  border-bottom: 1px solid #eef2ef;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}
.learn-circle {
  --ring: 163.36;
  width: 64px;
  height: 64px;
  position: relative;
  grid-row: 1 / span 2;
}
.learn-circle svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.learn-circle-track,
.learn-circle-fill {
  fill: none;
  stroke-width: 6;
}
.learn-circle-track { stroke: #e6eee9; }
.learn-circle-fill {
  stroke: #13b652;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease;
}
.learn-circle.is-done .learn-circle-fill { stroke: #0f5230; }
.learn-circle strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f5230;
  line-height: 1;
}
.lp-read-meter-bar {
  height: 3px; border-radius: 99px; background: #e8eee9; overflow: hidden;
}
.lp-read-meter-bar span {
  display: block; height: 100%; background: #0f5230;
  transition: width 0.2s ease;
}
.lp-read-meter-copy {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  font-size: 0.8rem; color: #6b7c72;
}
.lp-read-meter-copy strong { color: #1f3a2b; font-weight: 650; }
.lp-read-meter-copy span { color: #7a8a82; }

.lp-stage-scroll {
  flex: 1; min-height: 0; overflow: auto;
  padding: 1.5rem 1.75rem 2.1rem;
  background: #fff;
}
.lp-lesson { max-width: 58rem; margin: 0 auto; }
.is-focus-mode .lp-lesson { max-width: 72rem; }
.lp-lesson.is-reading { max-width: 58rem; }
.is-focus-mode .lp-lesson.is-reading { max-width: 72rem; }
.lp-lesson-head { margin-bottom: 1.35rem; padding-bottom: 0.9rem; border-bottom: 1px solid #eef2ef; }
.lp-lesson-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7a8a82;
}
.lp-lesson-head h2 {
  margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 720; color: #12261c; letter-spacing: -0.02em; line-height: 1.28;
}
.lp-lesson-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.lp-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.16rem 0.48rem; border-radius: 4px; background: #f3f6f4; color: #3d5248;
}
.lp-tag.is-done { background: #e7f7ec; color: #0f6b3c; }

.lp-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: #0b1f16;
  margin-bottom: 1.25rem;
}
.lp-media iframe, .lp-media video, .lp-media-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.lp-doc-link { margin: 0.55rem 0 0; font-size: 0.85rem; }

/* ── Document (PDF) display ── */
.lp-doc { margin-bottom: 1.35rem; }
.lp-doc-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid #e4ebe6; border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f7faf8; padding: 0.6rem 0.8rem;
}
.lp-doc-file { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.lp-doc-file i { font-size: 1.35rem; color: #d64541; flex-shrink: 0; }
.lp-doc-file span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lp-doc-file strong {
  font-size: 0.82rem; font-weight: 650; color: #1f3a2b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-doc-file em { font-style: normal; font-size: 0.72rem; color: #7a8a82; }
.lp-doc-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.lp-doc-frame { aspect-ratio: 16 / 9; border-radius: 0 0 10px 10px; margin-bottom: 1.35rem; }
.lp-doc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Audio display ── */
.lp-audio-frame { aspect-ratio: auto; min-height: 70px; display: grid; place-items: center; }
.lp-audio-frame audio { width: 100%; padding: 0 0.75rem; }

/* ── Generic file display ── */
.lp-file {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid #e4ebe6; border-radius: 10px;
  background: #fff; padding: 0.7rem 0.8rem; margin-bottom: 1.35rem;
}
.lp-file-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 9px; background: #eaf6ee; color: #0f6b3c;
  display: grid; place-items: center; font-size: 1.15rem;
}
.lp-file-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lp-file-copy strong {
  font-size: 0.84rem; font-weight: 650; color: #1f3a2b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-file-copy em { font-style: normal; font-size: 0.72rem; color: #7a8a82; }
.lp-file-actions { display: flex; gap: 0.4rem; margin-left: auto; flex-shrink: 0; }
.lp-chip.is-muted { background: transparent; color: #7a8a82; cursor: default; }
.lp-prose {
  font-size: 1.05rem;
  line-height: 1.75; color: #1c2c24;
}
.learn-pro-page .lp-prose.rich-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #1c2c24;
}
.lp-prose p { margin-bottom: 1.05rem; }
.lp-prose h2, .lp-prose h3, .lp-prose h4,
.learn-pro-page .lp-prose.rich-content h2,
.learn-pro-page .lp-prose.rich-content h3,
.learn-pro-page .lp-prose.rich-content h4 {
  font-size: 1.18rem;
  margin: 1.6rem 0 0.7rem;
  padding-top: 0.15rem;
  color: #12261c;
  font-weight: 720;
}
.lp-prose ul, .lp-prose ol {
  margin: 0 0 1.15rem;
  padding: 0 0 0 1.25rem;
}
.lp-prose li { margin-bottom: 0.4rem; }
.lp-prose li:last-child { margin-bottom: 0; }
.lp-prose blockquote {
  margin: 1.2rem 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 3px solid #0f5230;
  background: transparent;
  color: #2a3a31;
}
.learn-pro-page .lp-prose img {
  max-width: 100%;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  margin: 0.75rem 0 1.1rem;
  float: none;
  display: block;
  box-shadow: none;
  border: 1px solid #eef2ef;
}
.learn-pro-page .lp-prose .ai-lesson-figure { display: none; }

.lp-example {
  margin: 1.4rem 0 1.65rem;
  border: 1px solid #d4edda;
  background: #fff;
}
.lp-example-kicker {
  margin: 0;
  padding: 0.7rem 1rem;
  background: #04AA6D;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.lp-try-hint { display: none; }

.lp-tryit {
  margin: 1.4rem 0 1.75rem;
  border: 1px solid #d3e4d8;
  background: #fff;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.lp-example-code,
.lp-example pre {
  margin: 0;
  padding: 0.85rem 1rem 1.05rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  background: #fff;
  max-width: 100%;
}
.lp-tryit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: #04AA6D;
  color: #fff;
}
.lp-tryit-bar span {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
.lp-tryit-run {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #04AA6D;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.38rem 0.85rem;
  cursor: pointer;
}
.lp-tryit-run:hover { background: #e8fff4; color: #038857; }
.lp-tryit-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.65rem 0.85rem 0.85rem;
  background: #f1f1f1;
  border-top: 1px solid #e3e3e3;
}
.lp-tryit-actions .lp-tryit-run {
  background: #04AA6D;
  color: #fff;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
}
.lp-tryit-actions .lp-tryit-run:hover { background: #038857; color: #fff; }
.lp-tryit-panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 220px;
  background: #fff;
}
.lp-tryit-code {
  border-right: 1px solid #e3e3e3;
  min-width: 0;
  background: #fff;
}
.lp-tryit-code textarea {
  display: block;
  width: 100%;
  min-height: 220px;
  height: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 0;
  resize: vertical;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #1c2c24;
  background: #fff;
  white-space: pre;
  overflow: auto;
  max-width: 100%;
}
.lp-tryit-code textarea:focus { outline: 2px solid #04AA6D; outline-offset: -2px; }
.lp-tryit-out {
  min-width: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.lp-tryit-out-label {
  margin: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c6b7a;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
}
.lp-tryit-frame {
  width: 100%;
  min-height: 180px;
  flex: 1;
  border: 0;
  background: #fff;
}
.lp-tryit-result {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #1c2c24;
  white-space: pre-wrap;
}
.lp-tryit-result.is-muted { color: #6b7c72; }
.learn-pro-page .lp-prose.rich-content .lp-tryit p,
.lp-prose .lp-tryit p { margin: 0; }
@media (max-width: 768px) {
  .lp-tryit { margin: 1.1rem 0 1.35rem; }
  .lp-tryit-panes { grid-template-columns: 1fr; }
  .lp-tryit-code { border-right: 0; border-bottom: 1px solid #e3e3e3; }
  .lp-tryit-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
  }
  .lp-tryit-bar span { font-size: 0.95rem; }
  .lp-tryit-bar .lp-tryit-run {
    min-height: 40px;
    padding: 0.4rem 0.85rem;
  }
  .lp-tryit-code textarea {
    min-height: 150px;
    font-size: 16px;
    padding: 0.75rem 0.85rem;
  }
  .lp-tryit-frame { min-height: 150px; }
  .lp-tryit-actions {
    padding: 0.7rem 0.75rem 0.85rem;
  }
  .lp-tryit-actions .lp-tryit-run {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    font-size: 1rem;
  }
  .lp-example-code,
  .lp-example pre { font-size: 0.82rem; padding: 0.75rem 0.8rem 0.95rem; }
}

.lp-end-mark { height: 1px; margin: 1.25rem 0 0.15rem; }
.lp-empty, .lp-empty-state {
  color: #5c6b7a; text-align: center; padding: 2.5rem 1rem;
}
.lp-empty-state h2 { margin: 0 0 0.35rem; font-size: 1.15rem; color: #12261c; }

.lp-tools {
  margin-top: 1.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid #eef2ef;
}
.lp-tools summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  color: #4d6356;
  list-style: none;
}
.lp-tools summary::-webkit-details-marker { display: none; }
.lp-tools[open] summary { margin-bottom: 0.65rem; }
.lp-coach-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.38rem 0.7rem; border-radius: 6px;
  border: 1px solid #dce6e0; background: #fff;
  color: #1f3a2b; font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.lp-chip:hover { background: #f4f7f5; color: #0b3d28; }
.lp-chip.is-active {
  background: #0f5230;
  color: #fff;
  border-color: #0f5230;
}
.lp-doc-frame iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 8px;
  background: #f4f6f5;
}

.lp-nav {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid #e6ece8;
  background: #fff;
}
.lp-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: 7rem; padding: 0.5rem 0.95rem; border-radius: 8px;
  border: 1px solid #dce6e0; background: #fff;
  color: #1f3a2b; font-size: 0.88rem; font-weight: 650; text-decoration: none; cursor: pointer;
}
.lp-nav-btn.is-primary { background: #0f5230; border-color: #0f5230; color: #fff; }
.lp-nav-btn.is-primary:hover { background: #0c4227; color: #fff; }
.lp-nav-btn.is-ghost { background: transparent; border-color: transparent; color: #8a9890; pointer-events: none; min-width: 0; }
.lp-nav-btn:disabled, .learn-complete-wrap[data-locked="1"] .learn-complete-btn {
  opacity: 0.5; pointer-events: none; cursor: not-allowed;
}
.lp-nav-status { flex: 1; text-align: center; font-size: 0.8rem; font-weight: 550; color: #6b7c72; }
.lp-nav-status.is-ready { color: #0f5230; }

.lp-path {
  display: flex; flex-direction: column; min-height: 0;
  background: #fff;
  border: 1px solid #e4ebe6;
  border-radius: 10px;
  overflow: hidden;
}
.lp-path-head {
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid #eef2ef;
  background: #fff;
}
.lp-path-head h3 {
  margin: 0; font-size: 0.95rem; font-weight: 720; color: #12261c;
}
.lp-path-note { margin: 0.3rem 0 0; font-size: 0.78rem; color: #6b7c72; line-height: 1.45; }
.lp-path-scroll { flex: 1; overflow: auto; padding: 0.55rem; }

.lp-mod {
  border: 0;
  border-bottom: 1px solid #eef2ef;
  border-radius: 0;
  background: transparent;
  padding: 0.7rem 0.55rem;
  margin-bottom: 0;
}
.lp-mod:last-child { border-bottom: 0; }
.lp-mod.is-focus { background: #f7faf8; border-radius: 8px; border-bottom-color: transparent; }
.lp-mod.is-locked { opacity: 0.78; }
.lp-mod.is-complete:not(.is-focus) { background: transparent; }
.lp-mod-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.lp-mod-title { display: flex; gap: 0.4rem; align-items: flex-start; min-width: 0; }
.lp-mod-title i { margin-top: 0.12rem; color: #0f5230; flex-shrink: 0; }
.lp-mod.is-locked .lp-mod-title i { color: #8a9890; }
.lp-mod-title strong { font-size: 0.86rem; color: #12261c; line-height: 1.35; font-weight: 650; }
.lp-mod-meta { font-size: 0.68rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: #7a8a82; flex-shrink: 0; }
.lp-mod.is-focus .lp-mod-meta { color: #0f5230; }
.lp-mod-progress { height: 3px; border-radius: 99px; background: #e8eee9; overflow: hidden; margin: 0.45rem 0 0.3rem; }
.lp-mod-progress span { display: block; height: 100%; background: #0f5230; }
.lp-mod-hint { margin: 0.35rem 0 0; font-size: 0.76rem; color: #7a8a82; }
.lp-steps { list-style: none; margin: 0; padding: 0; }
.lp-steps li + li { margin-top: 0.05rem; }
.lp-step {
  display: flex; align-items: flex-start; gap: 0.4rem;
  padding: 0.32rem 0.1rem; font-size: 0.82rem; color: #415248; text-decoration: none;
}
.lp-step.is-active { color: #0f5230; font-weight: 650; background: transparent; }
.lp-step.is-done { color: #3d6350; }
.lp-step.is-locked { color: #9aa89f; cursor: not-allowed; }
.lp-step i { margin-top: 0.12rem; flex-shrink: 0; }
.lp-step em {
  font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 0.08rem 0.3rem; border-radius: 3px;
  background: #f3f6f4; color: #4d6356; flex-shrink: 0;
}
.lp-step em.is-quiz { background: #f7f3e6; color: #6b5720; }
.lp-step em.is-asn { background: #eef2f7; color: #1e4d8c; }

@media (max-width: 992px) {
  .lp-workspace { grid-template-columns: 1fr; }
  .lp-path { max-height: 380px; }
  .is-focus-mode .lp-lesson, .is-focus-mode .lp-lesson.is-reading { max-width: none; }
}
@media (max-width: 576px) {
  .lp-stage-scroll { padding: 1rem 0.95rem 1.4rem; }
  .lp-nav { padding: 0.75rem; }
  .lp-prose, .learn-pro-page .lp-prose.rich-content {
    font-size: 1.02rem;
    line-height: 1.7;
  }
}

/* ---- Email verification code (in-app OTP) ---- */
.vc-page .auth-card { overflow: visible; }
.vc-lead { margin: 0.35rem 0 0.4rem; color: #4d6356; line-height: 1.5; }
.vc-lead strong { color: #0f5230; }
.vc-hint { margin: 0; font-size: 0.88rem; color: #7a8a82; }
.vc-hidden-code {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.vc-boxes {
  position: relative;
  display: flex; justify-content: center; gap: 0.45rem;
  margin: 1.5rem 0 0.85rem;
  perspective: 720px;
}
.vc-track {
  position: absolute;
  left: 8%; right: 8%; bottom: -10px;
  height: 2px;
  background: #e4ebe6;
  overflow: hidden;
  border-radius: 99px;
}
.vc-track::after {
  content: '';
  position: absolute; inset: 0;
  width: 36%;
  background: #0f5230;
  transform: translateX(-120%);
  opacity: 0;
}
.vc-boxes.is-checking .vc-track::after {
  opacity: 1;
  animation: vc-scan 1.15s ease-in-out infinite;
}
.vc-cell {
  width: 3rem;
  height: 3.6rem;
  perspective: 600px;
}
.vc-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vc-cell.is-sealed .vc-flip { transform: rotateX(-180deg); }
.vc-box,
.vc-seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.vc-box {
  border: 1px solid #c9d4cd;
  background: #fff;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #12261c;
  caret-color: #0f5230;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vc-box:focus {
  outline: none;
  border-color: #0f5230;
  box-shadow: inset 0 -2px 0 #0f5230;
}
.vc-box.is-filled {
  border-color: #0f5230;
  background: #f7faf8;
}
.vc-seal {
  display: grid;
  place-items: center;
  background: #0f5230;
  color: #fff;
  transform: rotateX(180deg);
  font-size: 1.25rem;
}
.vc-boxes.is-error .vc-box,
.vc-box.is-error {
  border-color: #8f2a2a;
  background: #fdf6f6;
  color: #8f2a2a;
}
.vc-boxes.is-shake { animation: vc-shake 0.38s ease; }
.vc-boxes.is-success .vc-track { background: #0f5230; }
.vc-error { margin: 0 0 0.55rem; color: #8f2a2a; font-size: 0.86rem; font-weight: 600; text-align: center; }
.vc-status {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7c72;
}
.vc-boxes.is-success + .vc-error + .vc-status,
.vc-form:has(.vc-boxes.is-success) .vc-status { color: #0f5230; }
.vc-submit { margin-top: 0.15rem; }
.vc-actions {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  margin-top: 1.15rem;
}
.vc-text-btn {
  background: none; border: 0; padding: 0;
  color: #0f5230; font-weight: 650; font-size: 0.88rem;
  text-decoration: none; cursor: pointer;
}
.vc-text-btn:hover { color: #0b3d28; }
.vc-change { width: 100%; text-align: center; }
.vc-change summary { cursor: pointer; color: #5c6b7a; font-size: 0.88rem; }
.vc-success {
  text-align: center;
  margin: 0.35rem 0 0;
}
.vc-success[hidden] { display: none !important; }
.vc-success.is-on { display: block; }
.vc-success p {
  margin: 0;
  font-size: 0.92rem;
  color: #0f5230;
  letter-spacing: 0.01em;
}
@keyframes vc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes vc-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@media (max-width: 576px) {
  .vc-cell { width: 2.55rem; height: 3.15rem; }
  .vc-box { font-size: 1.2rem; }
  .vc-boxes { gap: 0.3rem; }
}

.cert-preview.cert-preview--unified {
  --cert-primary: var(--ines-green-dark, #0f5230);
  --cert-accent: var(--ines-yellow, #f0c020);
  --cert-heading: var(--ines-yellow-dark, #c99200);
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  min-height: 420px;
  background: #fffcf8;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 82, 48, 0.12);
  border: 3px solid var(--cert-primary);
  position: relative;
}
.cert-preview.cert-preview--unified::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--cert-primary), var(--cert-accent), var(--cert-heading));
  z-index: 2;
}
.cert-preview.is-professional {
  --cert-primary: #1b365d;
  --cert-accent: #d4af37;
  --cert-heading: #8a6d12;
  background: #f6f3ea;
}
.cert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.85rem;
  border-bottom: 1px solid rgba(15, 82, 48, 0.1);
}
.cert-top-brand { display: flex; align-items: center; gap: 0.85rem; }
.cert-top-logo {
  width: 64px; height: 64px; border-radius: 999px;
  background: #fff; border: 2px solid var(--cert-accent);
  display: grid; place-items: center; flex-shrink: 0;
}
.cert-top-logo img { width: 42px; height: 42px; object-fit: contain; }
.cert-top-brand-text h2 {
  margin: 0; font-size: 0.95rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cert-primary);
}
.cert-top-partners {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
  justify-content: flex-end;
}
.cert-partner-mark {
  margin: 0; padding: 0.3rem 0.5rem;
  background: #fff; border-radius: 10px; border: 1px solid #e5e7eb;
}
.cert-partner-mark img { max-height: 38px; max-width: 88px; object-fit: contain; display: block; }
.cert-body {
  flex: 1; text-align: center; padding: 1rem 1.5rem 0.5rem;
  display: flex; flex-direction: column; align-items: center;
}
.cert-preview-kicker { color: var(--cert-primary); }
.cert-body h1 { color: var(--cert-heading); }
.cert-preview-name { border-bottom-color: var(--cert-accent); }
.cert-signatures {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 1.5rem; padding: 0 1.5rem 0.75rem; flex-wrap: wrap;
}
.cert-footer {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem 1.5rem; margin-top: auto;
  background: var(--cert-primary); color: #fff;
}
.cert-footer-brand { flex: 1; }
.cert-footer-brand strong {
  display: block; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.cert-footer-brand span { display: block; font-size: 0.72rem; opacity: 0.85; margin-top: 0.1rem; }
.cert-footer .cert-preview-qr { background: #fff; border-radius: 10px; padding: 0.35rem; }
.cert-footer .cert-preview-qr img { width: 64px; height: 64px; }
.cert-footer .cert-preview-qr span { color: var(--cert-primary); font-size: 0.62rem; }
.cert-footer .cert-preview-id { margin: 0; font-size: 0.65rem; opacity: 0.75; max-width: 8rem; text-align: right; }
.cd-partner-picks {
  display: flex; flex-wrap: wrap; gap: 0.65rem;
}
.cd-partner-pick {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.65rem; border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 10px; cursor: pointer; font-size: 0.82rem;
}
.cd-partner-pick img { max-height: 28px; max-width: 64px; object-fit: contain; }
.cd-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}
.cd-template-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.cd-template-card:hover { border-color: var(--ines-green, #13b652); }
.cd-template-swatch {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  flex: 0 0 auto;
}
.cd-template-card strong { display: block; }
.cd-template-card span,
.cd-template-card em {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  font-style: normal;
}
.cd-template-card i { margin-left: auto; color: #13b652; }
.cd-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}
.cd-soon-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
}
.cd-soon-card i { font-size: 1.3rem; color: #c99200; }
.cd-soon-card p { margin: 0.2rem 0 0; font-size: 0.85rem; color: #6b7280; }
.cd-partner-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 8px;
  padding: 4px;
}
.cd-designer {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 1.25rem;
  align-items: start;
}
.cd-designer-preview {
  position: sticky;
  top: 5.5rem;
}
.cd-preview-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.6rem;
}
.cd-preview-scale {
  transform-origin: top left;
  width: 100%;
}
.cd-preview-scale .cert-preview {
  min-height: 360px;
}
.cd-color { min-height: 2.4rem; padding: 0.15rem; }
@media (max-width: 1100px) {
  .cd-designer { grid-template-columns: 1fr; }
  .cd-designer-preview { position: static; }
}

/* ── Lecturer courses v2 (lc-v2) — transparent green + yellow ── */
.lc-v2 .app-content {
  background: linear-gradient(165deg, rgba(19, 182, 82, 0.06) 0%, rgba(240, 192, 32, 0.05) 42%, #f9fbf9 100%);
}
.lc-v2 .lc-shell {
  max-width: none;
  width: 100%;
}
.lc-v2 .lc-hero {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 1.25rem; margin-bottom: 1.25rem;
}
.lc-v2 .lc-eyebrow {
  margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ines-green, #13b652);
}
.lc-v2 .lc-hero h1 {
  margin: 0; font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 800;
  color: var(--ines-green-dark, #0f5230); letter-spacing: -0.02em;
}
.lc-v2 .lc-lead {
  margin: 0.35rem 0 0; max-width: 36rem; font-size: 0.88rem; color: #64748b; line-height: 1.5;
}
.lc-v2 .lc-hero-tools {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.65rem;
  flex: 1 1 320px; justify-content: flex-end; min-width: 0;
}
.lc-v2 .lc-search { flex: 1 1 220px; max-width: 360px; margin: 0; min-width: 0; }
.lc-v2 .lc-search input {
  border: 1px solid rgba(19, 182, 82, 0.18); border-radius: 12px;
  background: rgba(255, 255, 255, 0.85); box-shadow: none;
}
.lc-v2 .lc-search input:focus {
  border-color: var(--ines-green, #13b652);
  box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.12);
}
.lc-v2 .lc-hero-btns {
  display: flex; flex-wrap: nowrap; gap: 0.5rem; flex-shrink: 0; align-items: center;
}
.lc-v2 .lc-hero-btns .lc-btn { white-space: nowrap; }
.lc-v2 .lc-btn {
  border-radius: 10px; font-weight: 700; padding: 0.55rem 1rem;
}
.lc-v2 .lc-btn-primary {
  background: rgba(19, 182, 82, 0.9); color: #fff;
  box-shadow: 0 4px 14px rgba(19, 182, 82, 0.22);
}
.lc-v2 .lc-btn-primary:hover { background: var(--ines-green, #13b652); color: #fff; }
.lc-v2 .lc-btn-ghost {
  background: rgba(255, 255, 255, 0.8); color: var(--ines-green-dark, #0f5230);
  border: 1px solid rgba(19, 182, 82, 0.25);
}
.lc-v2 .lc-btn-ghost:hover { background: rgba(19, 182, 82, 0.08); }
.lc-v2 .lc-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.lc-v2 .lc-kpi {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.85rem 1rem; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(19, 182, 82, 0.14);
  backdrop-filter: blur(8px); transition: border-color 0.15s, box-shadow 0.15s;
}
.lc-v2 .lc-kpi:hover {
  border-color: rgba(19, 182, 82, 0.3);
  box-shadow: 0 6px 20px rgba(19, 182, 82, 0.08);
}
.lc-v2 .lc-kpi.is-active {
  border-color: var(--ines-green, #13b652);
  box-shadow: 0 0 0 1px rgba(19, 182, 82, 0.2);
  background: rgba(19, 182, 82, 0.08);
}
.lc-v2 .lc-kpi--green { background: rgba(19, 182, 82, 0.07); }
.lc-v2 .lc-kpi--yellow { background: rgba(240, 192, 32, 0.12); border-color: rgba(240, 192, 32, 0.28); }
.lc-v2 .lc-kpi-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b;
}
.lc-v2 .lc-kpi strong {
  font-size: 1.45rem; font-weight: 800; color: var(--ines-green-dark, #0f5230); line-height: 1;
}
.lc-v2 .lc-kpi--yellow strong { color: #8a6d00; }
.lc-v2 .lc-kpi em { font-style: normal; font-size: 0.72rem; color: #64748b; }
.lc-v2 .lc-catalog {
  background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(19, 182, 82, 0.12);
  border-radius: 18px; padding: 1rem 1.15rem 1.15rem;
  box-shadow: 0 8px 28px rgba(19, 182, 82, 0.05);
}
.lc-v2 .lc-catalog-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(19, 182, 82, 0.1);
}
.lc-v2 .lc-catalog-head h2 {
  margin: 0; font-size: 1rem; font-weight: 800; color: var(--ines-green-dark, #0f5230);
}
.lc-v2 .lc-catalog-head p { margin: 0.15rem 0 0; font-size: 0.78rem; color: #64748b; }
.lc-v2 .lc-catalog-tools { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.lc-v2 .lc-clear-filter {
  font-size: 0.78rem; font-weight: 700; color: #64748b; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.lc-v2 .lc-clear-filter:hover { color: var(--ines-green-dark, #0f5230); }
.lc-v2 .lc-view-toggle {
  display: inline-flex; padding: 3px; border-radius: 10px;
  background: rgba(19, 182, 82, 0.08); border: 1px solid rgba(19, 182, 82, 0.15);
}
.lc-v2 .lc-view-btn {
  border: none; background: transparent; padding: 0.4rem 0.65rem;
  border-radius: 8px; color: #64748b; cursor: pointer; font-size: 0.95rem;
}
.lc-v2 .lc-view-btn.is-active {
  background: #fff; color: var(--ines-green-dark, #0f5230);
  box-shadow: 0 2px 6px rgba(19, 182, 82, 0.12);
}
.lc-v2 .lc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 576px) {
  .lc-v2 .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .lc-v2 .lc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .lc-v2 .lc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lc-v2 .lc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.lc-v2 .lc-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid rgba(19, 182, 82, 0.12);
  box-shadow: 0 4px 16px rgba(15, 41, 32, 0.04);
  transition: transform 0.15s, box-shadow 0.15s;
}
.lc-v2 .lc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(19, 182, 82, 0.1);
}
.lc-v2 .lc-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lc-v2 .lc-card-cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-v2 .lc-card-cover--fallback {
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(19, 182, 82, 0.2) 0%, rgba(240, 192, 32, 0.18) 100%);
  color: var(--ines-green-dark, #0f5230); font-weight: 800; font-size: 1.25rem;
}
.lc-v2 .lc-status-badge {
  display: inline-flex; font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.22rem 0.5rem; border-radius: 6px;
}
.lc-v2 .lc-card-media .lc-status-badge {
  position: absolute; top: 0.55rem; left: 0.55rem;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px);
}
.lc-v2 .lc-status-badge.status-published { color: #166534; background: rgba(220, 252, 231, 0.95); }
.lc-v2 .lc-status-badge.status-draft { color: #64748b; background: rgba(241, 245, 249, 0.95); }
.lc-v2 .lc-status-badge.status-pending_approval { color: #8a6d00; background: rgba(254, 243, 199, 0.95); }
.lc-v2 .lc-status-badge.status-rejected { color: #b91c1c; background: rgba(254, 226, 226, 0.95); }
.lc-v2 .lc-status-badge.status-archived { color: #475569; background: rgba(226, 232, 240, 0.95); }
.lc-v2 .lc-card-body { padding: 0.85rem 0.95rem 0.75rem; flex: 1; }
.lc-v2 .lc-card-meta-top {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem;
}
.lc-v2 .lc-code {
  font-size: 0.68rem; font-weight: 800; color: var(--ines-green-dark, #0f5230);
  background: rgba(19, 182, 82, 0.1); padding: 0.15rem 0.45rem; border-radius: 6px;
}
.lc-v2 .lc-dept {
  font-size: 0.68rem; font-weight: 700; color: #64748b;
  background: rgba(240, 192, 32, 0.15); padding: 0.15rem 0.45rem; border-radius: 6px;
}
.lc-v2 .lc-card-body h3 {
  margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 800;
  color: #0f2920; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-v2 .lc-card-desc {
  margin: 0 0 0.55rem; font-size: 0.78rem; color: #64748b; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-v2 .lc-card-stats {
  display: flex; flex-wrap: wrap; gap: 0.65rem; font-size: 0.72rem; font-weight: 600; color: #64748b;
}
.lc-v2 .lc-card-stats i { color: var(--ines-green, #13b652); margin-right: 0.15rem; }
.lc-v2 .lc-card-foot {
  display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.65rem 0.85rem;
  border-top: 1px solid rgba(19, 182, 82, 0.1); background: rgba(19, 182, 82, 0.03);
}
.lc-v2 .lc-card-foot form { margin: 0; display: inline; }
.lc-v2 .lc-foot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  min-width: 2rem; height: 2rem; padding: 0 0.55rem;
  border-radius: 8px; border: 1px solid rgba(19, 182, 82, 0.2);
  background: #fff; color: var(--ines-green-dark, #0f5230);
  font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.lc-v2 .lc-foot-btn--primary {
  flex: 1; min-width: 5rem; background: rgba(19, 182, 82, 0.1);
}
.lc-v2 .lc-foot-btn--accent {
  background: rgba(19, 182, 82, 0.88); color: #fff; border-color: var(--ines-green, #13b652);
}
.lc-v2 .lc-foot-btn--sm { min-width: 1.85rem; height: 1.85rem; padding: 0 0.4rem; font-size: 0.85rem; }
.lc-v2 .lc-foot-btn:hover { background: rgba(19, 182, 82, 0.14); }
.lc-v2 .lc-foot-btn--accent:hover { background: var(--ines-green, #13b652); color: #fff; }
.lc-v2 .lc-table-wrap {
  border-radius: 12px; border: 1px solid rgba(19, 182, 82, 0.1);
  box-shadow: none; background: #fff;
}
.lc-v2 .lc-table thead th { background: rgba(19, 182, 82, 0.05); color: #64748b; }
.lc-v2 .lc-table tbody tr:hover { background: rgba(240, 192, 32, 0.05); }
.lc-v2 .lc-row-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lc-v2 .lc-empty {
  text-align: center; padding: 2.5rem 1rem;
}
.lc-v2 .lc-empty-icon {
  width: 3rem; height: 3rem; border-radius: 12px; margin: 0 auto 0.75rem;
  display: grid; place-items: center; font-size: 1.35rem;
  background: rgba(19, 182, 82, 0.1); color: var(--ines-green, #13b652);
}
.lc-v2 .lc-empty h2 { font-size: 1.05rem; font-weight: 800; color: var(--ines-green-dark, #0f5230); }
.lc-v2 .lc-empty p { color: #64748b; font-size: 0.88rem; max-width: 28rem; margin: 0 auto 1rem; }
@media (max-width: 992px) {
  .lc-v2 .lc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .lc-v2 .lc-kpi-row { grid-template-columns: 1fr 1fr; }
  .lc-v2 .lc-hero-tools { flex-wrap: wrap; justify-content: stretch; }
  .lc-v2 .lc-hero-btns { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  .lc-v2 .lc-search { max-width: none; flex: 1 1 100%; }
}

/* Lecturer course preview (in-hub) */
.lc-preview-page .lc-preview-back { margin-bottom: 0.85rem; }
.lc-preview-page .lc-preview-back a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.84rem; font-weight: 700; color: #64748b; text-decoration: none;
}
.lc-preview-page .lc-preview-back a:hover { color: var(--ines-green-dark, #0f5230); }
.lc-preview-page .lc-preview-hero {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem;
  padding: 1.15rem; border-radius: 16px; margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(19, 182, 82, 0.14);
  box-shadow: 0 8px 28px rgba(19, 182, 82, 0.06);
}
.lc-preview-page .lc-preview-cover {
  border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: rgba(19, 182, 82, 0.08);
}
.lc-preview-page .lc-preview-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-preview-page .lc-preview-cover-fallback {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(19, 182, 82, 0.18) 0%, rgba(240, 192, 32, 0.16) 100%);
  font-size: 1.5rem; font-weight: 800; color: var(--ines-green-dark, #0f5230);
}
.lc-preview-page .lc-preview-badges {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem;
}
.lc-preview-page .lc-preview-main h1 {
  margin: 0 0 0.5rem; font-size: clamp(1.25rem, 2.5vw, 1.65rem); font-weight: 800;
  color: var(--ines-green-dark, #0f5230); line-height: 1.25;
}
.lc-preview-page .lc-preview-lead {
  margin: 0 0 0.75rem; font-size: 0.88rem; color: #64748b; line-height: 1.55; max-width: 42rem;
}
.lc-preview-page .lc-preview-meta {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-size: 0.78rem; font-weight: 600; color: #64748b;
}
.lc-preview-page .lc-preview-meta i { color: var(--ines-green, #13b652); margin-right: 0.2rem; }
.lc-preview-page .lc-preview-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem;
}
.lc-preview-page .lc-preview-note {
  margin: 0.5rem 0 0; font-size: 0.78rem; color: #8a6d00;
  background: rgba(240, 192, 32, 0.12); border-radius: 8px; padding: 0.5rem 0.65rem;
}
.lc-preview-page .lc-preview-grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start;
}
.lc-preview-page .lc-preview-panel {
  background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(19, 182, 82, 0.12);
  border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.lc-preview-page .lc-preview-panel h2 {
  margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;
}
.lc-preview-page .lc-preview-body {
  font-size: 0.9rem; color: #374151; line-height: 1.7;
}
.lc-preview-page .lc-preview-body p:last-child { margin-bottom: 0; }
.lc-preview-page .lc-preview-modules {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem;
}
.lc-preview-page .lc-preview-modules li {
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline;
  padding: 0.55rem 0.65rem; border-radius: 8px;
  background: rgba(19, 182, 82, 0.05); border: 1px solid rgba(19, 182, 82, 0.1);
}
.lc-preview-page .lc-preview-modules strong { font-size: 0.84rem; color: var(--ines-green-dark, #0f5230); }
.lc-preview-page .lc-preview-modules span { font-size: 0.72rem; color: #64748b; white-space: nowrap; }
.lc-preview-page .lc-preview-lessons {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem;
}
.lc-preview-page .lc-preview-lessons li {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #374151;
}
.lc-preview-page .lc-preview-lessons i { color: var(--ines-green, #13b652); }
.lc-preview-page .lc-preview-lessons em { margin-left: auto; font-style: normal; font-size: 0.72rem; color: #64748b; }
.lc-preview-page .lc-preview-empty { margin: 0; font-size: 0.84rem; color: #64748b; }
@media (max-width: 992px) {
  .lc-preview-page .lc-preview-hero { grid-template-columns: 1fr; }
  .lc-preview-page .lc-preview-cover { max-height: 200px; aspect-ratio: auto; }
  .lc-preview-page .lc-preview-grid { grid-template-columns: 1fr; }
}

/* �� Department analytics desk �� */
.da-analytics-page .da-analytics { max-width: 1280px; }
.da-analytics .da-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(19, 182, 82, 0.18);
  background:
    linear-gradient(135deg, rgba(19, 182, 82, 0.1) 0%, rgba(240, 192, 32, 0.06) 42%, #fff 78%),
    radial-gradient(ellipse at top right, rgba(19, 182, 82, 0.12), transparent 55%);
}
.da-analytics .da-hero h1 {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--ines-gray-800, #1a2e24);
}
.da-analytics .da-hero .lm-sub { margin: 0; max-width: 36rem; }
.da-analytics .da-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.da-analytics .da-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
@media (min-width: 900px) {
  .da-analytics .da-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.da-analytics .da-kpi {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 82, 48, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.da-analytics .da-kpi:hover {
  border-color: rgba(19, 182, 82, 0.4);
  transform: translateY(-2px);
}
.da-analytics .da-kpi-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 182, 82, 0.12);
  color: var(--ines-green-dark, #0f5230);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.da-analytics .da-kpi-icon.is-warn {
  background: rgba(240, 192, 32, 0.22);
  color: var(--ines-yellow-dark, #c99200);
}
.da-analytics .da-kpi-icon.is-muted {
  background: var(--ines-gray-100, #eef4f0);
  color: var(--ines-gray-600, #4a6356);
}
.da-analytics .da-kpi p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ines-gray-500, #6b8176);
}
.da-analytics .da-kpi strong {
  display: block;
  margin: 0.15rem 0 0.1rem;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--ines-gray-800, #1a2e24);
  letter-spacing: -0.02em;
}
.da-analytics .da-kpi em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--ines-gray-500, #6b8176);
}
.da-analytics .da-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
@media (min-width: 992px) {
  .da-analytics .da-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .da-analytics .da-panel--wide {
    grid-column: 1 / -1;
  }
}
.da-analytics .da-panel {
  background: #fff;
  border: 1px solid var(--ines-gray-200, #dce8e0);
  border-radius: 16px;
  padding: 0.95rem 1rem 1rem;
  box-shadow: 0 10px 28px rgba(15, 82, 48, 0.045);
}
.da-analytics .da-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.da-analytics .da-panel-head h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--ines-gray-800, #1a2e24);
}
.da-analytics .da-panel-head p {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--ines-gray-500, #6b8176);
}
.da-analytics .da-chip {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ines-green-dark, #0f5230);
  background: rgba(19, 182, 82, 0.12);
  border: 1px solid rgba(19, 182, 82, 0.22);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}
.da-analytics .da-chart-frame {
  position: relative;
  height: 260px;
  padding: 0.15rem 0.1rem 0.25rem;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(19, 182, 82, 0.035), transparent 48%),
    linear-gradient(135deg, rgba(15, 82, 48, 0.02), transparent);
}
.da-analytics .da-chart-frame--lg { height: 300px; }
.da-analytics .da-chart-frame canvas {
  width: 100% !important;
  height: 100% !important;
}
.da-analytics .da-panel--table { margin-bottom: 0.5rem; }
.da-analytics .da-table-wrap { overflow-x: auto; }
.da-analytics .da-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.da-analytics .da-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ines-gray-500, #6b8176);
  border-bottom: 1px solid var(--ines-gray-200, #dce8e0);
  padding: 0.55rem 0.4rem;
  white-space: nowrap;
}
.da-analytics .da-table td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid rgba(220, 232, 224, 0.85);
  vertical-align: middle;
  color: var(--ines-gray-800, #1a2e24);
}
.da-analytics .da-table td strong { display: block; }
.da-analytics .da-muted {
  display: block;
  font-size: 0.76rem;
  color: var(--ines-gray-500, #6b8176);
  margin-top: 0.1rem;
}
.da-analytics .da-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(19, 182, 82, 0.12);
  overflow: hidden;
  min-width: 7rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.45rem;
}
.da-analytics .da-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f5230, #13b652);
  border-radius: inherit;
}
.da-analytics .da-table em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ines-green-dark, #0f5230);
}
.da-analytics .da-empty {
  text-align: center;
  color: var(--ines-gray-500, #6b8176);
  padding: 1.4rem 0.5rem !important;
}
.air-reports-page .air-summary-cell {
  max-width: none;
  font-size: 0.82rem;
  color: var(--ines-gray-600, #4a6356);
  line-height: 1.45;
}

/* AI reports — full-width desk */
.air-reports-page .app-content { background: inherit; }
.air-shell {
  max-width: none;
  width: 100%;
}
.air-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.air-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ines-green, #0B6E4F);
}
.air-head h1 { margin: 0 0 0.35rem; font-size: 1.45rem; font-weight: 800; color: #10261a; }
.air-lead { margin: 0; font-size: 0.88rem; color: #64748b; max-width: 36rem; }
.air-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.air-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
}
.air-btn-ghost { background: #fff; border-color: #dce8e0; color: #10261a; }
.air-btn-ghost:hover { background: #f8fbf9; color: #0f5230; }
.air-btn-outline { background: var(--ines-green, #0B6E4F); color: #fff; }
.air-btn-outline:hover { background: #0f5230; color: #fff; }
.air-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .air-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.air-kpis article {
  background: #fff;
  border: 1px solid #e8efea;
  border-radius: 14px;
  padding: 0.85rem 1rem;
}
.air-kpis span { display: block; font-size: 0.72rem; color: #64748b; margin-bottom: 0.15rem; }
.air-kpis strong { font-size: 1.35rem; font-weight: 800; color: #10261a; }
.air-chart-grid {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .air-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .air-chart-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .air-chart-grid .air-chart-card { grid-column: span 1; }
}
.air-chart-card--wide { grid-column: auto; }
.air-chart-card,
.air-table-card {
  background: #fff;
  border: 1px solid #e8efea;
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem;
  min-width: 0;
}
.air-chart-head { margin-bottom: 0.75rem; }
.air-chart-head h2 { margin: 0 0 0.15rem; font-size: 1rem; font-weight: 750; color: #10261a; }
.air-chart-head p { margin: 0; font-size: 0.78rem; color: #64748b; }
.air-chart-box { position: relative; height: 220px; width: 100%; min-width: 0; }
.air-chart-box--tall { height: 240px; }
.air-chart-box--square { height: 220px; max-width: none; margin: 0; }
.air-table-wrap { overflow-x: auto; }
.air-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.air-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 0.5rem 0.35rem;
  border-bottom: 1px solid #e8efea;
}
.air-table td {
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid #f0f4f1;
  vertical-align: top;
  color: #1a2e24;
}
.air-table td strong { display: block; font-weight: 700; }
.air-empty { text-align: center; color: #64748b; padding: 1.25rem !important; }

[data-bs-theme="dark"] .da-analytics .da-hero,
[data-theme="dark"] .da-analytics .da-hero,
[data-bs-theme="dark"] .da-analytics .da-kpi,
[data-theme="dark"] .da-analytics .da-kpi,
[data-bs-theme="dark"] .da-analytics .da-panel,
[data-theme="dark"] .da-analytics .da-panel {
  background: var(--surface, #13261c);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Unified hub background — matches AI reports desk (light mode) */
html:not([data-bs-theme="dark"]):not([data-theme="dark"])
  body.app-shell:not(.ai-tutor-immersive) .app-content {
  background: #eef2f0 !important;
}

/* ═══ Unified hub stat cards (dept analytics / da-kpi style) — wallet excluded ═══ */
body.app-shell:not(.le-wallet-page) .da-kpi-row,
body.app-shell:not(.le-wallet-page) .sa-kpi-row,
body.app-shell:not(.le-wallet-page) .lm-kpi-row,
body.app-shell:not(.le-wallet-page) .lc-kpi-row,
body.app-shell:not(.le-wallet-page) .ms-kpi-row,
body.app-shell:not(.le-wallet-page) .lan-kpis,
body.app-shell:not(.le-wallet-page) .air-kpis,
body.app-shell:not(.le-wallet-page) .scd-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
@media (min-width: 900px) {
  body.app-shell:not(.le-wallet-page) .da-kpi-row,
  body.app-shell:not(.le-wallet-page) .sa-kpi-row,
  body.app-shell:not(.le-wallet-page) .lm-kpi-row,
  body.app-shell:not(.le-wallet-page) .lc-kpi-row,
  body.app-shell:not(.le-wallet-page) .ms-kpi-row,
  body.app-shell:not(.le-wallet-page) .air-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.app-shell:not(.le-wallet-page) .da-kpi-row:has(> :nth-child(5):last-child),
  body.app-shell:not(.le-wallet-page) .lm-kpi-row:has(> :nth-child(5):last-child),
  body.app-shell:not(.le-wallet-page) .lan-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body.app-shell:not(.le-wallet-page) .sa-kpi-row.sa-kpi-row-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
body.app-shell:not(.le-wallet-page) .da-kpi,
body.app-shell:not(.le-wallet-page) .sa-kpi,
body.app-shell:not(.le-wallet-page) .lm-card.lm-kpi-simple,
body.app-shell:not(.le-wallet-page) .lc-kpi,
body.app-shell:not(.le-wallet-page) .ms-kpi,
body.app-shell:not(.le-wallet-page) .lan-kpi,
body.app-shell:not(.le-wallet-page) .air-kpis > article,
body.app-shell:not(.le-wallet-page) .scd-kpi,
body.app-shell:not(.le-wallet-page) .lex-stat-card {
  padding: 0.9rem 1rem !important;
  border-radius: 14px !important;
  border: 1px solid var(--ines-gray-200, #dce8e0) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 82, 48, 0.04) !important;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
body.app-shell:not(.le-wallet-page) .da-kpi {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
body.app-shell:not(.le-wallet-page) .sa-kpi,
body.app-shell:not(.le-wallet-page) .lm-card.lm-kpi-simple,
body.app-shell:not(.le-wallet-page) .lc-kpi,
body.app-shell:not(.le-wallet-page) .ms-kpi,
body.app-shell:not(.le-wallet-page) .lan-kpi,
body.app-shell:not(.le-wallet-page) .air-kpis > article {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 0.75rem;
  row-gap: 0;
  align-items: start;
}
body.app-shell:not(.le-wallet-page) .da-kpi:hover,
body.app-shell:not(.le-wallet-page) .sa-kpi:hover,
body.app-shell:not(.le-wallet-page) a.lm-kpi-simple:hover,
body.app-shell:not(.le-wallet-page) .lc-kpi:hover,
body.app-shell:not(.le-wallet-page) .ms-kpi:hover {
  border-color: rgba(19, 182, 82, 0.4) !important;
  transform: translateY(-2px);
  color: inherit;
}
body.app-shell:not(.le-wallet-page) .sa-kpi.is-active,
body.app-shell:not(.le-wallet-page) .da-kpi.is-active,
body.app-shell:not(.le-wallet-page) .lc-kpi.is-active,
body.app-shell:not(.le-wallet-page) .ms-kpi.is-active,
body.app-shell:not(.le-wallet-page) a.lm-kpi-simple.is-active,
body.app-shell:not(.le-wallet-page) .structure-kpi.is-active,
body.app-shell:not(.le-wallet-page) .alerts-kpi.is-active {
  border-color: var(--ines-green, #13b652) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(19, 182, 82, 0.12) !important;
}
body.app-shell:not(.le-wallet-page) .da-kpi-icon,
body.app-shell:not(.le-wallet-page) .sa-kpi-icon,
body.app-shell:not(.le-wallet-page) .hub-kpi-icon,
body.app-shell:not(.le-wallet-page) .structure-kpi-icon,
body.app-shell:not(.le-wallet-page) .alerts-kpi-icon,
body.app-shell:not(.le-wallet-page) .lc-kpi-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 182, 82, 0.12);
  color: var(--ines-green-dark, #0f5230);
  font-size: 1.1rem;
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  margin: 0 !important;
}
body.app-shell:not(.le-wallet-page) .da-kpi-icon.is-warn,
body.app-shell:not(.le-wallet-page) .sa-kpi-icon.is-warn,
body.app-shell:not(.le-wallet-page) .hub-kpi-icon.is-warn,
body.app-shell:not(.le-wallet-page) .lc-kpi-icon.is-warn {
  background: rgba(240, 192, 32, 0.22);
  color: var(--ines-yellow-dark, #c99200);
}
body.app-shell:not(.le-wallet-page) .da-kpi-icon.is-muted,
body.app-shell:not(.le-wallet-page) .sa-kpi-icon.is-muted,
body.app-shell:not(.le-wallet-page) .hub-kpi-icon.is-muted,
body.app-shell:not(.le-wallet-page) .lc-kpi-icon.is-muted {
  background: var(--ines-gray-100, #eef4f0);
  color: var(--ines-gray-600, #4a6356);
}
body.app-shell:not(.le-wallet-page) .da-kpi p,
body.app-shell:not(.le-wallet-page) .sa-kpi p,
body.app-shell:not(.le-wallet-page) .lm-kpi-simple p,
body.app-shell:not(.le-wallet-page) .lc-kpi-label,
body.app-shell:not(.le-wallet-page) .ms-kpi > span:first-of-type,
body.app-shell:not(.le-wallet-page) .lan-kpi-label,
body.app-shell:not(.le-wallet-page) .air-kpis span,
body.app-shell:not(.le-wallet-page) .lex-stat-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ines-gray-500, #6b8176);
  grid-column: 2;
}
body.app-shell:not(.le-wallet-page) .sa-kpi > p,
body.app-shell:not(.le-wallet-page) .lm-kpi-simple > p,
body.app-shell:not(.le-wallet-page) .lc-kpi > .lc-kpi-label,
body.app-shell:not(.le-wallet-page) .ms-kpi > span:first-of-type,
body.app-shell:not(.le-wallet-page) .lan-kpi > .lan-kpi-label,
body.app-shell:not(.le-wallet-page) .air-kpis > article > span {
  grid-row: 1;
}
body.app-shell:not(.le-wallet-page) .da-kpi strong,
body.app-shell:not(.le-wallet-page) .sa-kpi strong,
body.app-shell:not(.le-wallet-page) .lm-kpi-simple strong,
body.app-shell:not(.le-wallet-page) .lc-kpi strong,
body.app-shell:not(.le-wallet-page) .ms-kpi strong,
body.app-shell:not(.le-wallet-page) .lan-kpi strong,
body.app-shell:not(.le-wallet-page) .air-kpis strong,
body.app-shell:not(.le-wallet-page) .lex-stat-hero strong {
  display: block;
  margin: 0.15rem 0 0.1rem;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ines-gray-800, #1a2e24);
  letter-spacing: -0.02em;
  grid-column: 2;
}
body.app-shell:not(.le-wallet-page) .sa-kpi > strong,
body.app-shell:not(.le-wallet-page) .lm-kpi-simple > strong,
body.app-shell:not(.le-wallet-page) .lc-kpi > strong,
body.app-shell:not(.le-wallet-page) .ms-kpi > strong,
body.app-shell:not(.le-wallet-page) .lan-kpi > strong,
body.app-shell:not(.le-wallet-page) .air-kpis > article > strong {
  grid-row: 2;
}
body.app-shell:not(.le-wallet-page) .da-kpi em,
body.app-shell:not(.le-wallet-page) .sa-kpi em,
body.app-shell:not(.le-wallet-page) .lm-kpi-simple em,
body.app-shell:not(.le-wallet-page) .lc-kpi em,
body.app-shell:not(.le-wallet-page) .lan-kpi em,
body.app-shell:not(.le-wallet-page) .lex-stat-foot {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--ines-gray-500, #6b8176);
  grid-column: 2;
}
body.app-shell:not(.le-wallet-page) .sa-kpi > em,
body.app-shell:not(.le-wallet-page) .lm-kpi-simple > em,
body.app-shell:not(.le-wallet-page) .lc-kpi > em,
body.app-shell:not(.le-wallet-page) .lan-kpi > em {
  grid-row: 3;
}
body.app-shell:not(.le-wallet-page) .lm-kpi-simple strong.is-warn,
body.app-shell:not(.le-wallet-page) .lan-kpi strong.is-danger {
  color: var(--ines-yellow-dark, #c99200);
}
body.app-shell:not(.le-wallet-page) .lc-kpi--green,
body.app-shell:not(.le-wallet-page) .lc-kpi--yellow {
  background: #fff !important;
}
body.app-shell:not(.le-wallet-page) .lan-kpi.is-alert {
  border-left: 3px solid #e11d48 !important;
}
body.app-shell:not(.le-wallet-page) .lan-kpi .lan-bar {
  grid-column: 2;
  grid-row: 3;
}
body.app-shell:not(.le-wallet-page) .lan-kpi em {
  grid-row: 4;
}
body.app-shell:not(.le-wallet-page) .lex-stat-card {
  display: block !important;
}
body.app-shell:not(.le-wallet-page) .lex-stat-hero {
  margin: 0.15rem 0;
}
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lm-card.lm-kpi-simple,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lm-card.lm-kpi-simple,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lan-kpi,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lan-kpi,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis > article,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis > article,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lex-stat-card,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lex-stat-card {
  background: var(--surface, #13261c) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi strong,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi strong,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lm-kpi-simple strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lm-kpi-simple strong,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi strong,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi strong,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lan-kpi strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lan-kpi strong,
[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis strong,
[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis strong {
  color: var(--color-text, #e8f0eb);
}

/* Global search results page */
.search-shell { max-width: 980px; margin: 0 auto; }
.search-hero h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.search-hero p { margin: 0; color: #6b7c72; }
.search-form {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
  margin: 1.15rem 0 1rem;
}
.search-form-field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.search-form-field i {
  position: absolute;
  left: 1rem;
  color: #9ca3af;
  pointer-events: none;
}
.search-form-field input {
  width: 100%;
  border: 1px solid #e5efe8;
  border-radius: 999px;
  background: #fff;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  font-size: 0.95rem;
}
.search-form-field input:focus {
  outline: none;
  border-color: var(--ines-green, #0b6e4f);
  box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.12);
}
.search-form-btn {
  border: 0;
  border-radius: 999px;
  background: var(--ines-green, #0b6e4f);
  color: #fff;
  padding: 0 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}
.search-meta { font-size: 0.85rem; color: #6b7280; margin: 0 0 1rem; }
.search-sections { display: grid; gap: 1.25rem; }
.search-section h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #16382a;
}
.search-results {
  display: grid;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid #e5efe8;
  border-radius: 14px;
  padding: 0.35rem;
}
.search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.search-result:hover { background: #f3f7f5; color: inherit; }
.search-result-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.search-result-copy strong {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-copy small {
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-go { color: #9ca3af; font-size: 0.85rem; }
.search-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #6b7280;
}
.search-empty i { font-size: 2rem; color: #9ca3af; display: block; margin-bottom: 0.75rem; }
.search-empty h2 { font-size: 1.1rem; color: #16382a; margin-bottom: 0.35rem; }

/* ═══ Unified dark hub — match AI reports / dept analytics everywhere ═══ */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page):not(.ai-tutor-immersive) .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page):not(.ai-tutor-immersive) .app-content,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page):not(.ai-tutor-immersive) .lecturer-dash,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page):not(.ai-tutor-immersive) .lecturer-dash,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page):not(.ai-tutor-immersive) .student-hub,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page):not(.ai-tutor-immersive) .student-hub {
  background: #0a110e !important;
  color: #eef6f1;
}

html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .hub-page .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .hub-page .app-content,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-reports-page .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-reports-page .app-content,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .search-page .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .search-page .app-content,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .profile-page .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .profile-page .app-content,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-page .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-page .app-content,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lecturer-monitor-page .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lecturer-monitor-page .app-content {
  background: #0a110e !important;
}

/* AI reports desk components — global in dark mode */
html[data-bs-theme="dark"] .air-head h1,
html[data-theme="dark"] .air-head h1,
html[data-bs-theme="dark"] .air-chart-head h2,
html[data-theme="dark"] .air-chart-head h2,
html[data-bs-theme="dark"] .da-analytics .da-hero h1,
html[data-theme="dark"] .da-analytics .da-hero h1,
html[data-bs-theme="dark"] .lecturer-dash h1,
html[data-theme="dark"] .lecturer-dash h1,
html[data-bs-theme="dark"] .lecturer-dash h2,
html[data-theme="dark"] .lecturer-dash h2,
html[data-bs-theme="dark"] .desk-hero-main h1,
html[data-theme="dark"] .desk-hero-main h1 {
  color: #f3faf6 !important;
}

html[data-bs-theme="dark"] .air-lead,
html[data-theme="dark"] .air-lead,
html[data-bs-theme="dark"] .air-chart-head p,
html[data-theme="dark"] .air-chart-head p,
html[data-bs-theme="dark"] .air-kicker,
html[data-theme="dark"] .air-kicker,
html[data-bs-theme="dark"] .desk-hero-main p,
html[data-theme="dark"] .desk-hero-main p,
html[data-bs-theme="dark"] .ms-sub,
html[data-theme="dark"] .ms-sub,
html[data-bs-theme="dark"] .lc-sub,
html[data-theme="dark"] .lc-sub {
  color: #adc2b6 !important;
}

html[data-bs-theme="dark"] .air-chart-card,
html[data-theme="dark"] .air-chart-card,
html[data-bs-theme="dark"] .air-table-card,
html[data-theme="dark"] .air-table-card,
html[data-bs-theme="dark"] .air-kpis > article,
html[data-theme="dark"] .air-kpis > article,
html[data-bs-theme="dark"] .ms-table-card,
html[data-theme="dark"] .ms-table-card,
html[data-bs-theme="dark"] .scd-panel,
html[data-theme="dark"] .scd-panel,
html[data-bs-theme="dark"] .lan-list-panel,
html[data-theme="dark"] .lan-list-panel,
html[data-bs-theme="dark"] .lan-side-card,
html[data-theme="dark"] .lan-side-card,
html[data-bs-theme="dark"] .structure-list-panel,
html[data-theme="dark"] .structure-list-panel,
html[data-bs-theme="dark"] .structure-hub .structure-card,
html[data-theme="dark"] .structure-hub .structure-card,
html[data-bs-theme="dark"] .cms-hub-card,
html[data-theme="dark"] .cms-hub-card,
html[data-bs-theme="dark"] .search-results,
html[data-theme="dark"] .search-results,
html[data-bs-theme="dark"] .pf-card,
html[data-theme="dark"] .pf-card,
html[data-bs-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-card {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  color: #eef6f1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

html[data-bs-theme="dark"] .air-table th,
html[data-theme="dark"] .air-table th,
html[data-bs-theme="dark"] .air-table td,
html[data-theme="dark"] .air-table td,
html[data-bs-theme="dark"] .ms-table thead th,
html[data-theme="dark"] .ms-table thead th,
html[data-bs-theme="dark"] .ms-table tbody td,
html[data-theme="dark"] .ms-table tbody td,
html[data-bs-theme="dark"] .lad-table th,
html[data-theme="dark"] .lad-table th,
html[data-bs-theme="dark"] .lad-table td,
html[data-theme="dark"] .lad-table td,
html[data-bs-theme="dark"] .mk-table th,
html[data-theme="dark"] .mk-table th,
html[data-bs-theme="dark"] .mk-table td,
html[data-theme="dark"] .mk-table td,
html[data-bs-theme="dark"] .lth-table th,
html[data-theme="dark"] .lth-table th,
html[data-bs-theme="dark"] .lth-table tbody td,
html[data-theme="dark"] .lth-table tbody td {
  color: #dce8e1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .ms-table tbody tr:hover,
html[data-theme="dark"] .ms-table tbody tr:hover,
html[data-bs-theme="dark"] .search-result:hover,
html[data-theme="dark"] .search-result:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-bs-theme="dark"] .air-btn-ghost,
html[data-theme="dark"] .air-btn-ghost,
html[data-bs-theme="dark"] .lc-btn-ghost,
html[data-theme="dark"] .lc-btn-ghost,
html[data-bs-theme="dark"] .lm-btn-ghost,
html[data-theme="dark"] .lm-btn-ghost,
html[data-bs-theme="dark"] .lad-btn-ghost,
html[data-theme="dark"] .lad-btn-ghost {
  background: var(--surface, #13261c) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #eef6f1 !important;
}

html[data-bs-theme="dark"] .air-btn-ghost:hover,
html[data-theme="dark"] .air-btn-ghost:hover,
html[data-bs-theme="dark"] .lc-btn-ghost:hover,
html[data-theme="dark"] .lc-btn-ghost:hover {
  background: rgba(61, 220, 122, 0.12) !important;
  color: #86efac !important;
}

html[data-bs-theme="dark"] .search-form-field input,
html[data-theme="dark"] .search-form-field input {
  background: #1c2822 !important;
  border-color: #2c3d34 !important;
  color: #eef6f1 !important;
}

html[data-bs-theme="dark"] .search-empty h2,
html[data-theme="dark"] .search-empty h2,
html[data-bs-theme="dark"] .search-result-copy strong,
html[data-theme="dark"] .search-result-copy strong {
  color: #f3faf6 !important;
}

html[data-bs-theme="dark"] .search-meta,
html[data-theme="dark"] .search-meta,
html[data-bs-theme="dark"] .search-empty,
html[data-theme="dark"] .search-empty,
html[data-bs-theme="dark"] .search-result-copy small,
html[data-theme="dark"] .search-result-copy small {
  color: #adc2b6 !important;
}

/* Unified KPI / stat cards — AI reports green surface */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lm-card.lm-kpi-simple,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lm-card.lm-kpi-simple,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lan-kpi,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lan-kpi,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .scd-kpi,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .scd-kpi,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis > article,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis > article,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lex-stat-card,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lex-stat-card,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi--green,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi--green,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi--yellow,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi--yellow {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi p,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi p,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi span,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi span,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi em,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi em,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi span,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi span,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi span,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi span,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi span,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .ms-kpi span,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis span,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-kpis span {
  color: #adc2b6 !important;
}

/* Remaining desk panels — harmonize to AI reports surface */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-card"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-card"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-panel"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-panel"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-toolbar"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-toolbar"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-widget"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-widget"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-modal"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-modal"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-empty"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-empty"] {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  color: #eef6f1;
}

html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .form-control,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .form-control,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .form-select,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .form-select,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .auth-input,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .auth-input,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) input[type="search"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) input[type="search"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) input[type="text"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) input[type="text"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) textarea,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) textarea,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) select,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) select {
  background: #1c2822 !important;
  border-color: #2c3d34 !important;
  color: #eef6f1 !important;
}

html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .form-control::placeholder,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .form-control::placeholder,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) input::placeholder,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) input::placeholder {
  color: #7a9488 !important;
}

/* ═══ Complete hub dark — match /lecturer/courses/ (lc-v2 reference) ═══ */

/* Page canvas */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .app-content,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .app-content {
  background: #0a110e !important;
}

/* App header / topbar */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar {
  background: rgba(10, 17, 14, 0.96) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px);
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-user,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-user {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-user-meta strong,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-user-meta strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-user-meta small,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-user-meta small {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-drop,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-drop {
  background: #13261c !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-drop a,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-drop a {
  color: #dce8e1 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-drop a:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-topbar-drop a:hover {
  background: rgba(61, 220, 122, 0.12) !important;
  color: #fff !important;
}

/* Page heroes / section headers */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-eyebrow"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-eyebrow"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-kicker"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-kicker"] {
  color: #5ee08a !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-hero h1,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-hero h1,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-catalog-head h2,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-catalog-head h2,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-hero"] h1,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-hero"] h1,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-head"] h1,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-head"] h1,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-head"] h2,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-head"] h2 {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-lead,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-lead,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-catalog-head p,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-catalog-head p,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-lead"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-lead"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-sub"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-sub"] {
  color: #adc2b6 !important;
}

/* Cards, catalogs, panels — courses desk surface */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-catalog,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-catalog,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table-wrap,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table-wrap,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-empty,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-empty,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-catalog"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-catalog"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-grid"] [class*="-card"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .app-content [class*="-grid"] [class*="-card"] {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  color: #eef6f1;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-body h3,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-body h3,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-empty h2,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-empty h2 {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-desc,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-desc,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-stats,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-stats,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-empty p,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-empty p {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-foot,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-card-foot {
  background: rgba(0, 0, 0, 0.18) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-code,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-code {
  background: rgba(19, 182, 82, 0.16) !important;
  color: #86efac !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-dept,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-dept {
  background: rgba(240, 192, 32, 0.14) !important;
  color: #fcd34d !important;
}

/* KPI active state */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi.is-active,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi.is-active,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi.is-active,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi.is-active,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi.is-active,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi.is-active {
  border-color: rgba(19, 182, 82, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(19, 182, 82, 0.25), 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  background: rgba(19, 182, 82, 0.12) !important;
}

/* Buttons — primary / ghost / foot (all desks) */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-primary,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-primary,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-primary"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-primary"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-btn-outline,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-btn-outline,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .btn-ines-primary,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .btn-ines-primary {
  background: rgba(19, 182, 82, 0.92) !important;
  border-color: rgba(19, 182, 82, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(19, 182, 82, 0.22) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-primary:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-primary:hover,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-primary"]:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-primary"]:hover {
  background: var(--ines-green, #13b652) !important;
  color: #fff !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-ghost,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-ghost,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-foot-btn,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-foot-btn,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-ghost"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-ghost"],
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-foot-btn"]:not([class*="--accent"]),
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-foot-btn"]:not([class*="--accent"]),
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .air-btn-ghost,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .air-btn-ghost {
  background: var(--surface, #13261c) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #eef6f1 !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-ghost:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-btn-ghost:hover,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-ghost"]:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-btn-ghost"]:hover {
  background: rgba(19, 182, 82, 0.14) !important;
  color: #86efac !important;
  border-color: rgba(19, 182, 82, 0.35) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-foot-btn--accent,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-foot-btn--accent,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-foot-btn--primary,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-foot-btn--primary,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-foot-btn--accent"],
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-foot-btn--accent"] {
  background: var(--ines-green, #13b652) !important;
  border-color: var(--ines-green, #13b652) !important;
  color: #fff !important;
}

/* Search bars */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-search input,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-search input,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-search"] input,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-search"] input,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .desk-search input,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .desk-search input {
  background: #1c2822 !important;
  border-color: #2c3d34 !important;
  color: #eef6f1 !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-search"] input:focus,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) [class*="-search"] input:focus {
  border-color: var(--ines-green, #13b652) !important;
  box-shadow: 0 0 0 3px rgba(19, 182, 82, 0.18) !important;
}

/* View toggles / filters */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-view-toggle,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-view-toggle {
  background: #1c2822 !important;
  border-color: #2c3d34 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-view-btn,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-view-btn {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-view-btn.is-active,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-view-btn.is-active {
  background: rgba(19, 182, 82, 0.2) !important;
  color: #86efac !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-clear-filter,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-clear-filter {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-clear-filter:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-clear-filter:hover {
  color: #86efac !important;
}

/* Tables */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table thead th,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table thead th {
  background: rgba(19, 182, 82, 0.08) !important;
  color: #adc2b6 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table tbody td,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table tbody td {
  color: #dce8e1 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table tbody tr:hover,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-table tbody tr:hover {
  background: rgba(19, 182, 82, 0.06) !important;
}

/* Status badges */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-status-badge.status-published,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-status-badge.status-published {
  color: #86efac !important;
  background: rgba(34, 197, 94, 0.2) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-status-badge.status-draft,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-status-badge.status-draft {
  color: #adc2b6 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-status-badge.status-pending_approval,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-v2 .lc-status-badge.status-pending_approval {
  color: #fcd34d !important;
  background: rgba(240, 192, 32, 0.18) !important;
}

/* Course preview + generic preview panels */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-preview-page .lc-preview-hero,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-preview-page .lc-preview-hero,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-preview-page .lc-preview-panel,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-preview-page .lc-preview-panel {
  background: var(--surface, #13261c) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-preview-page .lc-preview-main h1,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-preview-page .lc-preview-main h1 {
  color: #f3faf6 !important;
}

/* KPI icon tiles */
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi-icon,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi-icon,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi-icon,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .sa-kpi-icon,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi-icon,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .lc-kpi-icon,
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .hub-kpi-icon,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .hub-kpi-icon {
  background: rgba(19, 182, 82, 0.14) !important;
  color: #86efac !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi-icon.is-warn,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi-icon.is-warn {
  background: rgba(240, 192, 32, 0.18) !important;
  color: #fcd34d !important;
}
html[data-bs-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi-icon.is-muted,
html[data-theme="dark"] body.app-shell:not(.le-wallet-page) .da-kpi-icon.is-muted {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #adc2b6 !important;
}

/* ═══ Page-specific dark — marking, live classes, reports, dashboard, help, settings, AI tutor ═══ */

/* Canvas overrides (hardcoded light gradients) */
html[data-bs-theme="dark"] .lm-marking-page .app-content,
html[data-theme="dark"] .lm-marking-page .app-content,
html[data-bs-theme="dark"] .learn-studio-page .app-content,
html[data-theme="dark"] .learn-studio-page .app-content,
html[data-bs-theme="dark"] .llr-page .app-content,
html[data-theme="dark"] .llr-page .app-content,
html[data-bs-theme="dark"] .legal-page .app-content,
html[data-theme="dark"] .legal-page .app-content,
html[data-bs-theme="dark"] .ai-tutor-page .app-content,
html[data-theme="dark"] .ai-tutor-page .app-content,
html[data-bs-theme="dark"] body.app-shell.ai-tutor-immersive .app-content,
html[data-theme="dark"] body.app-shell.ai-tutor-immersive .app-content {
  background: #0a110e !important;
}

/* Marking desk tokens + chrome */
html[data-bs-theme="dark"] .mk-desk,
html[data-theme="dark"] .mk-desk {
  --mk-ink: #f3faf6;
  --mk-muted: #adc2b6;
  --mk-line: rgba(255, 255, 255, 0.08);
  --mk-soft: #1c2822;
  --mk-card: #13261c;
}
html[data-bs-theme="dark"] .mk-toolbar,
html[data-theme="dark"] .mk-toolbar {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  backdrop-filter: none;
}
html[data-bs-theme="dark"] .mk-tabs,
html[data-theme="dark"] .mk-tabs {
  background: #1c2822 !important;
}
html[data-bs-theme="dark"] .mk-tab,
html[data-theme="dark"] .mk-tab {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .mk-tab em,
html[data-theme="dark"] .mk-tab em {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .mk-tab:hover,
html[data-theme="dark"] .mk-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .mk-tab.is-active,
html[data-theme="dark"] .mk-tab.is-active {
  background: rgba(19, 182, 82, 0.22) !important;
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .mk-tab.is-active em,
html[data-theme="dark"] .mk-tab.is-active em {
  background: rgba(240, 192, 32, 0.85) !important;
  color: #1a2e24 !important;
}
html[data-bs-theme="dark"] .mk-queue-item,
html[data-theme="dark"] .mk-queue-item {
  background: transparent !important;
  border-color: transparent !important;
}
html[data-bs-theme="dark"] .mk-queue-item:hover,
html[data-theme="dark"] .mk-queue-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .mk-queue-item.is-active,
html[data-theme="dark"] .mk-queue-item.is-active {
  background: rgba(19, 182, 82, 0.12) !important;
  border-color: rgba(19, 182, 82, 0.35) !important;
  box-shadow: inset 3px 0 0 var(--ines-green, #13b652) !important;
}
html[data-bs-theme="dark"] .mk-queue-top strong,
html[data-theme="dark"] .mk-queue-top strong,
html[data-bs-theme="dark"] .mk-detail-head h2,
html[data-theme="dark"] .mk-detail-head h2,
html[data-bs-theme="dark"] .mk-panel h3,
html[data-theme="dark"] .mk-panel h3,
html[data-bs-theme="dark"] .mk-score-hero strong,
html[data-theme="dark"] .mk-score-hero strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .mk-detail-head,
html[data-theme="dark"] .mk-detail-head {
  background: var(--surface, #13261c) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .mk-panel,
html[data-theme="dark"] .mk-panel {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .mk-rubric article,
html[data-theme="dark"] .mk-rubric article {
  background: #13261c !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .mk-score-hero,
html[data-theme="dark"] .mk-score-hero {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .mk-score-hero.is-live,
html[data-theme="dark"] .mk-score-hero.is-live {
  background: rgba(19, 182, 82, 0.14) !important;
  border-color: rgba(19, 182, 82, 0.35) !important;
}
html[data-bs-theme="dark"] .mk-score-hero.is-draft,
html[data-theme="dark"] .mk-score-hero.is-draft {
  background: rgba(240, 192, 32, 0.12) !important;
  border-color: rgba(240, 192, 32, 0.28) !important;
}
html[data-bs-theme="dark"] .mk-avatar,
html[data-theme="dark"] .mk-avatar {
  background: rgba(19, 182, 82, 0.18) !important;
  border-color: rgba(19, 182, 82, 0.35) !important;
  color: #86efac !important;
}
html[data-bs-theme="dark"] .mk-pill.is-warn,
html[data-theme="dark"] .mk-pill.is-warn {
  background: rgba(240, 192, 32, 0.18) !important;
  color: #fcd34d !important;
}
html[data-bs-theme="dark"] .mk-pill.is-ok,
html[data-theme="dark"] .mk-pill.is-ok {
  background: rgba(19, 182, 82, 0.18) !important;
  color: #86efac !important;
}

/* Live classes (ls-*) */
html[data-bs-theme="dark"] .ls-header-copy h1,
html[data-theme="dark"] .ls-header-copy h1,
html[data-bs-theme="dark"] .ls-section-head h3,
html[data-theme="dark"] .ls-section-head h3,
html[data-bs-theme="dark"] .ls-card-body h4,
html[data-theme="dark"] .ls-card-body h4,
html[data-bs-theme="dark"] .ls-continue-body h2,
html[data-theme="dark"] .ls-continue-body h2,
html[data-bs-theme="dark"] .ls-empty h4,
html[data-theme="dark"] .ls-empty h4 {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .ls-tabs,
html[data-theme="dark"] .ls-tabs {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .ls-tabs a,
html[data-theme="dark"] .ls-tabs a {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .ls-tabs a em,
html[data-theme="dark"] .ls-tabs a em {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .ls-tabs a.is-active,
html[data-theme="dark"] .ls-tabs a.is-active {
  background: rgba(19, 182, 82, 0.22) !important;
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .ls-card,
html[data-theme="dark"] .ls-card,
html[data-bs-theme="dark"] .ls-continue,
html[data-theme="dark"] .ls-continue,
html[data-bs-theme="dark"] .ls-banner,
html[data-theme="dark"] .ls-banner,
html[data-bs-theme="dark"] .ls-empty,
html[data-theme="dark"] .ls-empty,
html[data-bs-theme="dark"] .ls-stats article,
html[data-theme="dark"] .ls-stats article {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  color: #eef6f1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}
html[data-bs-theme="dark"] .ls-card-desc,
html[data-theme="dark"] .ls-card-desc,
html[data-bs-theme="dark"] .ls-continue-desc,
html[data-theme="dark"] .ls-continue-desc,
html[data-bs-theme="dark"] .ls-section-head p,
html[data-theme="dark"] .ls-section-head p,
html[data-bs-theme="dark"] .ls-empty p,
html[data-theme="dark"] .ls-empty p {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .ls-view,
html[data-theme="dark"] .ls-view {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .ls-view button,
html[data-theme="dark"] .ls-view button {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .ls-view button.is-active,
html[data-theme="dark"] .ls-view button.is-active {
  background: rgba(19, 182, 82, 0.2) !important;
  color: #86efac !important;
}
html[data-bs-theme="dark"] .ls-btn-ghost,
html[data-theme="dark"] .ls-btn-ghost {
  background: var(--surface, #13261c) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .ls-btn-ghost:hover,
html[data-theme="dark"] .ls-btn-ghost:hover {
  background: rgba(19, 182, 82, 0.14) !important;
  color: #86efac !important;
}
html[data-bs-theme="dark"] .ls-chip,
html[data-theme="dark"] .ls-chip {
  background: rgba(19, 182, 82, 0.18) !important;
  color: #86efac !important;
  border-color: rgba(19, 182, 82, 0.28) !important;
}
html[data-bs-theme="dark"] .ls-bar,
html[data-theme="dark"] .ls-bar {
  background: #2a3a32 !important;
}

/* Live admin reports (llr-*) */
html[data-bs-theme="dark"] .llr-kpis article,
html[data-theme="dark"] .llr-kpis article,
html[data-bs-theme="dark"] .llr-panel,
html[data-theme="dark"] .llr-panel {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  color: #eef6f1;
}
html[data-bs-theme="dark"] .llr-kpis strong,
html[data-theme="dark"] .llr-kpis strong,
html[data-bs-theme="dark"] .llr-panel-head h2,
html[data-theme="dark"] .llr-panel-head h2,
html[data-bs-theme="dark"] .llr-stat-grid strong,
html[data-theme="dark"] .llr-stat-grid strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .llr-kpis span,
html[data-theme="dark"] .llr-kpis span,
html[data-bs-theme="dark"] .llr-stat-grid span,
html[data-theme="dark"] .llr-stat-grid span,
html[data-bs-theme="dark"] .llr-top-alerts li,
html[data-theme="dark"] .llr-top-alerts li,
html[data-bs-theme="dark"] .llr-meta,
html[data-theme="dark"] .llr-meta,
html[data-bs-theme="dark"] .llr-empty,
html[data-theme="dark"] .llr-empty {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .llr-stat-grid div,
html[data-theme="dark"] .llr-stat-grid div {
  background: #1c2822 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-bs-theme="dark"] .llr-risk-row .is-high,
html[data-theme="dark"] .llr-risk-row .is-high {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}
html[data-bs-theme="dark"] .llr-risk-row .is-medium,
html[data-theme="dark"] .llr-risk-row .is-medium {
  background: rgba(240, 192, 32, 0.18) !important;
  color: #fcd34d !important;
}
html[data-bs-theme="dark"] .llr-risk-row .is-low,
html[data-theme="dark"] .llr-risk-row .is-low {
  background: rgba(19, 182, 82, 0.18) !important;
  color: #86efac !important;
}
html[data-bs-theme="dark"] .llr-table th,
html[data-theme="dark"] .llr-table th,
html[data-bs-theme="dark"] .llr-table td,
html[data-theme="dark"] .llr-table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #dce8e1 !important;
}
html[data-bs-theme="dark"] .llr-table th,
html[data-theme="dark"] .llr-table th {
  color: #adc2b6 !important;
}

/* Lecturer dashboard */
html[data-bs-theme="dark"] .lm-top h1,
html[data-theme="dark"] .lm-top h1,
html[data-bs-theme="dark"] .lm-card h2,
html[data-theme="dark"] .lm-card h2,
html[data-bs-theme="dark"] .lm-dept-banner-main strong,
html[data-theme="dark"] .lm-dept-banner-main strong,
html[data-bs-theme="dark"] .lm-dept-stats strong,
html[data-theme="dark"] .lm-dept-stats strong,
html[data-bs-theme="dark"] .lm-kpi-simple strong,
html[data-theme="dark"] .lm-kpi-simple strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .lm-sub,
html[data-theme="dark"] .lm-sub,
html[data-bs-theme="dark"] .lm-dept-banner-main span,
html[data-theme="dark"] .lm-dept-banner-main span,
html[data-bs-theme="dark"] .lm-dept-stats span,
html[data-theme="dark"] .lm-dept-stats span,
html[data-bs-theme="dark"] .lm-card-head p,
html[data-theme="dark"] .lm-card-head p {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .lm-card,
html[data-theme="dark"] .lm-card,
html[data-bs-theme="dark"] .lm-dept-banner,
html[data-theme="dark"] .lm-dept-banner,
html[data-bs-theme="dark"] .lm-more-body,
html[data-theme="dark"] .lm-more-body {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  color: #eef6f1;
}

/* Help / legal */
html[data-bs-theme="dark"] .legal-doc,
html[data-theme="dark"] .legal-doc {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  color: #eef6f1;
}
html[data-bs-theme="dark"] .legal-doc-head h1,
html[data-theme="dark"] .legal-doc-head h1,
html[data-bs-theme="dark"] .legal-doc-body h2,
html[data-theme="dark"] .legal-doc-body h2,
html[data-bs-theme="dark"] .help-card strong,
html[data-theme="dark"] .help-card strong,
html[data-bs-theme="dark"] .help-faq summary,
html[data-theme="dark"] .help-faq summary {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .legal-nav a:not(.is-active),
html[data-theme="dark"] .legal-nav a:not(.is-active) {
  background: var(--surface, #13261c) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #dce8e1 !important;
}
html[data-bs-theme="dark"] .legal-nav a.is-active,
html[data-theme="dark"] .legal-nav a.is-active,
html[data-bs-theme="dark"] .legal-nav a:hover,
html[data-theme="dark"] .legal-nav a:hover {
  background: rgba(19, 182, 82, 0.85) !important;
  border-color: rgba(19, 182, 82, 0.55) !important;
  color: #fff !important;
}
html[data-bs-theme="dark"] .help-card,
html[data-theme="dark"] .help-card {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  color: #eef6f1;
}
html[data-bs-theme="dark"] .help-card span,
html[data-theme="dark"] .help-card span,
html[data-bs-theme="dark"] .help-faq p,
html[data-theme="dark"] .help-faq p,
html[data-bs-theme="dark"] .legal-doc-body p,
html[data-theme="dark"] .legal-doc-body p,
html[data-bs-theme="dark"] .legal-updated,
html[data-theme="dark"] .legal-updated,
html[data-bs-theme="dark"] .help-faq-lead,
html[data-theme="dark"] .help-faq-lead {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .help-card:hover,
html[data-theme="dark"] .help-card:hover {
  background: rgba(19, 182, 82, 0.12) !important;
  border-color: rgba(19, 182, 82, 0.35) !important;
}
html[data-bs-theme="dark"] .help-faq,
html[data-theme="dark"] .help-faq {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Account settings */
html[data-bs-theme="dark"] .pf-settings-page .pf-settings-tabs,
html[data-theme="dark"] .pf-settings-page .pf-settings-tabs {
  background: var(--surface, #13261c) !important;
  border-color: var(--desk-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}
html[data-bs-theme="dark"] .pf-settings-tab,
html[data-theme="dark"] .pf-settings-tab {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .pf-settings-tab:hover,
html[data-theme="dark"] .pf-settings-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .pf-settings-tab.is-active,
html[data-theme="dark"] .pf-settings-tab.is-active {
  background: rgba(19, 182, 82, 0.85) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(19, 182, 82, 0.22) !important;
}
html[data-bs-theme="dark"] .pf-page-head h1,
html[data-theme="dark"] .pf-page-head h1,
html[data-bs-theme="dark"] .pf-section-head h3,
html[data-theme="dark"] .pf-section-head h3 {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .pf-kicker,
html[data-theme="dark"] .pf-kicker,
html[data-bs-theme="dark"] .pf-lead,
html[data-theme="dark"] .pf-lead,
html[data-bs-theme="dark"] .pf-help,
html[data-theme="dark"] .pf-help {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .pf-security-row,
html[data-theme="dark"] .pf-security-row,
html[data-bs-theme="dark"] .pf-password-tip,
html[data-theme="dark"] .pf-password-tip,
html[data-bs-theme="dark"] .pf-card-nested,
html[data-theme="dark"] .pf-card-nested {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #eef6f1;
}
html[data-bs-theme="dark"] .pf-security-item strong,
html[data-theme="dark"] .pf-security-item strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .pf-security-item span,
html[data-theme="dark"] .pf-security-item span {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .pf-back-btn,
html[data-theme="dark"] .pf-back-btn {
  background: var(--surface, #13261c) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .pf-divider,
html[data-theme="dark"] .pf-divider {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* AI Tutor immersive */
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-studio-stage,
html[data-theme="dark"] .ai-tutor-immersive .ai-studio-stage {
  background: transparent;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-prompt-chip,
html[data-theme="dark"] .ai-tutor-immersive .ai-prompt-chip {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #eef6f1 !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-prompt-chip-kicker,
html[data-theme="dark"] .ai-tutor-immersive .ai-prompt-chip-kicker {
  color: #86efac !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-prompt-chip:hover,
html[data-theme="dark"] .ai-tutor-immersive .ai-prompt-chip:hover {
  background: rgba(19, 182, 82, 0.14) !important;
  border-color: rgba(19, 182, 82, 0.35) !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-msg--assistant .ai-msg-prose,
html[data-theme="dark"] .ai-tutor-immersive .ai-msg--assistant .ai-msg-prose {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #eef6f1 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-msg-label,
html[data-theme="dark"] .ai-tutor-immersive .ai-msg-label {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-rail-toggle,
html[data-theme="dark"] .ai-tutor-immersive .ai-rail-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-studio-top,
html[data-theme="dark"] .ai-tutor-immersive .ai-studio-top {
  background: var(--surface, #13261c) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-studio-top-id strong,
html[data-theme="dark"] .ai-tutor-immersive .ai-studio-top-id strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .ai-tutor-immersive .ai-studio-top-id small,
html[data-theme="dark"] .ai-tutor-immersive .ai-studio-top-id small {
  color: #adc2b6 !important;
}

html[data-bs-theme="dark"] .mk-work,
html[data-theme="dark"] .mk-work {
  background: #13261c !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #dce8e1 !important;
}
html[data-bs-theme="dark"] .mk-answer,
html[data-theme="dark"] .mk-answer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-bs-theme="dark"] .mk-answer strong,
html[data-theme="dark"] .mk-answer strong {
  color: #86efac !important;
}
html[data-bs-theme="dark"] .mk-decide,
html[data-theme="dark"] .mk-decide {
  background: var(--surface, #13261c) !important;
  border-color: rgba(19, 182, 82, 0.28) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}
html[data-bs-theme="dark"] .mk-empty,
html[data-theme="dark"] .mk-empty,
html[data-bs-theme="dark"] .mk-empty-lg,
html[data-theme="dark"] .mk-empty-lg {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .mk-plag.is-high,
html[data-theme="dark"] .mk-plag.is-high {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

html[data-bs-theme="dark"] .lm-quick-card,
html[data-theme="dark"] .lm-quick-card {
  background: #1c2822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #eef6f1;
}
html[data-bs-theme="dark"] .lm-quick-card strong,
html[data-theme="dark"] .lm-quick-card strong {
  color: #f3faf6 !important;
}
html[data-bs-theme="dark"] .lm-quick-card span,
html[data-theme="dark"] .lm-quick-card span {
  color: #adc2b6 !important;
}
html[data-bs-theme="dark"] .lm-quick-card:hover,
html[data-theme="dark"] .lm-quick-card:hover {
  border-color: rgba(19, 182, 82, 0.45) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

/* —— Student internships page —— */
.intern-page .asn-workspace { max-width: 1120px; margin-inline: auto; }
.intern-hero {
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(19, 182, 82, 0.12) 0%, rgba(13, 110, 253, 0.06) 55%, #fff 100%);
  border: 1px solid rgba(19, 182, 82, 0.14);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}
.intern-hero-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.1rem;
}
.intern-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f9d48;
  margin-bottom: 0.35rem;
}
.intern-hero-copy h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.4rem;
}
.intern-lead {
  max-width: 42rem;
  color: #4b5563;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.intern-hero-stats { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: flex-start; }
.intern-stat {
  min-width: 7rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  text-align: center;
}
.intern-stat strong { display: block; font-size: 1.35rem; font-weight: 800; color: #111827; line-height: 1.1; }
.intern-stat span { font-size: 0.72rem; color: #6b7280; }
.intern-stat.is-warn strong { color: #b45309; }
.intern-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.intern-search {
  flex: 1 1 14rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.intern-search input {
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 0.9rem;
  outline: none;
}
.intern-search i { color: #9ca3af; }
.intern-select {
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  background: #fff;
  min-width: 9rem;
}
.intern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}
.intern-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.intern-card:hover {
  transform: translateY(-2px);
  border-color: rgba(19, 182, 82, 0.22);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}
.intern-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.intern-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #0f9d48;
  background: rgba(19, 182, 82, 0.12);
  flex-shrink: 0;
}
.intern-card-meta { flex: 1; min-width: 0; }
.intern-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.15rem;
  line-height: 1.3;
}
.intern-card-company { margin: 0; font-size: 0.85rem; color: #6b7280; font-weight: 600; }
.intern-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #374151;
  white-space: nowrap;
}
.intern-badge.is-open { background: rgba(19, 182, 82, 0.12); color: #0f7a3a; }
.intern-badge.is-soon { background: rgba(255, 193, 7, 0.2); color: #92600a; }
.intern-badge.is-closed { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.intern-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: #6b7280;
}
.intern-chips li { display: inline-flex; align-items: center; gap: 0.3rem; }
.intern-card-body { flex: 1; min-height: 0; }
.intern-summary {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b5563;
  margin-bottom: 0.65rem;
}
.intern-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f9d48;
  list-style: none;
}
.intern-details summary::-webkit-details-marker { display: none; }
.intern-full {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}
.intern-full h3 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin: 0.75rem 0 0.35rem;
}
.intern-full h3:first-child { margin-top: 0; }
.intern-rich { font-size: 0.88rem; line-height: 1.6; color: #374151; }
.intern-rich p:last-child { margin-bottom: 0; }
.intern-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.82rem;
  margin: 0.75rem 0 0;
}
.intern-facts dt { color: #9ca3af; font-weight: 600; }
.intern-facts dd { margin: 0; color: #111827; }
.intern-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.intern-closed-note {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #6b7280;
}
.intern-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}
.intern-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}
.intern-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #0f9d48;
  background: rgba(19, 182, 82, 0.1);
}
.intern-empty h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.5rem; }
.intern-empty p { color: #6b7280; max-width: 28rem; margin: 0 auto 1rem; }

html[data-bs-theme="dark"] .intern-hero,
html[data-theme="dark"] .intern-hero {
  background: linear-gradient(135deg, rgba(19, 182, 82, 0.15) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(19, 182, 82, 0.2);
}
html[data-bs-theme="dark"] .intern-card,
html[data-theme="dark"] .intern-card,
html[data-bs-theme="dark"] .intern-stat,
html[data-theme="dark"] .intern-stat,
html[data-bs-theme="dark"] .intern-empty,
html[data-theme="dark"] .intern-empty {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-bs-theme="dark"] .intern-hero-copy h1,
html[data-theme="dark"] .intern-hero-copy h1,
html[data-bs-theme="dark"] .intern-card-title,
html[data-theme="dark"] .intern-card-title { color: #f3f4f6; }
html[data-bs-theme="dark"] .intern-lead,
html[data-theme="dark"] .intern-lead,
html[data-bs-theme="dark"] .intern-summary,
html[data-theme="dark"] .intern-summary { color: #9ca3af; }

/* —— Student lecturer directory & profile —— */
.lect-dir-page .lect-avatar { font-size: 0.85rem; letter-spacing: -0.02em; }
.lect-rating i { font-size: 0.65rem; margin-right: 0.15rem; }
.lect-profile-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-start;
}
.lect-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f9d48;
  background: rgba(19, 182, 82, 0.14);
  flex-shrink: 0;
}
.lect-profile-intro { flex: 1; min-width: min(100%, 16rem); }
.lect-profile-intro h1 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; margin-bottom: 0.35rem; }
.lect-profile-actions { margin-left: auto; }
.lect-panel {
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  height: 100%;
}
.lect-panel-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.75rem;
}
.lect-bio { font-size: 0.92rem; line-height: 1.65; color: #374151; }
.lect-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.65rem;
}
.lect-stat-box {
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(19, 182, 82, 0.06);
  text-align: center;
}
.lect-stat-box strong { display: block; font-size: 1.2rem; font-weight: 800; color: #111827; }
.lect-stat-box span { font-size: 0.72rem; color: #6b7280; }
.lect-course-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lect-course-icon { font-size: 1rem; color: #0f9d48; }
.lect-course-card .intern-card-foot { margin-top: auto; }
.lect-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #92600a;
  background: rgba(255, 193, 7, 0.15);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.lect-review-list { display: flex; flex-direction: column; gap: 0.75rem; }
.lect-review-item {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.lect-review-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.45rem;
}
.lect-stars { color: #f59e0b; font-size: 0.82rem; }
.lect-stars .bi-star { color: #d1d5db; }

html[data-bs-theme="dark"] .lect-panel,
html[data-theme="dark"] .lect-panel {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-bs-theme="dark"] .lect-panel-title,
html[data-theme="dark"] .lect-panel-title,
html[data-bs-theme="dark"] .lect-stat-box strong,
html[data-theme="dark"] .lect-stat-box strong { color: #f3f4f6; }
html[data-bs-theme="dark"] .lect-bio,
html[data-theme="dark"] .lect-bio { color: #d1d5db; }
html[data-bs-theme="dark"] .lect-review-item,
html[data-theme="dark"] .lect-review-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}


/* ---- Credential metadata (public verify) ---- */
.cred-meta {
  margin: 1.5rem auto 0;
  max-width: 960px;
  background: #fff;
  border: 1px solid #dce6e0;
  border-radius: 16px;
  padding: 1.25rem 1.35rem 1.4rem;
}
.cred-meta-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.cred-meta-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #0f5230;
}
.cred-meta-head p {
  margin: 0.25rem 0 0;
  color: #5c6b7a;
  font-size: 0.88rem;
}
.cred-meta-json {
  font-size: 0.82rem;
  font-weight: 650;
  color: #0f5230;
  text-decoration: none;
}
.cred-meta-json:hover { text-decoration: underline; }
.cred-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.cred-meta-block {
  background: #f7faf8;
  border: 1px solid #e4ebe6;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.cred-meta-block--wide { grid-column: 1 / -1; }
.cred-meta-block h3 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7266;
}
.cred-meta-block dl { margin: 0; }
.cred-meta-block dl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  padding: 0.28rem 0;
  border-top: 1px solid rgba(15, 82, 48, 0.08);
}
.cred-meta-block dl > div:first-child { border-top: 0; }
.cred-meta-block dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: #6b7c72;
}
.cred-meta-block dd {
  margin: 0;
  font-size: 0.9rem;
  color: #12261c;
  word-break: break-word;
}
.cred-meta-block code {
  font-size: 0.82rem;
  background: #eef5f0;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.cred-meta-pre { white-space: pre-wrap; }
.cred-meta-muted { color: #6b7c72; font-size: 0.86rem; }
.cred-meta-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #e8f5ee;
  color: #0f5230;
}
.cred-meta-status--revoked,
.cred-meta-status--expired { background: #fdf2f2; color: #8f2a2a; }
.cred-meta-status--expiring_soon { background: #fff8e8; color: #8a6d12; }
@media (max-width: 768px) {
  .cred-meta-grid { grid-template-columns: 1fr; }
  .cred-meta-block dl > div { grid-template-columns: 1fr; }
}

/* ---- HTML sitemap page (seo/sitemap.html) ---- */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; }
.sitemap-grid section { min-width: 0; }
.sitemap-grid h2 { margin: 0 0 0.7rem !important; font-size: 1.05rem !important; }
.sitemap-grid ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.sitemap-grid li { margin-bottom: 0.5rem !important; }
.sitemap-grid li a { text-decoration: none; }
.sitemap-grid li a:hover { text-decoration: underline; }
.sitemap-grid small { color: #6b7280; }
@media (max-width: 640px) { .sitemap-grid { grid-template-columns: 1fr; } }

/* ---- Student checkout ---- */
.checkout-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: min(100%, 1040px);
  margin-inline: auto;
}
.checkout-card {
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid #e2ebe5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 50, 34, 0.06);
}
.checkout-card-heading { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.5rem; }
.checkout-step {
  display: inline-grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #e9f7ef;
  color: #128344;
  font-size: 0.9rem;
  font-weight: 800;
}
.checkout-card-heading h2 { margin: 0.1rem 0 0.2rem; color: #173323; font-size: 1.1rem; font-weight: 800; }
.checkout-card-heading p { margin: 0; color: #718176; font-size: 0.88rem; }
.checkout-product { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: 13px; background: #f6faf7; }
.checkout-product-icon,
.checkout-pending-icon {
  display: inline-grid;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 12px;
  background: #e3f5e9;
  color: #118341;
  font-size: 1.25rem;
}
.checkout-product-type { color: #168347; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.checkout-product h3 { margin: 0.25rem 0; color: #1a2e24; font-size: 1rem; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.checkout-product p { margin: 0; color: #718176; font-size: 0.84rem; }
.checkout-totals { margin: 1.2rem 0 0; }
.checkout-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; color: #64746a; font-size: 0.9rem; }
.checkout-totals dt,
.checkout-totals dd { margin: 0; }
.checkout-totals dd { color: #253a2d; font-weight: 650; text-align: right; }
.checkout-totals .checkout-total { margin-top: 0.35rem; padding-top: 1rem; border-top: 1px solid #e7eee9; color: #1b3224; font-size: 1rem; font-weight: 800; }
.checkout-totals .checkout-total dd { color: #118341; font-size: 1.16rem; font-weight: 850; }
.checkout-access-note { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.25rem; padding: 0.85rem; border-radius: 12px; background: #f4f8f5; color: #55685c; font-size: 0.84rem; line-height: 1.5; }
.checkout-access-note i { color: #148446; }
.checkout-form label { display: block; margin-bottom: 0.35rem; color: #263b2e; font-size: 0.91rem; font-weight: 750; }
.checkout-field-hint,
.checkout-phone-help { color: #718176; font-size: 0.82rem; line-height: 1.5; }
.checkout-field-hint { margin: 0 0 0.7rem; }
.checkout-phone-field { display: flex; align-items: center; min-height: 3.25rem; overflow: hidden; border: 1px solid #cbd9cf; border-radius: 11px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.checkout-phone-field:focus-within { border-color: #178749; box-shadow: 0 0 0 0.2rem rgba(19, 182, 82, 0.14); }
.checkout-phone-field > span { padding: 0 0.85rem; border-right: 1px solid #e2ebe5; color: #586c5e; font-size: 0.9rem; font-weight: 700; }
.checkout-phone-field input { width: 100%; min-width: 0; height: 3.15rem; padding: 0 0.9rem; border: 0; outline: 0; background: transparent; color: #1a2e24; font: inherit; }
.checkout-phone-field input::placeholder { color: #9aaa9f; }
.checkout-phone-field input:disabled { cursor: not-allowed; }
.checkout-phone-help { margin: 0.6rem 0 1.25rem; }
.checkout-submit { display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; min-height: 3.15rem; border-radius: 11px; font-weight: 800; }
.checkout-submit:disabled { cursor: not-allowed; }
.checkout-cancel { display: inline-block; margin-top: 1rem; color: #64746a; font-size: 0.88rem; font-weight: 650; text-decoration: none; }
.checkout-cancel:hover { color: #118341; text-decoration: underline; }
.checkout-support-note { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 1.5rem 0 0; color: #76877b; font-size: 0.78rem; text-align: center; }
.checkout-support-note i { color: #168347; }
.checkout-pending-layout { grid-template-columns: minmax(0, 620px); justify-content: center; }
.checkout-pending-card { text-align: center; }
.checkout-pending-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; font-size: 1.5rem; }
.checkout-pending-status { display: inline-flex; align-items: center; gap: 0.45rem; color: #8a6500; font-size: 0.78rem; font-weight: 800; }
.checkout-pending-status > span { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #e5aa12; box-shadow: 0 0 0 3px rgba(229, 170, 18, 0.14); }
.checkout-pending-card h2 { margin: 0.65rem 0; color: #173323; font-size: 1.35rem; font-weight: 850; }
.checkout-pending-copy { max-width: 440px; margin: 0 auto 1.25rem; color: #66776c; font-size: 0.92rem; line-height: 1.6; }
.checkout-pending-summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #e5eee8; border-radius: 12px; background: #f7faf8; color: #475b4d; font-size: 0.88rem; text-align: left; }
.checkout-pending-summary strong { flex: 0 0 auto; color: #138444; }
.checkout-pending-help { margin: 1rem 0 0; color: #77877c; font-size: 0.82rem; }
html[data-bs-theme="dark"] .checkout-card,
html[data-theme="dark"] .checkout-card { border-color: rgba(255, 255, 255, 0.1); background: #1b2821; color: #e9f2ec; }
html[data-bs-theme="dark"] .checkout-card-heading h2,
html[data-theme="dark"] .checkout-card-heading h2,
html[data-bs-theme="dark"] .checkout-product h3,
html[data-theme="dark"] .checkout-product h3,
html[data-bs-theme="dark"] .checkout-form label,
html[data-theme="dark"] .checkout-form label,
html[data-bs-theme="dark"] .checkout-pending-card h2,
html[data-theme="dark"] .checkout-pending-card h2 { color: #eff7f1; }
html[data-bs-theme="dark"] .checkout-product,
html[data-theme="dark"] .checkout-product,
html[data-bs-theme="dark"] .checkout-access-note,
html[data-theme="dark"] .checkout-access-note,
html[data-bs-theme="dark"] .checkout-pending-summary,
html[data-theme="dark"] .checkout-pending-summary { border-color: rgba(255, 255, 255, 0.08); background: #223229; }
html[data-bs-theme="dark"] .checkout-totals dd,
html[data-theme="dark"] .checkout-totals dd { color: #e9f2ec; }
html[data-bs-theme="dark"] .checkout-phone-field,
html[data-theme="dark"] .checkout-phone-field { border-color: #42594a; background: #17221c; }
html[data-bs-theme="dark"] .checkout-phone-field input,
html[data-theme="dark"] .checkout-phone-field input,
html[data-bs-theme="dark"] .checkout-pending-summary,
html[data-theme="dark"] .checkout-pending-summary { color: #e9f2ec; }
@media (max-width: 767.98px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .checkout-card { padding: 1.15rem; border-radius: 15px; }
  .checkout-support-note { align-items: flex-start; }
}