/* InfoSuli brand system — 0.7.2
 * Shared UI layer for public pages, learner account, learning area, checkout and admin screens.
 * Brand palette: InfoSuli blue (#0077cd), ink (#222222), white.
 */
:root {
    --isel-brand-blue: #0077cd;
    --isel-brand-blue-hover: #0066ad;
    --isel-brand-ink: #222222;
    --isel-brand-white: #ffffff;
    --isel-brand-canvas: #f6f8fa;
    --isel-brand-border: #e4e7eb;
    --isel-brand-muted: #667085;
    --isel-brand-soft-blue: #edf7ff;
    --isel-brand-focus: rgba(0, 119, 205, .18);
    --isel-brand-radius: 14px;
    --isel-brand-shadow: 0 8px 26px rgba(34, 34, 34, .055);
}

/* Poppins is loaded by the plugin on its own pages; keep control typography consistent. */
.isel-wrap,
.isel-account-wrap,
.isel-commerce-page,
.isel-learning-shell,
.isel-admin-wrap,
.isel-code-playground,
.isel-quiz-settings,
.isel-network-builder,
.isel-programming-builder,
.isel-module-lessons-modal {
    font-family: 'Poppins', sans-serif !important;
}
.isel-wrap *,
.isel-account-wrap *,
.isel-commerce-page *,
.isel-learning-shell *,
.isel-admin-wrap *,
.isel-module-lessons-modal * {
    box-sizing: border-box;
}
body.isel-account-mode,
body.isel-learning-mode {
    font-family: 'Poppins', sans-serif !important;
}

/* Native controls inherit the same typography throughout plugin screens. */
.isel-wrap button,
.isel-wrap input,
.isel-wrap select,
.isel-account-wrap button,
.isel-account-wrap input,
.isel-account-wrap select,
.isel-commerce-page button,
.isel-commerce-page input,
.isel-commerce-page select,
.isel-admin-wrap button,
.isel-admin-wrap input,
.isel-admin-wrap select {
    font-family: 'Poppins', sans-serif;
}
.isel-admin-wrap textarea:not(.CodeMirror textarea),
.isel-account-wrap textarea,
.isel-commerce-page textarea {
    font-family: 'Poppins', sans-serif;
}
.isel-code-playground textarea,
.isel-network-node-card textarea,
.isel-code-test-row textarea,
.isel-learning-shell .isel-cli-input,
.isel-learning-shell .isel-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Common hierarchy and readable ink colors. */
.isel-wrap,
.isel-account-wrap,
.isel-commerce-page,
.isel-admin-wrap {
    color: var(--isel-brand-ink);
}
.isel-wrap h1,
.isel-wrap h2,
.isel-wrap h3,
.isel-wrap h4,
.isel-account-wrap h1:not(.isel-account-hero h1),
.isel-account-wrap h2,
.isel-account-wrap h3,
.isel-commerce-page h1,
.isel-commerce-page h2,
.isel-commerce-page h3,
.isel-admin-wrap h1:not(.isel-admin-hero h1),
.isel-admin-wrap h2,
.isel-admin-wrap h3 {
    color: var(--isel-brand-ink);
    font-family: 'Poppins', sans-serif;
}
.isel-eyebrow,
.isel-commerce-eyebrow,
.isel-account-eyebrow,
.isel-admin-eyebrow,
.isel-admin-panel-eyebrow,
.isel-module-lessons-modal__eyebrow {
    color: var(--isel-brand-blue) !important;
}

/* Public course catalogue and single-course pages. */
.isel-wrap {
    --isel-navy: #222222;
    --isel-ink: #222222;
    --isel-muted: #667085;
    --isel-border: #e4e7eb;
    --isel-surface: #f6f8fa;
}
.isel-page-heading h1,
.isel-page-heading h2,
.isel-course-card h2,
.isel-course-hero h1,
.isel-panel h2,
.isel-empty-state h2,
.isel-course-pricebox strong,
.isel-curriculum__heading h2 {
    color: #222222 !important;
}
.isel-page-heading > p:last-child,
.isel-course-card p,
.isel-course-intro,
.isel-rich-content,
.isel-empty-state p {
    color: #5f6874;
}
.isel-catalog-tools,
.isel-course-card,
.isel-panel,
.isel-empty-state {
    border-color: #e4e7eb;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(34, 34, 34, .045);
}
.isel-course-card {
    border-radius: 16px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.isel-course-card:hover {
    border-color: #b9d9ef;
    box-shadow: 0 14px 32px rgba(34, 34, 34, .085);
    transform: translateY(-3px);
}
.isel-course-card__body {
    padding: 22px;
}
.isel-course-card__footer {
    border-top-color: #e9edf1;
}
.isel-course-card__price strong,
.isel-course-pricebox strong {
    color: #222222;
}
.isel-course-card__link,
.isel-breadcrumbs a,
.isel-clear-filters,
.isel-text-link,
.isel-course-card h2 a:hover {
    color: #0077cd;
}
.isel-course-hero {
    border-color: #e4e7eb;
    border-top: 3px solid #0077cd;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(34, 34, 34, .04);
}
.isel-course-quickfacts span {
    border-color: #e4e7eb;
    background: #ffffff;
    color: #4f5965;
}
.isel-course-quickfacts span span {
    color: #0077cd;
}
.isel-course-detail-grid {
    gap: 22px;
}
.isel-panel {
    border-radius: 16px;
    padding: clamp(20px, 2.6vw, 29px);
}
.isel-module-item {
    border-color: #e4e7eb;
    border-radius: 12px;
}
.isel-module-item[open] > summary {
    background: #edf7ff;
}
.isel-module-item__number,
.isel-module-item__chevron,
.isel-lesson-icon {
    color: #0077cd;
}
.isel-course-placeholder,
.isel-account-course-placeholder,
.isel-admin-course-thumb {
    background: linear-gradient(135deg, #222222 0%, #0077cd 100%);
}


/* Lesson-type icons use one InfoSuli accent; semantic result/status colors stay distinct. */
.isel-lesson-icon--video,
.isel-lesson-icon--note,
.isel-lesson-icon--practice,
.isel-lesson-icon--quiz {
    background: #edf7ff !important;
    color: #0077cd !important;
}
.isel-learning-nav-icon,
.isel-learning-lesson-icon {
    color: #0077cd;
}

/* Shared buttons: one brand color, consistent shape, motion and focus feedback. */
.isel-button,
.isel-start-learning-button,
.isel-admin-button,
.isel-account-button,
.isel-commerce-button,
.isel-buy-button,
.isel-learning-primary-button,
.isel-code-playground__run {
    border-radius: 10px !important;
    background: #0077cd;
    border-color: #0077cd;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 650;
    box-shadow: 0 4px 12px rgba(0, 119, 205, .12);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.isel-button:hover,
.isel-button:focus-visible,
.isel-start-learning-button:hover,
.isel-admin-button:hover,
.isel-admin-button:focus-visible,
.isel-account-button:hover,
.isel-account-button:focus-visible,
.isel-commerce-button:hover,
.isel-buy-button:hover,
.isel-learning-primary-button:hover,
.isel-code-playground__run:hover {
    background: #0066ad;
    border-color: #0066ad;
    color: #ffffff !important;
    box-shadow: 0 7px 17px rgba(0, 119, 205, .19);
    transform: translateY(-1px);
}
.isel-button--light,
.isel-admin-button--outline,
.isel-account-button--secondary,
.isel-commerce-button--secondary,
.isel-buy-button--secondary,
.isel-learning-secondary-button {
    border: 1px solid #cfe4f5 !important;
    background: #ffffff !important;
    color: #0077cd !important;
    box-shadow: none !important;
}
.isel-button--light:hover,
.isel-admin-button--outline:hover,
.isel-account-button--secondary:hover,
.isel-commerce-button--secondary:hover,
.isel-buy-button--secondary:hover,
.isel-learning-secondary-button:hover {
    border-color: #0077cd !important;
    background: #edf7ff !important;
    color: #0066ad !important;
}
.isel-button:focus-visible,
.isel-start-learning-button:focus-visible,
.isel-admin-button:focus-visible,
.isel-account-button:focus-visible,
.isel-commerce-button:focus-visible,
.isel-buy-button:focus-visible,
.isel-learning-primary-button:focus-visible,
.isel-code-playground__run:focus-visible,
.isel-wishlist-button:focus-visible {
    outline: 3px solid rgba(0, 119, 205, .25);
    outline-offset: 2px;
}

/* Inputs and search/filter tools. */
.isel-course-filters input[type="search"],
.isel-course-filters select,
.isel-billing-field input,
.isel-billing-field select,
.isel-account-form-grid input,
.isel-account-form-grid select,
.isel-account-form-grid textarea {
    border-color: #d9dee5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: none;
}
.isel-course-filters input:focus,
.isel-course-filters select:focus,
.isel-billing-field input:focus,
.isel-billing-field select:focus,
.isel-account-form-grid input:focus,
.isel-account-form-grid select:focus,
.isel-account-form-grid textarea:focus {
    border-color: #0077cd !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 205, .13) !important;
    outline: 0;
}

/* Account / dashboard: black-and-white foundation with blue interactions. */
.isel-account-wrap {
    --ia-navy: #222222;
    --ia-text: #222222;
    --ia-blue: #0077cd;
    --ia-muted: #667085;
    --ia-border: #e4e7eb;
    --ia-pale: #f6f8fa;
    font-family: 'Poppins', sans-serif !important;
}
.isel-account-hero {
    border-top: 4px solid #0077cd;
    border-radius: 18px;
    background: linear-gradient(115deg, #222222 0%, #222222 72%, #0077cd 100%);
    box-shadow: 0 14px 32px rgba(34, 34, 34, .12);
}
.isel-account-hero__eyebrow {
    color: #b8e0ff;
}
.isel-account-hero__orb {
    border-color: rgba(0, 119, 205, .24);
}
.isel-account-hero__profile {
    border-color: rgba(255, 255, 255, .17);
    background: rgba(255, 255, 255, .08);
}
.isel-account-layout {
    gap: 22px;
}
.isel-account-sidebar,
.isel-account-panel,
.isel-account-stat,
.isel-account-course-card {
    border-color: #e4e7eb;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(34, 34, 34, .035);
}
.isel-account-sidebar {
    border-radius: 16px;
}
.isel-account-nav-link {
    border-radius: 10px;
    color: #505967;
    font-family: 'Poppins', sans-serif;
}
.isel-account-nav-link:hover,
.isel-account-nav-link.is-active {
    border-color: #cfe4f5;
    background: #edf7ff;
    color: #0077cd;
}
.isel-account-nav-link.is-active .isel-account-nav-link__icon,
.isel-account-nav-link__icon,
.isel-account-nav-link > small {
    background: #e6f3ff;
    color: #0077cd;
}
.isel-account-section-heading h2,
.isel-account-stat > strong,
.isel-account-course-card h3,
.isel-account-table td strong,
.isel-account-orders-intro h2,
.isel-account-order-total {
    color: #222222 !important;
}
.isel-account-stat__icon.is-blue,
.isel-account-stat__icon.is-violet,
.isel-account-stat__icon.is-amber,
.isel-account-grade,
.isel-account-ranking-intro__icon {
    background: #e8f4ff !important;
    color: #0077cd !important;
}
.isel-account-stat__icon.is-green {
    background: #edf7ff;
    color: #0077cd;
}
.isel-account-course-card {
    border-radius: 14px;
}
.isel-account-course-card h3 a:hover,
.isel-account-text-link,
.isel-account-table-link,
.isel-account-my-rank strong {
    color: #0077cd !important;
}
.isel-account-progress span {
    background: #0077cd;
}
.isel-account-progress,
.isel-account-table th,
.isel-account-avatar-editor,
.isel-account-ranking-intro {
    background: #f6f8fa;
}
.isel-account-button,
.isel-account-file-button {
    min-height: 40px;
    border-radius: 10px;
    font-size: 12px;
}
.isel-wishlist-button {
    border-color: #d9e1e8;
    border-radius: 10px;
    color: #222222 !important;
}
.isel-wishlist-button:hover,
.isel-wishlist-button.is-active {
    border-color: #0077cd;
    background: #edf7ff;
    color: #0077cd !important;
}
.isel-wishlist-button > span:first-child {
    color: #0077cd;
}
.isel-account-mode .isel-account-hero h1,
.isel-account-mode .isel-account-hero strong,
.isel-account-mode .isel-account-hero__profile strong {
    color: #ffffff !important;
}

/* Cart, checkout, billing and order confirmation. */
.isel-commerce-page {
    color: #222222;
    font-family: 'Poppins', sans-serif !important;
}
.isel-commerce-page .isel-page-heading h1,
.isel-commerce-card__head h2,
.isel-commerce-summary h2,
.isel-commerce-empty h2,
.isel-commerce-result h1,
.isel-commerce-checkout-email,
.isel-commerce-summary__row strong,
.isel-commerce-summary__total {
    color: #222222 !important;
}
.isel-commerce-card,
.isel-commerce-summary,
.isel-commerce-empty,
.isel-commerce-result {
    border-color: #e4e7eb;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(34, 34, 34, .045);
}
.isel-commerce-card__head,
.isel-cart-item,
.isel-commerce-summary__row,
.isel-commerce-result__order {
    border-color: #e8ebef;
}
.isel-commerce-payment-brand {
    border-color: #e4e7eb;
    background: #f6f8fa;
}
.isel-commerce-payment-brand__mark {
    background: #0077cd !important;
}
.isel-billing-type__option {
    border-color: #e4e7eb;
    border-radius: 12px;
}
.isel-billing-type__option.is-selected {
    border-color: #0077cd;
    background: #edf7ff;
}
.isel-billing-type__icon {
    background: #e8f4ff;
    color: #0077cd;
}
.isel-billing-field > span,
.isel-billing-type legend,
.isel-billing-type__option strong {
    color: #222222;
}
.isel-commerce-text-link,
.isel-commerce-card__head > a {
    color: #0077cd;
}

/* Learning area — enforce the same brand system in light mode without changing dark mode. */
.isel-learning-shell[data-theme="light"] {
    --isel-learn-navy: #222222;
    --isel-learn-blue: #0077cd;
    --isel-learn-border: #e4e7eb;
    background: #f6f8fa !important;
    color: #222222 !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-topbar,
.isel-learning-shell[data-theme="light"] .isel-learning-lesson-panel,
.isel-learning-shell[data-theme="light"] .isel-learning-question,
.isel-learning-shell[data-theme="light"] .isel-quiz-intro,
.isel-learning-shell[data-theme="light"] .isel-learning-submit-panel,
.isel-learning-shell[data-theme="light"] .isel-learning-completion-row,
.isel-learning-shell[data-theme="light"] .isel-learning-next-prev a {
    border-color: #e4e7eb !important;
    background: #ffffff !important;
    color: #222222;
    box-shadow: 0 6px 20px rgba(34, 34, 34, .035);
}
.isel-learning-shell[data-theme="light"] h1,
.isel-learning-shell[data-theme="light"] h2,
.isel-learning-shell[data-theme="light"] h3,
.isel-learning-shell[data-theme="light"] h4,
.isel-learning-shell[data-theme="light"] .isel-learning-lesson-heading h1,
.isel-learning-shell[data-theme="light"] .isel-learning-submit-heading h2,
.isel-learning-shell[data-theme="light"] .isel-learning-empty-content h2,
.isel-learning-shell[data-theme="light"] .isel-learning-question legend,
.isel-learning-shell[data-theme="light"] .isel-learning-download-card strong,
.isel-learning-shell[data-theme="light"] .isel-learning-completion-status strong,
.isel-learning-shell[data-theme="light"] .isel-learning-next-prev strong,
.isel-learning-shell[data-theme="light"] .isel-learning-matching strong,
.isel-learning-shell[data-theme="light"] .isel-quiz-intro h2 {
    color: #222222 !important;
}
.isel-learning-shell[data-theme="light"] a,
.isel-learning-shell[data-theme="light"] .isel-learning-file-icon,
.isel-learning-shell[data-theme="light"] .isel-learning-download-arrow,
.isel-learning-shell[data-theme="light"] .isel-learning-lesson-number,
.isel-learning-shell[data-theme="light"] .isel-learning-question legend span {
    color: #0077cd;
}
.isel-learning-shell[data-theme="light"] .isel-learning-module[open],
.isel-learning-shell[data-theme="light"] .isel-learning-module__title[aria-expanded="true"],
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar .is-current > a {
    border-color: #cde5f7;
    background: #edf7ff;
}
.isel-learning-shell[data-theme="light"] .isel-learning-answer-options label {
    border-color: #e4e7eb;
    background: #ffffff;
    color: #424a55;
}
.isel-learning-shell[data-theme="light"] .isel-learning-answer-options label:has(input:checked) {
    border-color: #0077cd;
    background: #edf7ff;
    color: #222222;
}
.isel-learning-shell[data-theme="light"] .isel-learning-answer-options input,
.isel-learning-shell[data-theme="light"] .isel-learning-matching select {
    accent-color: #0077cd;
}
.isel-learning-shell[data-theme="light"] .isel-learning-primary-button,
.isel-learning-shell[data-theme="light"] .isel-learning-quiz-submit,
.isel-learning-shell[data-theme="light"] .isel-quiz-stepper__dot.is-current {
    border-color: #0077cd !important;
    background: #0077cd !important;
    color: #ffffff !important;
}


.isel-learning-shell[data-theme="light"] .isel-learning-sidebar {
    border-color: #222222 !important;
    background: #222222 !important;
    color: #ffffff !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro h1,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro strong,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro p,
.isel-learning-shell[data-theme="light"] .isel-learning-module__title strong,
.isel-learning-shell[data-theme="light"] .isel-learning-module__title,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar small {
    color: #ffffff !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-curriculum {
    background: #222222 !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-module {
    border-color: #3c3c3c !important;
    background: #2b2b2b !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-module__title:hover,
.isel-learning-shell[data-theme="light"] .isel-learning-module[open] > .isel-learning-module__title {
    background: #333333 !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li a {
    color: #e7e7e7 !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current > a,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current {
    border-color: #0077cd !important;
    background: #0077cd !important;
    color: #ffffff !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-module__chevron {
    color: #b8dfff !important;
}
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar .isel-learning-theme-toggle {
    border-color: #4c4c4c;
    background: #2c2c2c;
    color: #ffffff;
}
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar .isel-learning-theme-toggle__icon {
    background: #0077cd;
    color: #ffffff;
}
.isel-learning-shell[data-theme="light"] .isel-quiz-breakdown > h3,
.isel-learning-shell[data-theme="light"] .isel-quiz-breakdown__heading strong,
.isel-learning-shell[data-theme="light"] .isel-quiz-stepper__top strong,
.isel-learning-shell[data-theme="light"] .isel-learning-download-card strong,
.isel-learning-shell[data-theme="light"] .isel-learning-submissions strong {
    color: #222222 !important;
}

/* Admin screens: refined spacing, consistent Poppins forms, brand-blue active states. */
.isel-admin-wrap {
    --isel-admin-navy: #222222;
    --isel-admin-blue: #0077cd;
    --isel-admin-blue-dark: #0066ad;
    --isel-admin-ink: #222222;
    --isel-admin-muted: #667085;
    --isel-admin-border: #e4e7eb;
    --isel-admin-bg: #f6f8fa;
    font-family: 'Poppins', sans-serif !important;
}
.isel-admin-hero {
    border-top: 4px solid #0077cd;
    border-radius: 18px;
    background: #222222;
    box-shadow: 0 12px 28px rgba(34, 34, 34, .11);
}
.isel-admin-brand-mark {
    color: #0077cd !important;
}
.isel-admin-hero:after {
    border-color: rgba(0, 119, 205, .22);
    box-shadow: 0 0 0 34px rgba(0, 119, 205, .035), 0 0 0 68px rgba(0, 119, 205, .025);
}
.isel-admin-stat,
.isel-admin-panel,
.isel-admin-quick-card,
.isel-editor-section,
.isel-module-card,
.isel-lesson-card,
.isel-network-node-card,
.isel-code-test-row,
.isel-quiz-question {
    border-color: #e4e7eb;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(34, 34, 34, .035);
}
.isel-admin-stat-icon--blue,
.isel-admin-stat-icon--amber,
.isel-admin-stat-icon--violet,
.isel-admin-quick-icon--soft,
.isel-section-icon,
.isel-category-row__icon {
    background: #e8f4ff !important;
    color: #0077cd !important;
}
.isel-admin-panel-head,
.isel-admin-table th,
.isel-submissions-table th {
    background: #f6f8fa;
    border-color: #e4e7eb;
}
.isel-admin-table th,
.isel-submissions-table th {
    color: #667085;
}
.isel-admin-table td,
.isel-submissions-table td,
.isel-admin-course-name,
.isel-admin-panel-head h2,
.isel-admin-quick-card strong,
.isel-section-heading h2,
.isel-side-card-heading h2,
.isel-module-lessons-modal__head h2,
.isel-quiz-editor__heading strong,
.isel-module-lesson-summary__copy strong {
    color: #222222 !important;
}
.isel-admin-table tbody tr:hover,
.isel-submissions-table tbody tr:hover {
    background: #f7fbfe;
}
.isel-admin-wrap .isel-admin-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.isel-admin-wrap .isel-admin-field select,
.isel-admin-wrap .isel-admin-field textarea {
    border-color: #d9dee5;
    border-radius: 9px;
    color: #222222;
    font-family: 'Poppins', sans-serif;
    box-shadow: none;
}
.isel-admin-wrap input:focus,
.isel-admin-wrap select:focus,
.isel-admin-wrap textarea:focus {
    border-color: #0077cd;
    box-shadow: 0 0 0 3px rgba(0, 119, 205, .12);
    outline: 0;
}
.isel-admin-wrap .isel-network-node-card textarea,
.isel-admin-wrap .isel-code-test-row textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.isel-quiz-settings,
.isel-network-builder,
.isel-programming-builder,
.isel-quiz-editor {
    border-color: #e4e7eb;
    border-radius: 13px;
    background: #f6f8fa;
}
.isel-network-preview,
.isel-code-test-row,
.isel-quiz-question {
    border-color: #e4e7eb;
}
.isel-module-lessons-modal__dialog {
    border-color: #e4e7eb;
    border-top: 4px solid #0077cd;
    border-radius: 16px;
    background: #f6f8fa;
}
.isel-module-lessons-modal__head,
.isel-module-lessons-modal__foot {
    border-color: #e4e7eb;
    background: #ffffff;
}
.isel-module-lessons-modal__body .isel-module-lessons__heading {
    background: #f6f8fa;
}
.isel-module-lesson-summary {
    border-color: #d6e9f8;
    background: #f8fbfe;
}
.isel-module-lesson-summary__icon,
.isel-quiz-count,
.isel-network-link-symbol {
    background: #e8f4ff;
    color: #0077cd;
}

/* Code editor keeps its dark coding canvas; buttons and surrounding panels follow the brand. */
.isel-code-playground {
    border-color: #e0e5eb;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(34, 34, 34, .06);
}
.isel-code-playground__head {
    border-bottom-color: #e4e7eb;
    background: #f6f8fa;
}
.isel-code-playground__head > div:before {
    background: #e8f4ff;
    color: #0077cd;
}
.isel-code-playground__head strong {
    color: #222222;
}
.isel-code-playground__controls {
    border-top-color: #e4e7eb;
    background: #ffffff;
}
.isel-code-playground__controls-kicker {
    color: #0077cd;
}
.isel-code-playground__run {
    background: #0077cd;
    border-color: #0077cd;
    border-radius: 10px;
}
.isel-code-playground__run:hover {
    background: #0066ad;
    border-color: #0066ad;
}
.isel-code-playground__result,
.isel-code-playground__output {
    background: #222222;
}
.isel-code-playground__result-head {
    background: #2c2c2c;
}
.isel-code-playground__result-head > span:first-child:before {
    background: #0077cd;
    color: #ffffff;
}

@media (max-width: 900px) {
    .isel-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .isel-course-grid { grid-template-columns: 1fr; }
    .isel-course-card__body { padding: 18px; }
    .isel-commerce-card,
    .isel-commerce-summary { border-radius: 14px; }
    .isel-account-hero { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .isel-wrap *,
    .isel-account-wrap *,
    .isel-commerce-page *,
    .isel-learning-shell *,
    .isel-admin-wrap * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* 0.7.5: consistent inner spacing for InfoSuli admin cards and settings forms. */
.isel-admin-wrap .isel-admin-panel > form:not(.isel-category-create-form) {
    padding: 24px 27px 28px;
    margin: 0;
}
.isel-admin-wrap .isel-admin-panel > form .isel-admin-field:last-child {
    margin-bottom: 0;
}
.isel-admin-wrap .isel-runner-settings-form {
    min-width: 0;
    padding: 24px 27px 28px;
    margin: 0;
}
.isel-admin-wrap .isel-runner-settings-form > .isel-admin-panel-head {
    margin: 0 -27px 20px;
    padding: 21px 27px 18px;
    border-top: 1px solid #e4e7eb;
    border-bottom: 1px solid #edf1f5;
    background: #f9fbfd;
}
.isel-admin-wrap .isel-runner-settings-form > hr {
    height: 0;
    margin: 25px -27px 0;
    border: 0;
    border-top: 1px solid #e4e7eb;
}
.isel-admin-wrap .isel-runner-settings-form > hr + .isel-admin-panel-head {
    margin-top: 0;
}
.isel-admin-wrap .isel-runner-settings-form > .isel-admin-info-note {
    margin: 18px 0 0;
    padding: 14px 15px;
}
.isel-admin-wrap .isel-runner-settings-form > .isel-admin-button {
    margin-top: 21px;
}
.isel-admin-wrap .isel-category-create-panel {
    padding: 24px 25px;
}
.isel-admin-wrap .isel-enrollment-assign-panel > .isel-enrollment-assign-form {
    padding: 24px 27px 27px;
}
.isel-admin-wrap .isel-payment-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
    align-items: start;
    gap: 22px;
}
.isel-admin-wrap .isel-payment-admin-layout > .isel-admin-panel:first-child {
    min-width: 0;
}
.isel-admin-wrap .isel-payment-admin-layout .isel-payment-help {
    padding: 25px 25px 26px;
}
.isel-admin-wrap .isel-payment-help h2 {
    margin: 0 0 17px;
    color: #222222;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}
.isel-admin-wrap .isel-payment-help ol {
    margin: 0;
    padding-left: 21px;
}
.isel-admin-wrap .isel-payment-help li {
    margin: 0 0 12px;
    padding-left: 3px;
    color: #536477;
    font-size: 12px;
    line-height: 1.6;
}
.isel-admin-wrap .isel-payment-help p {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #edf1f5;
    color: #7a8998;
    font-size: 11px;
    line-height: 1.65;
}
.isel-admin-wrap .isel-admin-panel > .isel-admin-panel-head + .isel-admin-empty {
    padding: 34px 24px;
}
@media (max-width: 1100px) {
    .isel-admin-wrap .isel-payment-admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .isel-admin-wrap .isel-payment-admin-layout .isel-payment-help {
        padding: 22px 24px;
    }
}
@media (max-width: 600px) {
    .isel-admin-wrap .isel-admin-panel > form,
    .isel-admin-wrap .isel-runner-settings-form,
    .isel-admin-wrap .isel-enrollment-assign-panel > .isel-enrollment-assign-form {
        padding: 18px 16px 21px;
    }
    .isel-admin-wrap .isel-runner-settings-form > .isel-admin-panel-head {
        margin-right: -16px;
        margin-left: -16px;
        padding: 18px 16px 16px;
    }
    .isel-admin-wrap .isel-runner-settings-form > hr {
        margin-right: -16px;
        margin-left: -16px;
    }
    .isel-admin-wrap .isel-category-create-panel {
        padding: 18px 16px;
    }
}


/* -------------------------------------------------------------------------
   0.7.6 — learning-area visual audit
   Light mode is genuinely light throughout the curriculum rail; the previous
   brand layer unintentionally painted it charcoal even when the theme was light.
   These scoped rules load after feature CSS and preserve the dark-mode palette.
   ------------------------------------------------------------------------- */
html[data-isel-learning-theme="light"] .isel-learning-shell,
.isel-learning-shell[data-theme="light"] {
    --isel-ui-blue: #0077cd;
    --isel-ui-blue-strong: #0066ad;
    --isel-ui-navy: #222222;
    --isel-ui-text: #25374a;
    --isel-ui-muted: #6c7f92;
    --isel-ui-border: #dfe8f1;
    --isel-ui-canvas: #f4f8fc;
    --isel-ui-panel: #ffffff;
    --isel-ui-elevated: #f8fbfe;
    --isel-text: #25374a;
    --isel-muted: #6c7f92;
    --isel-line: #dfe8f1;
    --isel-panel: #ffffff;
    --isel-soft: #edf6fd;
    color-scheme: light;
    background: #f4f8fc !important;
    color: #25374a !important;
}

/* Light curriculum rail: blue-white InfoSuli styling, not a dark panel. */
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar {
    border-right: 1px solid #dbe7f2 !important;
    background: linear-gradient(180deg, #f5faff 0%, #eef6fd 100%) !important;
    color: #25374a !important;
    scrollbar-color: #b9cfe2 transparent;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar__intro,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro {
    border-bottom: 1px solid #dce8f3 !important;
    background: linear-gradient(135deg, #e7f3ff 0%, #f5faff 70%, #f9fcff 100%) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar__intro::after,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro::after {
    border-color: rgba(0, 119, 205, .13) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar__intro .isel-eyebrow,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro .isel-eyebrow {
    color: #0077cd !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar__intro h1,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro h1 {
    color: #222222 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar__intro > p:not(.isel-eyebrow),
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro > p:not(.isel-eyebrow) {
    color: #64788d !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar__intro > strong,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar__intro > strong {
    color: #0077cd !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-progress,
.isel-learning-shell[data-theme="light"] .isel-learning-progress {
    border: 1px solid #d5e4f1 !important;
    background: #dce9f5 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-progress span,
.isel-learning-shell[data-theme="light"] .isel-learning-progress span {
    background: linear-gradient(90deg, #0077cd 0%, #42a9ed 100%) !important;
    box-shadow: 0 0 10px rgba(0, 119, 205, .16) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-curriculum,
.isel-learning-shell[data-theme="light"] .isel-learning-curriculum {
    background: transparent !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module,
.isel-learning-shell[data-theme="light"] .isel-learning-module {
    border: 1px solid #d9e5f0 !important;
    background: #ffffff !important;
    box-shadow: 0 3px 12px rgba(28, 67, 103, .045), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module[open],
.isel-learning-shell[data-theme="light"] .isel-learning-module[open] {
    border-color: #bedcf3 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 16px rgba(0, 119, 205, .055) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module__title,
.isel-learning-shell[data-theme="light"] .isel-learning-module__title {
    background: transparent !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module__title:hover,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module[open] > .isel-learning-module__title,
.isel-learning-shell[data-theme="light"] .isel-learning-module__title:hover,
.isel-learning-shell[data-theme="light"] .isel-learning-module[open] > .isel-learning-module__title {
    background: #f0f7fd !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module__title > span:first-child,
.isel-learning-shell[data-theme="light"] .isel-learning-module__title > span:first-child {
    border: 1px solid #cce3f6 !important;
    background: #e7f4ff !important;
    color: #0077cd !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module__title strong,
.isel-learning-shell[data-theme="light"] .isel-learning-module__title strong {
    color: #293e53 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module__chevron,
.isel-learning-shell[data-theme="light"] .isel-learning-module__chevron {
    color: #7890a6 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li:hover,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li:hover {
    background: #edf7ff !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li > a,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li > a {
    color: #344b60 !important;
    background: transparent !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-nav-icon,
.isel-learning-shell[data-theme="light"] .isel-learning-nav-icon {
    border: 1px solid #d7e6f3 !important;
    background: #f0f7fd !important;
    color: #3679aa !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-nav-title,
.isel-learning-shell[data-theme="light"] .isel-learning-nav-title {
    color: #2e455b !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-nav-title small,
.isel-learning-shell[data-theme="light"] .isel-learning-nav-title small {
    color: #8294a6 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module li.is-completed .isel-learning-nav-icon,
.isel-learning-shell[data-theme="light"] .isel-learning-module li.is-completed .isel-learning-nav-icon {
    border-color: #bfead7 !important;
    background: #e4f8ef !important;
    color: #13845b !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li.is-current,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li.is-current > a,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current > a {
    border-color: #0077cd !important;
    background: linear-gradient(110deg, #0077cd 0%, #086fba 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 119, 205, .18), inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li.is-current .isel-learning-nav-icon,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current .isel-learning-nav-icon {
    border-color: rgba(255,255,255,.32) !important;
    background: rgba(255,255,255,.13) !important;
    color: #ffffff !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li.is-current .isel-learning-nav-title,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-module > ul > li.is-current .isel-learning-nav-title small,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current .isel-learning-nav-title,
.isel-learning-shell[data-theme="light"] .isel-learning-module > ul > li.is-current .isel-learning-nav-title small {
    color: #ffffff !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar::-webkit-scrollbar-thumb,
.isel-learning-shell[data-theme="light"] .isel-learning-sidebar::-webkit-scrollbar-thumb {
    background: #b8ccde !important;
}

/* Keep content surfaces, diagrams and controls consistent in light mode. */
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-content,
.isel-learning-shell[data-theme="light"] .isel-learning-content {
    background: #f4f8fc !important;
    color: #25374a !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-lesson-panel,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-quiz-intro,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-question,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-quiz-submit,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-completion-row,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-next-prev a,
.isel-learning-shell[data-theme="light"] .isel-learning-lesson-panel,
.isel-learning-shell[data-theme="light"] .isel-quiz-intro,
.isel-learning-shell[data-theme="light"] .isel-learning-question,
.isel-learning-shell[data-theme="light"] .isel-learning-quiz-submit,
.isel-learning-shell[data-theme="light"] .isel-learning-completion-row,
.isel-learning-shell[data-theme="light"] .isel-learning-next-prev a {
    border-color: #e0e8f0 !important;
    background: #ffffff !important;
    color: #25374a;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-question > .isel-question-brief,
.isel-learning-shell[data-theme="light"] .isel-learning-question > .isel-question-brief {
    border-color: #cfe4f8 !important;
    background: linear-gradient(135deg, #eef7ff 0%, #ffffff 100%) !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-task__canvas,
.isel-learning-shell[data-theme="light"] .isel-network-task__canvas {
    border-color: #d9e5f0 !important;
    background: #ffffff !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-task__intro strong,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli > summary strong,
.isel-learning-shell[data-theme="light"] .isel-network-task__intro strong,
.isel-learning-shell[data-theme="light"] .isel-network-cli > summary strong {
    color: #293e53 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli,
.isel-learning-shell[data-theme="light"] .isel-network-cli {
    border-color: #d9e5f0 !important;
    background: #ffffff !important;
}
/* CLI/code editors intentionally stay dark: this preserves familiar terminal/editor contrast. */
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli__terminal,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli__terminal-head,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli__modebar,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli__mode-help-row,
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-network-cli__help-output,
.isel-learning-shell[data-theme="light"] .isel-network-cli__terminal,
.isel-learning-shell[data-theme="light"] .isel-network-cli__terminal-head,
.isel-learning-shell[data-theme="light"] .isel-network-cli__modebar,
.isel-learning-shell[data-theme="light"] .isel-network-cli__mode-help-row,
.isel-learning-shell[data-theme="light"] .isel-network-cli__help-output {
    background-color: #0d1726 !important;
    color: #d7e6f6 !important;
}
html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-theme-toggle:focus-visible,
html[data-isel-learning-theme="light"] .isel-learning-shell a:focus-visible,
html[data-isel-learning-theme="light"] .isel-learning-shell button:focus-visible,
html[data-isel-learning-theme="light"] .isel-learning-shell summary:focus-visible,
.isel-learning-shell[data-theme="light"] .isel-learning-theme-toggle:focus-visible,
.isel-learning-shell[data-theme="light"] a:focus-visible,
.isel-learning-shell[data-theme="light"] button:focus-visible,
.isel-learning-shell[data-theme="light"] summary:focus-visible {
    outline: 3px solid rgba(0, 119, 205, .35) !important;
    outline-offset: 3px !important;
}

/* Dark-mode guardrails for theme-sensitive generic controls and the rail. */
html[data-isel-learning-theme="dark"] .isel-learning-shell,
.isel-learning-shell[data-theme="dark"] {
    --isel-ui-canvas: #0b1421;
    --isel-ui-panel: #111e2e;
    --isel-ui-elevated: #15253a;
    --isel-text: #dbe7f5;
    --isel-muted: #9aadc2;
    --isel-line: #2a3d54;
    --isel-panel: #111e2e;
    --isel-soft: #172b42;
    color-scheme: dark;
}
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-sidebar,
.isel-learning-shell[data-theme="dark"] .isel-learning-sidebar {
    border-right-color: #26364c !important;
    background: linear-gradient(180deg, #101c2d 0%, #0d1929 100%) !important;
    color: #dce6f3 !important;
}
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-sidebar__intro,
.isel-learning-shell[data-theme="dark"] .isel-learning-sidebar__intro {
    border-bottom-color: #26364c !important;
    background: linear-gradient(135deg, rgba(42, 93, 139, .24), rgba(9, 31, 52, .08)) !important;
}
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-content,
.isel-learning-shell[data-theme="dark"] .isel-learning-content {
    background: #0b1421 !important;
    color: #dbe7f5 !important;
}
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-question,
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-quiz-intro,
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-quiz-submit,
html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-completion-row,
.isel-learning-shell[data-theme="dark"] .isel-learning-question,
.isel-learning-shell[data-theme="dark"] .isel-quiz-intro,
.isel-learning-shell[data-theme="dark"] .isel-learning-quiz-submit,
.isel-learning-shell[data-theme="dark"] .isel-learning-completion-row {
    border-color: #293c53 !important;
    background: #111e2e !important;
    color: #dbe7f5 !important;
}
@media (max-width: 760px) {
    html[data-isel-learning-theme="light"] .isel-learning-shell .isel-learning-sidebar,
    .isel-learning-shell[data-theme="light"] .isel-learning-sidebar {
        border-right: 0 !important;
        border-bottom: 1px solid #dbe7f2 !important;
    }
    html[data-isel-learning-theme="dark"] .isel-learning-shell .isel-learning-sidebar,
    .isel-learning-shell[data-theme="dark"] .isel-learning-sidebar {
        border-bottom-color: #26364c !important;
    }
    .isel-learning-shell .isel-learning-sidebar__intro {
        padding: 22px 19px 18px !important;
    }
    .isel-learning-shell .isel-learning-module {
        flex-basis: min(300px, 84vw);
    }
}