/* =========================================================================
   Enterprise (B2B) UI — mockup stylesheet
   Layered on top of the theme (style.css / course-list.css / custom.css).
   Goal: same design language (rounded corners, Inter, brand palette) but a
   calmer, lower-noise shell for enterprise learners.
   All classes are namespaced `.ent-` to avoid touching consumer styles.
   ========================================================================= */

:root {
    --ent-primary: #201A70;
    --ent-secondary: #3B30A4;
    --ent-ink: #1b1b2b;
    --ent-muted: #6a6a83;
    --ent-line: #ececf3;
    --ent-line-strong: #dedeeb;
    --ent-bg: #f6f6fb;
    --ent-surface: #ffffff;
    --ent-tint: #f1f1fb;
    --ent-radius: 16px;
    --ent-radius-sm: 10px;
    --ent-radius-pill: 999px;
    --ent-shadow-sm: 0 1px 2px rgba(24, 22, 60, .04), 0 2px 8px rgba(24, 22, 60, .05);
    --ent-shadow-md: 0 6px 24px rgba(24, 22, 60, .08);
    --ent-header-h: 74px;
}

/* ---- self-contained reset (replaces the theme's base styles) ----------- */
.ent-app,
.ent-app *,
.ent-app *::before,
.ent-app *::after { box-sizing: border-box; }

.ent-app {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ent-ink);
    background: var(--ent-bg);
    /* sticky footer: column layout + growing main pins the footer to the bottom
       even when the page content is short */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.ent-main { flex: 1 0 auto; }
.ent-footer { flex-shrink: 0; }

/* every heading/paragraph inherits Inter — no serif leakage.
   Wrapped in :where() so the reset is ZERO specificity: any component class
   (e.g. .ent-auth-alt { margin-top }) reliably wins without a fight. */
:where(.ent-app) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
    margin: 0;
    font-family: inherit;
}
:where(.ent-app) :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    color: inherit;
}
:where(.ent-app) :where(ul, ol) { list-style: none; padding: 0; }
:where(.ent-app) :where(img) { max-width: 100%; display: block; }
.ent-app button,
.ent-app input,
.ent-app select,
.ent-app textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}
.ent-app button { cursor: pointer; }
/* Reset bare, class-less buttons only — never override component button
   classes (.ent-btn / .ent-iconbtn), which was blanking the primary button. */
.ent-app button:not([class]) { background: none; border: 0; padding: 0; }

/* :where() keeps this at zero specificity so component classes (.ent-btn-primary
   sets its own white color) always win — an <a> button must not inherit ink. */
:where(.ent-app) a { text-decoration: none; color: inherit; }
/* the [hidden] attribute must win over component display rules (inline-flex/grid),
   otherwise hidden buttons/sections stay visible (e.g. quiz Next/Submit toggling) */
.ent-app [hidden] { display: none !important; }

/* ---- containers -------------------------------------------------------- */
.ent-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* =========================================================================
   HEADER  (minimal)
   ========================================================================= */
.ent-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--ent-header-h);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--ent-line);
}
.ent-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
    /* Fluid: use the full viewport width (overrides .ent-container's 1200px
       cap) so the header has room as more items are added. Keeps the 24px
       side padding from .ent-container. */
    max-width: none;
}

/* co-brand lockup: company logo | divider | powered-by TGD */
.ent-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ent-brand-logo {
    display: flex; align-items: center; justify-content: center;
    height: 40px; min-width: 40px; padding: 0 4px;
    font-weight: 800; font-size: 15px; letter-spacing: .2px;
    color: var(--ent-primary);
}
.ent-brand-logo img { max-height: 40px; width: auto; display: block; }
.ent-brand-divider { width: 1px; height: 26px; background: var(--ent-line-strong); }
.ent-brand-powered { display: flex; flex-direction: column; line-height: 1.15; }
.ent-brand-powered small { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ent-muted); }
.ent-brand-powered span { font-size: 12.5px; font-weight: 700; color: var(--ent-ink); }

/* primary nav */
/* Mobile burger (hidden on desktop) — opens the slide-from-left nav drawer. */
.ent-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--ent-ink);
    font-size: 20px;
    cursor: pointer;
}
.ent-burger:hover { background: var(--ent-tint); color: var(--ent-primary); }

/* Count badge on user-menu rows (mobile cart/notifications). */
.ent-pop-badge {
    margin-left: auto;
    background: var(--ent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
}
/* The cart/notifications rows live in the user menu only on mobile. */
.ent-pop-mobile { display: none; }

/* ---- mobile nav drawer (slide from left) ---- */
.ent-mnav-backdrop {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(16, 12, 60, 0.5);
    backdrop-filter: blur(2px);
}
.ent-mnav {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(300px, 84vw);
    background: var(--ent-surface, #fff);
    box-shadow: 18px 0 50px rgba(16, 12, 60, 0.25);
    padding: 18px 16px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
}
.ent-mnav-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ent-mnav-close {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--ent-tint); color: var(--ent-ink);
    display: grid; place-items: center;
    font-size: 16px; cursor: pointer;
}
.ent-mnav-links { display: flex; flex-direction: column; gap: 4px; }
.ent-mnav-links a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px;
    border-radius: 10px;
    font-size: 15px; font-weight: 600;
    color: var(--ent-ink);
}
.ent-mnav-links a i { font-size: 18px; color: var(--ent-muted); }
.ent-mnav-links a:hover,
.ent-mnav-links a.is-active { background: var(--ent-tint); color: var(--ent-primary); }
.ent-mnav-links a.is-active i { color: var(--ent-primary); }
.ent-mnav-enter-active, .ent-mnav-leave-active { transition: opacity .18s ease; }
.ent-mnav-enter-active .ent-mnav, .ent-mnav-leave-active .ent-mnav { transition: transform .2s ease; }
.ent-mnav-enter-from, .ent-mnav-leave-to { opacity: 0; }
.ent-mnav-enter-from .ent-mnav, .ent-mnav-leave-to .ent-mnav { transform: translateX(-24px); }

.ent-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.ent-nav a {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px;
    border-radius: var(--ent-radius-pill);
    font-size: 14.5px; font-weight: 600; color: var(--ent-muted);
    transition: background .15s ease, color .15s ease;
}
.ent-nav a i { font-size: 17px; }
.ent-nav a:hover { color: var(--ent-primary); background: var(--ent-tint); }
.ent-nav a.is-active { color: var(--ent-primary); background: var(--ent-tint); }

/* right cluster */
.ent-header-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* search */
.ent-search {
    display: flex; align-items: center; gap: 8px;
    height: 40px; width: 230px; padding: 0 14px;
    background: var(--ent-tint);
    border: 1px solid transparent;
    border-radius: var(--ent-radius-pill);
    color: var(--ent-muted);
    transition: border-color .15s, background .15s;
}
.ent-search:focus-within { background: #fff; border-color: var(--ent-line-strong); }
.ent-search i { font-size: 16px; }
.ent-search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 14px; color: var(--ent-ink); }

/* round icon buttons (notifications, language) */
.ent-iconbtn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; min-width: 40px; padding: 0 10px;
    border: 1px solid var(--ent-line);
    background: #fff;
    border-radius: var(--ent-radius-pill);
    color: var(--ent-ink);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.ent-iconbtn:hover { border-color: var(--ent-line-strong); background: var(--ent-tint); color: var(--ent-primary); }
.ent-iconbtn i { font-size: 18px; }
.ent-iconbtn .ent-lang-code { margin-left: 6px; font-size: 13px; }
.ent-iconbtn .ent-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: #e5484d; color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: var(--ent-radius-pill);
    border: 2px solid #fff;
}

/* user menu */
.ent-user { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 4px; border-radius: var(--ent-radius-pill); cursor: pointer; }
.ent-user:hover { background: var(--ent-tint); }
.ent-avatar { height: 34px; width: 34px; border-radius: 50%; object-fit: cover; background: var(--ent-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.ent-user-name { font-size: 14px; font-weight: 600; line-height: 1; }
.ent-user-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ent-muted); margin-top: 3px; }
.ent-user i { color: var(--ent-muted); font-size: 16px; }

/* dropdown shell (menus) */
.ent-pop { position: relative; }
.ent-pop-panel {
    /* Above sticky page furniture (e.g. the player's docked tab rail) —
       dropdowns always win over content. */
    z-index: 300;
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 240px;
    background: #fff; border: 1px solid var(--ent-line);
    border-radius: var(--ent-radius); box-shadow: var(--ent-shadow-md);
    padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.ent-pop.open .ent-pop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ent-pop-panel a, .ent-pop-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--ent-radius-sm);
    font-size: 14px; color: var(--ent-ink); cursor: pointer;
}
.ent-pop-panel a:hover, .ent-pop-item:hover { background: var(--ent-tint); color: var(--ent-primary); }
.ent-pop-panel a i { font-size: 17px; color: var(--ent-muted); }
.ent-pop-panel a:hover i { color: var(--ent-primary); }
.ent-pop-panel a.ent-pop-management { align-items: flex-start; }
.ent-pop-management > i { flex: 0 0 auto; margin-top: 1px; }
.ent-pop-management-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.ent-pop-management-copy > span { font-weight: 600; }
.ent-pop-management-copy small { color: var(--ent-muted); font-size: 11px; font-weight: 400; line-height: 1.35; }
.ent-pop-panel a.ent-pop-management:hover small { color: var(--ent-muted); }
.ent-pop-sep { height: 1px; background: var(--ent-line); margin: 6px 4px; }
.ent-pop-head { padding: 12px; display: flex; align-items: center; gap: 12px; }
.ent-pop-head .ent-avatar { height: 42px; width: 42px; font-size: 15px; }
.ent-pop-head .n { font-size: 14.5px; font-weight: 700; }
.ent-pop-head .e { font-size: 12.5px; color: var(--ent-muted); }
.ent-lang-active { margin-left: auto; color: var(--ent-primary) !important; font-size: 16px; }

/* =========================================================================
   FOOTER  (minimal)
   ========================================================================= */
.ent-footer {
    border-top: 1px solid var(--ent-line);
    background: #fff;
    margin-top: 64px;
}
.ent-footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-top: 22px; padding-bottom: 22px;
}
.ent-footer-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ent-muted); }
.ent-footer-brand strong { color: var(--ent-ink); font-weight: 700; }
.ent-footer-powered { display: inline-flex; align-items: center; gap: 7px; }
.ent-footer-logo { height: 26px; width: auto; display: block; }
.ent-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.ent-footer-links a { font-size: 13px; color: var(--ent-muted); }
.ent-footer-links a:hover { color: var(--ent-primary); }
.ent-footer-copy { font-size: 12.5px; color: var(--ent-muted); }

/* =========================================================================
   PAGE PRIMITIVES
   ========================================================================= */
.ent-main { padding-top: 40px; }
.ent-page-head { margin-bottom: 28px; }
.ent-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ent-secondary); margin-bottom: 8px; }
.ent-page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ent-page-sub { font-size: 15px; color: var(--ent-muted); margin-top: 8px; }

.ent-card {
    background: var(--ent-surface);
    border: 1px solid var(--ent-line);
    border-radius: var(--ent-radius);
    box-shadow: var(--ent-shadow-sm);
}

/* Instant tooltip — a visible bubble the moment you hover (the native title
   attribute needs a ~1s hover and is easy to miss). Usage:
   class="ent-tip" data-tip="Resume course". Add .ent-tip-left when the element
   sits near a right edge so the bubble grows leftward instead of centering. */
.ent-tip { position: relative; }
.ent-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    padding: 6px 11px; border-radius: 8px; background: var(--ent-ink); color: #fff;
    font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(20, 18, 31, .22);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease;
    z-index: 40;
}
.ent-tip::before {
    content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--ent-ink);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease;
    z-index: 40;
}
.ent-tip:hover::after, .ent-tip:hover::before,
a:focus-visible .ent-tip::after, a:focus-visible .ent-tip::before,
button:focus-visible.ent-tip::after, button:focus-visible.ent-tip::before { opacity: 1; visibility: visible; }
.ent-tip-left::after { left: auto; right: -6px; transform: none; }
/* .ent-tip-bottom flips the bubble below the element — for controls at the
   top of the viewport (player topbar) where an upward bubble would clip. */
.ent-tip-bottom::after { bottom: auto; top: calc(100% + 9px); }
.ent-tip-bottom::before { bottom: auto; top: calc(100% + 4px); border-top-color: transparent; border-bottom-color: var(--ent-ink); }
.ent-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px;
    border-radius: var(--ent-radius-pill);
    font-size: 14.5px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .12s ease, box-shadow .15s, background .15s;
}
.ent-btn i { font-size: 17px; }
.ent-btn-primary { background: var(--ent-primary); color: #fff; }
.ent-btn-primary:hover { background: #1a1560; color: #fff; box-shadow: 0 8px 20px rgba(32,26,112,.28); transform: translateY(-1px); }
.ent-btn-ghost { background: #fff; color: var(--ent-ink); border-color: var(--ent-line-strong); }
.ent-btn-ghost:hover { border-color: var(--ent-primary); color: var(--ent-primary); }
.ent-btn-block { width: 100%; }

/* =========================================================================
   AUTH  (side-by-side login)
   ========================================================================= */
.ent-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    font-family: "Inter", sans-serif;
    background: var(--ent-surface);
}
/* left brand panel */
.ent-auth-aside {
    position: relative;
    display: flex; flex-direction: column;
    padding: 48px;
    color: #fff;
    background: linear-gradient(215deg, var(--ent-secondary) 0%, var(--ent-primary) 100%);
    overflow: hidden;
}
.ent-auth-aside::before,
.ent-auth-aside::after {
    content: ""; position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%);
}
.ent-auth-aside::before { width: 460px; height: 460px; top: -140px; right: -120px; }
.ent-auth-aside::after { width: 320px; height: 320px; bottom: -120px; left: -80px; opacity: .7; }
.ent-auth-aside > * { position: relative; z-index: 1; }
.ent-auth-cologo { display: flex; align-items: center; gap: 14px; margin-bottom: auto; }
.ent-auth-cologo .box {
    height: 52px; min-width: 52px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px; font-weight: 800; font-size: 18px; color: #fff;
}
.ent-auth-cologo .box img { max-height: 40px; }
.ent-auth-colabel small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ent-auth-colabel span { font-size: 15px; font-weight: 700; }
.ent-auth-pitch { max-width: 420px; margin: 40px 0; }
.ent-auth-pitch h2 { font-size: 34px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
.ent-auth-pitch p { font-size: 15.5px; line-height: 1.6; opacity: .82; margin-top: 16px; }
.ent-auth-points { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.ent-auth-point { display: flex; align-items: center; gap: 12px; font-size: 14.5px; opacity: .95; }
.ent-auth-point i { display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 15px; }
.ent-auth-foot { font-size: 12.5px; opacity: .6; display: flex; align-items: center; gap: 8px; }

/* right form panel */
.ent-auth-main { display: flex; flex-direction: column; padding: 40px 48px; }
.ent-auth-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ent-auth-poweredby { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 12px; color: var(--ent-muted); }
.ent-auth-poweredby strong { color: var(--ent-ink); }
/* Enterprise lockup (stacked ~2.09:1) on the auth screen: full-size in the
   aside when no org co-brand claims the slot, small beside "Powered by". */
.ent-auth-brandlogo { height: 72px; width: auto; display: block; }
.ent-auth-poweredby-logo { height: 36px; width: auto; display: block; }
.ent-auth-form-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ent-auth-form { width: 100%; max-width: 380px; }
.ent-auth-form h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.ent-auth-form .lede { font-size: 14.5px; color: var(--ent-muted); margin-top: 8px; margin-bottom: 30px; }

.ent-field { margin-bottom: 18px; }
.ent-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ent-ink); margin-bottom: 8px; }
.ent-input-wrap { position: relative; display: flex; align-items: center; }
.ent-input-wrap > i { position: absolute; left: 16px; font-size: 17px; color: var(--ent-muted); pointer-events: none; }
.ent-input {
    width: 100%; height: 50px;
    padding: 0 16px 0 46px;
    border: 1px solid var(--ent-line-strong);
    border-radius: var(--ent-radius-sm);
    font-size: 14.5px; color: var(--ent-ink);
    background: #fff; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ent-input:focus { border-color: var(--ent-primary); box-shadow: 0 0 0 4px rgba(32,26,112,.09); }
/* Override the left-icon rule (.ent-input-wrap > i, specificity 0-1-1): the eye
   sits on the RIGHT, must clear `left`, and must be clickable (parent icon sets
   pointer-events:none). Selector is 0-2-1 so it reliably wins. */
.ent-input-wrap > i.ent-input-eye { left: auto; right: 14px; pointer-events: auto; cursor: pointer; }
.ent-field-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 26px; }
.ent-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ent-muted); cursor: pointer; }
.ent-check input { width: 16px; height: 16px; accent-color: var(--ent-primary); }
.ent-link { font-size: 13.5px; font-weight: 600; color: var(--ent-primary); }
.ent-link:hover { text-decoration: underline; }
.ent-auth-alt { text-align: center; font-size: 13.5px; color: var(--ent-muted); margin-top: 40px; }
.ent-pw-reqs { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ent-pw-reqs li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ent-muted); }
.ent-pw-reqs li i { color: #2fb178; font-size: 14px; }

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.ent-grid { display: grid; gap: 20px; }

/* ---- dashboard analytics panels --------------------------------------- */
.ent-panel { padding: 22px 24px; }
.ent-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ent-panel-head h3 { font-size: 17px; font-weight: 800; }
.ent-panel-head p { font-size: 13px; color: var(--ent-muted); margin-top: 3px; }
.ent-panel-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ent-line); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ent-muted); }
.ent-panel-foot i { font-size: 16px; }
.ent-panel-foot strong { color: var(--ent-ink); }

/* Learning Progress */
.ent-lp-overall { text-align: right; line-height: 1; flex-shrink: 0; }
.ent-lp-overall-num { font-size: 30px; font-weight: 800; color: var(--ent-primary); letter-spacing: -.02em; }
.ent-lp-overall-label { display: block; font-size: 12px; color: var(--ent-muted); margin-top: 6px; }
.ent-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.ent-metric { display: flex; flex-direction: column; gap: 9px; }
.ent-metric-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ent-metric-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ent-muted); }
.ent-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.ent-swatch-assigned { background: var(--ent-secondary); }
.ent-swatch-done { background: #2fb178; }
.ent-swatch-prog { background: var(--ent-primary); }
.ent-swatch-none { background: var(--ent-line-strong); }
.ent-stackbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--ent-line); }
.ent-stackbar > span { display: block; height: 100%; }
.ent-stackbar .seg-done { background: #2fb178; }
.ent-stackbar .seg-prog { background: var(--ent-primary); }
.ent-stackbar .seg-none { background: var(--ent-line-strong); }

/* Learning Hours */
.ent-hours-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ent-hours-item { display: flex; flex-direction: column; gap: 7px; }
.ent-hours-num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ent-hours-num small { font-size: 13px; font-weight: 600; color: var(--ent-muted); margin-left: 4px; }
.ent-hours-label { font-size: 12.5px; color: var(--ent-muted); }

/* Performance */
.ent-perf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ent-perf-big { display: flex; flex-direction: column; gap: 7px; }
.ent-perf-num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ent-primary); }
.ent-perf-label { font-size: 12.5px; color: var(--ent-muted); }
.ent-perf-foot { justify-content: flex-start; gap: 22px; }
.ent-cols { grid-template-columns: 2fr 1fr; align-items: start; }
.ent-cols-2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.ent-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ent-section-head h3 { font-size: 18px; font-weight: 800; margin: 0; }
/* Head action LINKS only — :not(.ent-btn) keeps these hands off anchor
   buttons, whose primary variant this rule was blanking (indigo-on-indigo:
   its (0,1,1) specificity beat .ent-btn-primary's white label). */
.ent-section-head a:not(.ent-btn) { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ent-primary); }
.ent-section-head a:not(.ent-btn) i { font-size: 15px; }
/* Panel-head action links ("Review all", "View course") — same treatment as
   section-head links, vertically centered against the heading. */
.ent-panel-head a:not(.ent-btn) { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ent-primary); white-space: nowrap; margin-top: 2px; }
.ent-panel-head a:not(.ent-btn) i { font-size: 15px; }

.ent-progress { height: 7px; border-radius: 999px; background: var(--ent-line); overflow: hidden; }
.ent-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ent-secondary), var(--ent-primary)); }

.ent-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; display: inline-block; }

/* ---- Continue-learning: featured box + queue --------------------------- */
.ent-continue { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
/* Grid items default to min-width:auto, so a long nowrap queue title imposes
   its full text width as the card's minimum — inverting the column ratio on
   desktop and forcing sideways overflow on mobile. Let the cards shrink so
   the title ellipsis can actually engage. */
.ent-continue > * { min-width: 0; }
.ent-queue-row { min-width: 0; }

/* featured box (left) with a clear Continue button */
.ent-feature { display: flex; flex-direction: column; overflow: hidden; }
.ent-feature-media { position: relative; aspect-ratio: 16 / 7; background: var(--ent-tint); }
.ent-feature-media img { width: 100%; height: 100%; object-fit: cover; }

/* Square cover art (platform standard: 1:1, 600x600) inside a wide slot:
   the low-res blurred cover fills the frame, the square art sits contained.
   Apply alongside the slot's own class (e.g. ent-feature-media). */
.ent-sq-fill { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.ent-sq-fill::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(26px) saturate(1.12); background: rgba(22, 17, 64, 0.22); }
.ent-sq-fill > img { position: relative; width: auto; height: 100%; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 8px 26px rgba(16, 12, 60, 0.28)); }
.ent-feature-pill {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: var(--ent-radius-pill);
    background: rgba(255,255,255,.92); color: var(--ent-primary);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: var(--ent-shadow-sm);
}
.ent-feature-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.ent-feature-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.ent-feature-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ent-muted); }
.ent-feature-prog { display: flex; align-items: center; gap: 12px; }
.ent-feature-prog .ent-progress { flex: 1; }
.ent-feature-pct { font-size: 12.5px; font-weight: 700; color: var(--ent-primary); white-space: nowrap; }
.ent-feature-btn { margin-top: 4px; }

/* queue (right) */
.ent-queue { padding: 20px 22px; display: flex; flex-direction: column; }
.ent-queue-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ent-muted); margin-bottom: 8px; }
.ent-queue-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.ent-queue-row + .ent-queue-row { border-top: 1px solid var(--ent-line); }
.ent-queue-thumb { height: 52px; width: 52px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--ent-tint); }
.ent-queue-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ent-queue-title { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-queue-prog { display: flex; align-items: center; gap: 10px; }
.ent-queue-prog .ent-progress { flex: 1; height: 6px; }
.ent-queue-pct { font-size: 12px; font-weight: 700; color: var(--ent-primary); }
.ent-queue-meta { font-size: 12px; color: var(--ent-muted); }
.ent-queue-arrow { color: var(--ent-muted); font-size: 18px; flex-shrink: 0; transition: transform .15s, color .15s; }
.ent-queue-row:hover .ent-queue-arrow { color: var(--ent-primary); transform: translateX(3px); }
.ent-queue-row:hover .ent-queue-title { color: var(--ent-primary); }
/* Hovering anywhere on the row surfaces the arrow's action tooltip. */
.ent-queue-row:hover .ent-tip::after, .ent-queue-row:hover .ent-tip::before { opacity: 1; visibility: visible; }

/* announcement / provider card */
.ent-provider { padding: 22px; }
.ent-provider-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ent-secondary); margin-bottom: 14px; }
.ent-provider h4 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.ent-provider p { font-size: 13.5px; color: var(--ent-muted); line-height: 1.55; margin: 0; }

.ent-empty { padding: 40px; text-align: center; color: var(--ent-muted); }

/* =========================================================================
   COURSES (My Courses list)
   ========================================================================= */

/* Parent tabs: In Progress / Completed (underline baseline governs the list) */
.ent-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ent-line); margin-bottom: 24px; }
.ent-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 6px 15px; margin-bottom: -1px;
    font-size: 15px; font-weight: 700; color: var(--ent-muted);
    background: none; border: 0; cursor: pointer;
    transition: color .15s;
}
.ent-tab:hover { color: var(--ent-ink); }
.ent-tab.is-active { color: var(--ent-primary); }
.ent-tab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2.5px; border-radius: 2px; background: var(--ent-primary);
}
.ent-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: var(--ent-radius-pill);
    background: var(--ent-tint); color: var(--ent-muted);
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ent-tab.is-active .ent-tab-count { background: var(--ent-primary); color: #fff; }

/* Toolbar */
.ent-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.ent-toolbar-search {
    flex: 1; min-width: 220px;
    display: flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 15px;
    background: #fff; border: 1px solid var(--ent-line-strong);
    border-radius: var(--ent-radius-sm); color: var(--ent-muted);
    transition: border-color .15s, box-shadow .15s;
}
.ent-toolbar-search:focus-within { border-color: var(--ent-primary); box-shadow: 0 0 0 4px rgba(32,26,112,.08); }
.ent-toolbar-search i { font-size: 17px; }
.ent-toolbar-search input { border: 0; outline: none; background: transparent; width: 100%; font-size: 14px; color: var(--ent-ink); }

.ent-select {
    /* Fixed width so the box hugs its label instead of ballooning to the
       widest <option>; long option text is truncated with an ellipsis. */
    width: 190px;
    height: 44px; padding: 0 36px 0 14px;
    border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 14px; font-weight: 500; color: var(--ent-ink);
    text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    transition: border-color .15s;
}
.ent-select:hover { border-color: var(--ent-primary); }
.ent-select:focus { outline: none; border-color: var(--ent-primary); box-shadow: 0 0 0 4px rgba(32,26,112,.08); }

/* favorites toggle */
.ent-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ent-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ent-toggle-track {
    position: relative; display: block; flex: 0 0 40px; width: 40px; height: 23px; border-radius: 999px;
    background: var(--ent-line-strong); transition: background .18s;
}
.ent-toggle-track::after {
    content: ""; position: absolute; top: 2.5px; left: 2.5px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s;
}
.ent-toggle-input:checked + .ent-toggle-track { background: var(--ent-primary); }
.ent-toggle-input:checked + .ent-toggle-track::after { transform: translateX(17px); }
.ent-toggle-text { font-size: 13.5px; font-weight: 500; color: var(--ent-ink); }

.ent-toolbar-clear {
    display: inline-flex; align-items: center; gap: 6px;
    height: 44px; padding: 0 16px;
    border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm);
    background: #fff; color: var(--ent-muted);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ent-toolbar-clear:hover { border-color: var(--ent-primary); color: var(--ent-primary); }
.ent-toolbar-clear i { font-size: 15px; }

.ent-toolbar-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ent-toolbar-sort-label { font-size: 13px; color: var(--ent-muted); white-space: nowrap; }

/* Mobile filters: the inline controls (.ent-toolbar-adv) collapse behind a
   "Filters" toggle with an active-count badge; the sheet stacks them
   full-width. Desktop never sees either. */
/* Sized to sit flush beside .ent-select (44px / same border + radius). */
.ent-filterbtn { display: none; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm); background: #fff; font-size: 14px; font-weight: 500; color: var(--ent-ink); }
.ent-filterbtn[aria-expanded="true"] { border-color: var(--ent-primary); color: var(--ent-primary); background: var(--ent-tint); }
.ent-filterbtn i { font-size: 16px; }
.ent-filterbtn-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ent-radius-pill); background: var(--ent-primary); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ent-filter-sheet { display: grid; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--ent-line); border-radius: var(--ent-radius); margin: -12px 0 24px; }
.ent-filter-sheet .ent-select { width: 100%; }
.ent-filter-sheet-clear { justify-content: center; }
@media (min-width: 641px) {
    .ent-filter-sheet { display: none; }
}

.ent-course-count { font-size: 13.5px; color: var(--ent-muted); margin-bottom: 18px; }
.ent-course-count strong { color: var(--ent-ink); }

/* Grid of course cards */
.ent-course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1280px) {
    .ent-course-grid { grid-template-columns: repeat(3, 1fr); }
}

.ent-course-card {
    display: flex; flex-direction: column;
    background: var(--ent-surface); border: 1px solid var(--ent-line);
    border-radius: var(--ent-radius); overflow: hidden;
    box-shadow: var(--ent-shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ent-course-card:hover { transform: translateY(-3px); box-shadow: var(--ent-shadow-md); border-color: var(--ent-line-strong); }

.ent-cc-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--ent-tint); }
.ent-cc-media img { width: 100%; height: 100%; object-fit: cover; }
.ent-cc-cat {
    position: absolute; top: 12px; left: 12px;
    /* never run under the top-right favorite/heart control */
    max-width: calc(100% - 66px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 5px 11px; border-radius: var(--ent-radius-pill);
    background: rgba(255,255,255,.94); color: var(--ent-primary);
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    box-shadow: var(--ent-shadow-sm);
}
.ent-cc-done {
    /* bottom-left overlay so it never collides with the top-row badges */
    position: absolute; bottom: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: var(--ent-radius-pill);
    background: #2fb178; color: #fff; font-size: 11px; font-weight: 700;
    box-shadow: var(--ent-shadow-sm);
}
.ent-cc-done i { font-size: 13px; }

.ent-cc-body { display: flex; flex-direction: column; padding: 18px 18px 18px; flex: 1; }
.ent-cc-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ent-cc-title a:hover { color: var(--ent-primary); }
/* Card meta rows (My Courses + Marketplace): counts row, then level row, then
   creator line. Gap-separated — no dot separators, which strand on wrapped
   lines in narrow cards. Shared here so every card speaks the same language. */
.ent-cc-meta { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; font-size: 12.5px; color: var(--ent-muted); }
.ent-cc-meta + .ent-cc-meta { margin-top: 5px; }
.ent-cc-meta > span { display: inline-flex; align-items: center; white-space: nowrap; }
.ent-cc-meta i { font-size: 14px; vertical-align: -2px; margin-right: 2px; }
.ent-cc-creator { font-size: 12.5px; color: var(--ent-muted); margin-top: 6px; }

.ent-cc-foot { margin-top: auto; padding-top: 16px; }
.ent-cc-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ent-cc-prog .ent-progress { flex: 1; }
.ent-cc-pct { font-size: 12.5px; font-weight: 700; color: var(--ent-primary); white-space: nowrap; }
.ent-cc-pct-done { color: #2fb178; display: inline-flex; align-items: center; gap: 4px; }
.ent-cc-pct-done i { font-size: 14px; }
.ent-cc-btn { height: 42px; }
.ent-cc-btn + .ent-cc-btn { margin-top: 8px; }

/* =========================================================================
   COURSE SHOW (enrolled-learner course detail — no sales/social noise)
   ========================================================================= */
.ent-cs-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ent-muted); margin-bottom: 14px; }
.ent-cs-breadcrumb a:hover { color: var(--ent-primary); }
.ent-cs-breadcrumb i { font-size: 14px; }

.ent-cs-head { margin-bottom: 28px; }
.ent-cs-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ent-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--ent-radius-pill);
    background: var(--ent-tint); color: var(--ent-primary);
    font-size: 12px; font-weight: 700;
}
.ent-chip i { font-size: 13px; }
.ent-chip-assigned { background: #eaf7f1; color: #218a63; }
.ent-chip-purchased { background: #eef2ff; color: #3538cd; }
.ent-cs-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
.ent-cs-desc { font-size: 15px; color: var(--ent-muted); line-height: 1.6; max-width: 760px; }
.ent-cs-metarow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; color: var(--ent-muted); }
.ent-cs-metarow span { display: inline-flex; align-items: center; gap: 7px; }
.ent-cs-metarow i { font-size: 15px; color: var(--ent-secondary); }
/* Topic tags — a wrapping row of light pills; scales cleanly to many categories. */
.ent-cs-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ent-cs-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--ent-radius-pill); border: 1px solid var(--ent-line-strong); background: #fff; color: var(--ent-ink); font-size: 12px; font-weight: 600; }
.ent-cs-cat i { font-size: 12px; color: var(--ent-secondary); }

.ent-cs-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
/* Same min-content trap as the dashboard queue: grid items default to
   min-width:auto, so nowrap lesson/section titles set the column's minimum
   width and overflow phones once the grid stacks. */
.ent-cs-grid > * { min-width: 0; }

/* Mobile sticky CTA — hosts the sidebar's primary action once the sidebar
   stacks below the fold (shown ≤860px). */
.ent-cs-stickybar { display: none; }

/* sticky section nav */
.ent-cs-nav { display: flex; gap: 6px; border-bottom: 1px solid var(--ent-line); margin-bottom: 24px; position: sticky; top: var(--ent-header-h); background: var(--ent-bg); z-index: 5; }
.ent-cs-nav a { padding: 0 4px 14px; font-size: 14.5px; font-weight: 700; color: var(--ent-muted); position: relative; }
.ent-cs-nav a:hover { color: var(--ent-ink); }
.ent-cs-nav a.is-active { color: var(--ent-primary); }
.ent-cs-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--ent-primary); }

/* The main column is one long scroll of prose (What you'll learn →
   Curriculum → Requirements → Reviews). Without a boundary the next heading
   reads as part of the previous section, so each section after the first
   opens with a hairline and real air above it. Adjacent-sibling rather than
   :not(:first-child) — Vue leaves comment placeholders where a v-if section
   is absent, and `+` ignores them. */
.ent-cs-section { margin-bottom: 40px; }
.ent-cs-section + .ent-cs-section {
    border-top: 1px solid var(--ent-line-strong);
    padding-top: 40px;
}
.ent-cs-section > h3 {
    font-size: 19px; font-weight: 800; margin-bottom: 14px;
    letter-spacing: -.01em;
}
.ent-prose { font-size: 14.5px; color: #3a3a52; line-height: 1.7; }
.ent-prose p { margin-bottom: 12px; }
.ent-prose ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.ent-prose ul li { position: relative; padding-left: 28px; }
.ent-prose ul li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #2fb178; font-weight: 800; }

/* curriculum accordion */
.ent-acc { display: flex; flex-direction: column; gap: 12px; }
.ent-acc-item { border: 1px solid var(--ent-line); border-radius: var(--ent-radius); background: #fff; overflow: hidden; }
.ent-acc-head {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 16px 18px; cursor: pointer; text-align: left;
    background: none; border: 0;
}
.ent-acc-head:hover { background: var(--ent-tint); }
.ent-acc-caret { font-size: 18px; color: var(--ent-muted); transition: transform .2s; flex-shrink: 0; }
.ent-acc-item.is-open .ent-acc-caret { transform: rotate(180deg); }
.ent-acc-titlewrap { flex: 1; min-width: 0; }
.ent-acc-title { font-size: 15px; font-weight: 700; }
.ent-acc-sub { font-size: 12.5px; color: var(--ent-muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.ent-acc-mini { width: 80px; height: 6px; border-radius: 999px; background: var(--ent-line); overflow: hidden; flex-shrink: 0; }
.ent-acc-mini > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ent-secondary), var(--ent-primary)); }
.ent-acc-body { display: none; padding: 4px 8px 10px; }
.ent-acc-item.is-open .ent-acc-body { display: block; }

/* lesson rows (shared between course-show accordion & player sidebar) */
.ent-lrow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; }
.ent-lrow:hover { background: var(--ent-tint); }
.ent-lrow-ico { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: var(--ent-tint); color: var(--ent-muted); }
.ent-lrow.is-done .ent-lrow-ico { background: #eaf7f1; color: #2fb178; }
.ent-lrow.is-current .ent-lrow-ico { background: var(--ent-primary); color: #fff; }
.ent-lrow.is-locked .ent-lrow-ico { background: var(--ent-tint); color: var(--ent-muted); }
.ent-lrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ent-lrow-title { font-size: 13.5px; font-weight: 600; color: var(--ent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-lrow.is-current .ent-lrow-title { color: var(--ent-primary); font-weight: 700; }
.ent-lrow.is-locked .ent-lrow-title { color: var(--ent-muted); font-weight: 500; }
.ent-lrow-type { font-size: 11.5px; color: var(--ent-muted); margin-top: 3px; line-height: 1.2; }
/* Labels are pre-cased by lessonTypeLabel() (Reading/Video/Audio/PDF/Assessment)
   — no text-transform, which would mangle "PDF" → "Pdf". */
.ent-lrow-kind { text-transform: none; }
.ent-lrow-sep { margin: 0 5px; opacity: .6; }
.ent-lrow-dur { font-size: 12px; color: var(--ent-muted); flex-shrink: 0; }
.ent-lrow.is-current { background: var(--ent-tint); }

/* course-show sidebar */
.ent-cs-side { position: sticky; top: calc(var(--ent-header-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.ent-cs-poster { border-radius: var(--ent-radius); overflow: hidden; border: 1px solid var(--ent-line); aspect-ratio: 1/1; background: var(--ent-tint); }
.ent-cs-poster img { width: 100%; height: 100%; object-fit: cover; }
.ent-cs-progcard { padding: 20px; }
.ent-cs-progcard.is-complete { border-color: #cdeadd; background: linear-gradient(180deg, #f2fbf6, #fff 120px); }
.ent-cs-progcard .lbl { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ent-muted); }
.ent-cs-complete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ent-cs-complete > i { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #eaf7f1; color: #218a63; font-size: 22px; }
.ent-cs-complete-txt strong { display: block; font-size: 15px; font-weight: 800; color: #1b6e50; }
.ent-cs-complete-txt span { font-size: 12.5px; color: #4a7a66; }
.ent-cs-progbig { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 12px; }
.ent-cs-progbig strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ent-primary); }
.ent-cs-progbig span { font-size: 13px; color: var(--ent-muted); }
.ent-cs-progmeta { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--ent-muted); }
.ent-cs-progmeta span { display: inline-flex; align-items: center; gap: 6px; }
.ent-cs-includes { padding: 20px; }
.ent-cs-includes h4 { font-size: 14px; font-weight: 800; margin-bottom: 14px; }
.ent-cs-includes ul { display: flex; flex-direction: column; gap: 12px; }
.ent-cs-includes li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ent-ink); }
.ent-cs-includes li i { font-size: 17px; color: var(--ent-secondary); width: 20px; text-align: center; }
.ent-cs-includes li strong { margin-left: auto; font-weight: 600; color: var(--ent-muted); }

/* =========================================================================
   LESSON / EXAM PLAYER (full-screen two-panel)
   ========================================================================= */
.ent-ll { position: relative; display: flex; flex-direction: column; height: 100vh; background: var(--ent-bg); overflow: hidden; }

/* top bar */
.ent-ll-top { display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--ent-line); flex-shrink: 0; }
.ent-ll-top-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ent-ll-back { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: var(--ent-radius-pill); border: 1px solid var(--ent-line); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ent-ink); }
.ent-ll-back:hover { border-color: var(--ent-primary); color: var(--ent-primary); background: var(--ent-tint); }
.ent-ll-back i { font-size: 16px; }
.ent-ll-sidebtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ent-line); border-radius: var(--ent-radius-sm); background: #fff; color: var(--ent-muted); }
.ent-ll-sidebtn:hover { border-color: var(--ent-line-strong); background: var(--ent-tint); color: var(--ent-primary); }
.ent-ll-sidebtn.is-active { color: var(--ent-primary); border-color: var(--ent-line); background: var(--ent-tint); }
.ent-ll-sidebtn i { font-size: 17px; }
.ent-ll-sidebtn-mobile { display: none; }
.ent-ll-top-center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ent-ll-course { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ent-ll-prog { display: flex; align-items: center; gap: 10px; width: min(420px, 60%); }
.ent-ll-prog .ent-progress { flex: 1; height: 6px; }
.ent-ll-prog .cnt { font-size: 12px; font-weight: 600; color: var(--ent-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ent-ll-prog .pct { font-size: 12px; font-weight: 700; color: var(--ent-primary); white-space: nowrap; }
.ent-ll-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 120px; justify-content: flex-end; }

/* body split */
.ent-ll-body { flex: 1; display: flex; min-height: 0; }

/* Dim backdrop behind the mobile drawer (hidden on desktop). */
.ent-ll-scrim { display: none; }

/* sidebar (curriculum) */
.ent-ll-side { width: 350px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--ent-line); display: flex; flex-direction: column; }
/* Desktop only: collapsing the docked sidebar hides it. On mobile the sidebar
   is a drawer that stays in the DOM (off-canvas) so it can slide — see below. */
@media (min-width: 861px) {
    .ent-ll-side:not(.is-open) { display: none; }
}
.ent-ll-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--ent-line); }
.ent-ll-side-head h3 { font-size: 15px; font-weight: 800; }
.ent-ll-side-head .sub { font-size: 12.5px; color: var(--ent-muted); margin-top: 3px; }
.ent-ll-side-close { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -4px -6px -4px 0; border: 0; background: none; border-radius: var(--ent-radius-sm); color: var(--ent-muted); flex-shrink: 0; }
.ent-ll-side-close:hover { background: var(--ent-tint); color: var(--ent-ink); }
.ent-ll-side-close i { font-size: 18px; }
.ent-ll-search { display: flex; align-items: center; gap: 9px; margin: 12px 18px; padding: 0 12px; height: 40px; background: var(--ent-tint); border: 1px solid transparent; border-radius: var(--ent-radius-sm); color: var(--ent-muted); }
.ent-ll-search:focus-within { border-color: var(--ent-primary); background: #fff; }
.ent-ll-search i { font-size: 15px; }
.ent-ll-search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13.5px; color: var(--ent-ink); }
.ent-ll-search input::-webkit-search-cancel-button { display: none; }
.ent-ll-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ent-muted); flex-shrink: 0; }
.ent-ll-search-clear:hover { background: var(--ent-line); color: var(--ent-ink); }
.ent-ll-search-clear i { font-size: 13px; }
.ent-ll-sections { flex: 1; overflow-y: auto; padding: 4px 10px 20px; }
.ent-ll-noresults { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--ent-muted); }

.ent-sec { border-bottom: 1px solid var(--ent-line); }
.ent-sec-head { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0; padding: 13px 10px; background: none; border: 0; border-radius: var(--ent-radius-sm); cursor: pointer; text-align: left; transition: background .15s ease; }
/* Constant radius; hover only fades the fill in, so the shape never jumps. */
.ent-sec-head:hover { background: var(--ent-tint); }
/* Active (in-progress / currently-viewed) section: a soft primary-tinted
   header with a primary title — mirrors the app's nav active state. The neutral
   `tint` is the fallback where color-mix is unsupported. */
.ent-sec.is-active > .ent-sec-head { background: var(--ent-tint); background: color-mix(in srgb, var(--ent-primary) 7%, #fff); }
.ent-sec.is-active > .ent-sec-head:hover { background: var(--ent-tint); background: color-mix(in srgb, var(--ent-primary) 12%, #fff); }
.ent-sec.is-active > .ent-sec-head .ent-sec-title { color: var(--ent-primary); }
.ent-sec.is-active > .ent-sec-head .ent-sec-caret { color: var(--ent-primary); }
.ent-sec-caret { font-size: 16px; color: var(--ent-muted); transition: transform .2s; }
.ent-sec.is-open .ent-sec-caret { transform: rotate(180deg); }
.ent-sec-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ent-sec-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-sec-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11.5px; color: var(--ent-muted); margin-top: 3px; }
.ent-sec-sep { opacity: .55; }
.ent-sec-dur { display: inline-flex; align-items: center; gap: 3px; }
.ent-sec-dur i { font-size: 12px; }
.ent-sec-body { display: none; padding-bottom: 8px; }
.ent-sec.is-open .ent-sec-body { display: block; }
.ent-sec-done-badge { font-size: 11px; color: #2fb178; display: inline-flex; align-items: center; gap: 4px; }

/* content area: a scroll region + a footer bar pinned to the bottom */
.ent-ll-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ent-ll-scroll { flex: 1; overflow-y: auto; }
.ent-ll-inner { max-width: 900px; margin: 0 auto; padding: 32px 32px 40px; }
/* Wide view (topbar toggle): lift the column cap so the content — and the
   player — can use the full pane, especially with the sidebar collapsed. */
.ent-ll--wide .ent-ll-inner,
.ent-ll--wide .ent-ll-footbar-in { max-width: none; }
/* The docked transcript rail needs the room too — a 900px column split into
   video + rail would cramp both. */
.ent-ll-inner:has(.ent-ll-cols.has-rail) { max-width: none; }
/* In wide view the sidebar overlays as a slide-from-left drawer (the mobile
   treatment) instead of docking — the content keeps the whole pane. */
.ent-ll--wide .ent-ll-side {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(350px, 86vw);
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 12px 0 34px rgba(20, 18, 31, .18);
}
.ent-ll--wide .ent-ll-side.is-open { transform: translateX(0); }
.ent-ll--wide .ent-ll-side-close { display: inline-flex; }
.ent-ll--wide .ent-ll-scrim { display: block; position: absolute; inset: 0; z-index: 55; background: rgba(20, 18, 31, .45); }
.ent-ll-footbar { flex-shrink: 0; background: #fff; border-top: 1px solid var(--ent-line); box-shadow: 0 -4px 18px rgba(20, 18, 31, .06); }
.ent-ll-footbar-in { max-width: 900px; margin: 0 auto; padding: 12px 32px; }
.ent-ll-lhead { margin-bottom: 20px; }
.ent-ll-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ent-secondary); margin-bottom: 8px; }
.ent-ll-ltitle { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ent-ll-ldesc { font-size: 14.5px; color: var(--ent-muted); margin-top: 8px; }

.ent-ll-media { position: relative; aspect-ratio: 16/9; border-radius: var(--ent-radius); overflow: hidden; background: #14121f; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; }
.ent-ll-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; position: absolute; inset: 0; }
.ent-ll-play { position: relative; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ent-primary); display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.ent-ll-play i { margin-left: 4px; }
.ent-ll-media-badge { position: absolute; bottom: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--ent-radius-pill); background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; }

.ent-ll-prose { font-size: 15px; color: #33334a; line-height: 1.75; }
.ent-ll-prose h4 { font-size: 17px; font-weight: 800; color: var(--ent-ink); margin: 24px 0 10px; }
.ent-ll-prose p { margin-bottom: 14px; }
.ent-ll-prose ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }

/* supplementary files */
.ent-ll-files { margin-top: 28px; }
.ent-ll-files h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.ent-ll-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ent-line); border-radius: var(--ent-radius-sm); background: #fff; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ent-ll-file:hover { border-color: var(--ent-primary); background: var(--ent-tint); box-shadow: 0 4px 16px rgba(20, 18, 31, .07); }
.ent-ll-file + .ent-ll-file { margin-top: 10px; }
.ent-ll-file-ico { width: 40px; height: 40px; border-radius: 9px; background: #fdecea; color: #d6472f; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ent-ll-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ent-ll-file-name { font-size: 13.5px; font-weight: 600; }
.ent-ll-file-meta { font-size: 12px; color: var(--ent-muted); }
.ent-ll-file-dl { display: inline-flex; align-items: center; justify-content: center; color: var(--ent-muted); font-size: 18px; flex-shrink: 0; }
.ent-ll-file:hover .ent-ll-file-dl { color: var(--ent-primary); }

/* footer nav */
.ent-ll-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* First action (Previous / Retake) stays left; the rest cluster on the right. */
.ent-ll-foot > :first-child { margin-right: auto; }
.ent-ll-navbtn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: var(--ent-radius-pill); border: 1px solid var(--ent-line-strong); background: #fff; font-size: 14px; font-weight: 700; color: var(--ent-ink); }
.ent-ll-navbtn:hover { border-color: var(--ent-primary); color: var(--ent-primary); }
.ent-ll-navbtn.is-disabled { opacity: .45; pointer-events: none; }
.ent-ll-navbtn i { font-size: 17px; }
.ent-ll-complete { background: var(--ent-primary); color: #fff; border-color: var(--ent-primary); }
.ent-ll-complete:hover { background: #1a1560; color: #fff; }
.ent-ll-complete.is-done { background: #eaf7f1; color: #218a63; border-color: #cdeadd; }
.ent-ll-complete.is-done:hover { background: #e0f2ea; color: #218a63; }

/* =========================================================================
   EXAM (intro / quiz / results — swaps into the player content area)
   ========================================================================= */
.ent-ex-directions { font-size: 14.5px; color: #33334a; line-height: 1.7; margin: 8px 0 24px; }
.ent-ex-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.ent-ex-stat { padding: 18px; border: 1px solid var(--ent-line); border-radius: var(--ent-radius); background: #fff; }
.ent-ex-stat-lbl { font-size: 12px; color: var(--ent-muted); margin-bottom: 8px; }
.ent-ex-stat-val { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ent-ex-stat-val.pass { color: #2fb178; }
.ent-ex-stat-val.fail { color: #e5484d; }
.ent-ex-verdict { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 700; }
.ent-ex-verdict.is-pass { color: #218a63; }
.ent-ex-verdict.is-fail { color: #d6472f; }
.ent-ex-verdict i { font-size: 13px; }

/* quiz */
.ent-quiz-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ent-quiz-count { font-size: 13.5px; font-weight: 700; color: var(--ent-ink); }
.ent-quiz-count span { color: var(--ent-muted); font-weight: 500; }
.ent-quiz-timer { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ent-primary); background: var(--ent-tint); padding: 7px 14px; border-radius: var(--ent-radius-pill); }
.ent-quiz-progress { height: 6px; border-radius: 999px; background: var(--ent-line); overflow: hidden; margin-bottom: 26px; }
.ent-quiz-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ent-secondary), var(--ent-primary)); transition: width .3s; }
.ent-quiz-q { font-size: 20px; font-weight: 800; line-height: 1.4; margin-bottom: 22px; }
.ent-quiz-opts { display: flex; flex-direction: column; gap: 12px; }
.ent-quiz-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.ent-quiz-opt:hover { border-color: var(--ent-primary); background: var(--ent-tint); }
.ent-quiz-opt input { position: absolute; opacity: 0; }
.ent-quiz-opt-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ent-line-strong); flex-shrink: 0; position: relative; transition: border-color .15s; }
.ent-quiz-opt input:checked + .ent-quiz-opt-mark { border-color: var(--ent-primary); }
.ent-quiz-opt input:checked + .ent-quiz-opt-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ent-primary); }
.ent-quiz-opt:has(input:checked) { border-color: var(--ent-primary); background: var(--ent-tint); }
.ent-quiz-opt-text { font-size: 14.5px; }
.ent-quiz-letter { font-weight: 700; color: var(--ent-muted); margin-right: 2px; }

/* results */
.ent-res-top { display: flex; align-items: center; gap: 24px; padding: 24px; border-radius: var(--ent-radius); border: 1px solid var(--ent-line); background: #fff; margin-bottom: 24px; }
.ent-res-ring { --p: 84; width: 108px; height: 108px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--ent-primary) calc(var(--p) * 1%), var(--ent-line) 0); }
.ent-res-ring-inner { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ent-res-ring-inner strong { font-size: 24px; font-weight: 800; color: var(--ent-primary); line-height: 1; }
.ent-res-ring-inner span { font-size: 10.5px; color: var(--ent-muted); margin-top: 3px; }
.ent-res-info { flex: 1; }
.ent-res-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--ent-radius-pill); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.ent-res-badge.pass { background: #eaf7f1; color: #218a63; }
.ent-res-badge.fail { background: #fdeceb; color: #d6472f; }
.ent-res-info h3 { font-size: 19px; font-weight: 800; }
.ent-res-info p { font-size: 13.5px; color: var(--ent-muted); margin-top: 6px; }

.ent-res-section-title { font-size: 15px; font-weight: 800; margin: 26px 0 14px; }
.ent-assess-row { display: grid; grid-template-columns: 200px 1fr 54px; align-items: center; gap: 14px; padding: 10px 0; }
.ent-assess-cat { font-size: 13.5px; font-weight: 600; }
.ent-assess-count { font-size: 13px; font-weight: 700; color: var(--ent-primary); text-align: right; font-variant-numeric: tabular-nums; }

.ent-review-item { padding: 16px; border: 1px solid var(--ent-line); border-radius: var(--ent-radius-sm); background: #fff; }
.ent-review-item + .ent-review-item { margin-top: 12px; }
.ent-review-q { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 700; margin-bottom: 12px; }
.ent-review-mark { flex-shrink: 0; font-size: 18px; margin-top: 1px; }
.ent-review-mark.ok { color: #2fb178; }
.ent-review-mark.no { color: #e5484d; }
.ent-review-ans { font-size: 13.5px; color: var(--ent-muted); padding-left: 28px; }
.ent-review-ans .val { color: var(--ent-ink); font-weight: 600; }
.ent-review-ans .correct { color: #218a63; font-weight: 600; }
.ent-review-ans-row { margin-top: 4px; }

/* Attempt history — collapsible card per submission (reuses the review UI). */
.ent-attempts { margin-top: 34px; }
.ent-attempts-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.ent-attempt { border: 1px solid var(--ent-line); border-radius: var(--ent-radius); background: #fff; overflow: hidden; }
.ent-attempt + .ent-attempt { margin-top: 12px; }
.ent-attempt.is-open { border-color: var(--ent-line-strong); }
.ent-attempt-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s ease; }
.ent-attempt-head:hover { background: var(--ent-tint); }
.ent-attempt-no { font-size: 14px; font-weight: 700; color: var(--ent-ink); flex-shrink: 0; }
.ent-attempt-date { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ent-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-attempt-score { font-size: 14px; font-weight: 800; color: var(--ent-primary); flex-shrink: 0; }
.ent-attempt-head .ent-res-badge { margin-bottom: 0; font-size: 12px; padding: 5px 11px; }
.ent-attempt-caret { font-size: 16px; color: var(--ent-muted); transition: transform .2s; flex-shrink: 0; }
.ent-attempt.is-open .ent-attempt-caret { transform: rotate(180deg); }
.ent-attempt-body { padding: 2px 16px 18px; border-top: 1px solid var(--ent-line); }
.ent-attempt-summary { font-size: 13.5px; color: var(--ent-muted); margin: 14px 0 0; }
/* The review section titles inside a card can tighten their top margin. */
.ent-attempt-body .ent-res-section-title { margin-top: 20px; }

/* =========================================================================
   ONBOARDING (accept invitation) — centered co-branded flow
   ========================================================================= */
.ent-onb { min-height: 100vh; display: flex; flex-direction: column; background: var(--ent-bg); }
.ent-onb-top { height: var(--ent-header-h); display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--ent-line); }
.ent-onb-top .ent-container { display: flex; align-items: center; justify-content: space-between; }
.ent-onb-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; }
.ent-onb-card { width: 100%; max-width: 620px; }
.ent-onb-hero { text-align: center; margin-bottom: 28px; }
.ent-onb-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--ent-radius-pill); background: var(--ent-tint); color: var(--ent-primary); font-size: 12.5px; font-weight: 700; margin-bottom: 18px; }
.ent-onb-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.ent-onb-hero p { font-size: 15px; color: var(--ent-muted); line-height: 1.6; margin-top: 12px; max-width: 460px; margin-left: auto; margin-right: auto; }
.ent-onb-note { padding: 20px 22px; margin-bottom: 22px; display: flex; gap: 14px; }
.ent-onb-note-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--ent-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ent-onb-note-body p { font-size: 14px; color: #3a3a52; line-height: 1.6; }
.ent-onb-note-body .who { font-size: 12.5px; color: var(--ent-muted); margin-top: 8px; }
.ent-onb-plan { padding: 22px; margin-bottom: 22px; }
.ent-onb-plan h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.ent-onb-plan .sub { font-size: 13px; color: var(--ent-muted); margin-bottom: 16px; }
.ent-onb-course { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.ent-onb-course + .ent-onb-course { border-top: 1px solid var(--ent-line); }
.ent-onb-course img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--ent-tint); }
.ent-onb-course-main { flex: 1; min-width: 0; }
.ent-onb-course-title { font-size: 14px; font-weight: 700; }
.ent-onb-course-meta { font-size: 12px; color: var(--ent-muted); margin-top: 3px; }
.ent-onb-foot { font-size: 12.5px; color: var(--ent-muted); text-align: center; margin-top: 16px; }

/* =========================================================================
   COURSE COMPLETE (celebration)
   ========================================================================= */
.ent-cmp { max-width: 640px; margin: 0 auto; text-align: center; padding-top: 24px; }
.ent-cmp-medal { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; background: linear-gradient(215deg, var(--ent-secondary), var(--ent-primary)); box-shadow: 0 12px 34px rgba(32,26,112,.32); }
.ent-cmp h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.ent-cmp-course { font-size: 16px; color: var(--ent-primary); font-weight: 700; margin-top: 8px; }
.ent-cmp-sub { font-size: 15px; color: var(--ent-muted); margin-top: 12px; line-height: 1.6; }
.ent-cmp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
.ent-cmp-stat { padding: 20px; }
.ent-cmp-stat .n { font-size: 24px; font-weight: 800; color: var(--ent-primary); }
.ent-cmp-stat .l { font-size: 12.5px; color: var(--ent-muted); margin-top: 5px; }
.ent-cmp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   CERTIFICATE
   ========================================================================= */
.ent-cert-wrap { max-width: 900px; margin: 0 auto; }
.ent-cert-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 13.5px; font-weight: 600; color: var(--ent-muted); text-decoration: none; transition: color .15s; }
.ent-cert-back:hover { color: var(--ent-primary); }
.ent-cert-back i { font-size: 16px; }
.ent-cert-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ent-cert-actions h1 { font-size: 22px; font-weight: 800; }
.ent-cert-actions .btns { display: flex; gap: 10px; }
.ent-cert {
    position: relative; background: #fff; border-radius: var(--ent-radius);
    box-shadow: var(--ent-shadow-md); padding: 12px;
    aspect-ratio: 1.414 / 1;
}
.ent-cert-inner {
    height: 100%; border: 2px solid var(--ent-primary); border-radius: 8px;
    padding: 6% 8%; display: flex; flex-direction: column; align-items: center; text-align: center;
    background:
        radial-gradient(circle at 0 0, rgba(59,48,164,.05), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(59,48,164,.05), transparent 30%);
}
.ent-cert-corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--ent-secondary); }
.ent-cert-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ent-secondary); font-weight: 700; }
.ent-cert-title { font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: -.01em; color: var(--ent-primary); margin: 6px 0 2px; }
.ent-cert-sub { font-size: 13px; color: var(--ent-muted); }
.ent-cert-name { font-size: clamp(26px, 4.5vw, 40px); font-weight: 800; color: var(--ent-ink); margin: 4% 0 2%; font-family: Georgia, "Times New Roman", serif; }
.ent-cert-line { width: 60%; max-width: 360px; border: 0; border-top: 1px solid var(--ent-line-strong); margin: 0 0 3%; }
.ent-cert-for { font-size: 14px; color: #3a3a52; }
.ent-cert-course { font-size: clamp(16px, 2.6vw, 22px); font-weight: 700; color: var(--ent-primary); margin-top: 6px; max-width: 80%; }
.ent-cert-meta { margin-top: auto; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ent-cert-sig { text-align: center; flex: 1; }
.ent-cert-sig .val { font-family: Georgia, serif; font-size: 16px; color: var(--ent-ink); padding-bottom: 6px; border-bottom: 1px solid var(--ent-line-strong); }
.ent-cert-sig .lbl { font-size: 11px; color: var(--ent-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; }
.ent-cert-seal { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(215deg, var(--ent-secondary), var(--ent-primary)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ent-cert-seal i { font-size: 24px; }
.ent-cert-seal span { font-size: 8px; letter-spacing: .1em; margin-top: 2px; }
.ent-cert-brand { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 3%; font-size: 11.5px; color: var(--ent-muted); }
.ent-cert-brand strong { color: var(--ent-ink); }
/* Native asset is 150×64 — cap at 22px so it stays crisp on retina. */
.ent-cert-brandlogo { height: 22px; width: auto; }
/* Verification QR: top-right of the cert face (the empty zone — content is
   centered). Vector SVG, so it prints sharp. Hidden on small screens where
   it would crowd the title; print always shows it. */
.ent-cert-qr { position: absolute; top: 38px; right: 38px; width: 60px; text-align: center; }
.ent-cert-qr svg { width: 60px; height: 60px; display: block; }
.ent-cert-qr svg path { fill: var(--ent-primary); }
.ent-cert-qr-lbl { display: block; margin-top: 4px; font-size: 7.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ent-muted); }
@media screen and (max-width: 760px) {
    .ent-cert-qr { display: none; }
}

/* =========================================================================
   MARKETPLACE
   ========================================================================= */
.ent-mkt-hero { background: linear-gradient(215deg, var(--ent-secondary), var(--ent-primary)); color: #fff; border-radius: var(--ent-radius); padding: 36px 32px; margin-bottom: 28px; position: relative; overflow: hidden; }
.ent-mkt-hero::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; top: -140px; right: -80px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%); }
.ent-mkt-hero-in { position: relative; z-index: 1; max-width: 620px; }
.ent-mkt-hero-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--ent-radius-pill); background: rgba(255,255,255,.16); color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 16px; }
.ent-mkt-hero-badge i { font-size: 14px; }
.ent-mkt-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ent-mkt-hero p { font-size: 15px; opacity: .88; margin-top: 10px; line-height: 1.6; }

/* marketplace card: price + add to cart */
.ent-mkt-card .ent-cc-foot { padding-top: 14px; border-top: 1px solid var(--ent-line); margin-top: 14px; }
.ent-mkt-price-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; }
.ent-mkt-price { font-size: 20px; font-weight: 800; color: var(--ent-ink); white-space: nowrap; }
.ent-mkt-price small { font-size: 12px; font-weight: 600; color: var(--ent-muted); }
.ent-mkt-seats { font-size: 12px; color: var(--ent-muted); }
.ent-mkt-addbtn { width: 100%; }

/* buy sidebar on marketplace course page */
.ent-buy-card { padding: 22px; }
.ent-buy-price { display: flex; align-items: baseline; gap: 8px; }
.ent-buy-price strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.ent-buy-price small { font-size: 13px; color: var(--ent-muted); }
.ent-buy-seats { margin: 18px 0; }
.ent-buy-seats label { font-size: 12.5px; font-weight: 700; color: var(--ent-muted); display: block; margin-bottom: 8px; }
.ent-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm); overflow: hidden; }
.ent-stepper button { width: 42px; height: 44px; font-size: 18px; color: var(--ent-ink); background: #fff; }
.ent-stepper button:hover { background: var(--ent-tint); color: var(--ent-primary); }
.ent-stepper input { width: 60px; height: 44px; border: 0; border-left: 1px solid var(--ent-line); border-right: 1px solid var(--ent-line); text-align: center; font-size: 15px; font-weight: 700; color: var(--ent-ink); outline: none; -moz-appearance: textfield; }
.ent-stepper input::-webkit-outer-spin-button, .ent-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ent-buy-total { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding: 14px 0; border-top: 1px solid var(--ent-line); border-bottom: 1px solid var(--ent-line); margin-bottom: 18px; }
.ent-buy-total strong { font-size: 20px; font-weight: 800; }
.ent-buy-note { font-size: 12.5px; color: var(--ent-muted); margin-top: 14px; display: flex; align-items: center; gap: 8px; justify-content: center; }

/* =========================================================================
   CART
   ========================================================================= */
.ent-cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.ent-cart-line { display: flex; align-items: center; gap: 16px; padding: 18px; }
.ent-cart-line + .ent-cart-line { border-top: 1px solid var(--ent-line); }
.ent-cart-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--ent-tint); }
.ent-cart-main { flex: 1; min-width: 0; }
.ent-cart-title { font-size: 15px; font-weight: 700; }
.ent-cart-title a:hover { color: var(--ent-primary); }
.ent-cart-meta { font-size: 12.5px; color: var(--ent-muted); margin-top: 4px; }
.ent-cart-unit { font-size: 12.5px; color: var(--ent-muted); margin-top: 8px; }
.ent-cart-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.ent-cart-linetotal { font-size: 17px; font-weight: 800; }
/* Remove / Clear-cart pill: a real button, danger accent on hover. */
.ent-cart-remove { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ent-line); border-radius: var(--ent-radius-pill); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ent-muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.ent-cart-remove:hover { border-color: #e8b4ad; background: #fdeceb; color: #d6472f; }
.ent-cart-remove:disabled { opacity: .55; pointer-events: none; }
.ent-cart-remove i { font-size: 13px; }
.ent-cart-empty-hint { font-size: 13px; color: var(--ent-muted); }

.ent-sum-card { padding: 22px; position: sticky; top: calc(var(--ent-header-h) + 20px); }
.ent-sum-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.ent-sum-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #3a3a52; padding: 8px 0; }
.ent-sum-row.muted { color: var(--ent-muted); font-size: 13px; }
.ent-sum-row.discount { color: #218a63; }
.ent-sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0 4px; margin-top: 8px; border-top: 1px solid var(--ent-line); }
.ent-sum-total .lbl { font-size: 15px; font-weight: 800; }
.ent-sum-total .val { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ent-sum-tax { font-size: 12px; color: var(--ent-muted); text-align: right; }
.ent-sum-card .ent-btn { margin-top: 18px; }
.ent-sum-secure { font-size: 12px; color: var(--ent-muted); margin-top: 14px; display: flex; align-items: center; gap: 8px; justify-content: center; }

/* =========================================================================
   TOC / INDEX (presenter click-through)
   ========================================================================= */
.ent-toc-top { padding: 40px 0 4px; }
.ent-toc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ent-secondary); margin-bottom: 10px; }
.ent-toc-top h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.ent-toc-top p { font-size: 15px; color: var(--ent-muted); margin-top: 10px; max-width: 640px; }
.ent-toc-group { margin-top: 36px; }
.ent-toc-group-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ent-toc-group-title .num { width: 26px; height: 26px; border-radius: 50%; background: var(--ent-primary); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ent-toc-group-title h2 { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ent-ink); }
.ent-toc-group-title span.count { font-size: 12.5px; color: var(--ent-muted); margin-left: auto; }
.ent-toc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ent-toc-card { display: flex; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--ent-line); border-radius: var(--ent-radius); transition: transform .14s, box-shadow .15s, border-color .15s; }
.ent-toc-card:hover { transform: translateY(-2px); box-shadow: var(--ent-shadow-md); border-color: var(--ent-line-strong); }
.ent-toc-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--ent-tint); color: var(--ent-primary); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.ent-toc-card-main { flex: 1; min-width: 0; }
.ent-toc-card-title { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--ent-ink); }
.ent-toc-card-title .ext { font-size: 13px; color: var(--ent-muted); margin-left: auto; }
.ent-toc-card:hover .ent-toc-card-title { color: var(--ent-primary); }
.ent-toc-card-desc { font-size: 12.5px; color: var(--ent-muted); margin-top: 6px; line-height: 1.5; }
.ent-toc-flow { font-size: 12px; color: var(--ent-muted); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.ent-toc-flow code { background: var(--ent-tint); color: var(--ent-secondary); padding: 2px 7px; border-radius: 6px; font-size: 11.5px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
    .ent-cols, .ent-cols-2, .ent-continue { grid-template-columns: 1fr; }
    .ent-course-grid, .ent-toc-grid { grid-template-columns: repeat(2, 1fr); }
    .ent-cs-grid, .ent-cart-grid { grid-template-columns: 1fr; }
    .ent-cs-side { position: static; }
    .ent-sum-card { position: static; }
    .ent-ex-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    /* Top bar wraps to two rows: [Back .... 🌐 👤 ☰] then the progress subheader. */
    .ent-ll-top { flex-wrap: wrap; height: auto; gap: 8px 10px; padding: 8px 14px; }
    .ent-ll-top-left { order: 0; }
    .ent-ll-sidebtn-desktop { display: none; }
    /* Content is already full-width on mobile — wide view means nothing here. */
    .ent-ll-widebtn { display: none; }
    /* Language switcher + user menu stay in row 1, compacted like the portal
       header (avatar only — no name, no caret). */
    .ent-ll-top-right { order: 1; margin-left: auto; min-width: 0; gap: 6px; }
    .ent-ll-top-right .ent-user { gap: 4px; padding: 0 2px; }
    .ent-ll-top-right .ent-user-name { display: none; }
    .ent-ll-top-right .ent-user > i { display: none; } /* caret */
    .ent-ll-sidebtn-mobile { order: 2; display: inline-flex; }
    .ent-ll-top-center { order: 3; flex-basis: 100%; align-items: stretch; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ent-line); }
    .ent-ll-course { white-space: normal; }
    .ent-ll-prog { width: 100%; }

    /* Sidebar becomes a left-hand slide-out drawer over the content. */
    .ent-ll-side {
        position: absolute; top: 0; left: 0; bottom: 0; z-index: 60;
        width: min(340px, 86vw); flex-shrink: 0;
        border-right: 1px solid var(--ent-line);
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 12px 0 34px rgba(20, 18, 31, .18);
        display: flex; /* always present as a drawer; visibility is the transform */
    }
    .ent-ll-side.is-open { transform: translateX(0); }
    .ent-ll-side-close { display: inline-flex; }

    .ent-ll-scrim { display: block; position: absolute; inset: 0; z-index: 55; background: rgba(20, 18, 31, .45); }

    .ent-ll-inner { padding: 24px 20px 32px; }
    .ent-ll-footbar-in { padding: 10px 20px; }
    .ent-assess-row { grid-template-columns: 130px 1fr 48px; }

    /* Course detail on mobile: tighter type + the sticky bottom CTA. */
    .ent-cs-title { font-size: 24px; }
    .ent-cs-metarow { gap: 12px 16px; }
    .ent-cs-progmeta { flex-wrap: wrap; row-gap: 6px; }
    .ent-cs-grid { padding-bottom: 76px; } /* keep content clear of the fixed bar */
    .ent-cs-stickybar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        background: #fff; border-top: 1px solid var(--ent-line);
        box-shadow: 0 -6px 22px rgba(20, 18, 31, .08);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    }
    .ent-cs-stickybar-in { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .ent-cs-sticky-prog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
    .ent-cs-sticky-prog strong { font-size: 13px; font-weight: 800; color: var(--ent-primary); flex-shrink: 0; }
    .ent-cs-sticky-prog .ent-progress { flex: 1; min-width: 0; height: 6px; }
    /* Marketplace variant: price readout instead of progress. */
    .ent-cs-sticky-price { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: var(--ent-ink); }
    .ent-cs-stickybar .ent-btn { flex-shrink: 0; height: 44px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 560px) {
    .ent-ll-top { gap: 8px; padding: 8px 12px; }
    .ent-ll-back { padding: 0 12px; }
    .ent-ll-top-right .ent-lang-code { display: none; } /* globe icon only */
    .ent-ll-foot { gap: 8px; }
    .ent-ll-navbtn { height: 44px; padding: 0 14px; }
    /* Keep the primary action legible; collapse Previous/Next to their arrows. */
    .ent-ll-navbtn:not(.ent-ll-complete) .ent-ll-navbtn-lbl { display: none; }
    /* Attempt card header: drop the timestamp so score + status still fit. */
    .ent-attempt-date { display: none; }
}
@media (max-width: 640px) {
    .ent-course-grid { grid-template-columns: 1fr; }
    /* Toolbar reflows to: search on its own row, then Filters | Sort 50/50.
       The individual filter controls live in the collapsible sheet below. */
    .ent-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ent-toolbar-search { grid-column: 1 / -1; min-width: 0; }
    .ent-toolbar-adv { display: none; }
    .ent-filterbtn { display: inline-flex; }
    .ent-toolbar-sort { margin-left: 0; display: flex; min-width: 0; }
    .ent-toolbar-sort-label { display: none; }
    /* Selects otherwise size to their longest option and overflow the cell
       (also covers the marketplace toolbar, which shares these classes). */
    .ent-toolbar .ent-select { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
    .ent-metric-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}
@media (max-width: 960px) {
    .ent-auth { grid-template-columns: 1fr; }
    .ent-auth-aside { display: none; }
}
/* Mobile header: burger + logo | search (middle) | language + user menu.
   The nav links move into the slide-from-left drawer; cart + notifications
   merge into the user dropdown. */
@media (max-width: 820px) {
    .ent-header-inner { gap: 10px; }
    .ent-burger { display: inline-flex; }
    .ent-nav { display: none; }
    .ent-hide-m { display: none !important; }
    .ent-pop-mobile { display: block; }
    .ent-brand-powered { display: none; }
    .ent-brand-divider { display: none; }
    /* Search stays, flexible in the middle. */
    .ent-search-wrap { flex: 1; min-width: 0; }
    .ent-search { width: 100%; }
    .ent-header-right { flex: 1; min-width: 0; gap: 6px; }
    .ent-user-name { display: none; }
}
@media (max-width: 560px) {
    .ent-hours-row, .ent-perf-row { grid-template-columns: 1fr 1fr; }
    .ent-auth-main { padding: 28px 22px; }
    .ent-cmp-stats { grid-template-columns: 1fr; }

    /* Compact header: keep everything on one row at phone widths. */
    .ent-header-right { gap: 2px; }
    .ent-header-right .ent-lang-code { display: none; } /* globe icon only */
    .ent-iconbtn { width: 38px; height: 38px; }
    .ent-user { gap: 4px; padding: 0 2px; }
    .ent-user > i { display: none; } /* caret */
    .ent-brand-logo { max-width: 110px; overflow: hidden; }
}

/* print only the certificate */
@media print {
    .ent-header, .ent-footer, .ent-cert-back, .ent-cert-actions, .ent-cert-wrap > p { display: none !important; }
    .ent-app { background: #fff; }
    .ent-main { padding: 0 !important; }
    .ent-cert { box-shadow: none; padding: 0; }
    .ent-cert-qr { display: block !important; }
}

/* =========================================================================
   SIDE CART — mini cart drawer, slides in from the right after add-to-cart
   ========================================================================= */
.ent-sidecart-wrap { position: fixed; inset: 0; z-index: 400; }
.ent-sidecart-scrim { position: absolute; inset: 0; background: rgba(20, 18, 31, .45); }
.ent-sidecart {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(400px, 94vw);
    display: flex; flex-direction: column;
    background: #fff; box-shadow: -16px 0 44px rgba(20, 18, 31, .22);
}
.ent-sidecart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--ent-line); }
.ent-sidecart-head h3 { font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.ent-sidecart-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--ent-radius-pill); background: var(--ent-tint); color: var(--ent-primary); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ent-sidecart-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; border: 0; background: none; border-radius: var(--ent-radius-sm); color: var(--ent-muted); cursor: pointer; }
.ent-sidecart-close:hover { background: var(--ent-tint); color: var(--ent-ink); }
.ent-sidecart-close i { font-size: 18px; }

.ent-sidecart-items { flex: 1; overflow-y: auto; padding: 8px 20px; }
.ent-sidecart-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.ent-sidecart-item + .ent-sidecart-item { border-top: 1px solid var(--ent-line); }
.ent-sidecart-thumb { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--ent-tint); }
.ent-sidecart-main { flex: 1; min-width: 0; }
.ent-sidecart-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ent-sidecart-meta { font-size: 12px; color: var(--ent-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-sidecart-price { font-size: 13.5px; font-weight: 800; color: var(--ent-primary); margin-top: 4px; }
.ent-sidecart-remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; background: none; border-radius: var(--ent-radius-sm); color: var(--ent-muted); cursor: pointer; flex-shrink: 0; }
.ent-sidecart-remove:hover { background: #fdeceb; color: #d6472f; }
.ent-sidecart-remove:disabled { opacity: .5; pointer-events: none; }
.ent-sidecart-remove i { font-size: 16px; }

.ent-sidecart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.ent-sidecart-empty i { font-size: 34px; color: var(--ent-line-strong); }
.ent-sidecart-empty p { font-size: 14px; color: var(--ent-muted); margin-bottom: 6px; }

.ent-sidecart-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ent-line); background: #fff; }
.ent-sidecart-summary { margin-bottom: 14px; }
.ent-sidecart-summary .row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--ent-muted); padding: 3px 0; }
.ent-sidecart-summary .row.is-discount { color: #218a63; }
.ent-sidecart-summary .row.is-total { font-size: 15px; font-weight: 800; color: var(--ent-ink); padding-top: 8px; margin-top: 5px; border-top: 1px solid var(--ent-line); }
.ent-sidecart-head-actions { display: flex; align-items: center; gap: 8px; }
.ent-sidecart-foot .ent-btn + .ent-btn { margin-top: 10px; }

/* Enter/leave: scrim fades, panel slides from the right. */
.ent-sidecart-enter-active, .ent-sidecart-leave-active { transition: opacity .22s ease; }
.ent-sidecart-enter-active .ent-sidecart, .ent-sidecart-leave-active .ent-sidecart { transition: transform .26s ease; }
.ent-sidecart-enter-from, .ent-sidecart-leave-to { opacity: 0; }
.ent-sidecart-enter-from .ent-sidecart, .ent-sidecart-leave-to .ent-sidecart { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) {
    .ent-sidecart-enter-active .ent-sidecart, .ent-sidecart-leave-active .ent-sidecart { transition: none; }
}

/* =========================================================================
   CONFIRM DIALOG — styled promise-based confirm (never window.confirm)
   ========================================================================= */
.ent-confirm-wrap { position: fixed; inset: 0; z-index: 10000000; display: flex; align-items: center; justify-content: center; padding: 20px; } /* topmost: above the Vidstack player (z-index up to 9999999) so the dialog never hides behind a video */
.ent-confirm-scrim { position: absolute; inset: 0; background: rgba(20, 18, 31, .5); }
.ent-confirm {
    position: relative; width: min(420px, 100%);
    background: #fff; border-radius: var(--ent-radius);
    box-shadow: 0 24px 70px rgba(20, 18, 31, .3);
    padding: 24px 24px 20px; text-align: center;
}
.ent-confirm-ico { width: 52px; height: 52px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ent-tint); color: var(--ent-primary); font-size: 24px; }
.ent-confirm-ico.is-danger { background: #fdeceb; color: #d6472f; }
.ent-confirm-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.ent-confirm-msg { font-size: 13.5px; color: var(--ent-muted); line-height: 1.6; margin: 8px 0 20px; }
.ent-confirm-actions { display: flex; justify-content: center; gap: 10px; }
.ent-confirm-actions .ent-btn { min-width: 110px; }

.ent-btn-danger { background: #d6472f; color: #fff; }
.ent-btn-danger:hover { background: #b93a25; color: #fff; }

.ent-confirm-enter-active, .ent-confirm-leave-active { transition: opacity .18s ease; }
.ent-confirm-enter-active .ent-confirm, .ent-confirm-leave-active .ent-confirm { transition: transform .18s ease; }
.ent-confirm-enter-from, .ent-confirm-leave-to { opacity: 0; }
.ent-confirm-enter-from .ent-confirm, .ent-confirm-leave-to .ent-confirm { transform: scale(.96) translateY(6px); }

/* ---- Google Translate widget: keep it invisible ----------------------------
   The app's own header globe drives language; the Google gadget/banner must
   never show, and the page must not be pushed down by the banner iframe. */
#google_translate_element { display: none !important; }
/* The banner iframe (Google renamed it to an obfuscated class, but it stays an
   iframe.skiptranslate) — hide it so only the app's own switcher shows. */
.goog-te-banner-frame, iframe.skiptranslate { display: none !important; }
.goog-te-gadget { height: 0; overflow: hidden; font-size: 0 !important; }
body { top: 0 !important; position: static !important; }
.goog-tooltip, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ============================================================
   Studio (org-admin back-office, Phase 4) — list, manage shell,
   tab rail and form furniture. Namespaced .ent-studio-*; the few
   generic helpers (btn-sm, field-err/hint, textarea) are promoted
   here because every studio surface needs them.
   ============================================================ */

.ent-btn.ent-btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
/* #b3261e read pink at this size — thin 12.5px strokes wash the colour out.
   A more saturated red plus a bit of weight keeps it unmistakably an error. */
.ent-field-err { color: #dc2626; font-weight: 600; font-size: 12.5px; margin-top: 6px; }
/* Dialog-scale validation feedback: the field turns red AND the reason is
   stated in a block that can't be mistaken for helper text. */
.ent-input.is-invalid { border-color: #dc2626; }
.ent-input.is-invalid:focus { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.ent-formalert {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; padding: 10px 12px;
    border: 1px solid #fecaca; border-radius: var(--ent-radius-sm);
    background: #fef2f2; color: #b91c1c;
    font-size: 13px; font-weight: 600; line-height: 1.45;
}
.ent-formalert i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ent-field-hint { color: var(--ent-muted); font-size: 12px; margin-top: 6px; }
.ent-textarea { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }

/* Layout: sticky left rail + content column (channels-studio anatomy). */
.ent-studio-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.ent-studio-content { width: 100%; min-width: 0; }
.ent-studio-rail { position: sticky; top: calc(var(--ent-header-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.ent-studio-rail-group { margin: 16px 14px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ent-muted); }
.ent-studio-rail-group:first-child { margin-top: 0; }
.ent-studio-rail-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; font-weight: 600; color: var(--ent-muted); text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ent-studio-rail-item:hover { background: var(--ent-tint); color: var(--ent-ink); }
.ent-studio-rail-item.is-active { background: var(--ent-tint); background: color-mix(in srgb, var(--ent-primary) 7%, #fff); color: var(--ent-primary); }
.ent-studio-rail-item.is-soon { opacity: .55; cursor: default; }
.ent-studio-rail-item.is-soon:hover { background: transparent; color: var(--ent-muted); }
.ent-studio-soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ent-line); color: var(--ent-muted); padding: 2px 8px; border-radius: var(--ent-radius-pill); flex-shrink: 0; }

/* Course pseudo-table (in an .ent-card host). */
.ent-studio-thead, .ent-studio-tr { display: grid; grid-template-columns: minmax(0, 2.4fr) 110px 130px 120px 200px; gap: 14px; align-items: center; padding: 13px 20px; }
.ent-studio-thead { border-bottom: 1px solid var(--ent-line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ent-muted); }
.ent-studio-tr { border-bottom: 1px solid var(--ent-line); transition: background .15s ease; }
.ent-studio-tr:last-child { border-bottom: 0; }
.ent-studio-tr:hover { background: color-mix(in srgb, var(--ent-primary) 3%, #fff); }
.ent-studio-tr > * { min-width: 0; }
.ent-studio-course { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.ent-studio-course:hover .ent-studio-course-title { color: var(--ent-primary); }
.ent-studio-thumb { width: 42px; height: 42px; border-radius: 10px; background: var(--ent-tint); color: var(--ent-primary); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.ent-studio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ent-studio-thumb.is-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
.ent-studio-course-title { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; }
.ent-studio-course-sub { font-size: 12.5px; color: var(--ent-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-studio-cell { font-size: 13.5px; color: var(--ent-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-studio-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
@media (max-width: 860px) {
    .ent-studio-thead { display: none; }
    .ent-studio-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
    .ent-studio-cell.ent-studio-hide-m { display: none; }
    .ent-studio-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Status + type chips (extends .ent-chip semantics). */
.ent-chip.ent-studio-chip-off { background: var(--ent-line); color: var(--ent-muted); }

/* Manage header. */
.ent-studio-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ent-muted); text-decoration: none; margin-bottom: 14px; }
.ent-studio-crumb:hover { color: var(--ent-primary); }
.ent-studio-crumb i { font-size: 15px; }
.ent-studio-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.ent-studio-head-main { flex: 1; min-width: 240px; }
.ent-studio-head-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-studio-head-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ent-muted); }

/* Per-tab save cluster + transient saved chip. */
.ent-studio-save { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ent-studio-savedchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #218a63; background: #eaf7f1; border: 1px solid #cdeadd; padding: 5px 12px; border-radius: var(--ent-radius-pill); }
.ent-studio-fade-enter-active, .ent-studio-fade-leave-active { transition: opacity .25s ease; }
.ent-studio-fade-enter-from, .ent-studio-fade-leave-to { opacity: 0; }

/* Radio-with-description rows (Type tab). */
.ent-studio-radio { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ent-studio-radio + .ent-studio-radio { margin-top: 10px; }
.ent-studio-radio input { margin-top: 3px; accent-color: var(--ent-primary); }
.ent-studio-radio:has(input:checked) { border-color: var(--ent-primary); background: var(--ent-tint); background: color-mix(in srgb, var(--ent-primary) 5%, #fff); }
.ent-studio-radio strong { font-size: 14.5px; }
.ent-studio-radio p { margin: 3px 0 0; font-size: 13px; color: var(--ent-muted); }

/* Searchable picker (Categories multi / Language single). */
.ent-studio-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ent-studio-chiprow .ent-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; margin-left: 2px; border-radius: 50%; font-size: 11px; }
.ent-studio-chiprow .ent-chip button:hover { background: rgba(32, 26, 112, .12); }
.ent-studio-pick { border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm); overflow: hidden; background: var(--ent-surface); }
.ent-studio-pick-search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ent-line); }
.ent-studio-pick-search i { color: var(--ent-muted); font-size: 16px; flex-shrink: 0; }
.ent-studio-pick-search input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; color: var(--ent-ink); }
.ent-studio-pick-count { font-size: 12px; color: var(--ent-muted); white-space: nowrap; }
.ent-studio-pick-list { max-height: 300px; overflow-y: auto; padding: 6px; }
.ent-studio-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; font-size: 14px; color: var(--ent-ink); cursor: pointer; text-align: left; }
.ent-studio-opt:hover { background: var(--ent-tint); }
.ent-studio-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.ent-studio-opt.is-disabled:hover { background: transparent; }
.ent-studio-checksq { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--ent-line-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; transition: background .12s ease, border-color .12s ease; }
.ent-studio-checksq.is-round { border-radius: 50%; }
.ent-studio-opt.is-selected .ent-studio-checksq { background: var(--ent-primary); border-color: var(--ent-primary); }
.ent-studio-opt-empty { padding: 18px; text-align: center; color: var(--ent-muted); font-size: 13.5px; }

/* Empty state (shared shape: icon, heading, sub, optional CTA). */
.ent-studio-empty { text-align: center; padding: 48px 24px; }
.ent-studio-empty > i { font-size: 30px; color: var(--ent-muted); }
.ent-studio-empty h2 { font-size: 18px; font-weight: 800; margin: 12px 0 5px; }
.ent-studio-empty p { color: var(--ent-muted); font-size: 14px; margin: 0 auto 0; max-width: 420px; }
.ent-studio-empty .ent-btn { margin-top: 18px; }

/* ── Studio P2: curriculum + editors ─────────────────────────── */
.ent-studio-modal-scrim { position: fixed; inset: 0; background: rgba(20, 18, 31, .45); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ent-studio-modal { background: var(--ent-surface); border-radius: var(--ent-radius); box-shadow: 0 24px 70px rgba(24, 22, 60, .28); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 24px; }
.ent-studio-modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.ent-studio-modal-head h3 { flex: 1; min-width: 0; }
.ent-studio-modal h3 { font-size: 17px; font-weight: 800; margin: 4px 0 0; }
.ent-studio-modal-close { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ent-line); border-radius: 50%; background: var(--ent-surface); color: var(--ent-muted); font-size: 16px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ent-studio-modal-close:hover { border-color: rgba(32, 26, 112, .24); background: var(--ent-tint); color: var(--ent-primary); }
.ent-studio-modal-close:focus-visible { outline: 3px solid rgba(32, 26, 112, .15); outline-offset: 2px; border-color: var(--ent-primary); color: var(--ent-primary); }
.ent-studio-modal-sub { color: var(--ent-muted); font-size: 13.5px; margin: 0 0 18px; }
.ent-studio-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ent-studio-cancel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; width: 100%; }
@media (max-width: 560px) {
    .ent-studio-cancel-actions { flex-direction: column; }
    .ent-studio-cancel-actions .ent-btn { width: 100%; }
}
.ent-studio-fadepop-enter-active, .ent-studio-fadepop-leave-active { transition: opacity .18s ease; }
.ent-studio-fadepop-enter-from, .ent-studio-fadepop-leave-to { opacity: 0; }

.ent-studio-sectionrow { display: flex; align-items: flex-start; gap: 12px; }
.ent-studio-arrows { display: flex; flex-direction: column; gap: 2px; }
.ent-studio-arrow { border: 0; background: transparent; color: var(--ent-muted); cursor: pointer; padding: 1px 4px; border-radius: 6px; font-size: 13px; line-height: 1; }
.ent-studio-arrow:hover:not(:disabled) { background: var(--ent-tint); color: var(--ent-primary); }
.ent-studio-arrow:disabled { opacity: .25; cursor: default; }
.ent-studio-itemrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.ent-studio-itemrow + .ent-studio-itemrow { border-top: 1px solid var(--ent-line); }
.ent-studio-itemrow i.ent-studio-itemicon { color: var(--ent-muted); font-size: 16px; flex-shrink: 0; }
.ent-studio-itemmain { min-width: 0; flex: 1; }
.ent-studio-itemtitle { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-studio-itemsub { font-size: 12px; color: var(--ent-muted); }
.ent-studio-itemlist { border: 1px solid var(--ent-line); border-radius: var(--ent-radius-sm); margin-top: 14px; }
.ent-studio-dashed { border: 1px dashed var(--ent-line-strong); border-radius: var(--ent-radius-sm); padding: 18px; text-align: center; color: var(--ent-muted); font-size: 13.5px; margin-top: 14px; }

.ent-studio-editorbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ent-line); }
.ent-studio-editorbar-crumb { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ent-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-studio-editorwrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 26px 20px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.ent-studio-editorwrap > * { min-width: 0; }
@media (max-width: 1100px) { .ent-studio-editorwrap { grid-template-columns: 1fr; } }
.ent-studio-railcards { display: grid; gap: 14px; min-width: 0; }
.ent-studio-railcards > * { min-width: 0; max-width: 100%; }
.ent-studio-pillrow { display: flex; gap: 8px; flex-wrap: wrap; }
.ent-studio-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ent-line-strong); background: var(--ent-surface); color: var(--ent-muted); border-radius: var(--ent-radius-pill); padding: 7px 15px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.ent-studio-pill:hover { border-color: var(--ent-primary); color: var(--ent-primary); }
.ent-studio-pill.is-active { background: var(--ent-primary); border-color: var(--ent-primary); color: #fff; }
.ent-studio-drop { border: 1px dashed var(--ent-line-strong); border-radius: var(--ent-radius-sm); padding: 22px; text-align: center; }
.ent-studio-drop p { color: var(--ent-muted); font-size: 12.5px; margin: 8px 0 12px; }
.ent-studio-progress { height: 8px; border-radius: 999px; background: var(--ent-line); overflow: hidden; margin: 12px 0 8px; }
.ent-studio-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ent-secondary), var(--ent-primary)); transition: width .2s ease; }
.ent-studio-callout { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--ent-radius-sm); padding: 12px 14px; font-size: 13px; background: var(--ent-tint); color: var(--ent-ink); border: 1px solid var(--ent-line-strong); }
.ent-studio-callout i { flex-shrink: 0; margin-top: 1px; }
.ent-studio-callout.is-danger { background: #fdeceb; border-color: #f4c6c0; color: #b93a25; }
.ent-studio-callout.is-warn { background: #fdf6e3; border-color: #eadfb9; color: #8a6d1a; }
.ent-studio-media-frame iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ent-radius-sm); }
.ent-studio-media-frame audio { width: 100%; }
.ent-studio-media-frame embed, .ent-studio-media-frame object { width: 100%; height: 380px; border-radius: var(--ent-radius-sm); }
.ent-studio-filerow { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow: visible; padding: 8px 10px; font-size: 13.5px; }
.ent-studio-filerow + .ent-studio-filerow { border-top: 1px solid var(--ent-line); }
.ent-studio-filerow span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-studio-filelabel { display: block; max-width: 100%; }
.ent-studio-fileactions { display: flex; gap: 2px; flex-shrink: 0; }
.ent-studio-iconbtn { border: 0; background: transparent; color: var(--ent-muted); cursor: pointer; padding: 5px; border-radius: 7px; font-size: 15px; display: inline-flex; }
.ent-studio-iconbtn:hover { background: var(--ent-tint); color: var(--ent-primary); }
.ent-studio-iconbtn.is-danger:hover { background: #fdeceb; color: #d6472f; }

.ent-studio-rte { border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm); overflow: hidden; background: var(--ent-surface); }
.ent-studio-rte-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--ent-line); align-items: center; }
.ent-studio-rte-btn { border: 0; background: transparent; min-width: 30px; height: 30px; border-radius: 7px; font-size: 13px; color: var(--ent-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ent-studio-rte-btn:hover { background: var(--ent-tint); }
.ent-studio-rte-btn.is-on { background: var(--ent-tint); color: var(--ent-primary); }
.ent-studio-rte-sep { width: 1px; height: 18px; background: var(--ent-line-strong); margin: 0 5px; }
.ent-studio-rte select { border: 1px solid var(--ent-line-strong); border-radius: 7px; font-size: 12.5px; padding: 3px 6px; background: var(--ent-surface); }
.ent-studio-rte-body { min-height: 220px; max-height: 55vh; overflow-y: auto; padding: 14px 16px; font-size: 14.5px; line-height: 1.65; outline: 0; }
.ent-studio-rte-body:empty::before { content: attr(data-placeholder); color: var(--ent-muted); }
.ent-studio-rte-body h1 { font-size: 24px; } .ent-studio-rte-body h2 { font-size: 20px; } .ent-studio-rte-body h3 { font-size: 17px; }
.ent-studio-rte-body ul { list-style: disc; padding-left: 22px; } .ent-studio-rte-body ol { list-style: decimal; padding-left: 22px; }
.ent-studio-rte-body blockquote { border-left: 3px solid var(--ent-line-strong); margin: 8px 0; padding: 2px 12px; color: var(--ent-muted); }

.ent-studio-question-list { display: grid; gap: 10px; }
.ent-studio-question-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 15px; border: 1px solid var(--ent-line); border-radius: var(--ent-radius-sm); background: var(--ent-surface); transition: border-color .15s, box-shadow .15s; }
.ent-studio-question-card:hover { border-color: var(--ent-line-strong); box-shadow: var(--ent-shadow-sm); }
.ent-studio-question-index { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ent-tint); color: var(--ent-primary); font-size: 12px; font-weight: 800; }
.ent-studio-question-content { min-width: 0; }
.ent-studio-question-heading { display: flex; align-items: flex-start; gap: 10px; }
.ent-studio-question-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.ent-studio-question-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ent-studio-question-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ent-studio-question-count { margin-left: auto; color: var(--ent-muted); font-size: 12px; white-space: nowrap; }
.ent-studio-question-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ent-studio-question-choices span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding: 5px 8px; border-radius: 7px; background: var(--ent-bg); color: var(--ent-muted); font-size: 12.5px; }
.ent-studio-question-choices span.is-correct { background: #e9f7f0; color: #187451; }
.ent-studio-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.ent-studio-field-label-row > label { margin-bottom: 0; }
.ent-studio-field-label-row > label span { color: var(--ent-muted); font-size: 12px; font-weight: 500; }
.ent-studio-field-link { border: 0; background: transparent; padding: 2px; color: var(--ent-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.ent-studio-field-link:hover { color: var(--ent-primary); }
.ent-studio-question-category-add { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.ent-studio-question-category-add > span { color: var(--ent-muted); font-size: 12.5px; }
.ent-studio-question-category-add .ent-tip::after { left: 0; width: min(300px, calc(100vw - 80px)); transform: none; white-space: normal; line-height: 1.35; text-align: left; }
.ent-studio-question-category-add .ent-tip::before { left: 22px; }
.ent-studio-choice-editor { display: grid; gap: 10px; margin-bottom: 12px; }
.ent-studio-choice-editor-head,
.ent-studio-choice-editor-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 30px; gap: 10px; }
.ent-studio-choice-editor-head { align-items: end; color: var(--ent-muted); font-size: 12px; font-weight: 600; }
.ent-studio-choice-editor-head span:first-child { text-align: center; }
.ent-studio-choice-editor-row { align-items: start; }
.ent-studio-choice-correct { display: flex; width: 100%; height: 42px; min-height: 42px; align-items: center; justify-content: center; justify-self: stretch; }
.ent-studio-choice-correct.ent-tip::after { left: 0; transform: none; }
.ent-studio-choice-correct.ent-tip::before { left: 20px; }
.ent-studio-choice-field { min-width: 0; }
.ent-studio-choice-field .ent-input { width: 100%; }
@media (max-width: 600px) {
    .ent-studio-question-card { grid-template-columns: 28px minmax(0, 1fr); padding: 12px; }
    .ent-studio-question-index { width: 28px; height: 28px; }
    .ent-studio-question-count { width: 100%; margin-left: 0; }
    .ent-studio-question-category-add { align-items: flex-start; flex-direction: column; }
    .ent-studio-choice-editor-head,
    .ent-studio-choice-editor-row { grid-template-columns: 64px minmax(0, 1fr) 30px; gap: 8px; }
}

.ent-studio-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(9, 9, 14, .96); display: flex; flex-direction: column; }
.ent-studio-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #09090e; color: #fff; }
.ent-studio-overlay-bar strong { flex: 1; font-size: 14px; font-weight: 700; }
.ent-studio-overlay-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 10px 16px 30px; }
.ent-studio-overlay-page { background: var(--ent-surface); border-radius: var(--ent-radius); max-width: 820px; width: 100%; height: fit-content; padding: 34px 38px; }
.ent-studio-preview-note { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .72); font-size: 12.5px; }
.ent-studio-preview-shell { flex: 1; min-height: 0; overflow: hidden; background: var(--ent-bg); }
.ent-studio-preview-shell .ent-ll { height: 100%; }
.ent-studio-preview-shell .ent-ll[inert] { pointer-events: none; user-select: none; }
.ent-studio-overlay.is-course-preview { z-index: 1000; }
.ent-studio-preview-shell.is-course-preview-shell { display: flex; flex-direction: column; overflow-y: auto; }
.ent-studio-preview-shell.is-course-preview-shell > .ent-main { flex: 1 0 auto; }
.ent-studio-preview-shell.is-course-preview-shell [inert] { pointer-events: none; user-select: none; }
@media (max-width: 720px) { .ent-studio-preview-note { display: none; } }

/* ── Studio: announcements management (org page + course tab) ─────── */
/* Shared list-page header: page head left, primary action right (was
   scoped to StudioCoursesView; every studio list page uses it now). */
.ent-studio-listhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ent-studio-listhead .ent-page-head { margin-bottom: 0; }
.ent-studio-anncard { padding: 16px 18px; margin-bottom: 12px; }
.ent-studio-anncard-head { display: flex; align-items: flex-start; gap: 12px; }
.ent-studio-anncard-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--ent-tint); color: var(--ent-primary); display: grid; place-items: center; flex-shrink: 0; }
.ent-studio-anncard-titles { flex: 1; min-width: 0; }
.ent-studio-anncard-titles h3 { margin: 0; font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.ent-studio-anncard-titles p { margin: 2px 0 0; font-size: 12.5px; color: var(--ent-muted); }
.ent-studio-anncard-actions { display: flex; gap: 2px; flex-shrink: 0; }
.ent-studio-anncard-body { margin: 10px 0 0 48px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.ent-studio-anncard.is-compact { border: 1px solid var(--ent-line); border-radius: var(--ent-radius-sm); box-shadow: none; }
.ent-studio-anncard.is-compact .ent-studio-anncard-body { font-size: 13.5px; }
.ent-studio-annempty { display: flex; align-items: center; gap: 10px; color: var(--ent-muted); font-size: 14px; margin: 0; padding: 10px 0; }
.ent-studio-anntext { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; line-height: 1.55; }
@media (max-width: 560px) { .ent-studio-anncard-body { margin-left: 0; } }

/* ==========================================================================
   COURSE REVIEWS (.ent-cr-*)
   NOTE the prefix: `ent-review-*` already belongs to ASSESSMENTS ("review
   your answers"), so course reviews keep their own namespace.
   ========================================================================== */

/* --- star rating (display) --- */
.ent-cr-rating { display: inline-flex; align-items: center; gap: 6px; }
.ent-cr-stars { display: inline-flex; gap: 1px; }
/* Stars are inline SVG (.ent-star-glyph), not icon-font glyphs: the SPA's
   Lucide set is stroke-only, so a font "filled" star was just a gold
   outline. currentColor keeps the colours here. */
.ent-star-glyph { width: 1em; height: 1em; display: block; fill: currentColor; }
.ent-cr-star { position: relative; display: inline-block; line-height: 1; width: 1em; height: 1em; }
.ent-cr-star-bg { color: var(--ent-line-strong); }
/* The gold glyph overlays the empty one; halves clip it to 50% width. */
.ent-cr-star-fg { position: absolute; inset: 0; overflow: hidden; color: #f0a828; width: 0; }
.ent-cr-star.is-full .ent-cr-star-fg { width: 100%; }
.ent-cr-star.is-half .ent-cr-star-fg { width: 50%; }
.ent-cr-rating.is-sm { font-size: 13px; }
.ent-cr-rating.is-md { font-size: 15px; }
.ent-cr-rating.is-lg { font-size: 19px; }
.ent-cr-score { font-weight: 800; color: var(--ent-ink); }
.ent-cr-count { color: var(--ent-muted); font-size: .92em; }

/* --- section summary --- */
.ent-cr-summary { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-bottom: 20px; }
.ent-cr-summary-score { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ent-cr-summary-score > strong { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ent-ink); }
.ent-cr-summary-total { font-size: 13px; color: var(--ent-muted); }
.ent-cr-hist { flex: 1; min-width: 220px; max-width: 340px; list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ent-cr-hist li { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; }
.ent-cr-hist-star { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ent-muted); }
.ent-cr-hist-star .ent-star-glyph { width: 11px; height: 11px; color: #f0a828; }
.ent-cr-hist-bar { height: 7px; border-radius: var(--ent-radius-pill); background: var(--ent-line); overflow: hidden; }
.ent-cr-hist-bar > span { display: block; height: 100%; background: #f0a828; border-radius: inherit; }
.ent-cr-hist-pct { font-size: 12px; color: var(--ent-muted); text-align: right; }

/* --- composer --- */
.ent-cr-write { margin-bottom: 22px; }
.ent-cr-write-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ent-ink); }
.ent-cr-req { color: #dc2626; }
/* Missing-rating feedback is the message alone — recolouring the empty
   stars read as the stars themselves changing, not as a highlight. */
.ent-cr-composer .ent-field-err { margin: 0 0 10px; }
.ent-cr-composer .ent-input.ent-textarea { margin-top: 8px; }
.ent-cr-write-own { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ent-muted); }
.ent-cr-write-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ent-cr-stars-input { display: inline-flex; gap: 6px; margin-bottom: 6px; }
.ent-cr-star-btn {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 28px; line-height: 1; color: var(--ent-line-strong);
    display: inline-flex; transition: color .12s, transform .12s;
}
.ent-cr-star-btn:hover { transform: scale(1.08); }
/* Hovering a star also lights the ones before it (rating-picker idiom). */
.ent-cr-stars-input:hover .ent-cr-star-btn { color: #f0a828; }
.ent-cr-stars-input .ent-cr-star-btn:hover ~ .ent-cr-star-btn { color: var(--ent-line-strong); }
.ent-cr-star-btn.is-on { color: #f0a828; }
.ent-cr-star-btn:hover { color: #f0a828; }
.ent-cr-locked { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ent-muted); margin: 0 0 20px; }
.ent-cr-empty { color: var(--ent-muted); font-size: 14px; }
/* Right on desktop, full-width centred once the column stacks. */
.ent-cr-showall-row { display: flex; justify-content: flex-end; margin-top: 20px; }
.ent-cr-showall { margin: 0; }

/* --- review card --- */
/* One column by default (narrow main column, modal, phones). */
.ent-cr-list { display: grid; gap: 16px; }
.ent-cr-card { padding: 16px 0; border-top: 1px solid var(--ent-line); }
.ent-cr-list > .ent-cr-card:first-child { border-top: 0; padding-top: 0; }

/* Two columns once the page is genuinely wide: six reviews single-file made
   a very long section and pushed everything after it down the page. Keyed at
   1100px because below that the main column (sidebar still beside it) leaves
   each card too narrow for an avatar + name + badge row. */
@media (min-width: 1100px) {
    .ent-cs-main .ent-cr-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }
    /* Both cards of the first ROW lose the rule, not just the first card. */
    .ent-cs-main .ent-cr-list > .ent-cr-card:nth-child(2) { border-top: 0; padding-top: 0; }

    /* Too few reviews to fill two columns — keep one (set by the component). */
    .ent-cs-main .ent-cr-list.is-single { grid-template-columns: minmax(0, 1fr); }
    .ent-cs-main .ent-cr-list.is-single > .ent-cr-card:nth-child(2) {
        border-top: 1px solid var(--ent-line); padding-top: 16px;
    }
}
/* Wrapping head: in the two-column layout the Edit/Delete pair was squeezing
   the name column to ~140px, which broke badges across lines. Now the
   actions drop to their own line instead of crushing the identity block. */
.ent-cr-card-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ent-cr-card-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
/* Basis, not 0: below ~200px the name + badges stop fitting on a line, so
   the row wraps rather than shrinking further. */
.ent-cr-card-who { flex: 1 1 200px; min-width: 0; }
.ent-cr-card-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14.5px; }
.ent-cr-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.ent-cr-card-date { font-size: 12.5px; color: var(--ent-muted); }
.ent-cr-card-body { margin-top: 10px; font-size: 14px; }
/* Video reviews (D49): click-to-play button, then a 16:9 Vimeo frame. */
.ent-cr-card-videowrap { margin-top: 10px; }
.ent-cr-card-video {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ent-primary);
    background: var(--ent-tint); border: 1px solid var(--ent-line);
    border-radius: var(--ent-radius-pill); padding: 6px 14px; cursor: pointer;
}
.ent-cr-card-video:hover { background: var(--ent-surface-2, #F1F0FA); }
.ent-cr-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.ent-cr-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Composer preview + upload states. */
.ent-cr-video-compose { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.ent-cr-video-compose .ent-cr-video-frame { flex: 1 1 100%; max-width: 420px; }
.ent-cr-video-progress { flex: 1 1 160px; height: 6px; border-radius: 999px; background: var(--ent-line); overflow: hidden; }
.ent-cr-video-progress span { display: block; height: 100%; background: var(--ent-primary); border-radius: inherit; transition: width .2s ease; }
.ent-cr-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--ent-radius-pill);
    background: var(--ent-tint); color: var(--ent-muted);
    /* Never break "Enterprise Learner" across two lines. */
    white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.ent-cr-badge i { font-size: 11px; }
.ent-cr-badge.is-mine { background: rgba(32, 26, 112, .1); color: var(--ent-primary); }
/* Source badges: enterprise learners get a brand tint, individual learners
   the neutral default, so the two are told apart at a glance. */
.ent-cr-badge.is-enterprise { background: rgba(32, 26, 112, .06); color: var(--ent-secondary); }

/* --- sidebar figure --- */
.ent-cr-sidemeta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ent-line); }

/* --- "all reviews" modal --- */
.ent-crm-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(18, 16, 45, .45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ent-crm {
    position: relative;
    width: min(720px, 100%); max-height: min(86vh, 860px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: var(--ent-radius); box-shadow: var(--ent-shadow-md);
    overflow: hidden;
}
/* Padding-right clears the absolutely-positioned close button, so a long
   course subtitle never runs under it. */
.ent-crm-head { padding: 20px 66px 12px 22px; }
.ent-crm-title { font-size: 20px; font-weight: 800; margin: 0; }
.ent-crm-sub { margin: 2px 0 0; font-size: 13px; color: var(--ent-muted); }
/* Pinned to the panel corner rather than pushed there by flex: as a flex
   item its margin-left:auto was defeated by the header's own layout, so the
   X landed mid-header next to the subtitle instead of at the edge. */
.ent-crm-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--ent-muted);
    transition: background .15s, color .15s;
}
.ent-crm-close:hover { color: var(--ent-ink); background: var(--ent-tint); }
.ent-crm-summary { padding: 0 22px 14px; }
.ent-crm-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 12px; }
/* Count left, source filter hard right — the row the filter acts on. */
.ent-crm-filterrow {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 0 22px 14px;
    border-bottom: 1px solid var(--ent-line);
}
.ent-crm-filterrow .ent-crm-sources { margin-left: auto; }
.ent-crm-search { position: relative; flex: 1; min-width: 180px; display: flex; align-items: center; }
.ent-crm-search i { position: absolute; left: 12px; font-size: 15px; color: var(--ent-muted); pointer-events: none; }
.ent-crm-search input {
    width: 100%; height: 40px; padding: 0 12px 0 34px;
    border: 1px solid var(--ent-line-strong); border-radius: var(--ent-radius-sm);
    font-size: 14px; color: var(--ent-ink); background: #fff;
}
.ent-crm-search input:focus { outline: none; border-color: var(--ent-primary); box-shadow: 0 0 0 4px rgba(32,26,112,.08); }
.ent-crm-sources { display: inline-flex; gap: 4px; padding: 3px; background: var(--ent-tint); border-radius: var(--ent-radius-pill); }
.ent-crm-srcbtn {
    border: 0; background: none; cursor: pointer;
    padding: 6px 12px; border-radius: var(--ent-radius-pill);
    font-size: 12.5px; font-weight: 700; color: var(--ent-muted);
}
.ent-crm-srcbtn.is-active { background: #fff; color: var(--ent-primary); box-shadow: var(--ent-shadow-sm); }
.ent-crm-body { flex: 1; overflow-y: auto; padding: 10px 22px 22px; }
/* min-height keeps the filter row from jumping while the count is absent
   (loading / error). */
.ent-crm-count { font-size: 12.5px; color: var(--ent-muted); margin: 0; min-height: 1em; }
.ent-crm-empty { color: var(--ent-muted); font-size: 14px; padding: 24px 0; text-align: center; }
.ent-crm-enter-active, .ent-crm-leave-active { transition: opacity .16s ease; }
.ent-crm-enter-from, .ent-crm-leave-to { opacity: 0; }

/* --- My Reviews page --- */
.ent-cr-awaiting { padding: 18px 20px; margin-bottom: 18px; }
.ent-cr-awaiting-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin: 0 0 12px; }
.ent-cr-awaiting-title i { color: #f0a828; }
.ent-cr-awaiting-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ent-cr-awaiting-row { display: flex; align-items: center; gap: 12px; }
.ent-cr-awaiting-list img { width: 56px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ent-cr-awaiting-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-cr-mine { padding: 18px 20px; margin-bottom: 12px; }
.ent-cr-mine-head { display: flex; align-items: flex-start; gap: 12px; }
.ent-cr-mine-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ent-cr-mine-who { flex: 1; min-width: 0; }
.ent-cr-mine-course { font-weight: 700; font-size: 15px; color: var(--ent-ink); text-decoration: none; }
.ent-cr-mine-course:hover { color: var(--ent-primary); text-decoration: underline; }
.ent-cr-mine-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.ent-cr-mine-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ent-cr-mine-body { margin: 12px 0 0; font-size: 14px; }
.ent-cr-mine-norating { color: var(--ent-muted); font-style: italic; }

@media (max-width: 640px) {
    .ent-cr-summary { gap: 16px; }
    .ent-cr-hist { max-width: none; }
    /* Centred and full-width on phones. */
    .ent-cr-showall-row { justify-content: center; }
    .ent-cr-showall { width: 100%; justify-content: center; }
    .ent-crm-backdrop { padding: 0; align-items: flex-end; }
    .ent-crm { max-height: 92vh; border-radius: var(--ent-radius) var(--ent-radius) 0 0; }
    .ent-cr-mine-actions { flex-direction: column; }
}