/* =========================================================================
   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-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-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); }
.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; }
.ent-section-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ent-primary); }
.ent-section-head a 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 { 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 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; 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); }

.ent-cs-section { margin-bottom: 36px; }
.ent-cs-section > h3 { font-size: 19px; font-weight: 800; margin-bottom: 14px; }
.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; }