/* =======================================================================
   coursevo.css — component styles for Coursevo (standalone, no modern.css)
   ======================================================================= */

/* ===== Assessment card list (.ac-*) ===================================== */
#pMain .ac-wrap { margin: 8px 0; }

/* Section title */
#pMain .ac-section-title {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 8px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--c-brand);
    font-size: 15px; font-weight: 600;
    color: #1e3a5f;
}
#pMain .ac-section-title i { color: var(--c-brand); font-size: 16px; }

/* Card container */
#pMain .ac-list {
    border: 1px solid #cddaea;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Column header row */
#pMain .ac-head {
    display: flex; align-items: center;
    padding: 8px 16px;
    background: #eaf0f7;
    border-bottom: 1px solid #cddaea;
    font-size: 12px; font-weight: 600;
    color: #4a6080;
}
#pMain .ac-head-icon   { width: 44px; flex-shrink: 0; }
#pMain .ac-head-title  { flex: 1; }
#pMain .ac-head-status { width: 120px; text-align: center; flex-shrink: 0; }
#pMain .ac-head-dates  { width: 240px; text-align: right; flex-shrink: 0; }

/* Card rows */
#pMain a.ac-row,
#pMain div.ac-row {
    display: flex; align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f4f8;
    background: #fff;
    text-decoration: none !important;
    color: #2d3748;
    border-left: 4px solid #d1dce8;
    transition: background var(--t), border-left-color var(--t);
}
#pMain a.ac-row:last-child,
#pMain div.ac-row:last-child { border-bottom: none; }
#pMain a.ac-row:hover { background: #f4f8fd; border-left-color: var(--c-brand); text-decoration: none !important; }

#pMain .ac-row.ac-active  { border-left-color: #48bb78; }
#pMain .ac-row.ac-expired { border-left-color: #fc8181; }
#pMain .ac-row.ac-waiting { border-left-color: #f6ad55; }

/* Icon */
#pMain .ac-icon {
    width: 44px; flex-shrink: 0;
    font-size: 18px; color: #b0bec5;
}
#pMain .ac-row.ac-active  .ac-icon { color: #38a169; }
#pMain .ac-row.ac-expired .ac-icon { color: #e53e3e; }
#pMain .ac-row.ac-waiting .ac-icon { color: #dd6b20; }

/* Title */
#pMain .ac-name {
    flex: 1;
    font-size: 14px !important; font-weight: 600;
    color: #1a4f82;
}
#pMain div.ac-row .ac-name { color: #718096; font-weight: 400; }

/* Status */
#pMain .ac-status { width: 120px; text-align: center; flex-shrink: 0; }
#pMain .ac-badge {
    display: inline-block; padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px !important; font-weight: 700;
}
#pMain .ac-badge-active  { background: #d4edda; color: #1a6632; }
#pMain .ac-badge-expired { background: #f8d7da; color: #842029; }
#pMain .ac-badge-waiting { background: #fff3cd; color: #856404; }

/* Dates */
#pMain .ac-dates {
    width: 240px; flex-shrink: 0;
    text-align: right;
    font-size: 13px !important; color: #64748b;
}
#pMain .ac-dates-sep { color: #aab8c8; margin: 0 4px; }

#pMain .ac-empty {
    padding: 36px 20px; text-align: center;
    color: #94a3b8; font-size: 13px; font-style: italic;
}
#pMain .ac-nav { margin-top: 8px; text-align: right; }

/* =======================================================================
   Site Hero — split layout (logo-left / carousel-right)
   Applies to organization + portal landing pages in start.jsp
   ======================================================================= */

/* ===== Hero row ========================================================= */
.ce-hero-row {
    display: flex;
    height: 360px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}

/* ===== Left panel: logo + title ======================================== */
.ce-hero-left {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
    background: linear-gradient(160deg, #f0f7ff 0%, #e4f0fb 100%);
    border-right: 1px solid var(--c-border-soft);
    animation: ce-hero-fadein 0.4s ease both;
}

.ce-hero-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
}

.ce-hero-site-title {
    margin: 16px 0 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    line-height: 1.35;
    font-family: 'Lato', 'Roboto', sans-serif;
}

/* ===== Right panel: carousel =========================================== */
.ce-hero-right {
    flex: 1;
    position: relative;
    min-width: 0;
    background: #0f2744;
}

.ce-hero-right .carousel,
.ce-hero-right .carousel-inner,
.ce-hero-right .carousel-inner > .item {
    height: 360px;
}

.ce-hero-slide-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

/* ===== Fallback: blurred + darkened logo ================================ */
.ce-hero-fallback-wrap {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #0f2744;
}

.ce-hero-fallback-bg {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    object-fit: cover;
    filter: blur(18px) brightness(0.45) saturate(1.4);
    transform: scale(1.05);
}

/* ===== Carousel controls =============================================== */
.ce-hero-right .carousel-control {
    background-image: none !important;
    background: rgba(0, 0, 0, 0.12);
    width: 40px;
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.ce-hero-right:hover .carousel-control { opacity: .75; }
.ce-hero-right .carousel-control:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.32) !important;
}
.ce-hero-right .carousel-control .glyphicon {
    font-size: 16px;
    margin-top: -8px;
}

/* ===== Carousel indicators ============================================= */
.ce-hero-right .carousel-indicators {
    bottom: 10px;
    left: 0; right: 0;
    margin: 0;
    z-index: 15;
}
.ce-hero-right .carousel-indicators li {
    background: rgba(255, 255, 255, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.65);
    width: 8px; height: 8px;
    border-radius: 50%;
    margin: 0 3px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.ce-hero-right .carousel-indicators .active {
    background: #fff;
    border-color: #fff;
    width: 10px; height: 10px;
    transform: scale(1.15);
}

/* ===== Description card below hero ===================================== */
.ce-site-desc-section {
    background: var(--c-brand-softer);
    border-left: 4px solid var(--c-brand);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 18px 24px;
    margin: 0 0 20px 0;
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
}
.ce-site-desc-section p:last-child { margin-bottom: 0; }

/* ===== Mobile: side-by-side 50/50 ====================================== */
@media (max-width: 767px) {
    .ce-hero-row {
        height: 240px;
    }
    .ce-hero-left {
        flex: 0 0 50%;
        padding: 16px 12px;
    }
    .ce-hero-right .carousel,
    .ce-hero-right .carousel-inner,
    .ce-hero-right .carousel-inner > .item,
    .ce-hero-slide-img,
    .ce-hero-fallback-wrap {
        height: 240px;
    }
}

/* ===== Entrance animation ============================================== */
@keyframes ce-hero-fadein {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* =======================================================================
   UI Renovation — Left panel, Navbar, Login, Cards
   ======================================================================= */

:root {
    /* Tokens previously supplied by modern.css */
    --t:               .15s ease;
    --radius-sm:       4px;
    --radius-md:       8px;
    --radius-lg:       10px;
    --radius-pill:     999px;
    --shadow-sm:       0 1px 2px rgba(15,23,42,.06);
    --shadow-md:       0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
    --shadow-lg:       0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04);
    --c-brand:         #3C84BD;
    --c-brand-softer:  #f3f9fd;
    --c-border-soft:   #f1f5f9;
    --radius:          6px;
    --c-surface:       #ffffff;
    --c-surface-2:     #f8fafc;
    --c-muted:         #6b7280;
    --c-success:       #16a34a;
    --c-success-soft:  #f0fdf4;
    --c-warning:       #d97706;
    --c-warning-soft:  #fffbeb;
    --c-danger:        #dc2626;
    --c-danger-soft:   #fef2f2;
    --c-info:          #0284c7;
    --c-info-soft:     #eff6ff;

    /* Coursevo palette */
    --cv-dark:         #1a3558;
    --cv-mid:          #2d5a8e;
    --cv-panel-bg:     #dce8f5;
    --cv-panel-border: #c8daf0;
    --cv-item-hover:   #e8f2fb;
    --cv-item-active:  #ddeeff;
}

/* --- Navbar ------------------------------------------------------------ */
.cv-navbar {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%) !important;
    border: none !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* --- Left-panel top spacing -------------------------------------------- */
#accmenu { margin-top: 8px; }

/* --- Left-panel accordion cards --------------------------------------- */
.cv-panel-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 7px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--cv-panel-border);
}
.cv-panel-header {
    display: block;
    background: var(--cv-panel-bg);
    padding: 9px 14px;
    text-decoration: none !important;
    border-bottom: 1px solid var(--cv-panel-border);
    cursor: pointer;
    transition: background var(--t);
}
.cv-panel-header:hover { background: #cdd8ec; text-decoration: none !important; }
.cv-panel-title {
    color: var(--cv-dark);
    font-weight: 600;
    font-size: 95%;
    display: flex;
    align-items: center;
}
.cv-panel-title .cv-icon    { margin-right: 8px; color: var(--cv-mid); }
.cv-panel-title .cv-chevron { font-size: 80%; opacity: 0.5; color: var(--cv-mid); }

.cv-menu-item {
    display: flex !important;
    align-items: center;
    padding: 7px 12px !important;
    border-left: none !important;
    border-right: none !important;
    border-color: #dce8f5 !important;
    transition: background var(--t);
}
.cv-menu-item:hover                       { background: var(--cv-item-hover); }
.cv-menu-item.titleBox,
.cv-menu-item.title5                      { background: linear-gradient(90deg, #d0e8ff 0%, #eef5ff 100%) !important; border-left: 4px solid var(--cv-mid) !important; padding-left: 9px !important; font-weight: 700; color: var(--cv-dark); }
.cv-menu-img  { margin-right: 9px; opacity: 0.75; flex-shrink: 0; }
.cv-menu-link { color: var(--cv-dark) !important; font-size: 91%; text-decoration: none !important; }

/* --- Non-logged-in stats card ----------------------------------------- */
.cv-stat-card {
    background: #ccdff0;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    border: 1px solid #a8c4dc;
    overflow: hidden;
}
.cv-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid #a8c4dc;
}
.cv-stat-row:last-child { border-bottom: none; }
.cv-stat-label { color: #555; font-size: 90%; }
.cv-stat-value { color: var(--cv-dark); font-size: 105%; font-weight: 700; }

/* --- Non-logged-in links card ----------------------------------------- */
.cv-links-card {
    background: #ccdff0;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    border: 1px solid #a8c4dc;
    overflow: hidden;
}
.cv-links-header {
    padding: 6px 12px;
    border-bottom: 1px solid #a8c4dc;
    font-size: 82%;
    font-weight: 700;
    color: var(--cv-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cv-link-item {
    display: block;
    padding: 7px 12px;
    color: var(--cv-mid) !important;
    font-size: 91%;
    text-decoration: none !important;
    transition: background var(--t);
}
.cv-link-item:hover { background: #e8f0fa; text-decoration: none !important; }
.cv-link-item + .cv-link-item { border-top: 1px solid #a8c4dc; }

/* --- Site info card (left panel, non-logged-in) ----------------------- */
.cv-site-info {
    margin-bottom: 12px;
    background: #ccdff0;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    border: 1px solid #a8c4dc;
}
.cv-site-info h4 {
    color: var(--cv-dark);
    font-weight: 700;
    border-bottom: 2px solid var(--cv-mid);
    padding-bottom: 6px;
    margin-bottom: 6px;
    margin-top: 0;
}
.cv-site-info .cv-site-desc { color: #2a4a6e; font-size: 91%; line-height: 1.5; }

/* --- Login card ------------------------------------------------------- */
.cv-login-card {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
    overflow: hidden;
}
.cv-login-card-header {
    padding: 16px 20px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.13);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.cv-login-card-body { padding: 16px 20px; }

/* --- myCourses page panels -------------------------------------------- */
.cv-page-panel { border-color: var(--cv-panel-border) !important; }
.cv-page-panel > .panel-heading {
    background: var(--cv-panel-bg) !important;
    border-color: var(--cv-panel-border) !important;
    color: var(--cv-dark);
    font-weight: 600;
}
.cv-page-panel > .panel-heading i { color: var(--cv-mid); margin-right: 7px; }

/* --- Course cards (myCourses) ----------------------------------------- */
.cv-course-card {
    background: #fff;
    border: 1px solid #c4d8ee;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    padding: 10px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-course-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }

/* --- Course action buttons -------------------------------------------- */
.btn.cv-action-btn {
    background: #f0f5fb !important;
    border: 1px solid var(--cv-panel-border) !important;
    color: var(--cv-mid) !important;
    transition: background var(--t), border-color var(--t);
}
.btn.cv-action-btn:hover {
    background: var(--cv-panel-bg) !important;
    border-color: var(--cv-mid) !important;
    color: var(--cv-dark) !important;
}

/* --- Right sidebar activity rows -------------------------------------- */
.cv-info-row {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--cv-panel-border);
    font-size: 93%;
    color: #374151;
}
.cv-info-row:last-child { border-bottom: none; }
.cv-info-row i { font-size: 16px; margin-right: 9px; flex-shrink: 0; }
.cv-info-row .badge { margin-left: auto; flex-shrink: 0; }
.cv-info-row a { display: flex; align-items: center; width: 100%; color: inherit; text-decoration: none !important; }
.cv-info-row a .badge { margin-left: auto; }

/* --- My Programs badges ----------------------------------------------- */
.cv-page-panel .badge { background-color: var(--cv-mid); color: #fff; }

/* --- Logout button (dark statusbar) ----------------------------------- */
.cv-logout-btn {
    background: transparent !important;
    border: 1px solid rgba(255,120,120,0.45) !important;
    color: #ff9090 !important;
    padding: 1px 7px !important;
}


/* =======================================================================
   Catalog (programs.jsp) — browse tree, toolbar, course cards
   ======================================================================= */

/* --- Left panel: search ------------------------------------------------ */
.cv-catalog-search {
    display: flex;
    margin: 0;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid var(--cv-panel-border);
}
.cv-catalog-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--cv-panel-border);
    border-right: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    padding: 5px 12px;
    font-size: 91%;
    outline: none;
    transition: border-color var(--t);
}
.cv-catalog-search input:focus { border-color: var(--cv-mid); }
.cv-catalog-search button {
    border: 1px solid var(--cv-mid);
    background: var(--cv-mid);
    color: #fff;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    padding: 5px 12px;
    cursor: pointer;
    transition: background var(--t);
}
.cv-catalog-search button:hover { background: var(--cv-dark); }

/* --- Left panel: program/category tree --------------------------------- */
.cv-catalog-tree { background: #fff; }
.cv-catalog-prog,
.cv-catalog-cat {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    color: var(--cv-dark) !important;
    font-size: 91%;
    text-decoration: none !important;
    border-bottom: 1px solid var(--c-border-soft);
    transition: background var(--t);
}
.cv-catalog-prog:hover,
.cv-catalog-cat:hover { background: var(--cv-item-hover); }
.cv-catalog-prog.selected {
    background: linear-gradient(90deg, #d0e8ff 0%, #eef5ff 100%);
    border-left: 4px solid var(--cv-mid);
    padding-left: 8px;
    font-weight: 700;
}
.cv-catalog-caret {
    font-size: 70%;
    width: 14px;
    margin-right: 6px;
    color: var(--cv-mid);
    opacity: 0.6;
    flex-shrink: 0;
}
.cv-catalog-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.cv-catalog-name .fa-tag { font-size: 80%; opacity: 0.5; margin-right: 3px; }
.cv-catalog-count {
    margin-left: 8px;
    flex-shrink: 0;
    background: var(--cv-panel-bg);
    color: var(--cv-mid);
    font-size: 82%;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
}
.cv-catalog-prog.selected .cv-catalog-count,
.cv-catalog-cat.selected .cv-catalog-count { background: var(--cv-mid); color: #fff; }
.cv-catalog-progs { background: #fbfdff; }
.cv-catalog-progs .cv-catalog-prog { padding-left: 28px; }
.cv-catalog-progs .cv-catalog-prog.selected { padding-left: 24px; }
.cv-catalog-cats { background: #f7fafd; }
.cv-catalog-cats .cv-catalog-cat { padding-left: 48px; }
.cv-catalog-cats .cv-catalog-cat.selected {
    background: var(--cv-item-active);
    font-weight: 700;
    border-left: 4px solid var(--cv-mid);
    padding-left: 44px;
}

/* --- Left panel: active filter chips ----------------------------------- */
.cv-catalog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px;
    background: #fff;
    border-top: 1px solid var(--cv-panel-border);
}
.cv-catalog-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    background: var(--cv-panel-bg);
    border: 1px solid var(--cv-panel-border);
    color: var(--cv-dark) !important;
    font-size: 84%;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    transition: background var(--t), border-color var(--t);
}
.cv-catalog-chip:hover { background: #cdd8ec; border-color: var(--cv-mid); }
.cv-catalog-chip > .fa:first-child { font-size: 80%; margin-right: 5px; opacity: 0.6; }
.cv-catalog-chip .cv-chip-x { margin-left: 6px; font-size: 80%; opacity: 0.55; }
.cv-catalog-chip:hover .cv-chip-x { opacity: 1; color: #c0392b; }

/* --- Main: header ------------------------------------------------------ */
.cv-catalog-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 12px;
}
.cv-catalog-title {
    margin: 0;
    font-size: 170%;
    color: var(--cv-dark);
    font-weight: 700;
}
.cv-catalog-title > .fa { color: var(--cv-mid); font-size: 80%; margin-right: 4px; }
.cv-catalog-crumb-sep { color: #9ab; margin: 0 2px; font-weight: 400; }
.cv-catalog-crumb { font-size: 75%; font-weight: 600; color: var(--cv-mid); }
.cv-catalog-crumb .fa { font-size: 85%; opacity: 0.6; }
.cv-catalog-results {
    margin-left: auto;
    color: #6b7c93;
    font-size: 90%;
    white-space: nowrap;
}

/* --- Main: toolbar (type tabs + sort) ----------------------------------- */
.cv-catalog-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
}
.cv-catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.cv-catalog-tab {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--cv-panel-border);
    background: #fff;
    color: var(--cv-mid) !important;
    font-size: 91%;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--t), border-color var(--t);
}
.cv-catalog-tab:hover { background: var(--cv-item-hover); border-color: var(--cv-mid); }
.cv-catalog-tab.active {
    background: var(--cv-mid);
    border-color: var(--cv-mid);
    color: #fff !important;
}
.cv-catalog-tab-count {
    margin-left: 7px;
    background: var(--cv-panel-bg);
    color: var(--cv-mid);
    font-size: 82%;
    font-weight: 700;
    padding: 0 7px;
    border-radius: var(--radius-pill);
}
.cv-catalog-tab.active .cv-catalog-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.cv-catalog-sortbox {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--cv-mid);
    margin-left: auto;
}
.cv-catalog-sortbox select {
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--cv-dark);
    font-size: 90%;
    padding: 3px 6px;
    outline: none;
}

/* --- Main: course cards ------------------------------------------------- */
.cv-catalog-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px;
    margin-bottom: 10px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-catalog-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-catalog-thumb { flex-shrink: 0; }
.cv-catalog-thumb img {
    width: 130px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
}
.cv-catalog-body { flex: 1; min-width: 0; }
.cv-catalog-card-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.cv-catalog-card-title {
    margin: 0;
    font-size: 112%;
    font-weight: 700;
    flex: 1;
    min-width: 200px;
}
.cv-catalog-card-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-catalog-card-title a:hover { color: var(--cv-mid) !important; text-decoration: underline !important; }
.cv-catalog-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.cv-catalog-code {
    background: var(--cv-panel-bg);
    color: var(--cv-mid);
    font-size: 80%;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.cv-catalog-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cv-catalog-dot.on  { background: #2d9e6b; box-shadow: 0 0 0 3px rgba(45,158,107,0.18); }
.cv-catalog-dot.off { background: #b6bec9; }
.cv-catalog-ico { font-size: 100%; color: #7a8aa0; }
.cv-catalog-ico.cv-ok   { color: #2d9e6b; }
.cv-catalog-ico.cv-warn { color: #e67e22; }
.cv-catalog-ico.cv-off  { color: #c0392b; }
.cv-catalog-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.cv-chip {
    display: inline-flex;
    align-items: center;
    background: #f3f7fb;
    border: 1px solid var(--c-border-soft);
    color: #46586e;
    font-size: 82%;
    padding: 1px 9px;
    border-radius: var(--radius-pill);
}
.cv-chip .fa { font-size: 80%; margin-right: 5px; opacity: 0.55; }
.cv-chip.cv-chip-type { background: var(--c-brand-softer); color: var(--cv-mid); font-weight: 600; }
.cv-catalog-instr {
    margin-top: 7px;
    font-size: 88%;
    color: #46586e;
}
.cv-catalog-instr .fa { font-size: 85%; margin-right: 5px; opacity: 0.55; color: var(--cv-mid); }
.cv-catalog-desc {
    margin-top: 6px;
    font-size: 88%;
    color: #5c6b7f;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Main: empty state --------------------------------------------------- */
.cv-catalog-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 45px 20px;
    margin-bottom: 10px;
}
.cv-catalog-empty > .fa {
    font-size: 42px;
    color: var(--cv-panel-border);
    display: block;
    margin-bottom: 12px;
}
.cv-catalog-empty h2 {
    margin: 0 0 16px 0;
    font-size: 130%;
    color: #6b7c93;
    font-weight: 600;
}

/* --- Main: pagination ----------------------------------------------------- */
.cv-catalog-pager { padding: 4px 0 12px 0; }

@media (max-width: 600px) {
    .cv-catalog-card { flex-direction: column; }
    .cv-catalog-thumb img { width: 100%; height: 130px; }
}

/* =======================================================================
   Course landing (lesson.jsp) — cv-lesson-*
   ======================================================================= */

/* --- Hero ---------------------------------------------------------------- */
.cv-lesson-hero {
    display: flex;
    align-items: stretch;
    gap: 22px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: #fff;
    padding: 24px;
    margin-bottom: 18px;
}
.cv-lesson-hero-media {
    flex: 0 0 220px;
    align-self: flex-start;
    position: relative;
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 8px;
}
.cv-lesson-hero-media img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.cv-lesson-hero-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--cv-panel-bg), var(--c-brand-softer));
    color: var(--cv-mid);
}
.cv-lesson-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: transform var(--t), background-color var(--t);
}
.cv-lesson-play:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.12);
}
.cv-lesson-hero-body { flex: 1; min-width: 0; }
.cv-lesson-hero-title {
    margin: 0 0 8px 0;
    font-size: 150%;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.cv-lesson-code {
    display: inline-block;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 65%;
    font-weight: 600;
    padding: 2px 12px;
    margin-left: 8px;
    white-space: nowrap;
}
.cv-lesson-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}
.cv-lesson-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 85%;
    padding: 3px 12px;
}
.cv-lesson-meta-chip .fa { opacity: 0.7; }
.cv-lesson-meta-chip .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.cv-lesson-meta-chip.is-open    { background: rgba(22, 163, 74, 0.45); }
.cv-lesson-meta-chip.is-soon    { background: rgba(2, 132, 199, 0.45); }
.cv-lesson-meta-chip.is-today   { background: rgba(217, 119, 6, 0.55); }
.cv-lesson-meta-chip.is-expired { background: rgba(220, 38, 38, 0.55); }
.cv-lesson-share {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.cv-lesson-share .btn-social-icon { box-shadow: var(--shadow-sm); }

/* X (formerly Twitter) share button */
.btn-social-icon.cv-btn-x {
    background: #000;
    border-color: #000;
    color: #fff;
}
.btn-social-icon.cv-btn-x:hover,
.btn-social-icon.cv-btn-x:focus {
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #fff;
}

/* --- Hero: rating stars -------------------------------------------------- */
.cv-lesson-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cv-lesson-star {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.45);
}
.cv-lesson-star.is-active { color: #fbbf24; }
.cv-lesson-rating--editable .cv-lesson-star {
    cursor: pointer;
    transition: transform var(--t), color var(--t);
}
.cv-lesson-rating--editable .cv-lesson-star:hover { transform: scale(1.15); }
.cv-lesson-rating--editable .cv-lesson-star.is-hover { color: #fde68a; }
.cv-lesson-rating-count {
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.cv-lesson-rate-clear {
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    cursor: pointer;
    transition: color var(--t);
}
.cv-lesson-rate-clear:hover { color: #fff; }

/* --- Hero: registration CTA card ----------------------------------------- */
.cv-lesson-hero-cta {
    flex: 0 0 230px;
    align-self: flex-start;
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: #333;
    padding: 10px;
    font-size: 92%;
    text-align: center;
}
.cv-lesson-hero-cta .alert {
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    text-align: left;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.cv-lesson-hero-cta .alert-success { background: var(--c-success-soft); color: #14532d; border-left-color: var(--c-success); }
.cv-lesson-hero-cta .alert-warning { background: var(--c-warning-soft); color: #78350f; border-left-color: var(--c-warning); }
.cv-lesson-hero-cta .alert-danger  { background: var(--c-danger-soft);  color: #7f1d1d; border-left-color: var(--c-danger); }
.cv-lesson-hero-cta .btn { border-radius: var(--radius); }
.cv-lesson-hero-cta .form-control { border-radius: var(--radius); }
.cv-lesson-reg-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 98%;
    font-weight: 600;
    color: var(--c-muted);
    padding: 2px 0 6px 0;
}
.cv-lesson-reg-state .fa { font-size: 110%; }
.cv-lesson-reg-state.is-registered { color: var(--c-success); }
.cv-lesson-reg-state.is-admin      { color: var(--cv-mid); }

/* --- External course page (course_page.jsp) -------------------------------- */
body.cv-extpage { background: #f4f7fa; }

/* --- Masonry card grid ------------------------------------------------------
   CSS multi-column layout: cards pack top-to-bottom with no vertical voids,
   and a missing card (e.g. no instructors) leaves no hole. Card order is the
   markup order, flowing down the left column first, then the right.
   Single column below 992px. */
.cv-lesson-grid { column-gap: 16px; }
@media (min-width: 992px) {
    .cv-lesson-grid { column-count: 2; }
}
.cv-lesson-grid > .cv-lesson-card,
.cv-lesson-grid > .cv-lesson-license {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* --- Content cards -------------------------------------------------------- */
.cv-lesson-card {
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    transition: box-shadow var(--t);
}
.cv-lesson-card:hover { box-shadow: var(--shadow-md); }
.cv-lesson-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border-soft);
}
.cv-lesson-card-header .fa,
.cv-lesson-card-header .fas { color: var(--cv-mid); }
.cv-lesson-card-title {
    margin: 0;
    font-size: 105%;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-lesson-card-body { padding: 12px 14px; }
.cv-lesson-card-body h5 {
    font-weight: 700;
    color: var(--cv-dark);
    margin: 14px 0 6px 0;
}

/* --- Instructors / staff --------------------------------------------------- */
.cv-lesson-instructor {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border-soft);
}
.cv-lesson-instructor:first-child { padding-top: 0; }
.cv-lesson-instructor:last-child  { border-bottom: 0; padding-bottom: 0; }
.cv-lesson-instructor img.img-circle {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    object-fit: cover;
}
.cv-lesson-instructor-info { flex: 1; min-width: 0; font-size: 92%; }
.cv-lesson-cv {
    max-height: 120px;
    overflow: auto;
    margin-top: 6px;
    font-size: 85%;
    color: #5c6b7f;
    line-height: 1.5;
}
.cv-lesson-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.cv-lesson-staff {
    display: flex;
    gap: 10px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    padding: 8px;
    font-size: 90%;
}
.cv-lesson-staff img { width: 50px; height: 50px; flex-shrink: 0; object-fit: cover; }
.cv-lesson-staff-info { min-width: 0; }
.cv-lesson-staff-info .cv-lesson-headline { font-size: 88%; color: var(--c-muted); margin: 3px 0; }

/* --- Course structure (units) ---------------------------------------------- */
.cv-lesson-units {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow: auto;
}
.cv-lesson-unit { border-bottom: 1px solid var(--c-border-soft); }
.cv-lesson-unit:last-child { border-bottom: 0; }
.cv-lesson-unit > a,
.cv-lesson-unit > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    color: var(--cv-dark);
    text-decoration: none !important;
    transition: background-color var(--t);
}
.cv-lesson-unit > a:hover { background: var(--cv-item-hover); color: var(--cv-mid); }
.cv-lesson-unit img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
    object-fit: cover;
}
.cv-lesson-unit.is-locked > span { color: var(--c-muted); }
.cv-lesson-unit .fa-lock { margin-left: auto; font-size: 85%; opacity: 0.5; }

/* --- Stats chart / teaching info / license --------------------------------- */
.cv-lesson-chart-wrap {
    position: relative;
    height: 280px;
    padding: 10px;
}
.cv-lesson-info-block { padding: 6px 0; }
.cv-lesson-info-block + .cv-lesson-info-block { border-top: 1px solid var(--c-border-soft); }
.cv-lesson-info-title {
    font-weight: 700;
    color: var(--cv-dark);
    margin: 6px 0;
}
.cv-lesson-info-body { line-height: 1.6; }
.cv-lesson-license {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    color: var(--c-muted);
    font-size: 88%;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.cv-lesson-license .fab { margin-right: 8px; font-size: 120%; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1199px) {
    .cv-lesson-hero-cta { flex-basis: 210px; }
}
@media (max-width: 991px) {
    .cv-lesson-hero { flex-direction: column; }
    .cv-lesson-hero-media {
        flex-basis: auto;
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }
    .cv-lesson-hero-cta { flex-basis: auto; width: 100%; }
    .cv-lesson-share { justify-content: center; }
}
@media (max-width: 600px) {
    .cv-lesson-hero { padding: 14px; }
    .cv-lesson-hero-title { font-size: 120%; }
    .cv-lesson-star { font-size: 18px; }
}

/* =======================================================================
   Course structure browse (course_unit.jsp / course_unit_view.jsp) — cv-unit-*
   ======================================================================= */

/* --- Layout: full-width content, structure rail on top --------------------- */
.cv-unit-main { min-width: 0; }

/* Circular unit-number badge (unit header card, overview cards) */
.cv-unit-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cv-mid);
    color: #fff;
    font-size: 80%;
    font-weight: 700;
}

/* --- Horizontal unit rail -------------------------------------------------- */
.cv-unit-rail { margin-bottom: 14px; }
.cv-unit-rail-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 88%;
    font-weight: 700;
    color: var(--cv-dark);
    margin-bottom: 7px;
}
.cv-unit-rail-label .fa { color: var(--cv-mid); }
.cv-unit-rail-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 3px 2px 10px;
    scroll-snap-type: x proximity;
}
.cv-unit-tile {
    flex: 0 0 150px;
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: block;
    scroll-snap-align: start;
    text-decoration: none !important;
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.cv-unit-tile:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; transform: translateY(-2px); }
.cv-unit-tile.is-current {
    border-color: var(--cv-mid);
    box-shadow: 0 0 0 2px var(--cv-mid), var(--shadow-md);
}
.cv-unit-tile-media {
    position: relative;
    height: 64px;
    background: var(--c-brand-softer);
    overflow: hidden;
}
.cv-unit-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px 6px 6px 46px;
}
.cv-unit-tile-num {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
.cv-unit-tile-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-success);
    color: #fff;
    font-size: 70%;
    box-shadow: 0 0 0 2px #fff;
}
.cv-unit-tile-body { padding: 7px 9px 9px; }
.cv-unit-tile-title {
    font-size: 84%;
    font-weight: 600;
    color: var(--cv-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.cv-unit-tile .cv-unit-progress { margin: 7px 0 5px; }
.cv-unit-tile-count { text-align: right; }

/* --- Progress bar (sidebar, cards, header) ---------------------------------- */
.cv-unit-progress {
    height: 6px;
    background: #e8eef5;
    border-radius: var(--radius-pill);
    margin: 0 12px 8px 12px;
    overflow: hidden;
}
.cv-unit-acc .cv-unit-progress { height: 4px; margin: 0 12px 6px 42px; }
.cv-unit-progress-fill {
    height: 100%;
    background: var(--c-success);
    border-radius: var(--radius-pill);
    transition: width var(--t);
}
.cv-unit-progress-label { font-size: 82%; color: var(--c-muted); }

/* --- Unit header card -------------------------------------------------------- */
.cv-unit-head {
    display: flex;
    gap: 14px;
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    margin-bottom: 14px;
}
.cv-unit-head-media { flex: 0 0 120px; text-align: center; }
.cv-unit-head-media img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
}
.cv-unit-head-share { margin-top: 8px; }
.cv-unit-head-body { flex: 1; min-width: 0; }
.cv-unit-head-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 8px;
}
.cv-unit-head-top h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex: 1;
    min-width: 200px;
    font-size: 125%;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-unit-head-desc { font-size: 92%; color: #46586e; line-height: 1.55; }

/* --- Continue button ---------------------------------------------------------- */
.cv-unit-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff !important;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    font-weight: 700;
    font-size: 93%;
    padding: 7px 18px;
    transition: box-shadow var(--t), transform var(--t);
}
.cv-unit-continue:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); color: #fff; }
.cv-unit-done-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid #bbe7c9;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 90%;
    padding: 5px 14px;
}

/* --- Learning-path list -------------------------------------------------------- */
.cv-unit-list {
    background: var(--c-surface);
    border: 1px solid #cddaea;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 14px;
}
.cv-unit-section {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #eaf0f7;
    color: #1e3a5f;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--cv-panel-border);
    user-select: none;
}
.cv-unit-section:hover { background: #dfe9f4; }
.cv-unit-section .fa { color: var(--cv-mid); transition: transform var(--t); }
.cv-unit-section.is-closed .fa { transform: rotate(-90deg); }
.cv-unit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border-left: 4px solid #d1dce8;
    border-bottom: 1px solid var(--c-border-soft);
    transition: background var(--t);
}
.cv-unit-row:last-child { border-bottom: 0; }
.cv-unit-row:hover { background: #f4f8fd; }
.cv-unit-row.is-done { border-left-color: var(--c-success); }
.cv-unit-row.is-locked { opacity: 0.55; }
.cv-unit-row.is-flash { background: var(--cv-item-active); }
.cv-unit-row-num {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    font-size: 85%;
    font-weight: 700;
    color: var(--c-muted);
}
.cv-unit-row-state { flex-shrink: 0; width: 18px; text-align: center; }
.cv-unit-row-state .fa-check-circle { color: var(--c-success); }
.cv-unit-row-state .fa-lock { color: var(--c-muted); opacity: 0.7; }
.cv-unit-row-icon { width: 24px; height: 24px; flex-shrink: 0; }
.cv-unit-row-title {
    flex: 1;
    min-width: 0;
    font-size: 93%;
    color: var(--cv-dark);
    overflow-wrap: anywhere;
}
.cv-unit-badge {
    display: inline-block;
    background: var(--cv-panel-bg);
    color: var(--cv-mid);
    font-size: 78%;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    margin-left: 6px;
    white-space: nowrap;
}
.cv-unit-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.cv-unit-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--c-success);
    color: #fff;
    transition: background var(--t);
}
.cv-unit-play:hover { background: #128a3e; }
.cv-unit-play[disabled] { background: #b6bec9; cursor: not-allowed; }

/* --- Unit overview (course_unit.jsp) ------------------------------------------- */
.cv-unit-overview-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 14px;
}
.cv-unit-overview-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex: 1;
    min-width: 200px;
    font-size: 135%;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-unit-overview-head h3 .fa { color: var(--cv-mid); }
.cv-unit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.cv-unit-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-unit-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-unit-card-thumb {
    display: block;
    background: var(--c-brand-softer);
    border-bottom: 1px solid var(--c-border-soft);
}
.cv-unit-card-thumb img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    padding: 12px;
    display: block;
}
.cv-unit-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 14px;
}
.cv-unit-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cv-unit-card-title { margin: 0; font-size: 105%; font-weight: 700; flex: 1; min-width: 0; }
.cv-unit-card-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-unit-card-title a:hover { color: var(--cv-mid) !important; text-decoration: underline !important; }
.cv-unit-card-desc {
    margin-top: 6px;
    font-size: 88%;
    color: #5c6b7f;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cv-unit-card-desc * { font-size: inherit !important; line-height: inherit !important; }
.cv-unit-card-desc img { display: none; }
.cv-unit-card .cv-unit-progress { margin: 10px 0 4px 0; }
.cv-unit-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.cv-unit-card-foot .btn:last-child { margin-left: auto; }

/* --- Responsive ----------------------------------------------------------------- */
@media (max-width: 991px) {
    .cv-unit-head { flex-direction: column; }
    .cv-unit-head-media { flex-basis: auto; }
    .cv-unit-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cv-unit-row { flex-wrap: wrap; }
    .cv-unit-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
}

/* =======================================================================
   Course player (course_run.jsp) — cv-run-*
   The left menu is an accordion in its own sticky, scrollable pane; only
   the current unit is expanded and the active item is auto-scrolled in.
   ======================================================================= */

/* --- Scroll pane ---------------------------------------------------------------- */
.cv-run-nav {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
/* Fixed top: header + progress + control buttons stay put while the unit list scrolls. */
.cv-run-top { flex: 0 0 auto; }

/* --- Sticky header (current unit + progress) ------------------------------------ */
.cv-run-nav-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    padding: 10px 12px;
}
.cv-run-nav-head .cv-run-head-eyebrow {
    font-size: 76%;
    opacity: .8;
}
.cv-run-nav-head .cv-run-head-eyebrow .fa { margin-right: 6px; }
.cv-run-nav-head .cv-run-head-title {
    font-size: 104%;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Progress bar (serial % or path "feet") ------------------------------------- */
.cv-run-progress {
    padding: 9px 12px;
    border-bottom: 1px solid var(--c-border-soft);
}
.cv-run-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 80%;
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: 5px;
}
.cv-run-progress-label .cv-run-pct { color: var(--c-success); }
.cv-run-progress-track {
    position: relative;
    height: 8px;
    border-radius: var(--radius-pill);
    background: #e5ebf3;
    overflow: hidden;
}
.cv-run-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--c-success);
    transition: width var(--t);
}
.cv-run-progress.is-path .cv-run-progress-fill { background: #2bbf9a; }

/* --- Top cloned nav (relocNavButtons / cloneItem target) ------------------------ */
#topNavDiv { padding: 8px 8px 0; }

/* --- Accordion (the only scrolling region) -------------------------------------- */
.cv-run-acc { flex: 1 1 auto; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: #c3d3e6 transparent; }
.cv-run-acc::-webkit-scrollbar { width: 5px; }
.cv-run-acc::-webkit-scrollbar-thumb { background: #c3d3e6; border-radius: var(--radius-pill); }
.cv-run-unit {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    margin: 5px 0;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid #c3d3e6;
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--cv-dark) !important;
    text-decoration: none !important;
    cursor: pointer;
    font-weight: 600;
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.cv-run-unit:hover { background: var(--cv-item-hover); border-left-color: var(--cv-mid); box-shadow: var(--shadow-sm); }
.cv-run-unit.is-current {
    background: linear-gradient(90deg, #d0e8ff 0%, #eef5ff 100%);
    border-color: #b7d4f0;
    border-left-color: var(--cv-mid);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}
.cv-run-unit.is-locked { opacity: .55; cursor: not-allowed; }
.cv-run-unit-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cv-mid);
    color: #fff;
    font-size: 82%;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cv-run-unit.is-current .cv-run-unit-num { background: var(--cv-dark); }
.cv-run-unit-title {
    flex: 1;
    min-width: 0;
    font-size: 92%;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cv-run-unit-badge { flex-shrink: 0; font-size: 80%; color: var(--c-muted); }
.cv-run-unit-badge .fa-check-circle { color: var(--c-success); }
.cv-run-unit-badge .fa-lock { color: var(--c-muted); opacity: .7; }
.cv-run-caret { flex-shrink: 0; font-size: 80%; color: var(--cv-mid); }

/* --- Items of the expanded unit ------------------------------------------------- */
.cv-run-items {
    list-style: none;
    margin: 3px 0 10px 17px;
    padding: 2px 2px 2px 9px;
    border-left: 2px solid var(--cv-panel-border);
}
.cv-run-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    margin: 2px 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 89%;
    color: var(--cv-dark) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--t);
}
a.cv-run-item:hover { background: var(--cv-item-hover); }
.cv-run-item-state { flex-shrink: 0; width: 16px; text-align: center; }
.cv-run-item-state .fa-check-circle { color: var(--c-success); }
.cv-run-item-state .fa-play-circle { color: var(--cv-mid); }
.cv-run-item-state .fa-lock { color: var(--c-muted); opacity: .7; }
.cv-run-item-state .fa-circle-o { color: #b9c4d4; }
.cv-run-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-run-item.is-current {
    background: var(--c-success-soft);
    border-left-color: var(--c-success);
    font-weight: 700;
    color: #0f7a37 !important;
}
.cv-run-item.is-done { color: #4b6076 !important; }
.cv-run-item.is-locked { opacity: .5; cursor: not-allowed; }
.cv-run-sec {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    margin: 6px 0 2px;
    background: #eaf0f7;
    border-radius: var(--radius-sm);
    font-size: 84%;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-run-sec .fa { color: var(--cv-mid); }
.cv-run-sec.is-locked { opacity: .5; }
.cv-run-sec.is-active {
    background: linear-gradient(90deg, #cfe6ff 0%, #e9f3ff 100%);
    color: var(--cv-dark);
    box-shadow: inset 3px 0 0 var(--cv-mid);
}
.cv-run-sec.is-active .fa { color: var(--cv-dark); }

/* --- Bottom / cloned-top nav buttons -------------------------------------------- */
#buttomNavDiv { flex: 0 0 auto; }
.cv-run-btnbar {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
}
/* Desktop: the control buttons live pinned at the top (the cloned #topNavDiv bar);
   the original bottom row is the clone source only, so hide it. */
@media (min-width: 992px) { #buttomNavDiv { display: none; } }
.cv-run-btn {
    flex: 1;
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 0;
    font-size: 110%;
    color: #fff;
    cursor: pointer;
    transition: filter var(--t), transform var(--t);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
.cv-run-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cv-run-btn.cv-run-btn-stop { background: var(--c-danger); }

/* --- MainPage hero -------------------------------------------------------------- */
.cv-run-hero {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px 28px;
}
.cv-run-hero-media { flex: 0 0 160px; text-align: center; }
.cv-run-hero-media img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: var(--c-brand-softer);
    border-radius: var(--radius-md);
    padding: 8px;
}
.cv-run-hero-body { flex: 1; min-width: 0; }
.cv-run-hero-body h1 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-run-hero-desc { font-size: 95%; color: #46586e; line-height: 1.6; }
.cv-run-hero-keys { margin-top: 14px; }

/* --- Responsive ----------------------------------------------------------------- */
@media (max-width: 991px) {
    .cv-run-nav { position: static; max-height: none; overflow: visible; }
    .cv-run-acc { overflow: visible; }
    .cv-run-hero { flex-direction: column; }
    .cv-run-hero-media { flex-basis: auto; }
}

/* ===================================================================================
   About Coursevo (coursevo.jsp)
   =================================================================================== */
.cv-about {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* Hero banner */
.cv-about-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    box-shadow: var(--shadow-lg);
    margin: 20px 0 32px;
    padding: 48px 40px;
    color: #fff;
}
.cv-about-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.cv-about-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.cv-about-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 16px;
}
.cv-about-eyebrow i { margin-right: 6px; }
.cv-about-hero h1 {
    margin: 0 0 12px;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.cv-about-tagline {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* Feature cards */
.cv-about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cv-about-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t);
}
.cv-about-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.cv-about-card-media {
    background: var(--c-surface-2);
    padding: 24px;
    text-align: center;
    border-bottom: 1px solid var(--c-border-soft);
}
.cv-about-card-media img {
    max-width: 100%;
    max-height: 150px;
    height: auto;
}
.cv-about-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}
.cv-about-card-body h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-about-card-body h2 i { color: var(--cv-mid); margin-right: 8px; }
.cv-about-card-body p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.65;
    color: #46586e;
    text-align: justify;
    flex: 1;
}
.cv-about-btn {
    align-self: flex-start;
    display: inline-block;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter var(--t), box-shadow var(--t);
    box-shadow: var(--shadow-sm);
}
.cv-about-btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-md); }
.cv-about-btn i { margin-left: 6px; font-size: 11px; }

/* Responsive */
@media (max-width: 991px) {
    .cv-about-grid { grid-template-columns: 1fr; }
    .cv-about-hero { padding: 36px 24px; }
    .cv-about-hero h1 { font-size: 34px; }
}

/* ===================================================================================
   Public Portal (portal.jspf / start.jsp)
   =================================================================================== */
.cv-portal { margin-top: 12px; }

/* Toolbar: tabs + search */
.cv-portal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--cv-panel-bg);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
}
.cv-portal-tabs { display: flex; gap: 6px; }
.cv-portal-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--cv-dark) !important;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background var(--t), border-color var(--t);
}
.cv-portal-tab:hover { background: var(--cv-item-hover); }
.cv-portal-tab.active {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}

.cv-portal-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 1;
    min-width: 280px;
    max-width: 560px;
    position: relative;
}
.cv-portal-search > .fa-search {
    position: absolute;
    left: 14px;
    color: var(--c-muted);
    pointer-events: none;
}
.cv-portal-search input {
    flex: 1;
    height: 40px;
    padding: 0 14px 0 36px;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}
.cv-portal-search input:focus {
    border-color: var(--cv-mid);
    box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.12);
}
.cv-portal-btn {
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter var(--t);
}
.cv-portal-btn:hover { filter: brightness(1.08); }
.cv-portal-btn.ghost {
    background: #fff;
    color: var(--cv-mid);
    border: 1px solid var(--cv-panel-border);
}
.cv-portal-btn.ghost:hover { background: var(--cv-item-hover); filter: none; }

/* Browse tree */
.cv-portal-tree { display: flex; flex-direction: column; gap: 12px; }
.cv-portal-org {
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cv-portal-org.open { box-shadow: var(--shadow-md); }
.cv-portal-org-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}
.cv-portal-org-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: var(--cv-dark) !important;
    text-decoration: none !important;
}
.cv-portal-caret { color: var(--cv-mid); font-size: 12px; width: 12px; flex-shrink: 0; }
.cv-portal-org-logo {
    max-height: 26px;
    max-width: 100px;
    width: auto;
    background: #aebfd1;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--cv-panel-border);
}
.cv-portal-org-name { font-weight: 700; font-size: 15px; }
.cv-portal-visit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--cv-panel-bg);
    border: 1px solid var(--cv-panel-border);
    color: var(--cv-dark) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--t);
}
.cv-portal-visit:hover { background: var(--cv-item-hover); }

.cv-portal-progs {
    border-top: 1px solid var(--c-border-soft);
    background: #fbfdff;
    padding: 6px 0;
}
.cv-portal-prog {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 30px;
    color: var(--cv-dark) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--t);
}
.cv-portal-prog:hover { background: var(--cv-item-hover); }
.cv-portal-prog .fa-folder, .cv-portal-prog .fa-folder-open { color: var(--cv-mid); }
.cv-portal-prog-name { min-width: 0; }

.cv-portal-lessons { background: #f7fafd; padding: 4px 0; }
.cv-portal-lesson {
    display: block;
    padding: 8px 16px 8px 54px;
    color: #34465c !important;
    text-decoration: none !important;
    font-size: 13px;
    transition: background var(--t);
}
.cv-portal-lesson:hover { background: var(--cv-item-hover); }
.cv-portal-lesson.active {
    background: var(--cv-item-active);
    font-weight: 700;
    color: var(--cv-dark) !important;
    border-left: 4px solid var(--cv-mid);
    padding-left: 50px;
}
.cv-portal-lesson .fa-graduation-cap { color: var(--cv-mid); margin-right: 4px; }
.cv-portal-lesson-code { font-weight: 700; color: var(--cv-mid); }
.cv-portal-empty {
    padding: 10px 16px 10px 54px;
    color: var(--c-muted);
    font-size: 13px;
    font-style: italic;
}
.cv-portal-empty i { margin-right: 6px; }

/* Course detail card (shared by browse + search) */
.cv-course-detail {
    margin: 8px 16px 14px 54px;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cv-portal-results .cv-course-detail { margin: 0 0 16px; }
.cv-course-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
}
.cv-course-code {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
    font-size: 13px;
}
.cv-course-title { font-weight: 700; font-size: 16px; }
.cv-course-detail-body {
    display: grid;
    grid-template-columns: 110px 1fr 230px;
    gap: 20px;
    padding: 20px;
}
.cv-course-media { position: relative; text-align: center; }
.cv-course-media img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--cv-panel-border);
}
.cv-course-media-ext {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 4px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.cv-course-main { min-width: 0; }
.cv-course-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #46586e;
    max-height: 160px;
    overflow: auto;
    margin-bottom: 14px;
}
.cv-course-section { margin-bottom: 12px; font-size: 13px; color: #46586e; }
.cv-course-section h4 {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cv-mid);
}
.cv-course-section .fa-user { color: var(--cv-mid); }
.cv-course-side {
    border-left: 1px solid var(--c-border-soft);
    padding-left: 18px;
    font-size: 13px;
}
.cv-course-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    color: var(--cv-dark);
    border-bottom: 1px solid var(--c-border-soft);
}
.cv-course-meta i { color: var(--cv-mid); width: 14px; flex-shrink: 0; }
.cv-course-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--cv-panel-bg);
    color: var(--cv-dark);
    font-size: 12px;
    font-weight: 600;
}
.cv-course-badge i { color: var(--cv-mid); }
.cv-course-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #46586e;
}
.cv-course-stat i { color: var(--cv-mid); width: 14px; }
.cv-course-stat strong { color: var(--cv-dark); }
.cv-course-rating { margin-top: 10px; display: flex; align-items: center; gap: 2px; }
.cv-course-rating-count { margin-left: 6px; color: var(--c-muted); font-size: 12px; }

/* Search results list */
.cv-portal-results-head {
    font-size: 18px;
    font-weight: 700;
    color: var(--cv-dark);
    margin: 0 0 16px;
}
.cv-portal-results-range { font-size: 13px; font-weight: 400; color: var(--c-muted); }
.cv-portal-result {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
}
.cv-portal-result:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cv-portal-result-thumb { flex-shrink: 0; }
.cv-portal-result-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--cv-panel-border);
}
.cv-portal-result-body { flex: 1; min-width: 0; }
.cv-portal-result-org {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cv-mid);
    margin-bottom: 3px;
}
.cv-portal-result-title { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.cv-portal-result-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-portal-result-title a:hover { color: var(--cv-mid) !important; }
.cv-portal-result-desc { font-size: 13px; line-height: 1.55; color: #46586e; }
.cv-portal-result-info {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cv-panel-bg);
    color: var(--cv-mid) !important;
    font-size: 18px;
    text-decoration: none !important;
    transition: background var(--t), color var(--t);
}
.cv-portal-result-info:hover {
    background: var(--cv-mid);
    color: #fff !important;
}
.cv-portal-pager { margin-top: 18px; text-align: center; }

/* Responsive */
@media (max-width: 991px) {
    .cv-portal-toolbar { flex-direction: column; align-items: stretch; }
    .cv-portal-search { max-width: none; }
    .cv-course-detail-body { grid-template-columns: 1fr; }
    .cv-course-side { border-left: none; padding-left: 0; border-top: 1px solid var(--c-border-soft); padding-top: 14px; }
    .cv-course-media { text-align: left; }
}

/* =======================================================================
   Digital Content (course_content*.jsp) — cv-dc-*
   Modern resource presentation: list-rows, tabs, info panel, tile grid.
   ======================================================================= */

.cv-dc { max-width: 1040px; margin: 0 auto; padding: 4px 6px 14px; }

/* --- Header ------------------------------------------------------------- */
.cv-dc-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 6px 2px 14px;
}
.cv-dc-header h2 {
    margin: 0;
    font-size: 150%;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-dc-header .cv-dc-crumb {
    font-size: 92%;
    color: var(--c-muted);
}

/* --- Tabs (categories / subcategories) ---------------------------------- */
.cv-dc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.cv-dc-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--cv-mid) !important;
    font-size: 90%;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.cv-dc-tab:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-dc-tab.is-active {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    border-color: var(--cv-mid);
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.cv-dc-tab .fa { font-size: 92%; opacity: .85; }
.cv-dc-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--cv-panel-bg);
    color: var(--cv-mid);
    font-size: 80%;
    font-weight: 700;
}
.cv-dc-tab.is-active .cv-dc-tab-count { background: rgba(255,255,255,.22); color: #fff; }
/* nav (home / up) icon buttons */
.cv-dc-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--cv-mid) !important;
    text-decoration: none !important;
    transition: background var(--t), border-color var(--t);
}
.cv-dc-nav:hover { background: var(--cv-item-hover); border-color: #8fb8de; }

.cv-dc-subtabs { margin-bottom: 14px; }

/* --- Summary bar -------------------------------------------------------- */
.cv-dc-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 87%;
    color: var(--c-muted);
    padding: 2px 4px 10px;
}
.cv-dc-summary .fa { color: var(--cv-mid); opacity: .7; }

/* --- Resource list ------------------------------------------------------ */
.cv-dc-list { display: flex; flex-direction: column; gap: 8px; }
.cv-dc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--c-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-dc-row:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; border-left-color: var(--cv-mid); }

.cv-dc-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-brand-softer);
    border-radius: var(--radius-sm);
}
.cv-dc-icon img { max-width: 32px; max-height: 32px; }
.cv-dc-icon .fa { font-size: 24px; color: var(--cv-mid); }

.cv-dc-body { flex: 1; min-width: 0; }
.cv-dc-title {
    margin: 0;
    font-size: 104%;
    font-weight: 700;
    color: var(--cv-dark);
    line-height: 1.3;
}
.cv-dc-desc {
    margin-top: 3px;
    font-size: 86%;
    color: #5c6b7f;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cv-dc-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }

/* --- Action buttons ----------------------------------------------------- */
.cv-dc-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cv-dc-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    color: var(--cv-mid) !important;
    text-decoration: none !important;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.cv-dc-act:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-dc-act .fa { font-size: 17px; }
.cv-dc-act.is-alert { color: var(--c-danger) !important; }
.cv-dc-act.is-disabled {
    color: #b6bec9 !important;
    background: #fff;
    border-style: dashed;
    cursor: default;
}
.cv-dc-act.is-disabled:hover { background: #fff; border-color: #d1dce8; }
.cv-dc-act.is-pending { color: var(--c-warning) !important; }

/* --- Empty state -------------------------------------------------------- */
.cv-dc-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 45px 20px;
}
.cv-dc-empty > .fa { font-size: 42px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-dc-empty p { margin: 0; font-size: 110%; color: #6b7c93; font-weight: 600; }

/* --- Pagination footer -------------------------------------------------- */
.cv-dc-pager { padding: 14px 2px 2px; text-align: right; }

/* --- Info panel (course_content_info.jsp) ------------------------------- */
.cv-dc-info { padding: 2px; }
.cv-dc-info h4 {
    margin: 6px 2px 10px;
    font-size: 100%;
    font-weight: 700;
    color: var(--cv-dark);
}
.cv-dc-ver { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-dc-ver-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 8px 12px;
}
.cv-dc-ver-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--c-border-soft);
}
.cv-dc-ver-body { flex: 1; min-width: 0; }
.cv-dc-ver-title { font-weight: 700; color: var(--cv-dark); }
.cv-dc-ver-sub { font-size: 84%; color: var(--c-muted); }
.cv-dc-ver-sub a { color: var(--cv-mid) !important; }
.cv-dc-ver-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

.cv-dc-metalist {
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 16px 0;
}
.cv-dc-meta-row { display: flex; border-top: 1px solid var(--c-border-soft); }
.cv-dc-meta-row:first-child { border-top: none; }
.cv-dc-meta-label {
    flex: 0 0 140px;
    padding: 9px 12px;
    background: var(--c-surface-2);
    font-weight: 700;
    color: var(--cv-mid);
    font-size: 88%;
}
.cv-dc-meta-value { flex: 1; padding: 9px 12px; color: var(--cv-dark); min-width: 0; }

/* --- Tile grid (embed: collections / galleries) ------------------------- */
.cv-dc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 4px 0;
}
.cv-dc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 12px;
    color: var(--cv-dark) !important;
    text-decoration: none !important;
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.cv-dc-tile:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; transform: translateY(-2px); }
.cv-dc-tile img { max-width: 48px; max-height: 48px; }
.cv-dc-tile .fa { font-size: 48px; }
.cv-dc-tile .fa-folder { color: #ffce3a; }
.cv-dc-tile-name { font-size: 86%; font-weight: 600; word-break: break-word; line-height: 1.35; }
/* gallery thumbnail variant */
.cv-dc-thumb { padding: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.cv-dc-thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* --- Download panel (embed: single file) -------------------------------- */
.cv-dc-download {
    max-width: 560px;
    margin: 30px auto;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 30px 28px;
    text-align: center;
}
.cv-dc-download h2 { margin: 0 0 6px; font-size: 130%; font-weight: 700; color: var(--cv-dark); }
.cv-dc-download p { margin: 0 0 20px; color: var(--c-muted); }
.cv-dc-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
.cv-dc-download-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-dc-download-btn .fa { font-size: 22px; }

/* --- Media player card (embed: audio / single media) -------------------- */
.cv-dc-media {
    max-width: 560px;
    margin: 30px auto;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 30px 28px;
    text-align: center;
}
.cv-dc-media-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.cv-dc-media-icon .fa { font-size: 28px; }
.cv-dc-media h2 { margin: 0 0 18px; font-size: 130%; font-weight: 700; color: var(--cv-dark); }
.cv-dc-media audio { width: 100%; display: block; }
/* standalone media heading (e.g. audiovisual player title) */
.cv-dc-media-title { margin: 0 0 18px; font-size: 130%; font-weight: 700; color: var(--cv-dark); }

/* --- HTML-fragment reading panel (embed: fhtml) ------------------------- */
.cv-dc-doc {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 32px 40px;
    border-top: 3px solid var(--c-brand);
}
.cv-dc-doc .cefhtml { min-height: 0; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
    .cv-dc-row { flex-wrap: wrap; }
    .cv-dc-actions { width: 100%; justify-content: flex-end; }
    .cv-dc-meta-row { flex-direction: column; }
    .cv-dc-meta-label { flex-basis: auto; }
    .cv-dc-doc { padding: 20px 18px; margin: 0; }
}

/* =======================================================================
   Presentation viewer (presentation.jsp) — cv-pres-*
   PDF/slide viewer: left page-navigator sidebar + main stage with toolbar.
   Markup/CSS only — preserves the #presentationDiv/#pres_view/#pdoc/
   #pdoc_page render pipeline, annotation pins, .overlay and browsePage() nav.
   ======================================================================= */
/* ---- sidebar nav buttons (return / lesson) ---- */
.cv-pres-navbtn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 8px;
    background: #fff; border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    color: var(--cv-dark); font-weight: 600; text-decoration: none;
    transition: box-shadow var(--t), color var(--t);
}
.cv-pres-navbtn:hover { color: var(--c-brand); box-shadow: var(--shadow-md); text-decoration: none; }
.cv-pres-navbtn .fa { color: var(--c-brand); }

/* ---- page navigator ---- */
.cv-pres-pages {
    background: #fff; border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    overflow: hidden; margin-bottom: 12px;
}
.cv-pres-pages-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-weight: 700; font-size: 92%; color: var(--cv-dark);
    background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border);
}
.cv-pres-pages-head .fa { color: var(--c-brand); }
.cv-pres-page {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--cv-panel-border);
    color: var(--cv-dark); text-decoration: none; transition: background var(--t), color var(--t);
}
.cv-pres-page:last-of-type { border-bottom: 0; }
.cv-pres-page:hover { background: var(--c-surface-2); color: var(--c-brand); text-decoration: none; }
.cv-pres-page.is-active { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; }
.cv-pres-page.is-active:hover { color: #fff; }
.cv-pres-page.is-active .cv-pres-page-no { background: rgba(255,255,255,.25); color: #fff; }
.cv-pres-page-no {
    flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-2); border-radius: 6px;
    font-weight: 700; font-size: 84%; color: var(--c-muted);
}
.cv-pres-page-title { font-size: 88%; line-height: 1.3; overflow: hidden; word-break: break-word; }

/* compact slide-window pager */
.cv-pres-setpager {
    display: flex; align-items: center; gap: 6px;
    padding: 8px; background: var(--c-surface-2); border-top: 1px solid var(--cv-panel-border);
}
.cv-pres-setpager a {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--cv-panel-border);
    color: var(--cv-dark); text-decoration: none; transition: background var(--t), color var(--t);
}
.cv-pres-setpager a:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.cv-pres-setpager .cv-pres-setrange { flex: 1; text-align: center; font-size: 84%; color: var(--c-muted); font-weight: 600; }

/* ---- annotations ---- */
.cv-pres-ann { margin-top: 12px; }
.cv-pres-ann-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cv-pres-ann-actions .btn { width: 100%; }
.cv-pres-ann-list {
    background: #fff; border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cv-pres-ann-item { padding: 10px 12px; border-bottom: 1px solid var(--cv-panel-border); }
.cv-pres-ann-item:last-child { border-bottom: 0; }
.cv-pres-ann-user { font-size: 80%; color: var(--c-muted); font-weight: 600; }
.cv-pres-ann-link { display: block; color: var(--cv-dark); font-weight: 600; font-size: 90%; text-decoration: none; }
.cv-pres-ann-link:hover { color: var(--c-brand); text-decoration: none; }
.cv-pres-ann-reply { margin: 8px 0 0 12px; padding-left: 10px; border-left: 2px solid var(--cv-panel-border); }
.cv-pres-ann-del { float: right; color: var(--c-danger); margin-left: 8px; }
.cv-pres-ann-del:hover { color: var(--c-danger); opacity: .8; }
.cv-pres-ann-empty { padding: 14px 12px; text-align: center; font-size: 88%; color: var(--c-muted); }

/* ---- main stage ---- */
.cv-pres-stage {
    background: #fff; border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cv-pres-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; background: var(--c-surface-2);
    border-bottom: 1px solid var(--cv-panel-border);
}
.cv-pres-toolbar .cv-pres-nav { display: inline-flex; align-items: center; }
.cv-pres-toolbar .pagination { margin: 0; }
.cv-pres-spacer { flex: 1 1 auto; }
.cv-pres-tool-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: var(--radius-md);
    background: #fff; border: 1px solid var(--cv-panel-border);
    color: var(--cv-dark); font-weight: 600; font-size: 88%; text-decoration: none;
    transition: box-shadow var(--t), color var(--t);
}
.cv-pres-tool-btn:hover { color: var(--c-brand); box-shadow: var(--shadow-sm); text-decoration: none; }
.cv-pres-tool-btn .fa { color: var(--c-brand); }
.cv-pres-count { font-size: 85%; color: var(--c-muted); font-weight: 600; }
.cv-pres-viewer { padding: 18px; background: var(--c-surface-2); text-align: center; }
/* white page surface — NO padding/border on #presentationDiv (pin offsets depend on it) */
.cv-pres-viewer #presentationDiv {
    background: #fff; border-radius: 6px; box-shadow: var(--shadow-md); margin: 0 auto;
}
.cv-pres-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--cv-panel-border);
}

@media (max-width: 600px) {
    .cv-pres-toolbar { gap: 6px; }
    .cv-pres-tool-btn { padding: 6px 9px; font-size: 84%; }
    .cv-pres-viewer { padding: 8px; }
}

/* =======================================================================
   Annotation thread view (annotation.jsp) — cv-annv-*
   Loaded into #directory inside presentation.jsp's #usrAnnModal via
   request(); selectors are GLOBAL (NOT under #pMain). Preserves the
   prequest('user') links + setAnnotationParent()/showReply() reply hooks.
   ======================================================================= */
.cv-annv { display: flex; flex-direction: column; gap: 12px; }
.cv-annv-card {
    background: #fff; border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    padding: 14px 16px;
}
.cv-annv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cv-annv-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--cv-panel-border); background: var(--c-surface-2); flex: 0 0 auto;
}
.cv-annv-meta { min-width: 0; }
.cv-annv-author { font-weight: 700; color: var(--cv-dark); text-decoration: none; }
.cv-annv-author:hover { color: var(--c-brand); text-decoration: none; }
.cv-annv-date { font-size: 82%; color: var(--c-muted); margin-top: 2px; }
.cv-annv-date .fa { margin-right: 4px; }
.cv-annv-title { font-weight: 600; color: var(--cv-dark); margin-bottom: 6px; }
.cv-annv-body { color: var(--cv-dark); line-height: 1.5; word-break: break-word; }
.cv-annv-body img { max-width: 100%; height: auto; }
.cv-annv-actions { margin-top: 12px; text-align: right; }
.cv-annv-foot { margin-top: 0; }
/* replies: indented, accent rail, lighter surface */
.cv-annv-replies {
    display: flex; flex-direction: column; gap: 10px;
    margin-left: 22px; padding-left: 14px; border-left: 3px solid var(--cv-panel-border);
}
.cv-annv-reply { background: var(--c-surface-2); box-shadow: none; }
.cv-annv-reply .cv-annv-avatar { width: 36px; height: 36px; }

/* =======================================================================
   AI Coach Rooms (course_airooms*.jsp) — cv-air-*
   Modern room list + guided-chat interface. Markup-only redesign; the
   chat JS (maestroai_coach_chat.js) DOM ids are preserved.
   ======================================================================= */

.cv-air { max-width: 1100px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Header ------------------------------------------------------------- */
.cv-air-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 14px;
}
.cv-air-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 24px;
}
.cv-air-header h1 { margin: 0; font-size: 138%; font-weight: 700; color: #fff !important; }
.cv-air-header h1 span, .cv-air-header h1 a { color: #fff !important; }
.cv-air-header .cv-air-sub { margin-top: 3px; font-size: 90%; opacity: .85; }

/* --- Room list ---------------------------------------------------------- */
.cv-air-list { display: flex; flex-direction: column; gap: 10px; }
.cv-air-room {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--c-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-air-room:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; border-left-color: var(--cv-mid); }
.cv-air-room-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-brand-softer);
    color: var(--cv-mid);
    font-size: 22px;
}
.cv-air-room-body { flex: 1; min-width: 0; }
.cv-air-room-title { margin: 0; font-size: 108%; font-weight: 700; color: var(--cv-dark); }
.cv-air-room-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.cv-air-room-desc {
    margin-top: 6px;
    font-size: 87%;
    color: #5c6b7f;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cv-air-enter {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
.cv-air-enter:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff !important; }

/* --- Empty state -------------------------------------------------------- */
.cv-air-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 50px 20px;
}
.cv-air-empty .cv-air-empty-ico { font-size: 52px; display: block; margin-bottom: 12px; opacity: .8; }
.cv-air-empty p { margin: 0; font-size: 115%; color: #6b7c93; font-weight: 600; }

/* --- Chat shell --------------------------------------------------------- */
.cv-air-chat {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 14px;
    align-items: start;
}
.cv-air-chat-main {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}

/* Chat scroll area + bubble skin (scoped so global .paleBlock/.whiteBlock
   are untouched outside the chat). Bubbles are .paleBlock (user) /
   .whiteBlock (coach) divs emitted by AIServiceHelper + the chat JS. */
.cv-air-messages { border-radius: var(--radius-sm); overflow: hidden; }
/* Neutralize the legacy fixed-height/clipping wrapper (cechat.css gives it
   height:342px + overflow, which clips the taller #chatMessages scroller and
   hides the last lines). Let #chatMessages be the sole scroll container. */
.cv-air-messages .chat_box_wrapper.chat_box_small.chat_box_active {
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}
.cv-air-messages .chat_box {
    background: var(--c-surface-2) !important;
    border-radius: var(--radius-sm);
}
.cv-air-messages > .chat_box_wrapper,
.cv-air-messages .chat_box { padding: 14px !important; }
.cv-air-messages #chatMessages { height: 440px !important; padding-bottom: 28px !important; }
/* message-author label ("You" / "AI Coach") */
.cv-air-messages > div > div:first-child {
    font-size: 13px;
    font-weight: 700;
    color: var(--cv-mid);
    margin-bottom: 5px;
}
.cv-air-messages .paleBlock,
.cv-air-messages .whiteBlock {
    padding: 13px 18px !important;
    border-radius: 14px !important;
    border: 1px solid var(--cv-panel-border);
    box-shadow: var(--shadow-sm);
    line-height: 1.6;
    font-size: 15px;
    color: var(--cv-dark);
}
/* coach answers span the full width; user messages hug their content */
.cv-air-messages .whiteBlock {
    background: #fff !important;
    display: block !important;
    max-width: 100%;
    margin-bottom: 6px;
}
.cv-air-messages .paleBlock {
    background: var(--c-brand-softer) !important;
    border-color: #cfe3f5;
    max-width: 100%;
}
.cv-air-messages .whiteBlock p { margin: 0 0 10px; }
.cv-air-messages .whiteBlock p:last-child,
.cv-air-messages .whiteBlock ul:last-child,
.cv-air-messages .whiteBlock ol:last-child { margin-bottom: 0; }
.cv-air-messages .whiteBlock ul,
.cv-air-messages .whiteBlock ol { margin: 6px 0 10px; padding-left: 22px; }
.cv-air-messages .whiteBlock li { margin-bottom: 4px; }

/* --- Composer ----------------------------------------------------------- */
.cv-air-inputbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
    background: var(--c-surface-2);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    padding: 8px;
}
.cv-air-inputbar:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-air-inputbar textarea {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    resize: none;
    min-height: 48px;
    max-height: 160px;
    padding: 13px 12px;
    line-height: 1.45;
    font-size: 15px;
    overflow-y: auto;
}
.cv-air-send {
    flex-shrink: 0;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
.cv-air-send:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff; }
.cv-air-send:disabled { opacity: .6; cursor: default; transform: none; }

/* --- Coach side panel --------------------------------------------------- */
.cv-air-side {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}
.cv-air-side h3 {
    margin: 0 0 4px;
    font-size: 104%;
    font-weight: 700;
    color: var(--cv-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cv-air-side .cv-air-model { font-size: 80%; color: var(--c-muted); margin-bottom: 8px; }
.cv-air-side hr { margin: 12px 0; border-color: var(--c-border-soft); }
.cv-air-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 86%; margin-bottom: 4px; }
.cv-air-stat .cv-air-stat-label { color: var(--c-muted); }
.cv-air-stat .cv-air-stat-val { font-weight: 700; color: var(--cv-dark); }
.cv-air-step-title { font-weight: 700; color: var(--cv-dark); margin-top: 2px; }
.cv-air-side .btn { width: 100%; margin-bottom: 8px; }
.cv-air-side .btn:last-child { margin-bottom: 0; }
.cv-air-note { font-size: 80%; color: var(--c-muted); line-height: 1.5; }
.cv-air-badge-on {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 80%;
    font-weight: 600;
    color: var(--c-success);
    background: var(--c-success-soft);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}
.cv-air-badge-on::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-success);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .cv-air-chat { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cv-air-room { flex-wrap: wrap; }
    .cv-air-enter { width: 100%; justify-content: center; }
}

/* =======================================================================
   Grades (grades.jsp) — cv-grade-*
   At-a-glance grade dashboard: student header + category cards with a
   color-tiered mark badge.
   ======================================================================= */

.cv-grade { max-width: 1000px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Student header ----------------------------------------------------- */
.cv-grade-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cv-grade-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    font-size: 24px;
}
.cv-grade-id { flex: 1; min-width: 0; }
.cv-grade-name { font-size: 124%; font-weight: 700; }
.cv-grade-am { font-size: 88%; opacity: .85; margin-top: 2px; }
.cv-grade-am .fa { margin-right: 5px; opacity: .8; }
.cv-grade-htitle {
    flex-shrink: 0;
    font-size: 92%;
    opacity: .9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- Grade cards -------------------------------------------------------- */
.cv-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}
.cv-grade-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--c-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.cv-grade-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #8fb8de; }
.cv-grade-card-info { flex: 1; min-width: 0; }
.cv-grade-cat {
    font-weight: 700;
    color: var(--cv-dark);
    font-size: 102%;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.cv-grade-cat .fa { color: var(--cv-mid); opacity: .65; margin-top: 3px; }
.cv-grade-label {
    margin-top: 5px;
    font-size: 76%;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* --- Mark badge --------------------------------------------------------- */
.cv-grade-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 134%;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    box-shadow: var(--shadow-sm);
}
.cv-grade-badge--high { background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); }
.cv-grade-badge--mid  { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); }
.cv-grade-badge--low  { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
.cv-grade-badge--none { background: #eef2f7; color: #9aa7b6; box-shadow: none; font-size: 150%; }

/* --- Empty state -------------------------------------------------------- */
.cv-grade-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 50px 20px;
}
.cv-grade-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-grade-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
    .cv-grade-header { flex-wrap: wrap; }
    .cv-grade-htitle { width: 100%; }
}

/* =======================================================================
   Announcements (course_news.jsp) — cv-news-*
   Timeline feed: pinned markers on a vertical rail + announcement cards,
   newest item highlighted.
   ======================================================================= */

.cv-news { max-width: 920px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Header ------------------------------------------------------------- */
.cv-news-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cv-news-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 22px;
}
.cv-news-header h1 { margin: 0; font-size: 138%; font-weight: 700; color: #fff !important; }
.cv-news-sub { margin-top: 3px; font-size: 90%; opacity: .85; }

/* --- Timeline feed ------------------------------------------------------ */
.cv-news-feed { position: relative; padding: 2px 0; }
.cv-news-feed::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--cv-panel-border);
}
.cv-news-item { display: flex; gap: 16px; margin-bottom: 14px; }
.cv-news-item:last-child { margin-bottom: 0; }
.cv-news-rail { flex-shrink: 0; width: 40px; display: flex; justify-content: center; }
.cv-news-pin {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    font-size: 16px;
    box-shadow: var(--shadow-sm);
    border: 3px solid #fff;
}
.cv-news-pin--latest {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.cv-news-card {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-news-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-news-card--latest { border-left: 4px solid var(--c-warning); }
.cv-news-card--detail { border-left: 4px solid var(--c-brand); }
.cv-news-title { margin: 0; font-size: 118%; font-weight: 700; color: var(--cv-dark); line-height: 1.35; }
.cv-news-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cv-news-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border-soft);
    color: #3a4a5a;
    line-height: 1.6;
    font-size: 95%;
    overflow-wrap: break-word;
}
.cv-news-content > :first-child { margin-top: 0; }
.cv-news-content > :last-child { margin-bottom: 0; }
.cv-news-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cv-news-content a { color: var(--cv-mid); }

/* --- Empty state -------------------------------------------------------- */
.cv-news-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 50px 20px;
}
.cv-news-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-news-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }

/* --- Pagination --------------------------------------------------------- */
.cv-news-pager { padding: 14px 2px 2px; text-align: right; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
    .cv-news-feed::before { display: none; }
    .cv-news-rail { width: 34px; }
    .cv-news-pin { width: 34px; height: 34px; font-size: 14px; }
}

/* =======================================================================
   Search (search.jsp) — cv-search-*
   Hero search bar + faceted category pills + unified result cards.
   ======================================================================= */

.cv-search { max-width: 860px; margin: 0 auto; padding: 8px 6px 16px; }

/* --- Search bar --------------------------------------------------------- */
.cv-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    padding: 6px 6px 6px 18px;
}
.cv-search-bar:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-search-bar-ico { color: var(--cv-mid); opacity: .7; font-size: 16px; flex-shrink: 0; }
.cv-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 11px 6px;
    color: var(--cv-dark);
}
.cv-search-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    transition: box-shadow var(--t), transform var(--t), background var(--t);
}
.cv-search-btn-go {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.cv-search-btn-go:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-search-btn-clear { background: var(--c-surface-2); color: var(--c-muted); }
.cv-search-btn-clear:hover { background: var(--cv-item-hover); color: var(--cv-mid); }

/* --- Facets ------------------------------------------------------------- */
.cv-search-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--cv-dark);
    font-size: 104%;
    margin: 20px 2px 10px;
}
.cv-search-section-title .fa { color: var(--cv-mid); opacity: .7; }
.cv-search-facets { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-search-facet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--cv-mid) !important;
    font-size: 91%;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.cv-search-facet:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-search-facet.is-active {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    border-color: var(--cv-mid);
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.cv-search-facet-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--cv-panel-bg);
    color: var(--cv-mid);
    font-size: 80%;
    font-weight: 700;
}
.cv-search-facet.is-active .cv-search-facet-count { background: rgba(255,255,255,.22); color: #fff; }

/* --- Result cards ------------------------------------------------------- */
.cv-search-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cv-search-result {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--c-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 13px 16px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-search-result:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-search-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-brand-softer);
    color: var(--cv-mid);
    font-size: 18px;
}
.cv-search-result-body { flex: 1; min-width: 0; }
.cv-search-result-title { font-weight: 700; color: var(--cv-dark); font-size: 102%; line-height: 1.35; }
.cv-search-result-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-search-result-title a:hover { color: var(--cv-mid) !important; text-decoration: underline !important; }
.cv-search-result-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-search-result-meta .cv-chip a { color: var(--cv-mid) !important; text-decoration: none !important; }
.cv-search-result-meta .cv-chip a:hover { text-decoration: underline !important; }
.cv-search-result-actions { flex-shrink: 0; display: flex; gap: 6px; }

/* --- Empty state -------------------------------------------------------- */
.cv-search-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 44px 20px;
    margin-top: 12px;
}
.cv-search-empty .fa { font-size: 42px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-search-empty p { margin: 0; font-size: 110%; color: #6b7c93; font-weight: 600; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
    .cv-search-result { flex-wrap: wrap; }
    .cv-search-result-actions { width: 100%; justify-content: flex-end; }
}

/* =======================================================================
   Live Chat rooms (chatrooms.jsp / chatrooms_view.jsp) — cv-chat-*
   Room list + create-room card + a modern in-page chat room. Preserves the
   cewshandler/chat.js DOM hooks (#cechat-<cid>, #ce-room-chat-<cid>, #msg_inp).
   ======================================================================= */

.cv-chat { max-width: 1080px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Header ------------------------------------------------------------- */
.cv-chat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cv-chat-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 22px;
}
.cv-chat-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; }

/* --- Chat room layout --------------------------------------------------- */
.cv-chat-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 14px;
    align-items: start;
}
.cv-chat-main {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}

/* scroll area + modern bubble skin (cewshandler renders
   .chat_message_wrapper > ul.chat_message > li, .chat_message_right = me) */
.cv-chat-messages .chat_box_wrapper.chat_box_small.chat_box_active {
    width: 100% !important;
    height: 440px !important;
    overflow-y: auto !important;
}
.cv-chat-messages .chat_box {
    background: var(--c-surface-2) !important;
    border-radius: var(--radius-sm);
    padding: 14px !important;
    min-height: 100%;
}
.cv-chat-messages .chat_box .chat_message_wrapper { margin-bottom: 16px; }
.cv-chat-messages .chat_box .chat_message_wrapper ul.chat_message > li:first-child::before { display: none; }
.cv-chat-messages .chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: 14px 14px 14px 4px;
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    padding: 9px 14px;
    color: var(--cv-dark);
}
.cv-chat-messages .chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li {
    background: var(--c-brand-softer);
    border-color: #cfe3f5;
    border-radius: 14px 14px 4px 14px;
}
.cv-chat-messages .chat_box .chat_message_wrapper ul.chat_message { margin-left: 12px; }
.cv-chat-messages .chat_box .chat_message_wrapper.chat_message_right ul.chat_message { margin-right: 12px !important; }

/* composer */
.cv-chat-inputbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    background: var(--c-surface-2);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    padding: 6px 6px 6px 16px;
}
.cv-chat-inputbar:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-chat-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 15px; padding: 11px 0; color: var(--cv-dark); }
.cv-chat-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: box-shadow var(--t), transform var(--t);
}
.cv-chat-send:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* --- User panel --------------------------------------------------------- */
.cv-chat-side {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}
.cv-chat-side-title { font-weight: 700; color: var(--cv-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 96%; }
.cv-chat-side-title .fa { color: var(--cv-mid); opacity: .7; }
.cv-chat-users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 440px; overflow: auto; }
.cv-chat-user { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--c-surface-2); font-size: 90%; color: var(--cv-dark); }
.cv-chat-user .md-user-image { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* --- Create room card --------------------------------------------------- */
.cv-chat-newroom {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
}
.cv-chat-newroom h3 { margin: 0 0 16px; font-size: 116%; font-weight: 700; color: var(--cv-dark); display: flex; align-items: center; gap: 9px; }
.cv-chat-newroom h3 .fa { color: var(--cv-mid); }
.cv-chat-label { display: block; font-size: 85%; font-weight: 600; color: var(--cv-mid); margin-bottom: 6px; }
.cv-chat-newroom-actions { margin-top: 14px; display: flex; gap: 8px; }
.cv-chat-tips { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-border-soft); display: flex; flex-direction: column; gap: 8px; }
.cv-chat-tips li { font-size: 87%; color: #5c6b7f; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.cv-chat-tips li .fa { color: var(--cv-mid); opacity: .6; margin-top: 3px; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .cv-chat-grid { grid-template-columns: 1fr; }
}

/* =======================================================================
   Registered users / badge leaderboard (course_users.jsp) — cv-lb-*
   Ranked member cards with avatar, social links, open badges + count.
   ======================================================================= */

.cv-lb { max-width: 980px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Header ------------------------------------------------------------- */
.cv-lb-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cv-lb-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 22px;
}
.cv-lb-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; display: inline-flex; align-items: center; gap: 10px; }
.cv-lb-count {
    font-size: 64%;
    font-weight: 700;
    background: rgba(255,255,255,.2);
    border-radius: var(--radius-pill);
    padding: 2px 11px;
}

/* --- Member cards ------------------------------------------------------- */
.cv-lb-list { display: flex; flex-direction: column; gap: 10px; }
.cv-lb-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-lb-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-lb-top1 { border-left-color: #f5b301; }
.cv-lb-top2 { border-left-color: #9aa7b6; }
.cv-lb-top3 { border-left-color: #cd7f32; }

.cv-lb-rank {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 104%;
    background: var(--c-surface-2);
    color: var(--c-muted);
}
.cv-lb-rank--1 { background: linear-gradient(135deg, #f7b733 0%, #fc9803 100%); color: #fff; box-shadow: var(--shadow-sm); }
.cv-lb-rank--2 { background: linear-gradient(135deg, #c2ccd8 0%, #93a3b5 100%); color: #fff; }
.cv-lb-rank--3 { background: linear-gradient(135deg, #df9e6f 0%, #c87f3f 100%); color: #fff; }

.cv-lb-avatar { flex-shrink: 0; }
.cv-lb-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); }

.cv-lb-info { flex: 1; min-width: 0; }
.cv-lb-name { font-weight: 700; font-size: 108%; color: var(--cv-dark); line-height: 1.3; }
.cv-lb-name a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-lb-name a:hover { color: var(--cv-mid) !important; }
.cv-lb-headline { font-size: 86%; color: var(--c-muted); margin-top: 1px; }
.cv-lb-social { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cv-lb-social a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-surface-2);
    color: var(--cv-mid) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: background var(--t), color var(--t);
}
.cv-lb-social a:hover { background: var(--cv-mid); color: #fff !important; }
.cv-lb-board {
    margin-top: 9px;
    font-size: 82%;
    color: #46586e;
    background: var(--c-brand-softer);
    border: 1px solid #e1eef9;
    border-radius: var(--radius-sm);
    padding: 6px 11px;
    display: inline-block;
}
.cv-lb-board .fa { opacity: .55; margin: 0 3px; }

/* --- Badges ------------------------------------------------------------- */
.cv-lb-badges { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 96px; }
.cv-lb-badgecount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: var(--c-warning);
    background: var(--c-warning-soft);
    border: 1px solid #f6e2bd;
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    font-size: 92%;
}
.cv-lb-badgestrip { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 170px; }
.cv-lb-badge img { height: 42px; width: auto; border-radius: 6px; transition: transform var(--t); display: block; }
.cv-lb-badge:hover img { transform: scale(1.14); }
.cv-lb-nobadge { color: #c2ccd6; font-size: 22px; }

/* --- Last visit --------------------------------------------------------- */
.cv-lb-visit { flex-shrink: 0; text-align: right; font-size: 80%; color: var(--c-muted); min-width: 116px; }
.cv-lb-visit-date { color: var(--cv-dark); font-weight: 600; }
.cv-lb-visit .fa { opacity: .6; margin-right: 3px; }

/* --- Empty state -------------------------------------------------------- */
.cv-lb-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 50px 20px;
}
.cv-lb-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-lb-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .cv-lb-card { flex-wrap: wrap; }
    .cv-lb-badges, .cv-lb-visit { width: 100%; min-width: 0; align-items: flex-start; text-align: left; }
    .cv-lb-badgestrip { justify-content: flex-start; max-width: none; }
}

/* =======================================================================
   Contact (contact.jsp) — cv-contact-*
   Contact form (community) + contact-info cards.
   ======================================================================= */

.cv-contact { max-width: 920px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Header ------------------------------------------------------------- */
.cv-contact-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cv-contact-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 22px;
}
.cv-contact-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; }

/* --- Form mode (community) ---------------------------------------------- */
.cv-contact-form-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.cv-contact-form {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
}
.cv-contact-form h3 { margin: 0 0 18px; font-size: 116%; font-weight: 700; color: var(--cv-dark); }
.cv-contact-field { margin-bottom: 15px; }
.cv-contact-field label { display: block; font-size: 85%; font-weight: 600; color: var(--cv-mid); margin-bottom: 6px; }
.cv-contact-field .req { color: var(--c-danger); margin-left: 2px; }
.cv-contact-input, .cv-contact-select, .cv-contact-textarea {
    width: 100%;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--cv-dark);
    transition: border-color var(--t), box-shadow var(--t);
}
.cv-contact-input:focus, .cv-contact-select:focus, .cv-contact-textarea:focus {
    border-color: #8fb8de;
    box-shadow: 0 0 0 3px rgba(60,132,189,.12);
}
.cv-contact-textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.cv-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 26px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
.cv-contact-submit:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-contact-aside {
    background: linear-gradient(135deg, #f3f9fd 0%, #e8f2fb 100%);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px 20px;
    text-align: center;
}
.cv-contact-aside img { max-width: 170px; height: auto; }
.cv-contact-aside p { color: #46586e; font-size: 89%; line-height: 1.6; margin: 14px 0 0; }

/* --- Success ------------------------------------------------------------ */
.cv-contact-success {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    padding: 50px 24px;
}
.cv-contact-success .fa { font-size: 56px; color: var(--c-success); display: block; margin-bottom: 16px; }
.cv-contact-success p { margin: 0; font-size: 112%; color: var(--cv-dark); font-weight: 600; line-height: 1.6; }

/* --- Info mode ---------------------------------------------------------- */
.cv-contact-cards { display: flex; flex-direction: column; gap: 12px; }
.cv-contact-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--c-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    transition: box-shadow var(--t), border-color var(--t);
}
.cv-contact-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-contact-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-brand-softer);
    color: var(--cv-mid);
    font-size: 20px;
}
.cv-contact-card-body { flex: 1; min-width: 0; }
.cv-contact-card-body h4 { margin: 0 0 6px; font-size: 104%; font-weight: 700; color: var(--cv-dark); }
.cv-contact-card-body p { margin: 0 0 8px; color: #46586e; line-height: 1.6; font-size: 93%; }
.cv-contact-card-body p:last-child { margin-bottom: 0; }
.cv-contact-card-body a { color: var(--cv-mid); }
.cv-contact-email { font-size: 110%; font-weight: 600; color: var(--cv-mid); }
.cv-contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
.cv-contact-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff !important; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .cv-contact-form-grid { grid-template-columns: 1fr; }
    .cv-contact-aside { order: -1; }
}

/* =======================================================================
   Registration request (register.jsp) — cv-reg-*
   Centered sign-up card with icon fields, error states, success view.
   ======================================================================= */

.cv-reg { max-width: 540px; margin: 0 auto; padding: 4px 6px 16px; }

/* --- Header ------------------------------------------------------------- */
.cv-reg-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cv-reg-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 22px;
}
.cv-reg-header h1 { margin: 0; font-size: 128%; font-weight: 700; color: #fff !important; }

/* --- Card --------------------------------------------------------------- */
.cv-reg-card {
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}

/* --- Icon fields -------------------------------------------------------- */
.cv-reg-field {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    transition: border-color var(--t), box-shadow var(--t);
}
.cv-reg-field:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-reg-field.is-error { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.10); }
.cv-reg-ico { width: 44px; flex-shrink: 0; text-align: center; color: var(--cv-mid); opacity: .7; }
.cv-reg-field.is-error .cv-reg-ico { color: var(--c-danger); opacity: 1; }
.cv-reg-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 11px 12px 11px 0; font-size: 14px; color: var(--cv-dark); }

/* --- Labeled fields (code / user type) ---------------------------------- */
.cv-reg-labeled { margin-bottom: 14px; }
.cv-reg-labeled > label { display: block; font-size: 85%; font-weight: 600; color: var(--cv-mid); margin-bottom: 6px; }
.cv-reg-control {
    width: 100%;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--cv-dark);
    transition: border-color var(--t), box-shadow var(--t);
}
.cv-reg-control:focus { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-reg-help { font-size: 82%; color: var(--c-muted); margin-top: 7px; line-height: 1.5; }

/* --- Submit ------------------------------------------------------------- */
.cv-reg-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    margin-top: 4px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
.cv-reg-submit:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* --- Success ------------------------------------------------------------ */
.cv-reg-success {
    text-align: center;
    padding: 10px 4px 6px;
}
.cv-reg-success .fa { font-size: 54px; color: var(--c-success); display: block; margin-bottom: 14px; }
.cv-reg-success h3 { margin: 0 0 8px; font-size: 116%; color: var(--cv-dark); font-weight: 700; }
.cv-reg-success p { margin: 0 auto; color: #46586e; line-height: 1.6; max-width: 420px; }

/* --- Footer note -------------------------------------------------------- */
.cv-reg-note { margin-top: 14px; font-size: 84%; color: var(--c-muted); line-height: 1.6; }

/* =======================================================================
   Forums (forums.jspf / forums_view.jspf) — cv-forum-*
   Shared skeleton reskinned for every context (site / course / lab/team)
   and edit mode. Category & thread cards, post cards, paginated thread view.
   All rules scoped under #pMain so they never leak into legacy pages.
   ======================================================================= */

#pMain .cv-forum { width: 100%; max-width: none; margin: 0; padding: 4px 6px 16px; }

/* --- Header bar --------------------------------------------------------- */
#pMain .cv-forum-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}
#pMain .cv-forum-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.15);
    font-size: 22px;
}
#pMain .cv-forum-header-txt { min-width: 0; flex: 1; }
#pMain .cv-forum-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; }
#pMain .cv-forum-header-sub { margin-top: 3px; font-size: 90%; opacity: .85; }
#pMain .cv-forum-header .cv-forum-newbtn { flex-shrink: 0; }

/* --- Toolbar (breadcrumb + actions) ------------------------------------- */
#pMain .cv-forum-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
#pMain .cv-forum-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 7px 8px 7px 16px;
    list-style: none;
    background: linear-gradient(135deg, var(--cv-panel-bg) 0%, var(--c-surface-2) 100%);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    font-size: 90%;
    color: var(--c-muted);
}
#pMain .cv-forum-crumb li { display: inline-flex; align-items: center; }
#pMain .cv-forum-crumb a {
    color: var(--cv-mid);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--t);
}
#pMain .cv-forum-crumb a:hover { color: var(--c-brand); text-decoration: none; }
#pMain .cv-forum-crumb a .fa { margin-right: 6px; opacity: .7; }
#pMain .cv-forum-crumb .sep { color: var(--cv-mid); opacity: .4; font-size: 92%; }
#pMain .cv-forum-crumb .active {
    color: var(--cv-dark);
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    padding: 3px 13px;
}
#pMain .cv-forum-bar-spacer { flex: 1; }

/* New topic / new category button -- shared accent button ---------------- */
#pMain .cv-forum-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
#pMain .cv-forum-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff; }
#pMain .cv-forum-btn--ghost {
    background: #fff;
    color: var(--cv-mid);
    border: 1px solid var(--cv-panel-border);
}
#pMain .cv-forum-btn--ghost:hover { color: var(--cv-mid); border-color: #8fb8de; }

/* --- Card list (categories & threads share the shell) ------------------- */
#pMain .cv-forum-list { display: flex; flex-direction: column; gap: 10px; }

#pMain .cv-forum-card,
#pMain a.cv-forum-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-left: 4px solid var(--cv-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
#pMain .cv-forum-card:hover,
#pMain a.cv-forum-card:hover {
    box-shadow: var(--shadow-md);
    border-color: #8fb8de;
    border-left-color: var(--c-brand);
}
#pMain .cv-forum-card--unread { border-left-color: var(--c-danger); background: var(--c-danger-soft); }

/* Icon avatar (left) ----------------------------------------------------- */
#pMain .cv-forum-ico {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-brand-softer);
    color: var(--cv-mid);
    font-size: 24px;
}
#pMain .cv-forum-card--unread .cv-forum-ico { background: #fde8e8; color: var(--c-danger); }

/* Card link: a stretched, empty overlay so the whole card navigates, while links
   inside the description and the edit/delete buttons stay clickable (raised above
   the overlay via z-index). This avoids wrapping rich HTML — which can contain its
   own <a> — inside an anchor, which produced invalid nested anchors. ---------- */
#pMain .cv-forum-cardlink {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-decoration: none !important;
    color: inherit;
}
/* Keep interactive content above the stretched overlay */
#pMain .cv-forum-desc a,
#pMain .cv-forum-actions { position: relative; z-index: 2; }

/* Card body (middle, flexes) -------------------------------------------- */
#pMain .cv-forum-body { flex: 1; min-width: 0; }
#pMain .cv-forum-title {
    margin: 0;
    font-size: 108%;
    font-weight: 700;
    color: var(--cv-dark);
    line-height: 1.35;
    overflow-wrap: break-word;
}
#pMain .cv-forum-card:hover .cv-forum-title { color: var(--c-brand); }
#pMain .cv-forum-desc { margin: 3px 0 0; font-size: 88%; color: var(--c-muted); line-height: 1.45; }
#pMain .cv-forum-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Stat chips ------------------------------------------------------------- */
#pMain .cv-forum-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f3f7fb;
    border: 1px solid var(--c-border-soft);
    color: #46586e;
    font-size: 82%;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
#pMain .cv-forum-stat .fa { opacity: .6; font-size: 90%; }
#pMain .cv-forum-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-danger);
    color: #fff;
    font-size: 80%;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Last-post column (right) ---------------------------------------------- */
#pMain .cv-forum-last {
    flex-shrink: 0;
    width: 160px;
    text-align: right;
    font-size: 84%;
    color: var(--c-muted);
    line-height: 1.4;
}
#pMain .cv-forum-last strong { color: var(--cv-dark); font-weight: 600; }
#pMain .cv-forum-last .fa { opacity: .6; }

/* Edit-mode card actions ------------------------------------------------- */
#pMain .cv-forum-actions { flex-shrink: 0; display: flex; gap: 6px; }
#pMain .cv-forum-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
    background: #fff;
    color: var(--c-muted);
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}
#pMain .cv-forum-iconbtn:hover { background: var(--c-surface-2); }
#pMain .cv-forum-iconbtn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: #f3c2c2; }
#pMain .cv-forum-iconbtn--warn:hover { background: var(--c-warning-soft); color: var(--c-warning); border-color: #f3e0b8; }

/* --- Empty state -------------------------------------------------------- */
#pMain .cv-forum-empty {
    background: #fff;
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 50px 20px;
}
#pMain .cv-forum-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
#pMain .cv-forum-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }

/* --- Pagination (modern pill pager; shared cv-pager-*) ------------------ */
#pMain .cv-forum-pager { padding: 18px 2px 4px; text-align: center; }
#pMain .cv-pager {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}
#pMain .cv-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 13px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--cv-mid);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t), color var(--t), box-shadow var(--t);
}
#pMain a.cv-pager-btn:hover { background: var(--cv-item-hover); color: var(--cv-dark); text-decoration: none; }
#pMain .cv-pager-btn.is-active {
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: default;
}
#pMain .cv-pager-btn.is-disabled { color: var(--cv-panel-border); cursor: default; pointer-events: none; }
#pMain .cv-pager-edge { color: var(--c-muted); }
#pMain .cv-pager-gap { display: inline-flex; align-items: flex-end; padding: 0 2px; color: var(--c-muted); font-weight: 700; }

/* =======================================================================
   Thread view (forums_view.jspf) — posts as cards
   ======================================================================= */

#pMain .cv-forum-thread-head { margin-bottom: 14px; }
#pMain .cv-forum-thread-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 150%;
    font-weight: 700;
    color: var(--cv-dark);
    line-height: 1.3;
}
#pMain .cv-forum-thread-title .fa { color: var(--cv-mid); font-size: 90%; }

/* Notification toggle ---------------------------------------------------- */
#pMain .cv-forum-notif { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
#pMain .cv-forum-notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--cv-panel-border);
    background: #fff;
    color: var(--c-muted);
    font-size: 88%;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}
#pMain .cv-forum-notif input { display: none; }
#pMain .cv-forum-notif input:checked + .cv-forum-notif-pill {
    background: var(--c-success-soft);
    color: var(--c-success);
    border-color: #bfe6c8;
}
#pMain .cv-forum-notif .fa-bell-slash { display: inline; }
#pMain .cv-forum-notif .fa-bell { display: none; }
#pMain .cv-forum-notif input:checked + .cv-forum-notif-pill .fa-bell-slash { display: none; }
#pMain .cv-forum-notif input:checked + .cv-forum-notif-pill .fa-bell { display: inline; }

/* Post card -------------------------------------------------------------- */
#pMain .cv-forum-posts { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; padding: 0; list-style: none; }
#pMain .cv-forum-post {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t), border-color var(--t);
}
#pMain .cv-forum-post:hover { box-shadow: var(--shadow-lg); border-color: #cdddef; }
#pMain .cv-forum-post--unread { border-left: 4px solid var(--c-danger); }
#pMain .cv-forum-post--op { border-left: 4px solid var(--c-brand); }

/* Author sidebar --------------------------------------------------------- */
#pMain .cv-forum-author {
    position: relative;
    flex-shrink: 0;
    width: 196px;
    background: linear-gradient(180deg, var(--cv-item-active) 0%, var(--c-surface-2) 42%, #fff 100%);
    border-right: 1px solid var(--c-border-soft);
    padding: 24px 16px 18px;
    text-align: center;
}
#pMain .cv-forum-author::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
#pMain .cv-forum-author-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--cv-mid), var(--shadow-md);
    background: #fff;
    margin-bottom: 12px;
}
#pMain .cv-forum-author-name { font-weight: 700; color: var(--cv-dark); font-size: 95%; line-height: 1.3; }
#pMain .cv-forum-author-name a { color: var(--cv-dark); text-decoration: none; transition: color var(--t); }
#pMain .cv-forum-author-name a:hover { color: var(--c-brand); }
#pMain .cv-forum-author-headline { font-size: 80%; color: var(--cv-mid); font-weight: 600; margin-top: 4px; line-height: 1.35; }
#pMain .cv-forum-author-joined {
    display: inline-block;
    font-size: 73%;
    color: var(--c-muted);
    margin-top: 9px;
    background: #fff;
    border: 1px solid var(--c-border-soft);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}
#pMain .cv-forum-author-pm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
    color: #fff;
    font-size: 78%;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t);
}
#pMain .cv-forum-author-pm:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Post main column ------------------------------------------------------- */
#pMain .cv-forum-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 20px; }
#pMain .cv-forum-post-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 82%;
    color: var(--c-muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-soft);
}
#pMain .cv-forum-post-info > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
#pMain .cv-forum-post-info .fa { opacity: .6; }
#pMain .cv-forum-post-info .nseen { color: var(--c-danger); opacity: 1; }
#pMain .cv-forum-post-title {
    position: relative;
    margin: 14px 0 8px;
    padding-left: 12px;
    font-size: 118%;
    font-weight: 700;
    color: var(--cv-dark);
    line-height: 1.35;
}
#pMain .cv-forum-post-title::before {
    content: "";
    position: absolute;
    left: 0; top: 3px; bottom: 3px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
#pMain .cv-forum-post-body {
    flex: 1;
    color: #3a4a5a;
    line-height: 1.65;
    font-size: 95%;
    overflow-wrap: break-word;
}
#pMain .cv-forum-post-body > :first-child { margin-top: 0; }
#pMain .cv-forum-post-body > :last-child { margin-bottom: 0; }
#pMain .cv-forum-post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Quoted text (output of the [QUOTE:id:user] regex) — modern blockquote --- */
#pMain .cv-forum-post-body .label-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-brand-softer);
    color: var(--cv-mid);
    font-weight: 700;
    font-size: 80%;
    padding: 4px 12px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
#pMain .cv-forum-post-body .alert-success.mvftop,
#pMain .cv-forum-post-body .mvftop {
    background: var(--c-brand-softer);
    border: none;
    border-left: 3px solid var(--c-brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    color: #41566d;
    padding: 12px 16px;
    margin: 0 0 12px;
}
#pMain .cv-forum-post-body .mvftop > :first-child { margin-top: 0; }
#pMain .cv-forum-post-body .mvftop > :last-child { margin-bottom: 0; }

/* Post action row -------------------------------------------------------- */
#pMain .cv-forum-post-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border-soft);
}
#pMain .cv-forum-pbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
    background: #fff;
    color: #46586e;
    font-size: 84%;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t);
}
#pMain .cv-forum-pbtn:hover { background: var(--c-surface-2); color: #46586e; }
#pMain .cv-forum-pbtn--quote:hover { background: var(--c-info-soft); color: var(--c-info); border-color: #bcdcef; }
#pMain .cv-forum-pbtn--edit:hover { background: var(--c-warning-soft); color: var(--c-warning); border-color: #f3e0b8; }
#pMain .cv-forum-pbtn--del:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: #f3c2c2; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    #pMain .cv-forum-last { display: none; }
    #pMain .cv-forum-post { flex-direction: column; }
    #pMain .cv-forum-author {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--c-border-soft);
        padding: 12px 14px;
    }
    #pMain .cv-forum-author-avatar { width: 44px; height: 44px; margin-bottom: 0; }
    #pMain .cv-forum-author-joined, #pMain .cv-forum-author-pm { margin-top: 0; }
}
@media (max-width: 600px) {
    #pMain .cv-forum-card { flex-wrap: wrap; }
    #pMain .cv-forum-ico { width: 42px; height: 42px; font-size: 20px; }
    #pMain .cv-forum-thread-title { font-size: 124%; }
    #pMain .cv-forum-post-actions { justify-content: flex-start; }
}

/* ===================================================================== */
/* Classrooms / Teleconference (course_teleconf.jsp) — .cv-tc-*          */
/* ===================================================================== */
#pMain .cv-tc { width: 100%; max-width: 900px; margin: 0 auto; padding: 4px 0 24px; }
#pMain .cv-tc-list { display: flex; flex-direction: column; gap: 16px; }

#pMain .cv-tc-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px 16px 22px;
    overflow: hidden;
    transition: box-shadow var(--t), transform var(--t);
}
#pMain .cv-tc-card:hover { box-shadow: var(--shadow-md); }
#pMain .cv-tc-card.is-closed { opacity: .82; }

/* status accent bar (left edge) */
#pMain .cv-tc-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: var(--c-muted); }
#pMain .cv-tc-card.is-success .cv-tc-accent { background: var(--c-success); }
#pMain .cv-tc-card.is-warning .cv-tc-accent { background: var(--c-warning); }
#pMain .cv-tc-card.is-danger  .cv-tc-accent { background: var(--c-danger); }
#pMain .cv-tc-card.is-primary .cv-tc-accent { background: var(--c-brand); }

/* status icon disc */
#pMain .cv-tc-icon {
    position: relative;
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: #fff;
    background: var(--c-muted);
    box-shadow: var(--shadow-sm);
}
#pMain .cv-tc-card.is-success .cv-tc-icon { background: var(--c-success); }
#pMain .cv-tc-card.is-warning .cv-tc-icon { background: var(--c-warning); }
#pMain .cv-tc-card.is-danger  .cv-tc-icon { background: var(--c-danger); }
#pMain .cv-tc-card.is-primary .cv-tc-icon { background: linear-gradient(135deg, var(--cv-dark), var(--cv-mid)); }

#pMain .cv-tc-live-dot {
    position: absolute; top: -2px; right: -2px;
    width: 13px; height: 13px; border-radius: 50%;
    background: #ef4444; border: 2px solid var(--c-surface);
    animation: cvTcPulse 1.4s ease-out infinite;
}
@keyframes cvTcPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

#pMain .cv-tc-main { flex: 1 1 auto; min-width: 0; }

#pMain .cv-tc-head {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
}
#pMain .cv-tc-headtext { flex: 1 1 auto; min-width: 0; }
#pMain .cv-tc-title {
    margin: 0 0 3px;
    font-size: 116%; font-weight: 700;
    color: var(--cv-dark) !important;
    line-height: 1.25;
    word-wrap: break-word;
}
#pMain .cv-tc-time { font-size: 86%; color: var(--c-muted); }
#pMain .cv-tc-time i { color: var(--c-brand); margin-right: 4px; }
#pMain .cv-tc-time span { display: inline; }

#pMain .cv-tc-status-pill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 10px; border-radius: var(--radius-pill);
}
#pMain .cv-tc-status-pill.is-live { background: #fee2e2; color: #b91c1c; }
#pMain .cv-tc-status-pill.is-live i { font-size: 7px; animation: cvTcBlink 1.2s steps(2,start) infinite; }
@keyframes cvTcBlink { 50% { opacity: .25; } }

#pMain .cv-tc-toggle {
    flex: 0 0 auto;
    color: var(--c-muted); font-size: 14px;
    transition: transform var(--t);
}
#pMain .cv-tc-card.is-closed .cv-tc-toggle { transform: rotate(-90deg); }

#pMain .cv-tc-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
#pMain .cv-tc-desc { margin: 0 0 12px; color: #374151; line-height: 1.5; }

#pMain .cv-tc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#pMain .cv-tc-enter { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; border-radius: var(--radius-md); }
#pMain .cv-tc-participants {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 84%; font-weight: 600; color: var(--c-success);
    background: var(--c-success-soft); padding: 4px 10px; border-radius: var(--radius-pill);
}
#pMain .cv-tc-copy { margin-left: auto; border-radius: var(--radius-md) !important; }

#pMain .cv-tc-alert {
    margin-top: 14px;
    background: var(--c-danger-soft);
    border: 1px solid #fecaca;
    border-left: 4px solid var(--c-danger);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
#pMain .cv-tc-alert-title { font-weight: 700; color: #991b1b; margin-bottom: 6px; }
#pMain .cv-tc-alert p { margin: 0 0 10px; color: #7f1d1d; font-size: 90%; }

#pMain .cv-tc-rec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--c-border-soft); }
#pMain .cv-tc-rec-title { margin: 0 0 10px; font-size: 95%; font-weight: 700; color: var(--cv-dark); }
#pMain .cv-tc-rec-title i { color: var(--c-brand); margin-right: 5px; }

/* Restyle the fixed getRecordingsHtml() <table class="paleBlock"> output.
   Markup (set in bbb_api.jspf, shared) per recording: tr>td with
   .col-md-8 (icon+name), .col-md-11 (start time), .col-md-5 (playback btns). */
#pMain .cv-tc-rec table.paleBlock {
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
#pMain .cv-tc-rec table.paleBlock tbody,
#pMain .cv-tc-rec table.paleBlock tr { display: block; }
#pMain .cv-tc-rec table.paleBlock td {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: background var(--t), box-shadow var(--t);
}
#pMain .cv-tc-rec table.paleBlock td:hover { background: var(--c-brand-softer); box-shadow: var(--shadow-sm); }
#pMain .cv-tc-rec table.paleBlock td:last-child { margin-bottom: 0; }

/* neutralize Bootstrap column floats/widths inside the row */
#pMain .cv-tc-rec td > div[class*="col-md-"] { float: none; width: auto; padding: 0; min-height: 0; }

#pMain .cv-tc-rec .col-md-8 {
    flex: 1 1 220px; min-width: 0;
    font-weight: 600; color: var(--cv-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pMain .cv-tc-rec .col-md-8 i { color: var(--c-brand); margin-right: 7px; }
#pMain .cv-tc-rec .col-md-11 {
    flex: 0 0 auto;
    font-size: 83%; color: var(--c-muted);
    display: inline-flex; align-items: center; gap: 5px;
}
#pMain .cv-tc-rec .col-md-11::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f017"; /* fa-clock */
    color: var(--c-muted); opacity: .7;
}
#pMain .cv-tc-rec .col-md-5 { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* the playback action buttons */
#pMain .cv-tc-rec .col-md-5 .btn {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--radius-md);
    font-weight: 600;
}
#pMain .cv-tc-rec .col-md-5 .btn.pull-right { float: none !important; }
/* "processing" placeholder (legacy .paleBlock.text-warning) → soft warning chip */
#pMain .cv-tc-rec .col-md-5 .paleBlock.text-warning,
#pMain .cv-tc-rec div.paleBlock.text-warning {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-warning-soft) !important;
    color: var(--c-warning) !important;
    border: 1px solid #fde68a;
    border-radius: var(--radius-pill);
    padding: 4px 12px; font-size: 84%; font-weight: 600;
    margin: 0;
}

#pMain .cv-tc-empty {
    text-align: center; color: var(--c-muted);
    padding: 48px 20px;
    background: var(--c-surface-2);
    border: 1px dashed var(--cv-panel-border);
    border-radius: var(--radius-md);
}
#pMain .cv-tc-empty i { font-size: 40px; color: var(--cv-panel-border); margin-bottom: 12px; }
#pMain .cv-tc-empty p { margin: 0; font-size: 104%; }

@media (max-width: 600px) {
    #pMain .cv-tc-card { flex-wrap: wrap; padding-left: 18px; }
    #pMain .cv-tc-icon { width: 40px; height: 40px; font-size: 17px; }
    #pMain .cv-tc-copy { margin-left: 0; }
}