/*
 * Cher's LMS, Design B "Bold Brand" (October 2026): the same look as the registration site's Design B
 * (register.chersllc.com/?theme=b) and chersllc.com. See tools/LmsDesign.php for who sees it.
 * Loaded after styles.css and student_home.css; every rule is scoped to body.lms-b.
 * Palette: the website's blue band #557bf6 with a deeper #3a5fde where white text sits on it (5.2:1),
 * teal #48ced3 buttons with dark text (9:1), sun yellow #f4c72c labels, ink #1a1a1a, soft gray page #f4f6fb.
 * House rules: no divider lines between sections (spacing, tints and cards instead), no faces, logo never inverted.
 */

body.lms-b {
    --b-blue: #557bf6;
    --b-blue-deep: #3a5fde;
    --b-blue-strong: #2a49b8;
    --b-blue-tint: #eef2fe;
    --b-blue-tint-2: #d9e2fd;
    --b-teal: #48ced3;
    --b-teal-hover: #35bfc5;
    --b-teal-ink: #0a6d74;
    --b-sun: #f4c72c;
    --b-sun-tint: #fff6d9;
    --b-ink: #1a1a1a;
    --b-ink-2: #33373d;
    --b-muted: #5a6068;
    --b-bg: #f4f6fb;
    --b-field: #8b939c;
    --b-done: #0f8a52;
    --b-danger: #b42318;
    --b-radius: 24px;
    --b-radius-sm: 14px;
    --b-shadow: 0 1px 2px rgba(26, 26, 26, 0.05), 0 8px 28px rgba(26, 26, 26, 0.07);
    --b-shadow-lg: 0 2px 6px rgba(26, 26, 26, 0.06), 0 24px 48px rgba(26, 26, 26, 0.12);
    --b-ring: 0 0 0 3px rgba(58, 95, 222, 0.3);
    --b-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='2'%3E%3Cpath d='M-60 120C180 20 300 260 520 170S860 -10 1040 120 1320 330 1500 220'/%3E%3Cpath d='M-80 420C120 300 300 520 560 420S900 250 1120 400 1380 560 1520 470'/%3E%3Cpath d='M220 640C260 480 120 380 260 260S560 200 600 60'/%3E%3C/g%3E%3C/svg%3E");
    /* the older LMS variables, mapped to Design B so every page that uses them follows */
    --primary: #3a5fde;
    --primary-dark: #2a49b8;
    --primary-light: #9fb5f8;
    --accent: #48ced3;
    --text: #1a1a1a;
    --text-muted: #5a6068;
    --border: #e3e8f2;
    --sh-teal: #48ced3;
    --sh-teal-ink: #3a5fde;
    --sh-teal-soft: #eef2fe;
    --sh-ink: #1a1a1a;
    --sh-muted: #5a6068;
    --sh-bg: #f4f6fb;
    --sh-line: #e3e8f2;
    --sh-done: #0f8a52;
    --sh-radius: 24px;

    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--b-ink);
    background: var(--b-bg);
    background-image: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.lms-b h1, body.lms-b h2, body.lms-b h3, body.lms-b h4, body.lms-b h5, body.lms-b h6,
body.lms-b .h1, body.lms-b .h2, body.lms-b .h3, body.lms-b .h4, body.lms-b .h5, body.lms-b .h6 { color: var(--b-ink); font-weight: 700; letter-spacing: -0.01em; }
body.lms-b hr { display: none; }
body.lms-b .text-muted { color: var(--b-muted) !important; }
body.lms-b a { color: var(--b-blue-deep); text-underline-offset: 3px; }
body.lms-b a:hover { color: var(--b-blue-strong); }
body.lms-b :focus-visible { outline: 3px solid var(--b-blue-deep); outline-offset: 2px; }
body.lms-b ::selection { background: var(--b-sun); color: var(--b-ink); }

.lmsb-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.r26-sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.lmsb-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--b-ink); color: #fff !important; padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.lmsb-skip:focus { top: 12px; }

/* ====== The chersllc.com header and footer: the same rules as the registration site (assets/css/register-2026.css) ====== */
/* ---------- Header: a copy of the chersllc.com header (measured 2026-10-03 at 1440 and 390 wide) ----------
   Sticky; see-through at the top, light blue #c9ddff with a soft shadow once the page scrolls. Poppins 700 uppercase
   links, hover = white underlined, drop-downs on hover, black pill Sign in. Phones: burger, light blue panel, right aligned. */

html { scroll-padding-top: 110px; }
.r26-hd-sticky { position: sticky; top: 0; z-index: 18; }
.r26-hd {
    position: relative;
    background-color: transparent;
    transition: box-shadow 0.15s linear, background-color 0.3s ease-in-out;
    font-family: 'Poppins', var(--r26-font);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   /* as on chersllc.com */
}
.r26-hd-sticky.is-scrolled .r26-hd { background-color: #c9ddff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); }
.r26-hd-sticky.is-open .r26-hd { background-color: #c9ddff; }
.r26-hd ul { list-style: none; margin: 0; padding: 0; }
.r26-hd a { text-decoration: none; }
.r26-hd :focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
.r26-hd-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
}
.r26-hd-logo { display: block; flex: 0 0 auto; }
.r26-hd-logo img { display: block; width: 135px; height: 43px; object-fit: contain; }
.r26-hd-logo { position: relative; }
.r26-hd-logo img { transition: opacity 0.3s ease-in-out; }
/* Reversed logo (white type, icon in full color) for the header over the blue hero; hidden unless a design shows it */
.r26-hd-logo .r26-hd-logo-reversed { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }

/* Burger (phones) */
.r26-hd-burger {
    position: relative; width: 24px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #000000;
}
.r26-hd-burger span:not(.r26-sr-only) {
    position: absolute; left: 0; width: 24px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 0.4s ease-in-out 0.1s, opacity 0.4s ease-in-out 0.1s;
}
.r26-hd-burger span:nth-child(1) { top: 0; }
.r26-hd-burger span:nth-child(2) { top: 8px; }
.r26-hd-burger span:nth-child(3) { top: 16px; }
.r26-hd-sticky.is-open .r26-hd-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.r26-hd-sticky.is-open .r26-hd-burger span:nth-child(2) { opacity: 0; }
.r26-hd-sticky.is-open .r26-hd-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Phone menu panel */
.r26-hd-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 0 16px; max-height: 0; overflow: hidden; visibility: hidden;
    background: #c9ddff;
    transition: max-height 0.3s ease-out 0.1s, padding 0.5s 0.1s, visibility 0.6s;
}
.r26-hd-sticky.is-open .r26-hd-menu { max-height: 640px; padding: 24px 16px; visibility: visible; }
.r26-hd-nav > ul { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.r26-hd-item { text-align: right; }
.r26-hd-nav a {
    display: block; color: #000000; font-size: 16px; line-height: 29px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.r26-hd-nav a:hover, .r26-hd-nav a:focus-visible { color: #ffffff; text-decoration: underline; text-underline-offset: 7px; }
/* Black "Help on WhatsApp" pill (the earlier register header's button) */
.r26-hd-help {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; min-height: 44px; padding: 8px 18px;
    border-radius: 999px; background: #1d1e20; color: #ffffff !important;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    transition: background-color 0.2s;
}
.r26-hd-help:hover { background: #000000; text-decoration: none !important; }
.r26-hd-help .r26-icon { width: 18px; height: 18px; color: #ffffff; }

@media (min-width: 920px) {
    html { scroll-padding-top: 144px; }
    .r26-hd-inner { max-width: 1224px; margin: 0 auto; padding: 34px 16px; }
    .r26-hd-logo img { width: 177px; height: 56px; }
    .r26-hd-burger { display: none; }
    .r26-hd-menu {
        position: static; flex-direction: row; align-items: center; justify-content: flex-end; flex: 1 1 auto;
        max-height: none; overflow: visible; visibility: visible; padding: 0; background: transparent; transition: none;
    }
    .r26-hd-nav > ul { flex-direction: row; align-items: center; gap: 40px; }
    .r26-hd-item { text-align: left; line-height: 25px; }
    .r26-hd-nav a { font-size: 14px; line-height: 25px; letter-spacing: 1.4px; white-space: nowrap; }
    .r26-hd-help { margin: 0 0 0 29px; }
}

.r26-waves {
    background-color: var(--r26-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='2'%3E%3Cpath d='M-60 120C180 20 300 260 520 170S860 -10 1040 120 1320 330 1500 220'/%3E%3Cpath d='M-80 420C120 300 300 520 560 420S900 250 1120 400 1380 560 1520 470'/%3E%3Cpath d='M220 640C260 480 120 380 260 260S560 200 600 60'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

/* Footer: a copy of the footer on chersllc.com/about-us (measured 2026-10-03 at 1440 and 390 wide).
   Same background picture and blue (#5379f6), white Poppins text. Desktop: Address and icons, Contacts and links,
   newsletter form in three columns. Phones: Address, Contacts, icons, newsletter, links. */
.r26-footer {
    margin-top: 56px;
    color: #ffffff;
    font-family: 'Poppins', var(--r26-font);
    background: #5379f6 url("../img/footer-waves.jpg") center / cover no-repeat;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   /* as on chersllc.com */
}
.r26-footer-inner {
    max-width: 1224px;
    margin: 0 auto;
    padding: 33px 31px 33px;   /* phone: text starts 31px in, as on the website */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.r26-footer-inner > * { width: 100%; }
.r26-footer h3, .r26-footer p, .r26-footer ul { margin: 0; }
.r26-footer a { color: #ffffff; text-decoration: none; }
.r26-footer a:hover, .r26-footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.r26-footer :focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.r26-f-label { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0.24em; color: #ffffff; }
.r26-f-address .r26-f-label { margin-bottom: 10px; }
.r26-f-address p { font-size: 16px; line-height: 28.8px; font-weight: 400; }
.r26-f-address p + p { margin-top: 8.2px; }
.r26-f-contact { margin-top: 19px; }
.r26-f-contact .r26-f-label { margin-bottom: 10px; }
.r26-f-contact p { font-size: 16px; line-height: 28.8px; font-weight: 400; }
.r26-f-contact p + p { margin-top: 3px; }
.r26-f-social { list-style: none; padding: 0 0 0 19px !important; margin-top: 15px !important; display: flex; gap: 38.75px; }
.r26-f-social a { display: block; width: 25px; height: 25px; }
.r26-f-social svg { display: block; width: 25px; height: 25px; }
.r26-f-news { margin-top: 38px; }
.r26-f-news h3 { font-size: 20px; line-height: 24px; font-weight: 700; color: #ffffff; }
.r26-f-news form { margin-top: 21px; display: flex; flex-direction: column; align-items: flex-start; }
.r26-f-news label { font-size: 16px; line-height: 23px; font-weight: 400; color: #ffffff; margin-bottom: 3px; }
.r26-f-news input {
    width: 100%; height: 58px; padding: 0 16px; border: 1px solid #b8c0cc; border-radius: 10px; background: #ffffff; color: #000000;
    font: 400 16px/1.2 'Poppins', var(--r26-font);
}
.r26-f-news input::placeholder { color: #6b6f75; font-size: 14px; }
.r26-f-news button {
    margin-top: 22px; width: 141px; height: 35px; border: 0; border-radius: 999px;
    background: #000000; color: #ffffff; cursor: pointer;
    font: 500 14px/1 'Poppins', var(--r26-font); letter-spacing: 3.08px; text-transform: uppercase;
}
.r26-f-news button:hover { background: #1d1e20; }
.r26-f-links { list-style: none; padding: 0; margin-top: 37px !important; }
.r26-f-links li { line-height: 28.8px; }
.r26-f-links li + li { margin-top: 8.2px; }
.r26-f-links a { display: inline-block; font-size: 16px; line-height: 28.8px; font-weight: 400; }
@media (min-width: 920px) {
    /* Three columns at the website's x positions (108, 417, 829 at 1440 wide); each piece sits at its measured height. */
    .r26-footer-inner {
        display: grid;
        grid-template-columns: minmax(0, 285fr) minmax(0, 388fr) minmax(0, 503fr);
        column-gap: 24px;
        align-items: start;
        padding: 79px 0 29px;
        box-sizing: content-box;
    }
    .r26-footer-inner > * { grid-row: 1; margin-top: 0; }
    .r26-f-label { line-height: 26px; }
    .r26-f-address { grid-column: 1; }
    .r26-f-address .r26-f-label { margin-bottom: 9px; }
    .r26-f-address p:first-of-type { font-size: 15px; line-height: 19.5px; }
    .r26-f-address p + p { margin-top: 8.5px; }
    .r26-f-address p:nth-of-type(3) { margin-top: 7.2px; }
    .r26-f-address p:nth-of-type(4) { margin-top: 8.2px; }
    .r26-f-social { grid-column: 1; margin-top: 185px !important; padding-left: 10px !important; gap: 21px; }
    .r26-f-contact { grid-column: 2; margin-top: 0; }
    .r26-f-contact .r26-f-label { margin-bottom: 9px; }
    .r26-f-contact p { font-size: 15px; line-height: 19.5px; }
    .r26-f-contact p + p { margin-top: 0; }
    .r26-f-links { grid-column: 2; margin-top: 120px !important; }
    .r26-f-links li + li { margin-top: 8px; }
    .r26-f-links li { line-height: 19.5px; }
    .r26-f-links a { display: block; font-size: 15px; line-height: 19.5px; }
    .r26-f-news { grid-column: 3; margin-top: 0; }
    .r26-f-news h3 { line-height: 26px; }
    .r26-f-news form { margin-top: 18px; }
    .r26-f-news label { font-size: 15px; line-height: 22px; margin-bottom: 2px; }
    .r26-f-news input { height: 57px; font-size: 15px; }
    .r26-f-news input::placeholder { font-size: 15px; }
    .r26-f-news button { margin-top: 10px; width: 149px; height: 31px; }
}
@media (min-width: 920px) and (max-width: 1255px) {
    .r26-footer-inner { padding-left: 16px; padding-right: 16px; }
}

/* ====================================================================================================
   Student pages (new version): sidebar, blue band, cards, buttons, forms, tables
   ==================================================================================================== */

body.lms-b .dashboard-main { overflow-x: clip; display: flex; flex-direction: column; min-height: 100vh; }
body.lms-b .dashboard-content { flex: 1 0 auto; padding-bottom: 0; }

/* ---------- Sidebar: white rail, website logo, blue pill for the page you are on ---------- */
body.lms-b .dashboard-sidebar {
    background: #ffffff;
    border-right: 0;
    box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.04), 8px 0 28px rgba(26, 26, 26, 0.05);
    backdrop-filter: none;
}
body.lms-b .dashboard-sidebar-header { padding-top: 18px; padding-bottom: 10px; }
body.lms-b .dashboard-sidebar-brand { gap: 0; }
body.lms-b .lmsb-side-logo { display: block; width: 158px; height: auto; }
body.lms-b .lmsb-side-mark { display: none; }
body.lms-b.sidebar-collapsed .lmsb-side-logo { display: none; }
body.lms-b.sidebar-collapsed .lmsb-side-mark { display: block; }
body.lms-b .sidebar-collapse-btn, body.lms-b .sidebar-expand-btn {
    border-radius: 50%; border: 0; background: var(--b-blue-tint); color: var(--b-blue-deep); width: 36px; height: 36px;
}
body.lms-b .sidebar-collapse-btn:hover, body.lms-b .sidebar-expand-btn:hover { background: var(--b-blue-tint-2); color: var(--b-blue-strong); }
body.lms-b .sidebar-role-pill {
    background: var(--b-sun); color: var(--b-ink); border: 0; font-weight: 700; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
}
body.lms-b .sidebar-role-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--b-ink); }
body.lms-b .sidebar-nav-section { color: var(--b-muted); font-weight: 700; letter-spacing: 0.14em; }
body.lms-b .dashboard-sidebar-link {
    border-radius: 14px; color: var(--b-ink); font-weight: 500; min-height: 46px; border: 0;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.lms-b .dashboard-sidebar-link:hover { background: var(--b-blue-tint); color: var(--b-blue-strong); }
body.lms-b .dashboard-sidebar-link.is-active {
    background: var(--b-blue-deep); color: #ffffff; font-weight: 600; box-shadow: 0 8px 22px rgba(58, 95, 222, 0.3);
}
body.lms-b .dashboard-sidebar-link.is-active .sidebar-link-icon {
    background: #ffffff; border-radius: 50%; width: 28px; height: 28px; display: inline-grid; place-items: center;
}
body.lms-b .dashboard-sidebar-link.is-warn { color: var(--b-danger); }
.lmsb-side-help {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 14px 16px; min-height: 46px; padding: 8px 16px;
    border-radius: 999px; background: #1d1e20; color: #ffffff !important; text-decoration: none;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; flex: 0 0 auto;
}
.lmsb-side-help:hover { background: #000000; color: #ffffff !important; }
.lmsb-side-help .lmsb-icon { width: 18px; height: 18px; }
body.lms-b.sidebar-collapsed .lmsb-side-help { margin: 10px auto 16px; width: 46px; padding: 0; }

/* Phones: the round blue menu button */
body.lms-b .dashboard-mobile-toggle {
    width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--b-blue-deep); color: #ffffff;
    align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 10px 24px rgba(58, 95, 222, 0.35);
}
body.lms-b .dashboard-overlay { background: rgba(26, 26, 26, 0.45); }

/* ---------- The blue band: every page's top bar (title in large white type, yellow label) ---------- */
body.lms-b .dashboard-topbar {
    position: relative;
    top: auto;
    z-index: 2;
    min-height: 0;
    padding: 34px 40px 40px;
    border-bottom: 0;
    color: #ffffff;
    background-color: var(--b-blue-deep);
    background-image: var(--b-waves);
    background-size: cover;
    background-position: center;
    backdrop-filter: none;
    align-items: flex-end;
    gap: 16px;
}
body.lms-b .dashboard-topbar > div:first-child::before {
    content: "Student portal";
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 6px 14px 6px 12px; border-radius: 999px; background: var(--b-sun); color: var(--b-ink);
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
body.lms-b .dashboard-topbar p, body.lms-b .dashboard-topbar .fw-semibold,
body.lms-b .dashboard-topbar h1, body.lms-b .dashboard-topbar h2, body.lms-b .dashboard-topbar h3 {
    color: #ffffff; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; margin: 0;
}
body.lms-b .dashboard-topbar small, body.lms-b .dashboard-topbar .small, body.lms-b .dashboard-topbar .text-muted {
    color: #ffffff !important; opacity: 0.95; font-size: 0.95rem; font-weight: 400;
}
body.lms-b .dashboard-topbar .btn {
    background: #ffffff; color: var(--b-blue-deep) !important; border: 0; border-radius: 999px; min-height: 44px; padding: 10px 20px;
    font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
    display: inline-flex; align-items: center;
}
body.lms-b .dashboard-topbar .btn:hover { background: var(--b-sun); color: var(--b-ink) !important; }
body.lms-b .dashboard-content > .container, body.lms-b .dashboard-content > .container-fluid { padding-top: 32px !important; }

/* ---------- Course home, My lessons and the opening screen: the band carries the welcome ---------- */
body.lms-b.lmsb-hero-page .dashboard-topbar { padding-bottom: 0; align-items: center; }
body.lms-b.lmsb-hero-page .dashboard-topbar > div:first-child::before { display: none; }
body.lms-b.lmsb-hero-page .dashboard-topbar p, body.lms-b.lmsb-hero-page .dashboard-topbar .fw-semibold {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.95;
}
body.lms-b .sh-wrap, body.lms-b .sh-opening { padding-top: 0; }
body.lms-b .sh-wrap { max-width: 1120px; }
body.lms-b .sh-opening { max-width: 760px; }

/* The band continues edge to edge behind the hero (and the My lessons / Course home switch) */
body.lms-b .sh-hero, body.lms-b .sh-wrap > .sh-switch { position: relative; isolation: isolate; }
body.lms-b .sh-hero::before, body.lms-b .sh-wrap > .sh-switch::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw;
    background-color: var(--b-blue-deep); background-image: var(--b-waves); background-size: 1440px 600px; background-position: center bottom;
}
body.lms-b .sh-wrap > .sh-switch { display: flex; width: auto; background: transparent; border: 0; padding: 18px 0 0; margin: 0; gap: 8px; }
body.lms-b .sh-wrap > .sh-switch a {
    color: #ffffff; background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600;
}
body.lms-b .sh-wrap > .sh-switch a:hover { background: rgba(255, 255, 255, 0.26); color: #ffffff; }
body.lms-b .sh-wrap > .sh-switch a.is-on { background: #ffffff; color: var(--b-blue-deep); }

body.lms-b .sh-hero {
    background: transparent; color: #ffffff; border-radius: 0; margin: 0 0 0; padding: 26px 0 92px;
    grid-template-columns: 1fr; gap: 24px;
}
body.lms-b .sh-course + .sh-course .sh-hero { margin-top: 40px; }
@media (min-width: 768px) {
    body.lms-b .sh-hero { grid-template-columns: 1fr auto; padding: 34px 0 104px; }
}
body.lms-b .sh-hero .sh-kicker {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px 6px 12px; border-radius: 999px;
    background: var(--b-sun); color: var(--b-ink); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; opacity: 1;
}
body.lms-b .sh-hero .sh-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b-ink); }
body.lms-b .sh-hero h1 {
    color: #ffffff; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 14px;
    text-wrap: balance;
}
body.lms-b .sh-hero .sh-sub, body.lms-b .sh-opening .sh-when { color: #ffffff; font-size: 1.08rem; line-height: 1.6; max-width: 680px; }
body.lms-b .sh-opening .sh-when { font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.4; }
body.lms-b .sh-chips { gap: 8px; margin-top: 18px; }
body.lms-b .sh-chip {
    background: rgba(255, 255, 255, 0.14); color: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
    padding: 6px 14px; font-size: 0.84rem; font-weight: 500;
}
body.lms-b .sh-ring {
    width: 148px; height: 148px; justify-self: start;
    background: conic-gradient(var(--b-sun) calc(var(--p) * 1%), rgba(255, 255, 255, 0.28) 0);
}
@media (min-width: 768px) { body.lms-b .sh-ring { justify-self: end; } }
body.lms-b .sh-ring > div { width: 116px; height: 116px; background: #ffffff; box-shadow: 0 10px 30px rgba(26, 26, 26, 0.18); }
body.lms-b .sh-ring strong { font-size: 2rem; font-weight: 800; color: var(--b-blue-deep); }
body.lms-b .sh-ring span { font-size: 0.78rem; color: var(--b-muted); font-weight: 500; }

/* The first card after the band rises over its lower edge, as on the registration page */
body.lms-b .sh-hero + * { position: relative; z-index: 1; margin-top: -64px; }
body.lms-b .sh-opening .sh-hero + .sh-count { margin-top: -64px; }

/* ---------- Cards ---------- */
body.lms-b .sh-card, body.lms-b .card, body.lms-b .card-shadow {
    background: #ffffff; border: 0; border-radius: var(--b-radius); box-shadow: var(--b-shadow);
}
body.lms-b .card > .card-header { background: var(--b-blue-deep); color: #ffffff; border: 0; border-radius: var(--b-radius) var(--b-radius) 0 0; padding: 16px 22px; font-weight: 700; }
body.lms-b .card > .card-header * { color: #ffffff; }
body.lms-b .card > .card-footer { background: var(--b-blue-tint); border: 0; border-radius: 0 0 var(--b-radius) var(--b-radius); }
body.lms-b .card-body { padding: 22px 24px; }
body.lms-b .sh-card { padding: 22px; }
@media (min-width: 768px) { body.lms-b .sh-card { padding: 28px 30px; } }
body.lms-b .sh-card h2, body.lms-b .card h2.h5, body.lms-b .card .h5 { font-size: 1.22rem; font-weight: 700; margin-bottom: 14px; }
body.lms-b .sh-card .sh-note, body.lms-b .sh-note { color: var(--b-muted); }
body.lms-b .sh-section-title { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 800; margin: 40px 0 16px; letter-spacing: -0.01em; }
body.lms-b .sh-grid { gap: 20px; }
body.lms-b .oc-row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }

/* Cards that matter most get the blue top, like the registration price card */
body.lms-b .oc-card, body.lms-b .sh-card.lmsb-top, body.lms-b #your-week > .card {
    overflow: hidden; box-shadow: inset 0 7px 0 var(--b-blue-deep), var(--b-shadow);
}
body.lms-b .oc-card .card-body { padding-top: 30px; }
body.lms-b .oc-tint { background: var(--b-blue-tint); border-radius: var(--b-radius-sm); }
body.lms-b .oc-next .h5, body.lms-b .oc-local { font-size: 1.45rem; font-weight: 800; color: var(--b-ink); }

/* Continue learning */
body.lms-b .sh-continue { background: var(--b-blue-tint); border-radius: 18px; padding: 16px 18px; gap: 16px; transition: background-color 0.15s ease, transform 0.15s ease; }
body.lms-b .sh-continue:hover { background: var(--b-blue-tint-2); transform: translateY(-1px); }
body.lms-b .sh-play { flex-basis: 56px; height: 56px; background: var(--b-teal); color: var(--b-ink); font-size: 1.15rem; box-shadow: 0 6px 18px rgba(72, 206, 211, 0.45); }
body.lms-b .sh-continue .sh-t { font-size: 1.05rem; font-weight: 700; }

/* Lesson and exercise lists */
body.lms-b .sh-item { border-radius: 16px; padding: 12px 14px; min-height: 56px; }
body.lms-b .sh-item:hover { background: var(--b-blue-tint); border-color: transparent; }
body.lms-b .sh-item .sh-t { font-weight: 500; }
body.lms-b .sh-dot { flex-basis: 34px; height: 34px; background: var(--b-blue-tint); color: var(--b-blue-deep); border: 0; font-weight: 700; }
body.lms-b .sh-item.is-done .sh-dot { background: var(--b-done); color: #ffffff; }

/* Quick links */
body.lms-b .sh-tiles { gap: 16px; }
body.lms-b .sh-tile {
    background: #ffffff; border: 0; border-radius: 20px; padding: 20px; box-shadow: var(--b-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.lms-b .sh-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--b-blue-deep), var(--b-shadow-lg); }
body.lms-b .sh-tile .sh-i {
    width: 48px; height: 48px; border-radius: 50%; background: var(--b-blue-tint); display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 12px;
}
body.lms-b .sh-tile strong { font-size: 1.02rem; font-weight: 700; }
body.lms-b .sh-tile span:not(.sh-i) { color: var(--b-muted); }

/* Opening screen countdown */
body.lms-b .sh-count { gap: 12px; }
body.lms-b .sh-count div { border: 0; border-radius: 20px; box-shadow: var(--b-shadow); padding: 16px 4px; background: #ffffff; }
body.lms-b .sh-count strong { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: var(--b-blue-deep); }
body.lms-b .sh-steps li::before { background: var(--b-blue-deep); color: #ffffff; flex-basis: 32px; height: 32px; }
body.lms-b .sh-foot { color: var(--b-muted); }

/* ---------- Buttons: round, teal with dark text, as on the website ---------- */
body.lms-b .btn {
    border-radius: 999px; font-weight: 600; padding: 10px 22px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
body.lms-b .btn-sm { min-height: 36px; padding: 6px 16px; font-size: 0.85rem; }
body.lms-b .btn-lg { min-height: 56px; padding: 14px 30px; }
body.lms-b .btn-primary, body.lms-b a.btn-primary, body.lms-b button.btn-primary {
    background: var(--b-teal); border: 0; color: var(--b-ink) !important; box-shadow: 0 6px 18px rgba(72, 206, 211, 0.35);
}
body.lms-b .btn-primary:not(.btn-sm) { text-transform: uppercase; letter-spacing: 0.06em; }
body.lms-b .btn-primary:hover, body.lms-b .btn-primary:focus { background: var(--b-teal-hover); color: var(--b-ink) !important; }
body.lms-b .btn-primary:active { transform: translateY(1px); }
body.lms-b .btn-primary:disabled, body.lms-b .btn-primary.disabled { background: #c5ced4; color: #4b5562 !important; box-shadow: none; }
body.lms-b .btn-outline-primary, body.lms-b a.btn-outline-primary {
    background: #ffffff; color: var(--b-blue-deep) !important; border: 1.5px solid var(--b-blue-deep);
}
body.lms-b .btn-outline-primary:hover, body.lms-b .btn-outline-primary:focus { background: var(--b-blue-tint); color: var(--b-blue-strong) !important; border-color: var(--b-blue-strong); }
body.lms-b .btn-secondary, body.lms-b a.btn-secondary { background: #ffffff; color: var(--b-ink) !important; border: 0; box-shadow: inset 0 0 0 1.5px #cdd6dc; }
body.lms-b .btn-outline-secondary, body.lms-b a.btn-outline-secondary { background: #ffffff; color: var(--b-ink-2) !important; border: 1.5px solid #b8c0cc; }
body.lms-b .btn-outline-secondary:hover { background: #f1f3f7; color: var(--b-ink) !important; }
body.lms-b .btn-outline-secondary:disabled, body.lms-b .btn-outline-secondary.disabled { opacity: 1; color: var(--b-muted) !important; background: #f1f3f7; border-color: #d5dbe3; }
body.lms-b .btn-success, body.lms-b a.btn-success { background: var(--b-done); border: 0; color: #ffffff !important; box-shadow: 0 6px 18px rgba(15, 138, 82, 0.3); }
body.lms-b .btn-success:not(.btn-sm) { text-transform: uppercase; letter-spacing: 0.06em; }
body.lms-b .btn-success:hover { background: #0b6e41; color: #ffffff !important; }
body.lms-b .btn-outline-success { border-radius: 999px; border-width: 1.5px; }
body.lms-b .btn-danger { background: var(--b-danger); border: 0; color: #ffffff !important; }
body.lms-b .btn-outline-danger { border-width: 1.5px; }
body.lms-b .btn-warning { background: var(--b-sun); border: 0; color: var(--b-ink) !important; }
body.lms-b .btn-info { background: var(--b-blue-deep); border: 0; color: #ffffff !important; }
body.lms-b .btn-dark, body.lms-b .btn-outline-dark:hover { background: #1d1e20; color: #ffffff !important; }
body.lms-b .btn-outline-dark { border-width: 1.5px; color: var(--b-ink) !important; }
body.lms-b .btn-link { color: var(--b-blue-deep) !important; min-height: 0; padding-left: 0; padding-right: 0; }
body.lms-b .btn:focus-visible { box-shadow: var(--b-ring); outline: 0; }

/* ---------- Forms ---------- */
body.lms-b .form-label { font-weight: 600; color: var(--b-ink); margin-bottom: 6px; }
body.lms-b .form-control, body.lms-b .form-select {
    min-height: 50px; border-radius: var(--b-radius-sm); border: 1.5px solid var(--b-field); font-size: 16px; color: var(--b-ink); background-color: #ffffff;
}
body.lms-b .form-control-sm, body.lms-b .form-select-sm { min-height: 40px; font-size: 0.92rem; }
body.lms-b textarea.form-control { min-height: 110px; }
body.lms-b .form-control:focus, body.lms-b .form-select:focus { border-color: var(--b-blue-deep); box-shadow: var(--b-ring); }
body.lms-b .form-control::placeholder { color: #6b6f75; }
body.lms-b .input-group > .form-control { border-radius: var(--b-radius-sm) 0 0 var(--b-radius-sm); }
body.lms-b .input-group > .btn { border-radius: 0 var(--b-radius-sm) var(--b-radius-sm) 0; min-height: 50px; }
body.lms-b .input-group > .btn-outline-secondary { border: 1.5px solid var(--b-field); border-left: 0; }
body.lms-b .form-check-input { width: 1.25em; height: 1.25em; border: 1.5px solid var(--b-field); }
body.lms-b .form-check-input:checked { background-color: var(--b-blue-deep); border-color: var(--b-blue-deep); }
body.lms-b .form-check-input:focus { box-shadow: var(--b-ring); }

/* ---------- Tables: tinted head, soft stripes, no lines between rows ---------- */
body.lms-b .table { --bs-table-bg: transparent; --bs-table-striped-bg: #f7f9fd; --bs-table-hover-bg: var(--b-blue-tint); color: var(--b-ink); border-collapse: separate; border-spacing: 0; }
body.lms-b .table > :not(caption) > * > * { border-bottom-width: 0; padding: 14px 12px; vertical-align: middle; }
body.lms-b .table > thead > tr > th {
    background: var(--b-blue-tint); color: var(--b-blue-strong); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
body.lms-b .table > thead > tr > th:first-child { border-radius: 12px 0 0 12px; }
body.lms-b .table > thead > tr > th:last-child { border-radius: 0 12px 12px 0; }
body.lms-b .table > tbody > tr:nth-child(even) > * { background: #f7f9fd; }
body.lms-b .table > tbody > tr:hover > * { background: var(--b-blue-tint); }
body.lms-b .table > :not(:first-child) { border-top: 0; }
body.lms-b .table-light { --bs-table-bg: var(--b-blue-tint); }

/* ---------- Tabs, pills, badges, alerts, progress ---------- */
body.lms-b .dashboard-tabs { gap: 8px; border: 0; }
body.lms-b .dashboard-tabs .nav-link, body.lms-b .nav-pills .nav-link, body.lms-b .nav-tabs .nav-link {
    border-radius: 999px; border: 0; background: #ffffff; color: var(--b-ink); font-weight: 600; min-height: 44px; padding: 10px 20px;
    box-shadow: inset 0 0 0 1.5px #d5dbe3;
}
body.lms-b .dashboard-tabs .nav-link:hover, body.lms-b .nav-pills .nav-link:hover, body.lms-b .nav-tabs .nav-link:hover { background: var(--b-blue-tint); color: var(--b-blue-strong); }
body.lms-b .dashboard-tabs .nav-link.active, body.lms-b .nav-pills .nav-link.active, body.lms-b .nav-tabs .nav-link.active {
    background: var(--b-blue-deep); color: #ffffff; box-shadow: 0 8px 22px rgba(58, 95, 222, 0.3);
}
body.lms-b .nav-tabs { border: 0; gap: 8px; }
body.lms-b .dashboard-tabs-content, body.lms-b .tab-content > .tab-pane > .card { border-radius: var(--b-radius); }
body.lms-b .badge { border-radius: 999px; font-weight: 600; padding: 0.42em 0.8em; letter-spacing: 0.01em; }
body.lms-b .badge.bg-primary { background: var(--b-blue-deep) !important; color: #ffffff; }
body.lms-b .badge.bg-info { background: var(--b-teal) !important; color: var(--b-ink) !important; }
body.lms-b .badge.bg-warning { background: var(--b-sun) !important; color: var(--b-ink) !important; }
body.lms-b .badge.bg-secondary { background: #5a6068 !important; }
body.lms-b .badge.bg-success { background: var(--b-done) !important; }
body.lms-b .alert { border: 0; border-radius: 18px; padding: 16px 20px; }
body.lms-b .alert-info, body.lms-b .alert-primary { background: var(--b-blue-tint); color: #1f3a99; }
body.lms-b .alert-success { background: #ecfdf5; color: #065f46; }
body.lms-b .alert-warning { background: var(--b-sun-tint); color: #5c4300; }
body.lms-b .alert-danger { background: #fdeceb; color: var(--b-danger); }
body.lms-b .alert-secondary, body.lms-b .alert-light { background: #f1f3f7; color: var(--b-ink-2); }
body.lms-b .progress { background: #e3e8f2; border-radius: 999px; }
body.lms-b .progress-bar, body.lms-b .progress-bar.bg-info, body.lms-b .progress-bar.bg-success { background-color: var(--b-teal) !important; border-radius: 999px; }
body.lms-b .list-group-item { border-color: transparent; }
body.lms-b .list-group-item + .list-group-item { margin-top: 4px; }
body.lms-b .list-group { gap: 0; }
body.lms-b .modal-content { border: 0; border-radius: var(--b-radius); box-shadow: var(--b-shadow-lg); }
body.lms-b .modal-header { background: var(--b-blue-deep); color: #ffffff; border: 0; border-radius: var(--b-radius) var(--b-radius) 0 0; }
body.lms-b .modal-header .modal-title, body.lms-b .modal-header h5 { color: #ffffff; }
body.lms-b .modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.9; }
body.lms-b .modal-footer { border: 0; }
body.lms-b details > summary { cursor: pointer; font-weight: 600; color: var(--b-blue-deep); }

/* The "new version" note and the Update card */
body.lms-b .lms-update-note, body.lms-b [data-lms-update-note] { border-radius: 18px; }

/* The student guide button (bottom right), in the website's black pill */
body.lms-b .student-help-launcher {
    background: #1d1e20 !important; box-shadow: 0 12px 30px rgba(26, 26, 26, 0.3) !important; min-height: 48px; padding: 0.7rem 1.1rem !important;
    letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem;
}
body.lms-b .student-help-launcher-icon { background: var(--b-sun) !important; color: var(--b-ink) !important; }

/* Footer inside the student pages */
body.lms-b .lmsb-footer { margin-top: 64px; }
.lmsb-copy { margin: 0; padding: 0 16px 26px; text-align: center; font-size: 0.85rem; color: #ffffff; opacity: 0.92; }

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
    body.lms-b .dashboard-topbar { padding: 22px 16px 26px; flex-direction: column; align-items: flex-start; }
    body.lms-b .dashboard-topbar > div:first-child::before { margin-bottom: 10px; font-size: 0.74rem; }
    body.lms-b .dashboard-topbar p, body.lms-b .dashboard-topbar .fw-semibold { font-size: 1.7rem; }
    body.lms-b.lmsb-hero-page .dashboard-topbar { padding: 16px 16px 0; flex-direction: row; align-items: center; }
    body.lms-b.lmsb-hero-page .dashboard-topbar > div:last-child { width: auto; }
    body.lms-b .dashboard-topbar .btn { min-height: 40px; padding: 8px 16px; font-size: 0.78rem; }
    body.lms-b .dashboard-content > .container, body.lms-b .dashboard-content > .container-fluid { padding-top: 20px !important; }
    body.lms-b .sh-hero { padding: 18px 0 76px; gap: 18px; }
    body.lms-b .sh-hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.3rem); }
    body.lms-b .sh-hero .sh-sub { font-size: 0.98rem; }
    body.lms-b .sh-ring { width: 120px; height: 120px; }
    body.lms-b .sh-ring > div { width: 94px; height: 94px; }
    body.lms-b .sh-ring strong { font-size: 1.6rem; }
    body.lms-b .sh-hero + * { margin-top: -52px; }
    body.lms-b .sh-opening .sh-hero + .sh-count { margin-top: -52px; }
    body.lms-b .sh-card { padding: 20px 18px; border-radius: 20px; }
    body.lms-b .sh-count { gap: 8px; }
    body.lms-b .sh-count div { border-radius: 16px; padding: 12px 2px; }
    body.lms-b .sh-tiles { gap: 12px; }
    body.lms-b .sh-tile { padding: 16px; }
    body.lms-b .table > :not(caption) > * > * { padding: 12px 10px; }
    body.lms-b .lmsb-footer { margin-top: 48px; padding-bottom: 72px; }
}

/* ====================================================================================================
   Public pages: welcome, student login, forgot and reset password
   ==================================================================================================== */
body.lms-b-public { min-height: 100vh; display: flex; flex-direction: column; }
body.lms-b-public > nav.navbar, body.lms-b-public .lmsb-old-title { display: none !important; }
body.lms-b-public > .container { flex: 1 0 auto; position: relative; z-index: 2; margin-top: -84px; padding-top: 0 !important; }
body.lms-b-public .card { box-shadow: var(--b-shadow-lg); }
body.lms-b-public .card-body { padding: 30px 32px !important; }
body.lms-b-public .card-body > h2:first-child, body.lms-b-public .card-body > h3:first-child { font-size: 1.6rem; font-weight: 800; }
body.lms-b-public .lmsb-footer { margin-top: 72px; }
body.lms-b-public .google-signin-wrap .text-muted { font-size: 0.85rem; letter-spacing: 0.12em; }
body.lms-b-public .firebase-google-btn { min-height: 50px; }

/* The header floats over the band (see-through, white links, reversed logo) until the page scrolls */
.lms-b .r26-hd-mode-hero { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
.lms-b .r26-hd-mode-hero .r26-hd-nav a, .lms-b .r26-hd-mode-hero .r26-hd-burger { transition: color 0.3s ease-in-out; }
.lms-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-nav a { color: #ffffff; }
.lms-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-burger { color: #ffffff; }
.lms-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-logo-normal { opacity: 0; }
.lms-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-logo-reversed { opacity: 1; }
.lms-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) :focus-visible { outline-color: #ffffff; }
.lms-b .r26-hd-nav a { text-decoration: none; }
.lms-b .r26-hd-help { color: #ffffff !important; text-decoration: none; }

.lmsb-band {
    color: #ffffff; text-align: center;
    background-color: var(--b-blue-deep); background-image: var(--b-waves); background-size: cover; background-position: center;
    padding: calc(91px + 40px) 16px 136px;
}
@media (min-width: 920px) { .lmsb-band { padding-top: calc(124px + 56px); padding-bottom: 148px; } }
.lmsb-band-inner { max-width: 1128px; margin: 0 auto; }
.lmsb-band h1 {
    color: #ffffff; margin: 0; font-size: clamp(2.1rem, 6vw, 4.25rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance;
}
.lmsb-lead { max-width: 640px; margin: 18px auto 0; font-size: 1.1rem; line-height: 1.6; color: #ffffff; text-wrap: balance; }
.lmsb-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px 6px 12px; border-radius: 999px;
    background: var(--b-sun); color: var(--b-ink); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}
.lmsb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b-ink); }
@media (max-width: 640px) {
    .lmsb-band { padding-bottom: 112px; }
    .lmsb-band h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .lmsb-lead { font-size: 1rem; margin-top: 14px; }
    body.lms-b-public > .container { margin-top: -72px; }
    body.lms-b-public .card-body { padding: 24px 20px !important; }
}

/* The welcome page: three choices as cards with a round icon */
.lmsb-choice-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--b-blue-tint); color: var(--b-blue-deep); }
.lmsb-choice-icon .lmsb-icon { width: 28px; height: 28px; }
.lms-b-public .lmsb-choice-note { color: var(--b-muted); font-size: 0.92rem; margin: -8px 0 18px; }

@media (prefers-reduced-motion: reduce) {
    body.lms-b *, body.lms-b *::before, body.lms-b *::after { transition: none !important; animation: none !important; }
}

/* Fixes after the first screenshots: white type on the blue band and footer beats the page's dark headings and blue links */
body.lms-b .lmsb-band h1, body.lms-b .sh-hero h1 { color: #ffffff; }
body.lms-b .r26-footer, body.lms-b .r26-footer h3, body.lms-b .r26-footer p, body.lms-b .r26-footer label, body.lms-b .r26-footer .r26-f-label { color: #ffffff; }
body.lms-b .r26-footer a, body.lms-b .r26-footer a:hover { color: #ffffff; }
body.lms-b .r26-f-label { letter-spacing: 0.24em; font-weight: 700; }
body.lms-b .r26-f-news button { color: #ffffff; }
body.lms-b .r26-f-news input { min-height: 0; }
/* Inside the student pages the footer sits next to the sidebar: keep the website's spacing from its edges */
body.lms-b .dashboard-main .r26-footer-inner { padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
@media (min-width: 920px) {
    body.lms-b .dashboard-main .r26-footer-inner { padding: 64px 48px 24px; }
    /* narrower than the website: icons and links get their own row instead of the website's fixed offsets */
    body.lms-b .dashboard-main .r26-f-social { grid-row: 2; margin-top: 30px !important; padding-left: 0 !important; }
    body.lms-b .dashboard-main .r26-f-links { grid-row: 2; margin-top: 30px !important; }
    body.lms-b .dashboard-main .r26-f-contact { grid-row: 1; }
}
body.lms-b .modal-header { background: var(--b-blue-deep) !important; color: #ffffff; }

/* Cher 10-04: no website footer inside the LMS (the rules above stay unused). One small quiet line ends every page. */
body.lms-b .lmsb-slim-foot { margin-top: 48px !important; padding: 20px 16px 28px !important; color: var(--b-muted) !important; font-size: 0.85rem; background: transparent; }
body.lms-b-public .lmsb-slim-foot { margin-top: 56px !important; }
@media (max-width: 767.98px) { body.lms-b .lmsb-slim-foot { padding-bottom: 88px !important; } }

/* Cher 10-04: Design B on every staff and admin page too. The band label names the portal. */
body.lms-b-staff .dashboard-topbar > div:first-child::before { content: "Staff portal"; }
body.lms-b-admin .dashboard-topbar > div:first-child::before { content: "Admin"; }
/* Staff and admin screens are dense (marking, studio, long tables, many filters): Design B colors and shapes,
   but the compact sizes they were built with, and a shorter band. */
body.lms-b-staff .dashboard-topbar, body.lms-b-admin .dashboard-topbar { padding: 22px 32px 26px; }
body.lms-b-staff .dashboard-topbar p, body.lms-b-staff .dashboard-topbar .fw-semibold,
body.lms-b-admin .dashboard-topbar p, body.lms-b-admin .dashboard-topbar .fw-semibold { font-size: clamp(1.4rem, 2.4vw, 2rem); }
body.lms-b-staff .dashboard-topbar > div:first-child::before, body.lms-b-admin .dashboard-topbar > div:first-child::before { margin-bottom: 8px; }
body.lms-b-staff .dashboard-topbar > div:last-child, body.lms-b-admin .dashboard-topbar > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
body.lms-b-staff .dashboard-topbar .btn, body.lms-b-admin .dashboard-topbar .btn { min-height: 38px; padding: 7px 16px; font-size: 0.78rem; }
body.lms-b-staff .btn, body.lms-b-admin .btn { min-height: 0; padding: 0.42rem 1rem; }
body.lms-b-staff .btn-sm, body.lms-b-admin .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.82rem; }
body.lms-b-staff .btn-primary:not(.btn-sm), body.lms-b-admin .btn-primary:not(.btn-sm),
body.lms-b-staff .btn-success:not(.btn-sm), body.lms-b-admin .btn-success:not(.btn-sm) { text-transform: none; letter-spacing: 0; }
body.lms-b-staff .form-control, body.lms-b-staff .form-select, body.lms-b-admin .form-control, body.lms-b-admin .form-select { min-height: 42px; font-size: 0.95rem; border-radius: 12px; }
body.lms-b-staff .form-control-sm, body.lms-b-staff .form-select-sm, body.lms-b-admin .form-control-sm, body.lms-b-admin .form-select-sm { min-height: 32px; font-size: 0.85rem; }
body.lms-b-staff .input-group > .btn, body.lms-b-admin .input-group > .btn { min-height: 42px; }
body.lms-b-staff .table > :not(caption) > * > *, body.lms-b-admin .table > :not(caption) > * > * { padding: 10px 10px; }
body.lms-b-staff .table-sm > :not(caption) > * > *, body.lms-b-admin .table-sm > :not(caption) > * > * { padding: 6px 8px; }
body.lms-b-staff .card-body, body.lms-b-admin .card-body { padding: 18px 20px; }
body.lms-b-staff .card, body.lms-b-staff .card-shadow, body.lms-b-admin .card, body.lms-b-admin .card-shadow { border-radius: 18px; }
@media (max-width: 767.98px) {
    body.lms-b-staff .dashboard-topbar, body.lms-b-admin .dashboard-topbar { padding: 18px 16px 20px; }
}

/* Pages whose header is ".topbar" (admin Practice Curriculum, AI Practice Insights, student practice): the same band */
body.lms-b .dashboard-main > .topbar {
    position: relative; color: #ffffff; padding: 22px 32px 26px; border: 0; margin: 0;
    background-color: var(--b-blue-deep); background-image: var(--b-waves); background-size: cover; background-position: center;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
}
body.lms-b .dashboard-main > .topbar > :first-child::before {
    content: "Student portal"; display: flex; width: max-content; margin-bottom: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--b-sun); color: var(--b-ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
body.lms-b-staff .dashboard-main > .topbar > :first-child::before { content: "Staff portal"; }
body.lms-b-admin .dashboard-main > .topbar > :first-child::before { content: "Admin"; }
body.lms-b .dashboard-main > .topbar h1, body.lms-b .dashboard-main > .topbar .h5 {
    color: #ffffff; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.15; margin: 0;
}
body.lms-b .dashboard-main > .topbar .btn { background: #ffffff; color: var(--b-blue-deep) !important; border: 0; }
@media (max-width: 767.98px) { body.lms-b .dashboard-main > .topbar { padding: 18px 16px 20px; } }

/* ====================================================================================================
   Cher 10-04: NO yellow pill labels. Labels on the blue band are plain white text: portal names in small
   spaced capitals, the greeting ("Welcome back, Nora") as a plain line above the headline. No pill, no dot.
   ==================================================================================================== */
body.lms-b .dashboard-topbar > div:first-child::before,
body.lms-b .dashboard-main > .topbar > :first-child::before,
.lmsb-eyebrow {
    display: block !important; width: auto !important; background: none !important; padding: 0 !important; border-radius: 0 !important;
    color: #ffffff !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.16em !important;
    text-transform: uppercase; margin: 0 0 10px !important; box-shadow: none !important;
}
.lmsb-eyebrow .lmsb-dot { display: none !important; }
.lmsb-band .lmsb-eyebrow { margin-bottom: 16px !important; }
body.lms-b .sh-hero .sh-kicker {
    display: block !important; background: none !important; padding: 0 !important; border-radius: 0 !important;
    color: #ffffff !important; font-size: 1.12rem !important; font-weight: 500 !important; letter-spacing: 0 !important;
    margin: 0 0 8px !important; opacity: 1 !important;
}
body.lms-b .sh-hero .sh-kicker::before { display: none !important; content: none !important; }
/* The side menu: the portal name as small spaced capitals under the logo */
body.lms-b .sidebar-role-pill {
    background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--b-blue-deep) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important;
    text-transform: uppercase; display: block !important; margin: 2px 22px 8px !important;
}
body.lms-b .sidebar-role-pill::before { display: none !important; content: none !important; }
@media (max-width: 767.98px) {
    body.lms-b .dashboard-topbar > div:first-child::before { font-size: 0.72rem !important; margin-bottom: 8px !important; }
    body.lms-b .sh-hero .sh-kicker { font-size: 1rem !important; }
}

/* Cher 10-04: no blue strip along the top of cards (weekly session, progress, Continue learning, This week).
   Every card is the same plain white rounded card. */
body.lms-b .oc-card, body.lms-b .sh-card.lmsb-top, body.lms-b #your-week > .card { box-shadow: var(--b-shadow) !important; }
body.lms-b .oc-card .card-body { padding-top: 22px; }

/* Course home, My lessons, opening screen: only the page name above the welcome (no second "Student portal" line) */
body.lms-b.lmsb-hero-page .dashboard-topbar > div:first-child::before { display: none !important; content: none !important; }

/* Collapsed side menu: the narrow rail shows icons only, so the portal name is hidden (it overflowed the rail) */
body.lms-b.sidebar-collapsed .sidebar-role-pill { display: none !important; }
@media (max-width: 767.98px) {
    /* the phone drawer always opens full width, so the name shows there */
    body.lms-b.sidebar-collapsed .sidebar-role-pill { display: block !important; }
}

/* Cher 10-04: NO colored accent lines on cards or boxes anywhere (left, top or right stripes). Boxes keep their
   soft tint; meaning stays in the words and badges (Pass/Fail, correct/incorrect). Inline styles are covered too. */
body.lms-b [style*="border-left: 4px"], body.lms-b [style*="border-left:4px"], body.lms-b [style*="border-left: 3px"],
body.lms-b [style*="border-left:3px"], body.lms-b [style*="border-left: 5px"], body.lms-b [style*="border-left:5px"],
body.lms-b [style*="border-top: 4px"], body.lms-b [style*="border-top:4px"],
body.lms-b .result-correct, body.lms-b .result-incorrect, body.lms-b .result-unanswered,
body.lms-b .question-card, body.lms-b .material-card, body.lms-b .subsection-instruction,
body.lms-b .border-start, body.lms-b .border-end { border-left-width: 0 !important; border-right-width: 0 !important; }
body.lms-b [style*="border-top: 4px"], body.lms-b [style*="border-top:4px"] { border-top-width: 0 !important; }
/* boxes that also had a 1px frame keep it all round */
body.lms-b [style*="border:1px"][style*="border-left:4px"], body.lms-b [style*="border: 1px"][style*="border-left: 4px"] { border-left: 1px solid #e2e8f0 !important; }
body.lms-b .card.border-start, body.lms-b .card.border-top { border: 0 !important; }

/* Logout page: the full website logo in the card (never the small icon alone), a blue spinner */
.lmsb-logout-logo { display: block; width: 177px; height: auto; margin: 4px auto 22px; }
body.lms-b .lmsb-spinner { color: var(--b-blue-deep); width: 2.4rem; height: 2.4rem; border-width: 0.25em; }
body.lms-b .lmsb-hide { display: none !important; }

/* Status badges and buttons that used solid yellow (levels, "Private", "Staff", counters, "Close"): a soft amber tint
   with dark amber text, so nothing on the page looks like the removed yellow labels (Cher 10-04). Contrast 7:1. */
body.lms-b .badge.bg-warning, body.lms-b .badge.text-bg-warning, body.lms-b .bg-warning { background: #fff1cc !important; color: #6b4300 !important; }
body.lms-b .btn-warning, body.lms-b a.btn-warning { background: #ffffff !important; color: #6b4300 !important; border: 1.5px solid #d9a21b !important; box-shadow: none !important; }
body.lms-b .btn-warning:hover { background: #fff1cc !important; }

/* Cher 10-04: the course facts under the title are not outlined chips. Each is a small white line icon and plain
   white text, in a row with generous spacing (no separators). */
body.lms-b .sh-chips { gap: 10px 26px; margin-top: 20px; }
body.lms-b .sh-chip.sh-fact {
    display: inline-flex; align-items: center; gap: 8px; background: none !important; box-shadow: none !important; padding: 0 !important;
    border-radius: 0; color: #ffffff; font-size: 0.95rem; font-weight: 500;
}
body.lms-b .sh-fact .lmsb-icon { width: 20px; height: 20px; color: #ffffff; opacity: 0.95; }
@media (max-width: 767.98px) { body.lms-b .sh-chips { gap: 8px 18px; } body.lms-b .sh-chip.sh-fact { font-size: 0.88rem; } }

/* ====================================================================================================
   Cher 10-04: the side menu matches the rest of the look.
   Top: a solid blue panel like the page bands, with the white logo and the portal name in small white capitals.
   Items: a blue circle with a white line icon (assets/js/brand_icons.js) instead of emoji; the page you are on is a
   blue pill whose icon turns white with blue lines.
   ==================================================================================================== */
body.lms-b .dashboard-sidebar { background: #ffffff; padding: 0; }
body.lms-b .dashboard-sidebar-header {
    background: var(--b-blue-deep); margin: 0; padding: 22px 16px 12px 20px; align-items: center;
}
body.lms-b .lmsb-side-logo { width: 150px; }
body.lms-b .sidebar-collapse-btn, body.lms-b .sidebar-expand-btn { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
body.lms-b .sidebar-collapse-btn:hover, body.lms-b .sidebar-expand-btn:hover { background: rgba(255, 255, 255, 0.3); color: #ffffff; }
body.lms-b .sidebar-role-pill {
    background: var(--b-blue-deep) !important; color: #ffffff !important; margin: 0 !important; padding: 0 20px 22px !important;
    font-size: 0.7rem !important; letter-spacing: 0.18em !important; opacity: 1;
}
body.lms-b .dashboard-sidebar-nav { padding: 14px 12px 8px; }
body.lms-b .sidebar-nav-section { margin: 14px 10px 6px; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--b-muted); }
body.lms-b .dashboard-sidebar-link { gap: 12px; padding: 7px 12px 7px 8px; min-height: 50px; font-size: 0.95rem; }
body.lms-b .sidebar-link-icon {
    width: 34px !important; min-width: 34px !important; height: 34px; font-size: 17px !important;
    display: inline-grid !important; place-items: center; background: none !important; border-radius: 50%;
}
body.lms-b .sidebar-link-icon .brand-ic { width: 34px; height: 34px; margin: 0; }
body.lms-b .sidebar-link-icon .brand-ic svg { width: 18px; height: 18px; }
body.lms-b .dashboard-sidebar-link:hover .brand-ic { background: var(--b-blue-strong); }
body.lms-b .dashboard-sidebar-link.is-active .sidebar-link-icon { background: none !important; width: 34px; height: 34px; }
body.lms-b .dashboard-sidebar-link.is-active .brand-ic { background: #ffffff; color: var(--b-blue-deep); }
body.lms-b .dashboard-sidebar-link.is-warn .brand-ic { background: #fdeceb; color: var(--b-danger); }
/* collapsed to icons: the blue panel holds only the small mark and the open button */
body.lms-b.sidebar-collapsed .dashboard-sidebar-header { padding: 18px 0 18px; justify-content: center; flex-direction: column; gap: 10px; }
body.lms-b.sidebar-collapsed .lmsb-side-mark { width: 34px; height: 34px; background: #ffffff; border-radius: 50%; padding: 4px; }
body.lms-b.sidebar-collapsed .dashboard-sidebar-nav { padding: 12px 0; }
body.lms-b.sidebar-collapsed .dashboard-sidebar-link { justify-content: center; padding: 6px 0; }
/* phone drawer: same panel */
@media (max-width: 767.98px) { body.lms-b .dashboard-sidebar-header { padding-top: 18px; } }

/* ====================================================================================================
   Cher 10-04: the Student Help Center (Guide panel) in the same look.
   Blue band header with wave lines and white type, round close button, rounded cards on the soft gray panel,
   teal progress, pill links (WhatsApp stays green so students recognize it). No divider lines.
   ==================================================================================================== */
body.lms-b .student-help-panel { background: var(--b-bg) !important; border-left: 0 !important; box-shadow: -18px 0 48px rgba(26, 26, 26, 0.18) !important; font-family: inherit; }
body.lms-b .student-help-header {
    background-color: var(--b-blue-deep); background-image: var(--b-waves); background-size: cover; background-position: center;
    border-bottom: 0 !important; padding: 26px 22px 24px !important; align-items: flex-start;
}
body.lms-b .student-help-kicker { color: #ffffff !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase; margin: 0 0 6px !important; }
body.lms-b .student-help-heading { color: #ffffff !important; font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.15; margin: 0 !important; }
body.lms-b .student-help-close {
    width: 40px; height: 40px; border-radius: 50% !important; background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important;
    font-size: 1.4rem; line-height: 1; display: grid; place-items: center; flex: 0 0 auto;
}
body.lms-b .student-help-close:hover { background: rgba(255, 255, 255, 0.32) !important; }
body.lms-b .student-help-controls, body.lms-b .student-help-progress-wrap { padding-left: 20px !important; padding-right: 20px !important; }
body.lms-b .student-help-controls { padding-top: 18px !important; }
body.lms-b .student-help-label { color: var(--b-ink) !important; font-weight: 600; }
body.lms-b .student-help-select { min-height: 50px; border-radius: 14px !important; border: 1.5px solid var(--b-field) !important; font-size: 16px; padding: 0 14px; }
body.lms-b .student-help-select:focus { border-color: var(--b-blue-deep) !important; box-shadow: var(--b-ring); outline: 0; }
body.lms-b .student-help-progress-label { color: var(--b-muted) !important; font-weight: 500; }
body.lms-b .student-help-progress-track { background: #e3e8f2 !important; height: 8px; }
body.lms-b .student-help-progress-bar { background: var(--b-teal) !important; }
body.lms-b .student-help-body { padding: 6px 16px 28px !important; }
body.lms-b .student-help-card { border: 0 !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: var(--b-shadow); padding: 18px 18px !important; }
body.lms-b .student-help-card + .student-help-card { margin-top: 12px; }
body.lms-b .student-help-title { font-size: 1.15rem; font-weight: 800; color: var(--b-ink); }
body.lms-b .student-help-subheading { font-size: 0.98rem; font-weight: 700; color: var(--b-ink) !important; }
body.lms-b .student-help-overview { color: var(--b-muted) !important; }
body.lms-b .student-help-list li, body.lms-b .student-help-checklist li { color: var(--b-ink-2) !important; }
body.lms-b .student-help-checkbox { accent-color: var(--b-blue-deep); width: 18px; height: 18px; }
body.lms-b .student-help-reset { border: 1.5px solid var(--b-blue-deep) !important; background: #ffffff !important; color: var(--b-blue-deep) !important; border-radius: 999px !important; padding: 4px 14px; font-weight: 600; }
body.lms-b .student-help-next-link {
    background: var(--b-teal) !important; color: var(--b-ink) !important; font-weight: 600; min-height: 44px;
    display: inline-flex; align-items: center; padding: 8px 18px; box-shadow: none; text-decoration: none;
}
body.lms-b .student-help-next-link:hover { background: var(--b-teal-hover) !important; }
body.lms-b .student-help-whatsapp-link { background: #0f7a45 !important; color: #ffffff !important; }
body.lms-b .student-help-whatsapp-link:hover { background: #0b5f35 !important; }
body.lms-b .student-help-overlay { background: rgba(26, 26, 26, 0.45) !important; }

/* Icons that sit inside a shape the page already draws (play button, lesson dots, quick-link circles, What's new,
   admin stat tiles): the icon fills that shape instead of drawing a second circle inside it. */
body.lms-b .sidebar-role-pill { width: 100% !important; align-self: stretch !important; box-sizing: border-box; }
body.lms-b .sh-play .brand-ic, body.lms-b .sh-dot .brand-ic { width: 100%; height: 100%; background: none; color: inherit; margin: 0; }
body.lms-b .sh-play .brand-ic svg { width: 42%; height: 42%; }
body.lms-b .sh-dot .brand-ic svg { width: 52%; height: 52%; }
body.lms-b .sh-tile .sh-i { background: none !important; width: auto; height: auto; }
body.lms-b .sh-tile .sh-i .brand-ic { width: 48px; height: 48px; }
body.lms-b .sh-tile .sh-i .brand-ic svg { width: 24px; height: 24px; }
body.lms-b .wn-icon .brand-ic, body.lms-b .stat-icon .brand-ic { width: 44px; height: 44px; }
body.lms-b .wn-icon .brand-ic svg, body.lms-b .stat-icon .brand-ic svg { width: 22px; height: 22px; }
body.lms-b .wn-icon:has(.brand-ic), body.lms-b .stat-icon:has(.brand-ic) { background: none !important; }