/*
 * Global Training Industry — visual system refresh
 * Scope: presentation only. Routes, forms and application behavior stay intact.
 */

:root {
    --ui-navy-950: #0c2436;
    --ui-navy-900: #102d43;
    --ui-navy-800: #163a54;
    --ui-navy-700: #1d4a69;
    --ui-ink: #102d43;
    --ui-text: #33475b;
    --ui-muted: #5f6f80;
    --ui-teal-700: #127a89;
    --ui-teal-600: #168d9f;
    --ui-teal-500: #1fa3b5;
    --ui-green-700: #147a41;
    --ui-green-600: #178a4a;
    --ui-green-500: #1a8f4f;
    --ui-green-400: #34c977;
    --ui-cyan-100: #def6f6;
    --ui-green-100: #e7f9ee;
    --ui-blue-100: #e9f5fb;
    --ui-amber-100: #fff4d8;
    --ui-amber-600: #b45309;
    --ui-red-100: #fff0ed;
    --ui-red-600: #c0392b;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f5f7fa;
    --ui-surface-muted: #eef3f7;
    --ui-border: #e3e9ef;
    --ui-border-strong: #b8c4ce;
    --ui-shadow-xs: 0 2px 5px rgba(10, 54, 80, .04);
    --ui-shadow-sm: 0 5px 18px rgba(10, 54, 80, .08);
    --ui-shadow-md: 0 14px 36px rgba(10, 54, 80, .12);
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 22px;
    --ui-transition: 180ms ease;
}

.ui-public-shell,
.ui-panel-shell,
.ui-admin-shell {
    color: var(--ui-text);
    background: var(--ui-surface-soft);
    font-family: "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ui-public-shell *,
.ui-panel-shell *,
.ui-admin-shell * {
    scrollbar-color: #a9bdc9 transparent;
    scrollbar-width: thin;
}

.ui-public-shell h1,
.ui-public-shell h2,
.ui-public-shell h3,
.ui-public-shell h4,
.ui-public-shell h5,
.ui-panel-shell h1,
.ui-panel-shell h2,
.ui-panel-shell h3,
.ui-panel-shell h4,
.ui-admin-shell h1,
.ui-admin-shell h2,
.ui-admin-shell h3,
.ui-admin-shell h4 {
    color: var(--ui-ink);
    letter-spacing: -.035em;
}

.ui-public-shell a,
.ui-panel-shell a,
.ui-admin-shell a {
    transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

.ui-public-shell .container {
    width: min(100% - 48px, 1400px);
    max-width: 1400px;
}

.ui-public-shell .btn,
.ui-panel-shell .btn,
.ui-admin-shell .btn {
    min-height: 42px;
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 700;
    box-shadow: none;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition);
}

.ui-public-shell .btn:hover,
.ui-panel-shell .btn:hover,
.ui-admin-shell .btn:hover {
    transform: translateY(-1px);
}

.ui-public-shell .btn-primary,
.ui-panel-shell .btn-primary,
.ui-admin-shell .btn-primary,
.ui-admin-shell .btn-success {
    border-color: var(--ui-green-600) !important;
    background: linear-gradient(135deg, var(--ui-green-500), var(--ui-green-600)) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(16, 173, 86, .2);
}

.ui-public-shell .btn-primary:hover,
.ui-panel-shell .btn-primary:hover,
.ui-admin-shell .btn-primary:hover,
.ui-admin-shell .btn-success:hover {
    background: linear-gradient(135deg, var(--ui-green-600), var(--ui-green-700)) !important;
    box-shadow: 0 8px 18px rgba(16, 173, 86, .28);
}

.ui-public-shell .btn-outline-primary,
.ui-panel-shell .btn-outline-primary,
.ui-admin-shell .btn-outline-primary {
    color: var(--ui-teal-700) !important;
    border-color: var(--ui-teal-600) !important;
    background: #fff !important;
}

.ui-public-shell .btn-outline-primary:hover,
.ui-panel-shell .btn-outline-primary:hover,
.ui-admin-shell .btn-outline-primary:hover {
    color: #fff !important;
    background: var(--ui-teal-700) !important;
}

.ui-public-shell .form-control,
.ui-public-shell .custom-select,
.ui-panel-shell .form-control,
.ui-panel-shell .custom-select,
.ui-admin-shell .form-control,
.ui-admin-shell .custom-select,
.ui-admin-shell .select2-selection {
    min-height: 44px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: #fff;
    color: var(--ui-ink);
    box-shadow: none !important;
}

.ui-public-shell .form-control:focus,
.ui-public-shell .custom-select:focus,
.ui-panel-shell .form-control:focus,
.ui-panel-shell .custom-select:focus,
.ui-admin-shell .form-control:focus,
.ui-admin-shell .custom-select:focus,
.ui-admin-shell .select2-container--focus .select2-selection {
    border-color: var(--ui-teal-600) !important;
    box-shadow: 0 0 0 3px rgba(11, 145, 162, .12) !important;
}

.ui-public-shell .dropdown-menu,
.ui-panel-shell .dropdown-menu,
.ui-admin-shell .dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
}

/* Shared generic UI primitives */
.ui-page {
    background: var(--ui-surface-soft);
}

.ui-page-header {
    margin-bottom: 24px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ui-page-header h1,
.ui-page-header h2,
.ui-page-header .section-title {
    margin-bottom: 5px;
    color: var(--ui-ink) !important;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.15;
}

.ui-section {
    margin-top: 54px;
}

.ui-card,
.ui-filter-card,
.ui-table-card,
.ui-form-shell,
.ui-stat-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.ui-card,
.ui-stat-card {
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition);
}

.ui-card:hover,
a.ui-stat-card:hover {
    border-color: #c4d7df !important;
    box-shadow: var(--ui-shadow-sm) !important;
    transform: translateY(-2px);
}

.ui-filter-card {
    padding: 20px !important;
}

.ui-table-card {
    overflow: hidden;
}

.ui-form-shell {
    padding: 24px;
}

.ui-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 12;
    margin-right: -24px;
    margin-bottom: -24px;
    margin-left: -24px;
    padding: 16px 24px !important;
    border-top: 1px solid var(--ui-border) !important;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -8px 24px rgba(10, 54, 80, .07);
    backdrop-filter: blur(12px);
}

.ui-stat-list {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: #fff;
    box-shadow: var(--ui-shadow-xs);
}

/* Public storefront: top bar and primary navigation */
.ui-public-shell {
    background: #fff;
}

.ui-public-shell .top-navbar {
    min-height: 44px;
    border: 0 !important;
    background: linear-gradient(110deg, var(--ui-navy-950), var(--ui-navy-800));
    color: #fff;
}

.ui-public-shell .top-navbar > .container {
    min-height: 44px;
}

.ui-public-shell .top-navbar .top-contact-box {
    min-height: 44px;
    border: 0 !important;
}

.ui-public-shell .top-navbar .text-dark-blue,
.ui-public-shell .top-navbar .navbar-user .user-name,
.ui-public-shell .top-navbar svg {
    color: #fff !important;
    stroke: currentColor;
}

.ui-public-shell .top-navbar .border-left {
    border-color: rgba(255, 255, 255, .3) !important;
}

.ui-public-shell .top-navbar .navbar-search {
    display: none;
}

.ui-public-shell .top-navbar .language-select,
.ui-public-shell .top-navbar .flagstrap-selected,
.ui-public-shell .top-navbar .flagstrap-selected > button {
    color: #fff !important;
    background: transparent !important;
}

.ui-public-shell #navbarVacuum {
    display: none !important;
}

.ui-public-shell #navbar {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 76px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 5px 18px rgba(10, 54, 80, .05);
    backdrop-filter: blur(14px);
}

.ui-public-shell #navbar .container {
    min-height: 76px;
}

.ui-public-shell #navbar .navbar-brand {
    width: 210px;
    height: 58px;
    padding: 7px 28px 7px 0;
    border-right: 1px solid var(--ui-border);
}

.ui-public-shell #navbar .navbar-brand img {
    object-fit: contain;
    object-position: left center;
}

.ui-public-shell #navbar .navbar-nav {
    gap: 8px;
}

.ui-public-shell #navbar .nav-item,
.ui-public-shell #navbar .menu-category > ul > li {
    margin: 0 !important;
}

.ui-public-shell #navbar .nav-link,
.ui-public-shell #navbar .xs-categories-toggle {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 10px 14px !important;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-ink) !important;
    font-size: 15px;
    font-weight: 600;
}

.ui-public-shell #navbar .nav-link:hover,
.ui-public-shell #navbar .xs-categories-toggle:hover {
    background: var(--ui-cyan-100);
    color: var(--ui-teal-700) !important;
}

.ui-public-shell #navbar .cat-dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
}

.ui-public-shell #navbar .nav-start-a-live-btn {
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--ui-radius-sm) !important;
    white-space: nowrap;
}

/* Public storefront: promotional banners */
.ui-public-shell .ui-promo-banner {
    margin-top: 64px;
    margin-bottom: 64px;
}

.ui-public-shell .ui-promo-banner > .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.ui-public-shell .ui-promo-banner [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}

.ui-public-shell .ui-promo-banner a {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-navy-950);
    box-shadow: var(--ui-shadow-sm);
}

.ui-public-shell .ui-promo-banner img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center;
    transition: transform 300ms ease;
}

.ui-public-shell .ui-promo-banner a:hover img {
    transform: scale(1.03);
}

/* Public storefront: hero */
.ui-public-shell .ui-hero.slider-container {
    position: relative;
    min-height: 485px;
    margin: 0;
    overflow: hidden;
    border: 0;
    background-color: #f5fafc;
    background-position: center;
    background-size: cover;
}

.ui-public-shell .ui-hero.slider-container::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(90deg, rgba(247, 251, 253, .99) 0%, rgba(247, 251, 253, .97) 38%, rgba(247, 251, 253, .66) 58%, rgba(6, 44, 67, .03) 100%);
}

.ui-public-shell .ui-hero.slider-container::after {
    position: absolute;
    top: -110px;
    left: 49%;
    width: 180px;
    height: 720px;
    content: "";
    border-radius: 55px;
    background: linear-gradient(180deg, var(--ui-teal-500), var(--ui-teal-700));
    opacity: .88;
    transform: rotate(25deg);
    pointer-events: none;
}

.ui-public-shell .ui-hero.slider-container .mask {
    display: none;
}

.ui-public-shell .ui-hero.slider-container > .container {
    position: relative;
    z-index: 2;
}

.ui-public-shell .ui-hero .slider-content {
    min-height: 485px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.ui-public-shell .ui-hero .slider-content > h1,
.ui-public-shell .ui-hero .slider-content h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ui-ink) !important;
    font-size: clamp(38px, 4.25vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    text-shadow: none;
}

.ui-public-shell .ui-hero .slide-hint {
    max-width: 650px;
    color: var(--ui-text) !important;
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.5;
    text-shadow: none;
}

.ui-public-shell .ui-hero .slider-search {
    max-width: 650px;
    min-height: 62px;
    padding: 8px 8px 8px 20px !important;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-sm);
}

.ui-public-shell .ui-hero .slider-search input {
    min-height: 44px;
    padding-left: 8px;
    font-size: 16px;
}

.ui-public-shell .ui-hero .slider-search .btn {
    min-width: 126px;
    border-radius: var(--ui-radius-sm) !important;
}

.ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child {
    position: relative;
    z-index: 2;
    align-self: stretch;
}

.ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child img,
.ui-public-shell .ui-hero.slider-hero-section2 lottie-player {
    height: 100%;
    max-height: 420px;
    object-fit: contain;
}

/* Public storefront: stats and content sections */
.ui-public-shell .stats-container {
    position: relative;
    z-index: 5;
    width: min(100% - 48px, 1400px);
    margin: 18px auto 0;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: #fff;
    box-shadow: var(--ui-shadow-xs);
}

.ui-public-shell .stats-container > .container {
    width: 100%;
    padding: 0;
}

.ui-public-shell .stats-container .row {
    margin: 0;
}

.ui-public-shell .stats-container [class*="col-"] {
    padding: 0;
}

.ui-public-shell .stats-container .stats-item {
    position: relative;
    min-height: 112px;
    display: grid !important;
    grid-template-areas:
        "icon number"
        "icon label";
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-content: center;
    justify-items: start;
    padding: 20px 22px !important;
    border-right: 1px solid var(--ui-border);
    text-align: left !important;
}

.ui-public-shell .stats-container [class*="col-"]:last-child .stats-item {
    border-right: 0;
}

.ui-public-shell .stats-container .stat-icon-box {
    grid-area: icon;
    width: 50px;
    height: 50px;
    margin-right: 0;
    border-radius: 14px;
    background: var(--ui-cyan-100);
}

.ui-public-shell .stats-container .stat-icon-box img {
    width: 30px;
    height: 30px;
}

.ui-public-shell .stats-container .stat-number {
    grid-area: number;
    align-self: end;
    margin: 0 !important;
    color: var(--ui-ink);
    font-size: 24px;
    line-height: 1;
}

.ui-public-shell .stats-container .stat-title {
    grid-area: label;
    align-self: start;
    margin: 5px 0 0;
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 500;
}

.ui-public-shell .stats-container .stat-desc {
    display: none;
}

.ui-public-shell .home-sections {
    margin-top: 58px;
}

.ui-public-shell .section-title {
    position: relative;
    margin: 0;
    padding-left: 24px;
    color: var(--ui-ink);
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.15;
}

.ui-public-shell .section-title::before {
    position: absolute;
    top: .1em;
    bottom: .1em;
    left: 0;
    width: 7px;
    content: "";
    border-radius: 6px;
    background: linear-gradient(180deg, var(--ui-green-500), var(--ui-green-700));
}

.ui-public-shell .section-hint {
    margin-top: 10px;
    padding-left: 24px;
    color: var(--ui-muted);
    font-size: 16px;
}

.ui-public-shell .home-sections .swiper-pagination-bullet-active,
.ui-public-shell .home-sections .owl-dot.active span {
    background: var(--ui-teal-600) !important;
}

.ui-public-shell .webinar-card,
.ui-public-shell .blog-grid-card,
.ui-public-shell .feature-slider {
    overflow: hidden;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: #fff;
    box-shadow: var(--ui-shadow-xs) !important;
}

.ui-public-shell .webinar-card .image-box,
.ui-public-shell .blog-grid-card .blog-grid-image {
    overflow: hidden;
    border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
}

.ui-public-shell .webinar-card .image-box img,
.ui-public-shell .blog-grid-card img {
    transition: transform 280ms ease;
}

.ui-public-shell .webinar-card:hover .image-box img,
.ui-public-shell .blog-grid-card:hover img {
    transform: scale(1.035);
}

.ui-public-shell .webinar-card-body,
.ui-public-shell .blog-grid-card .blog-grid-detail {
    padding: 18px 20px 20px !important;
}

.ui-public-shell .webinar-title,
.ui-public-shell .blog-grid-card .blog-grid-title {
    color: var(--ui-ink) !important;
    font-size: 18px !important;
    line-height: 1.3;
}

.ui-public-shell .ui-course-grid > .row,
.ui-public-shell .ui-content-grid > .row {
    row-gap: 24px;
}

.ui-public-shell .ui-course-grid .webinar-card {
    height: 100%;
}

.ui-public-shell .ui-course-grid .image-box {
    height: 210px !important;
}

.ui-public-shell .ui-compact-grid > .row {
    row-gap: 14px;
    margin-top: 20px;
}

.ui-public-shell .ui-compact-grid .swiper-slide {
    height: 100%;
    padding-top: 0 !important;
}

.ui-public-shell .ui-compact-grid .webinar-card {
    height: 100%;
    min-height: 95px;
}

.ui-public-shell .ui-compact-grid .webinar-card figure {
    display: flex;
    height: 100%;
    align-items: center;
    margin: 0;
    padding: 12px;
}

.ui-public-shell .ui-compact-grid .image-box {
    width: 68px;
    min-width: 68px;
    height: 68px !important;
    border-radius: 12px;
    background: var(--ui-cyan-100);
}

.ui-public-shell .ui-compact-grid .webinar-card-body {
    padding: 0 12px !important;
}

.ui-public-shell .ui-compact-grid .webinar-title {
    margin-top: 0 !important;
}

.ui-public-shell .ui-logo-grid .webinar-card,
.ui-public-shell .ui-profile-grid .webinar-card {
    height: 100%;
}

.ui-public-shell .ui-logo-grid .image-box {
    height: 150px !important;
    padding: 20px;
    background: #fff;
}

.ui-public-shell .ui-logo-grid .image-box img {
    object-fit: contain;
}

.ui-public-shell .ui-profile-grid .image-box {
    height: 230px !important;
}

.ui-public-shell .ui-media-section {
    overflow: hidden;
    padding: 72px 0;
    background: linear-gradient(120deg, var(--ui-navy-950), var(--ui-navy-800));
}

.ui-public-shell .ui-media-section h2,
.ui-public-shell .ui-media-section h3,
.ui-public-shell .ui-media-section p {
    color: #fff !important;
}

/* Public listing, catalog and blog surfaces */
.ui-public-shell .site-top-banner.ui-hero {
    min-height: 250px;
    overflow: hidden;
    border-bottom: 1px solid var(--ui-border);
    background-color: var(--ui-navy-900);
}

.ui-public-shell .site-top-banner.ui-hero .container {
    position: relative;
    z-index: 2;
}

.ui-public-shell .site-top-banner.ui-hero h1,
.ui-public-shell .site-top-banner.ui-hero h2,
.ui-public-shell .site-top-banner.ui-hero p {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.ui-public-shell .ui-filter-card .accordion-row,
.ui-public-shell .filters-container .accordion-row {
    border-color: var(--ui-border) !important;
}

.ui-public-shell .top-filter-panel {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.ui-public-shell .blog-grid-card {
    height: 100%;
}

.ui-public-shell .blog-grid-card .blog-grid-image {
    height: 215px;
}

/* Public footer */
.ui-public-shell .footer {
    margin-top: 72px;
    padding-top: 0;
    background: linear-gradient(120deg, var(--ui-navy-950), #123f5b) !important;
}

.ui-public-shell .footer .footer-subscribe {
    position: relative;
    top: -32px;
    margin-bottom: 4px;
    padding: 24px 30px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--ui-radius-md);
    background: linear-gradient(110deg, var(--ui-teal-700), var(--ui-teal-500));
    box-shadow: var(--ui-shadow-md);
}

.ui-public-shell .footer .footer-subscribe strong {
    color: #fff;
    font-size: 22px;
}

.ui-public-shell .footer .subscribe-input {
    max-width: 520px;
    border-radius: var(--ui-radius-sm) !important;
}

.ui-public-shell .footer .header {
    font-size: 17px;
}

.ui-public-shell .footer a,
.ui-public-shell .footer p,
.ui-public-shell .footer li,
.ui-public-shell .footer span {
    color: rgba(255, 255, 255, .85);
}

.ui-public-shell .footer a:hover {
    color: var(--ui-green-400);
}

.ui-public-shell .footer .border-blue {
    border-color: rgba(255, 255, 255, .2) !important;
}

/* Student / instructor panel */
.ui-panel-shell {
    min-height: 100vh;
}

.ui-panel-shell #navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 260px;
    z-index: 900;
    height: 64px;
    padding: 0;
    border-bottom: 1px solid var(--ui-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--ui-shadow-xs);
    backdrop-filter: blur(12px);
}

.ui-panel-shell #navbar .container-fluid {
    padding-right: 28px;
    padding-left: 28px;
}

.ui-panel-shell #navbar .navbar-brand {
    display: none;
}

.ui-panel-shell #navbar .navbar-toggle-content {
    margin: 0 !important;
}

.ui-panel-shell #navbar .navbar-nav {
    gap: 6px;
}

.ui-panel-shell #navbar .nav-link,
.ui-panel-shell #navbar .xs-categories-toggle {
    padding: 10px 12px !important;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-ink) !important;
}

.ui-panel-shell #navbar .nav-link:hover,
.ui-panel-shell #navbar .xs-categories-toggle:hover {
    background: var(--ui-cyan-100);
    color: var(--ui-teal-700) !important;
}

.ui-panel-shell .panel-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 950;
    width: 260px;
    padding: 26px 18px !important;
    overflow: hidden;
    border-right: 1px solid var(--ui-border);
    background: #fff;
    box-shadow: 5px 0 18px rgba(10, 54, 80, .04);
}

.ui-panel-shell .panel-sidebar::before {
    display: flex;
    width: 190px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    content: "GLOBAL TRAINING";
    color: var(--ui-teal-700);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.04em;
    text-align: center;
}

.ui-panel-shell .panel-sidebar .user-info {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 14px 10px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-soft);
}

.ui-panel-shell .panel-sidebar .user-avatar {
    width: 46px;
    min-width: 46px;
    height: 46px;
}

.ui-panel-shell .panel-sidebar .user-info > div:last-child {
    align-items: flex-start !important;
    margin-left: 12px;
}

.ui-panel-shell .panel-sidebar .user-name {
    margin-top: 0 !important;
}

.ui-panel-shell .panel-sidebar .user-name h3 {
    text-align: left !important;
}

.ui-panel-shell .sidebar-user-stats {
    display: none !important;
}

.ui-panel-shell .sidebar-menu {
    height: calc(100vh - 165px) !important;
    padding-top: 8px !important;
}

.ui-panel-shell .sidebar-menu .sidenav-item {
    margin: 3px 0;
    padding: 0 !important;
    border-radius: var(--ui-radius-sm);
}

.ui-panel-shell .sidebar-menu .sidenav-item > a {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--ui-radius-sm);
}

.ui-panel-shell .sidebar-menu .sidenav-item > a span,
.ui-panel-shell .sidebar-menu .sidenav-item > a svg {
    color: var(--ui-text) !important;
    stroke: currentColor;
}

.ui-panel-shell .sidebar-menu .sidenav-item > a:hover {
    background: var(--ui-surface-soft);
}

.ui-panel-shell .sidebar-menu .sidenav-item-active > a {
    position: relative;
    background: linear-gradient(90deg, rgba(24, 167, 181, .18), rgba(40, 199, 111, .10));
}

.ui-panel-shell .sidebar-menu .sidenav-item-active > a::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -12px;
    width: 4px;
    content: "";
    border-radius: 0 4px 4px 0;
    background: var(--ui-green-500);
}

.ui-panel-shell .sidebar-menu .sidenav-item-active > a span,
.ui-panel-shell .sidebar-menu .sidenav-item-active > a svg {
    color: var(--ui-teal-700) !important;
    stroke: currentColor;
}

.ui-panel-shell .sidebar-menu .sidenav-item-collapse {
    padding: 5px 0 7px 48px;
}

.ui-panel-shell .panel-content {
    width: calc(100% - 260px);
    min-height: 100vh;
    margin-top: 64px;
    padding: 30px 32px 48px;
}

.ui-panel-shell .panel-content > section:first-child {
    margin-top: 0;
}

.ui-panel-shell .panel-section-card,
.ui-panel-shell .activities-container,
.ui-panel-shell .dashboard-banner-container,
.ui-panel-shell .noticeboard,
.ui-panel-shell .monthly-sales-card,
.ui-panel-shell .account-balance,
.ui-panel-shell .dashboard-stats {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.ui-panel-shell .activities-container {
    padding: 20px !important;
}

.ui-panel-shell .activities-container .activity-icon {
    border-radius: 12px;
    background: var(--ui-cyan-100) !important;
}

.ui-panel-shell table {
    color: var(--ui-text);
}

.ui-panel-shell table thead th {
    border: 0 !important;
    background: var(--ui-surface-muted);
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.ui-panel-shell table tbody td {
    border-color: var(--ui-border) !important;
    vertical-align: middle;
}

.ui-panel-shell table tbody tr:hover {
    background: #f7fbfc;
}

/* Administration */
.ui-admin-shell {
    min-height: 100vh;
}

.ui-admin-shell .navbar-bg {
    position: fixed;
    top: 0;
    right: 0;
    left: 250px;
    z-index: 880;
    height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-xs);
}

.ui-admin-shell .main-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 250px;
    z-index: 900;
    height: 64px;
    padding: 0 28px;
    background: transparent;
}

.ui-admin-shell .main-navbar .nav-link {
    color: var(--ui-ink) !important;
}

.ui-admin-shell .main-navbar .nav-link:hover {
    color: var(--ui-teal-700) !important;
}

.ui-admin-shell .main-navbar .nav-link-user img {
    width: 36px;
    height: 36px;
    border: 2px solid var(--ui-cyan-100);
}

.ui-admin-shell .main-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 920;
    width: 250px;
    background: linear-gradient(180deg, var(--ui-navy-950), var(--ui-navy-900));
    box-shadow: 5px 0 22px rgba(6, 44, 67, .16);
}

.ui-admin-shell .main-sidebar .sidebar-brand {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ui-admin-shell .main-sidebar .sidebar-brand a {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.ui-admin-shell .main-sidebar .sidebar-menu {
    padding: 14px 10px 28px;
}

.ui-admin-shell .main-sidebar .sidebar-menu .menu-header {
    margin: 20px 12px 8px;
    padding: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
}

.ui-admin-shell .main-sidebar .sidebar-menu > li {
    margin: 3px 0;
}

.ui-admin-shell .main-sidebar .sidebar-menu > li > a {
    min-height: 43px;
    padding: 10px 13px;
    border-radius: var(--ui-radius-sm);
    color: rgba(255, 255, 255, .84);
}

.ui-admin-shell .main-sidebar .sidebar-menu > li > a i,
.ui-admin-shell .main-sidebar .sidebar-menu > li > a span {
    color: inherit !important;
}

.ui-admin-shell .main-sidebar .sidebar-menu > li > a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ui-admin-shell .main-sidebar .sidebar-menu > li.active > a {
    position: relative;
    background: linear-gradient(90deg, rgba(24, 167, 181, .78), rgba(24, 167, 181, .38));
    color: #fff;
}

.ui-admin-shell .main-sidebar .sidebar-menu > li.active > a::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -10px;
    width: 4px;
    content: "";
    border-radius: 0 4px 4px 0;
    background: #39ed86;
}

.ui-admin-shell .main-sidebar .dropdown-menu {
    margin: 4px 0 6px !important;
    padding: 4px 0 5px 38px !important;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

.ui-admin-shell .main-sidebar .dropdown-menu li a {
    min-height: 34px;
    padding: 8px 10px !important;
    color: rgba(255, 255, 255, .7) !important;
}

.ui-admin-shell .main-sidebar .dropdown-menu li.active a,
.ui-admin-shell .main-sidebar .dropdown-menu li a:hover {
    color: #fff !important;
    background: transparent !important;
}

.ui-admin-shell .main-content {
    min-height: 100vh;
    margin-left: 250px;
    padding: 94px 28px 48px;
    background: var(--ui-surface-soft);
}

.ui-admin-shell .section-header {
    min-height: auto;
    margin-bottom: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ui-admin-shell .section-header h1 {
    color: var(--ui-ink);
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 700;
}

.ui-admin-shell .card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-xs);
}

.ui-admin-shell .card .card-header {
    min-height: 58px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-border);
    background: #fff;
}

.ui-admin-shell .card .card-header h4 {
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 700;
}

.ui-admin-shell .card .card-body {
    padding: 20px;
}

.ui-admin-shell .ui-stat-card {
    min-height: 112px;
    overflow: hidden;
}

.ui-admin-shell .ui-stat-card .card-icon {
    width: 58px;
    height: 58px;
    margin: 18px;
    border-radius: 14px;
    background: var(--ui-green-100) !important;
    color: var(--ui-green-600) !important;
}

.ui-admin-shell .ui-stat-card .card-icon i {
    color: inherit !important;
}

.ui-admin-shell .ui-stat-card .card-wrap {
    padding-top: 18px;
}

.ui-admin-shell .ui-stat-card .card-header,
.ui-admin-shell .ui-stat-card .card-body {
    min-height: auto;
    padding: 2px 14px !important;
    border: 0;
}

.ui-admin-shell .ui-stat-card .card-header h4 {
    color: var(--ui-text);
    font-size: 13px;
}

.ui-admin-shell .ui-stat-card .card-body {
    color: var(--ui-ink);
    font-size: 28px;
    font-weight: 700;
}

.ui-admin-shell .table-responsive {
    border-radius: var(--ui-radius-sm);
}

.ui-admin-shell table {
    margin-bottom: 0;
    color: var(--ui-text);
}

.ui-admin-shell table thead th {
    padding: 13px 12px !important;
    border: 0 !important;
    background: var(--ui-surface-muted);
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
}

.ui-admin-shell table tbody td {
    padding: 12px !important;
    border-color: var(--ui-border) !important;
    vertical-align: middle;
}

.ui-admin-shell table tbody tr:hover {
    background: #f7fbfc;
}

.ui-admin-shell .badge-success,
.ui-admin-shell .bg-success,
.ui-panel-shell .badge-success,
.ui-panel-shell .bg-success {
    background: var(--ui-green-100) !important;
    color: var(--ui-green-700) !important;
}

.ui-admin-shell .badge-warning,
.ui-panel-shell .badge-warning {
    background: var(--ui-amber-100) !important;
    color: var(--ui-amber-600) !important;
}

.ui-admin-shell .badge-danger,
.ui-panel-shell .badge-danger {
    background: var(--ui-red-100) !important;
    color: var(--ui-red-600) !important;
}

.ui-admin-shell .nav-pills .nav-link.active,
.ui-admin-shell .nav-tabs .nav-link.active,
.ui-panel-shell .nav-pills .nav-link.active,
.ui-panel-shell .nav-tabs .nav-link.active {
    border-color: var(--ui-teal-600) !important;
    background: var(--ui-teal-600) !important;
    color: #fff !important;
}

.ui-admin-shell .pagination .page-item.active .page-link,
.ui-panel-shell .pagination .page-item.active .page-link,
.ui-public-shell .pagination .page-item.active .page-link {
    border-color: var(--ui-teal-600);
    background: var(--ui-teal-600);
    color: #fff;
}

.ui-admin-shell .pagination .page-link,
.ui-panel-shell .pagination .page-link,
.ui-public-shell .pagination .page-link {
    color: var(--ui-teal-700);
}

/* Responsive behavior */
@media (max-width: 1199.98px) {
    .ui-public-shell .container {
        width: min(100% - 36px, 1140px);
    }

    .ui-public-shell .stats-container {
        width: min(100% - 36px, 1140px);
    }

    .ui-public-shell .ui-hero.slider-container::after {
        left: 55%;
    }

    .ui-public-shell .stats-container .stats-item {
        padding: 18px 14px !important;
    }

    .ui-panel-shell .panel-sidebar {
        width: 235px;
    }

    .ui-panel-shell #navbar {
        left: 235px;
    }

    .ui-panel-shell .panel-content {
        width: calc(100% - 235px);
    }
}

@media (max-width: 991.98px) {
    .ui-public-shell .top-navbar {
        display: none !important;
    }

    .ui-public-shell #navbar,
    .ui-public-shell #navbar .container {
        min-height: 66px;
    }

    .ui-public-shell #navbar .navbar-brand {
        width: 112px;
        max-width: 112px;
        height: 52px;
        padding: 5px 10px 5px 0;
        border-right: 0;
    }

    .ui-public-shell #navbar .navbar-brand img {
        width: 100% !important;
        height: 42px !important;
        object-fit: contain !important;
    }

    .ui-public-shell #navbar {
        backdrop-filter: none;
    }

    .ui-public-shell #navbar .navbar-toggle-content {
        position: fixed;
        top: 110%;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
    }

    .ui-public-shell #navbar .navbar-toggle-content.show {
        top: 0;
    }

    .ui-public-shell #navbar .navbar-nav {
        align-items: stretch !important;
    }

    .ui-public-shell #navbar .nav-link,
    .ui-public-shell #navbar .xs-categories-toggle {
        padding: 12px 16px !important;
    }

    .ui-public-shell #navbar .nav-start-a-live-btn {
        max-width: 165px;
        padding: 7px 10px;
        font-size: 12px !important;
        line-height: 1.2;
        text-align: center;
    }

    .ui-public-shell .ui-hero.slider-container,
    .ui-public-shell .ui-hero .slider-content {
        min-height: 420px;
    }

    .ui-public-shell .ui-hero.slider-container::after {
        display: none;
    }

    .ui-public-shell .ui-hero.slider-container::before {
        background: rgba(247, 251, 253, .9);
    }

    .ui-public-shell .stats-container .stats-item {
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-public-shell .stats-container [class*="col-"]:nth-child(2n) .stats-item {
        border-right: 0;
    }

    .ui-public-shell .stats-container [class*="col-"]:nth-last-child(-n+2) .stats-item {
        border-bottom: 0;
    }

    .ui-panel-shell #navbar {
        right: 0;
        left: 0;
    }

    .ui-panel-shell #navbar .navbar-brand {
        display: block;
    }

    .ui-panel-shell .panel-sidebar {
        width: 290px;
        transform: translateX(-105%);
    }

    .ui-panel-shell .panel-sidebar.active,
    .ui-panel-shell .panel-sidebar.show {
        transform: translateX(0);
    }

    .ui-panel-shell .panel-content {
        width: 100%;
        padding: 26px 22px 42px;
    }

    .ui-admin-shell .main-content {
        margin-left: 0;
        padding: 88px 22px 40px;
    }

    .ui-admin-shell .navbar-bg,
    .ui-admin-shell .main-navbar {
        left: 0;
    }
}

@media (max-width: 767.98px) {
    .ui-public-shell .container {
        width: min(100% - 28px, 720px);
    }

    .ui-public-shell .ui-promo-banner {
        margin-top: 28px;
        margin-bottom: 36px;
    }

    .ui-public-shell .ui-hero.slider-container,
    .ui-public-shell .ui-hero .slider-content {
        min-height: 390px;
    }

    .ui-public-shell .ui-hero .hero-section2 {
        flex-direction: column !important;
    }

    .ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child {
        display: none;
    }

    .ui-public-shell .ui-hero .slider-content {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .ui-public-shell .ui-hero .slider-content h1 {
        font-size: 36px;
    }

    .ui-public-shell .ui-hero .slide-hint {
        margin-top: 18px !important;
        font-size: 16px;
    }

    .ui-public-shell .ui-hero .slider-search {
        min-height: 56px;
        padding: 6px !important;
    }

    .ui-public-shell .ui-hero .slider-search .btn {
        min-width: 94px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .ui-public-shell .stats-container {
        width: min(100% - 28px, 720px);
    }

    .ui-public-shell .stats-container .stats-item {
        min-height: 96px;
        padding: 14px 10px !important;
    }

    .ui-public-shell .stats-container .stat-icon-box {
        width: 42px;
        min-width: 42px;
        height: 42px;
        margin-right: 0;
    }

    .ui-public-shell .stats-container .stats-item {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 10px;
    }

    .ui-public-shell .stats-container .stat-icon-box img {
        width: 25px;
        height: 25px;
    }

    .ui-public-shell .stats-container .stat-number {
        font-size: 20px;
    }

    .ui-public-shell .home-sections,
    .ui-public-shell .ui-section {
        margin-top: 42px;
    }

    .ui-public-shell .section-title {
        padding-left: 18px;
        font-size: 28px;
    }

    .ui-public-shell .section-hint {
        padding-left: 18px;
    }

    .ui-public-shell .ui-media-section {
        padding: 48px 0;
    }

    .ui-public-shell .footer {
        margin-top: 56px;
    }

    .ui-public-shell .footer .footer-subscribe {
        top: -24px;
        padding: 20px;
    }

    .ui-public-shell .footer .subscribe-input {
        max-width: none;
    }

    .ui-panel-shell .panel-content,
    .ui-admin-shell .main-content {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ui-filter-card,
    .ui-form-shell {
        padding: 16px !important;
    }

    .ui-sticky-actions {
        margin-right: -16px;
        margin-bottom: -16px;
        margin-left: -16px;
        padding: 14px 16px !important;
    }
}

@media (max-width: 479.98px) {
    .ui-public-shell .stats-container .stats-item {
        border-right: 0 !important;
    }

    .ui-public-shell .stats-container [class*="col-"]:nth-last-child(2) .stats-item {
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-public-shell .ui-hero .slider-search {
        flex-wrap: nowrap;
    }

    .ui-public-shell .ui-hero .slider-search input {
        min-width: 0;
    }
}

/* Reference-aligned visual composition */
.ui-public-shell :focus-visible,
.ui-panel-shell :focus-visible,
.ui-admin-shell :focus-visible {
    outline: 3px solid rgba(11, 145, 162, .28);
    outline-offset: 2px;
}

.ui-public-shell .ui-topbar {
    height: 44px;
    min-height: 44px;
    background: #0b3550;
}

.ui-public-shell .ui-topbar > .container,
.ui-public-shell .ui-topbar .top-contact-box {
    height: 44px;
    min-height: 44px;
}

.ui-public-shell .ui-topbar .top-contact-box > div {
    gap: 0;
}

.ui-public-shell .ui-topbar .top-contact-box span {
    padding: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500;
}

.ui-public-shell .ui-topbar .top-contact-box svg {
    width: 18px;
    height: 18px;
}

.ui-public-shell .ui-topbar-language form,
.ui-public-shell .ui-topbar-language .language-select,
.ui-public-shell .ui-topbar-language .flagstrap {
    margin: 0;
}

.ui-public-shell .ui-topbar-language .flagstrap-selected > button {
    min-height: 32px;
    padding: 4px 8px !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
}

.ui-public-shell .ui-topbar button,
.ui-public-shell .ui-topbar .dropdown-toggle,
.ui-public-shell .ui-topbar .flagstrap-selected-button {
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
}

.ui-public-shell .ui-navbar {
    height: 76px;
    min-height: 76px;
}

.ui-public-shell .ui-navbar > .container,
.ui-panel-shell .ui-navbar > .container-fluid {
    height: 100%;
}

.ui-public-shell .ui-navbar .navbar-brand {
    display: flex;
    width: 250px;
    min-width: 250px;
    height: 54px;
    align-items: center;
    padding: 3px 32px 3px 0;
    background: transparent;
}

.ui-public-shell .ui-navbar .navbar-brand img {
    width: 205px !important;
    height: 50px !important;
    object-fit: contain !important;
}

.ui-public-shell .ui-navbar .navbar-toggle-content {
    margin-right: 20px !important;
    margin-left: 28px !important;
}

.ui-public-shell .ui-navbar .navbar-nav {
    gap: 10px;
}

.ui-public-shell .ui-navbar .nav-link,
.ui-public-shell .ui-navbar .xs-categories-toggle {
    min-height: 40px;
    padding: 8px 13px !important;
    font-size: 14px;
}

.ui-public-shell .ui-navbar .xs-categories-toggle {
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ui-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ui-public-shell .ui-navbar .xs-categories-toggle::after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 2px 0 0 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.ui-public-shell .ui-nav-actions,
.ui-panel-shell .ui-nav-actions {
    flex: 0 0 auto;
    gap: 8px;
    height: 100%;
}

.ui-public-shell .ui-nav-search,
.ui-panel-shell .ui-nav-search {
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    overflow: visible;
    border-left: 1px solid var(--ui-border);
    transition: width var(--ui-transition), border-color var(--ui-transition);
}

.ui-public-shell .ui-nav-search:focus-within,
.ui-public-shell .ui-nav-search:hover,
.ui-panel-shell .ui-nav-search:focus-within,
.ui-panel-shell .ui-nav-search:hover {
    width: 220px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
}

.ui-public-shell .ui-nav-search .form-control,
.ui-panel-shell .ui-nav-search .form-control {
    position: absolute;
    z-index: 4;
    top: 1px;
    right: 43px;
    width: 0;
    min-height: 42px;
    padding: 9px 0;
    border: 0 !important;
    border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm) !important;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--ui-shadow-sm);
    transition: width var(--ui-transition), padding var(--ui-transition), opacity var(--ui-transition);
}

.ui-public-shell .ui-nav-search:focus-within .form-control,
.ui-public-shell .ui-nav-search:hover .form-control,
.ui-panel-shell .ui-nav-search:focus-within .form-control,
.ui-panel-shell .ui-nav-search:hover .form-control {
    width: 176px;
    padding: 9px 12px;
    opacity: 1;
    pointer-events: auto;
}

.ui-public-shell .ui-nav-search .search-icon,
.ui-panel-shell .ui-nav-search .search-icon {
    position: relative;
    z-index: 5;
    margin-left: auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    color: var(--ui-ink);
    background: #fff;
}

.ui-public-shell .ui-nav-icon,
.ui-panel-shell .ui-nav-icon {
    width: 44px;
    height: 44px;
    justify-content: center;
    border-left: 1px solid var(--ui-border);
}

.ui-public-shell .ui-nav-icon .btn-transparent,
.ui-panel-shell .ui-nav-icon .btn-transparent {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ui-public-shell .ui-nav-icon svg,
.ui-panel-shell .ui-nav-icon svg {
    color: var(--ui-ink);
    stroke: currentColor;
}

.ui-public-shell .ui-login-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 12px;
    white-space: nowrap;
    font-weight: 600;
}

.ui-public-shell .ui-user-menu .navbar-user,
.ui-panel-shell .ui-user-menu .navbar-user {
    min-height: 44px;
    padding: 4px 8px;
    border-radius: var(--ui-radius-sm);
}

.ui-public-shell .ui-user-menu .navbar-user img,
.ui-panel-shell .ui-user-menu .navbar-user img {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.ui-public-shell .ui-navbar .nav-start-a-live-btn {
    min-height: 44px;
    margin-left: 2px;
    padding: 9px 20px;
    font-size: 13px !important;
}

.ui-public-shell .ui-banner-grid {
    margin-top: 58px;
    margin-bottom: 50px;
}

.ui-public-shell .ui-banner-grid .ui-banner-item {
    display: flex;
}

.ui-public-shell .ui-banner-grid a {
    align-self: stretch;
}

.ui-public-shell .ui-hero.slider-container {
    height: auto !important;
    min-height: 620px;
    padding: 0 !important;
    border-top: 1px solid #eef3f7;
    border-bottom: 1px solid #eef3f7;
    background-color: #f7fafc;
}

.ui-public-shell .ui-hero.slider-container::before {
    background: linear-gradient(90deg, rgba(247, 250, 252, .99) 0%, rgba(247, 250, 252, .98) 42%, rgba(247, 250, 252, .72) 59%, rgba(247, 250, 252, .05) 100%);
}

.ui-public-shell .ui-hero.slider-container::after {
    top: -135px;
    left: 50.5%;
    width: 126px;
    height: 760px;
    border-radius: 42px;
    background: linear-gradient(180deg, #11a7b5, #078a9d);
    opacity: .92;
    transform: rotate(24deg);
}

.ui-public-shell .ui-hero.slider-container .mask {
    display: block;
    background: linear-gradient(90deg, rgba(247, 250, 252, .2), rgba(247, 250, 252, 0));
}

.ui-public-shell .ui-hero .slider-content {
    min-height: 620px;
    padding-top: 54px;
    padding-bottom: 54px;
}

.ui-public-shell .ui-hero .slider-content h1 {
    max-width: 660px;
    font-size: clamp(36px, 3.45vw, 52px);
    font-weight: 700;
    line-height: 1.06;
}

.ui-public-shell .ui-hero .slide-hint {
    max-width: 640px;
    margin-top: 20px !important;
    font-size: 17px;
    line-height: 1.55;
}

.ui-public-shell .ui-hero .slider-search {
    max-width: 610px;
    min-height: 58px;
    padding: 7px 7px 7px 18px !important;
    border-radius: 10px !important;
}

.ui-public-shell .ui-hero .slider-search .btn {
    min-width: 112px;
    min-height: 42px;
}

.ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child {
    display: flex;
    min-height: 380px;
    align-items: center;
    justify-content: center;
}

.ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child img,
.ui-public-shell .ui-hero.slider-hero-section2 lottie-player {
    width: 100%;
    height: 380px;
    max-height: 380px;
    object-fit: contain;
}

.ui-public-shell .stats-container {
    margin-top: 18px;
}

.ui-public-shell .stats-container .stats-item {
    min-height: 90px;
    grid-template-areas:
        "icon number"
        "icon label"
        "icon description";
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 13px;
    padding: 13px 18px !important;
}

.ui-public-shell .stats-container .stat-icon-box {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 10px;
}

.ui-public-shell .stats-container .stat-icon-box img {
    width: 27px;
    height: 27px;
}

.ui-public-shell .stats-container .stat-number {
    font-size: 21px;
}

.ui-public-shell .stats-container .stat-title {
    margin-top: 3px;
    color: var(--ui-text);
    font-size: 12px;
}

.ui-public-shell .stats-container .stat-desc {
    display: block;
    grid-area: description;
    margin: 2px 0 0 !important;
    color: var(--ui-muted);
    font-size: 9px;
    line-height: 1.2;
}

.ui-public-shell .home-sections,
.ui-public-shell .ui-section {
    margin-top: 48px;
}

.ui-public-shell .ui-section-heading {
    min-height: 48px;
    gap: 20px;
}

.ui-public-shell .section-title {
    padding-left: 20px;
    font-size: clamp(27px, 2.65vw, 38px);
    line-height: 1.12;
}

.ui-public-shell .section-title::before {
    width: 6px;
}

.ui-public-shell .section-hint {
    margin-top: 7px;
    padding-left: 20px;
    font-size: 14px;
}

.ui-public-shell .home-sections .btn-border-white {
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    color: var(--ui-green-700);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.ui-public-shell .ui-compact-grid > .row {
    margin-right: -6px;
    margin-left: -6px;
    row-gap: 12px;
}

.ui-public-shell .ui-compact-grid .ui-grid-item {
    padding-right: 6px;
    padding-left: 6px;
}

.ui-public-shell .ui-compact-grid .swiper-slide {
    padding-top: 0 !important;
}

.ui-public-shell .ui-category-card {
    position: relative;
    min-height: 70px !important;
    overflow: visible;
}

.ui-public-shell .ui-category-card::after {
    position: absolute;
    top: 50%;
    right: 17px;
    content: "→";
    color: var(--ui-green-600);
    font-size: 24px;
    line-height: 1;
    transform: translateY(-50%);
}

.ui-public-shell .ui-category-card figure {
    min-height: 70px;
    padding: 8px 52px 8px 10px;
}

.ui-public-shell .ui-category-card .image-box {
    width: 48px;
    min-width: 48px;
    height: 48px !important;
    padding: 7px;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #e2f8f5, #d9f2fb);
}

.ui-public-shell .ui-category-card .image-box img {
    object-fit: contain;
}

.ui-public-shell .ui-category-card .webinar-card-body {
    padding: 0 10px !important;
}

.ui-public-shell .ui-category-card .webinar-title {
    margin: 0 !important;
    color: var(--ui-ink) !important;
    font-size: 15px !important;
}

.ui-public-shell .ui-category-card .webinar-card-body > span {
    margin-top: 2px !important;
    color: var(--ui-muted);
    font-size: 12px !important;
}

.ui-public-shell .ui-course-grid .swiper-wrapper {
    align-items: stretch;
}

.ui-public-shell .ui-course-grid .swiper-slide {
    height: auto;
}

.ui-public-shell .ui-course-card {
    height: 100%;
    min-height: 410px;
}

.ui-public-shell .ui-course-card > figure {
    display: flex;
    height: 100%;
    flex-direction: column;
    margin: 0;
}

.ui-public-shell .ui-course-card .ui-course-media {
    height: 170px !important;
    min-height: 170px;
}

.ui-public-shell .ui-course-card .ui-course-media > a:not(.webinar-notify),
.ui-public-shell .ui-course-card .ui-course-media > a:not(.webinar-notify) img {
    display: block;
    width: 100%;
    height: 100%;
}

.ui-public-shell .ui-course-card .webinar-notify {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(11, 145, 162, 0.18);
    border-radius: 10px;
    color: var(--ui-teal-700);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ui-shadow-sm);
    transform: none;
}

.ui-public-shell .ui-course-card .webinar-notify svg {
    width: 17px;
    height: 17px;
}

.ui-public-shell .ui-course-card .ui-course-content {
    display: flex;
    min-height: 238px;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px !important;
}

.ui-public-shell .ui-course-card .ui-course-instructor {
    min-height: 28px;
}

.ui-public-shell .ui-course-card .ui-course-instructor .avatar {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

.ui-public-shell .ui-course-card .ui-course-instructor .user-name {
    color: var(--ui-text);
    font-size: 11px !important;
}

.ui-public-shell .ui-course-card .ui-course-title {
    margin-top: 10px !important;
    color: var(--ui-ink) !important;
    font-size: 16px !important;
    line-height: 1.22;
}

.ui-public-shell .ui-course-card .ui-course-category {
    margin-top: 8px !important;
    color: var(--ui-muted);
    font-size: 11px !important;
}

.ui-public-shell .ui-course-card .ui-course-rating {
    min-height: 20px;
    margin-top: 6px;
}

.ui-public-shell .ui-course-card .ui-course-rating .stars-card svg {
    width: 14px;
    height: 14px;
}

.ui-public-shell .ui-course-card .ui-course-meta {
    margin-top: 8px !important;
    padding-top: 9px;
    border-top: 1px solid var(--ui-border);
}

.ui-public-shell .ui-course-card .ui-course-meta svg {
    width: 15px;
    height: 15px;
}

.ui-public-shell .ui-course-card .ui-course-meta span {
    font-size: 10px !important;
}

.ui-public-shell .ui-course-card .ui-course-actions {
    margin-top: auto;
    margin-right: -5px;
    margin-left: -5px;
    padding-top: 10px;
    order: 7;
}

.ui-public-shell .ui-course-card .ui-course-actions > div {
    padding-right: 5px;
    padding-left: 5px;
}

.ui-public-shell .ui-course-card .ui-course-actions:has(> .col-lg-6:not(:has(a, button))) > .col-lg-6:has(a, button) {
    flex: 0 0 100%;
    max-width: 100%;
}

.ui-public-shell .ui-course-card .ui-course-actions:has(> .col-lg-6:not(:has(a, button))) > .col-lg-6:not(:has(a, button)) {
    flex: 0 0 0;
    max-width: 0;
    padding: 0;
}

.ui-public-shell .ui-course-card .ui-course-actions .btn {
    min-height: 36px;
    margin-top: 0 !important;
    padding: 7px 8px;
    font-size: 11px;
}

.ui-public-shell .ui-course-card .ui-course-actions .btn-dark {
    border: 1px solid var(--ui-teal-600);
    color: var(--ui-teal-700);
    background: #fff;
}

.ui-public-shell .ui-course-card .ui-course-price {
    margin-top: 8px !important;
    color: var(--ui-green-700);
    font-size: 14px;
    font-weight: 700;
    order: 6;
}

.ui-public-shell .ui-logo-grid .row,
.ui-public-shell .ui-profile-grid .row {
    margin-right: -6px;
    margin-left: -6px;
}

.ui-public-shell .ui-logo-grid .ui-grid-item,
.ui-public-shell .ui-profile-grid .ui-grid-item {
    padding-right: 6px;
    padding-left: 6px;
}

.ui-public-shell .ui-recognition-card {
    min-height: 190px;
}

.ui-public-shell .ui-recognition-card figure {
    display: flex;
    height: 100%;
    flex-direction: column;
    margin: 0;
}

.ui-public-shell .ui-recognition-card .image-box {
    height: 105px !important;
    padding: 10px 16px;
}

.ui-public-shell .ui-recognition-card .bottom-gradient {
    background: transparent !important;
    opacity: 0;
    pointer-events: none;
}

.ui-public-shell .ui-recognition-card .webinar-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 12px 12px !important;
    border-top: 1px solid var(--ui-border);
}

.ui-public-shell .ui-recognition-card h4 {
    margin-top: 0 !important;
    font-size: 13px !important;
}

.ui-public-shell .ui-recognition-card span {
    font-size: 10px !important;
}

.ui-public-shell .ui-recognition-card .btn {
    min-height: 30px;
    margin: auto 0 0 !important;
    padding: 5px 6px;
    border: 0;
    color: var(--ui-green-700);
    background: transparent;
    font-size: 10px;
}

.ui-public-shell .ui-profile-card {
    min-height: 145px;
}

.ui-public-shell .ui-profile-card figure {
    display: grid;
    min-height: 145px;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    margin: 0;
    padding: 14px;
}

.ui-public-shell .ui-profile-card .image-box {
    width: 96px;
    height: 96px !important;
    border-radius: 50%;
}

.ui-public-shell .ui-profile-card .webinar-card-body {
    padding: 0 !important;
}

.ui-public-shell .ui-profile-card .webinar-title {
    margin-top: 0 !important;
    font-size: 16px !important;
}

.ui-public-shell .ui-profile-card h5 {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
}

.ui-public-shell .ui-profile-card small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ui-text) !important;
    font-size: 10px;
    text-overflow: ellipsis;
}

.ui-public-shell .ui-profile-card .btn {
    min-height: 32px;
    margin-top: 10px !important;
    padding: 6px 8px;
    font-size: 11px;
}

.ui-public-shell .ui-media-card {
    padding: 42px 0;
    background: linear-gradient(180deg, #f7fafc, #f2f7fa);
}

.ui-public-shell .ui-media-card .home-video-mask {
    background: transparent;
}

.ui-public-shell .ui-media-card .home-video-container {
    min-height: 430px;
    padding: 24px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm);
}

.ui-public-shell .ui-media-card video {
    width: min(100%, 1040px);
    max-height: 530px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-navy-950);
}

.ui-public-shell .ui-article-card {
    min-height: 370px;
}

.ui-public-shell .ui-article-card .ui-article-media {
    height: 160px;
}

.ui-public-shell .ui-article-card .created-at {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
    border-radius: 6px;
    color: var(--ui-ink);
    background: rgba(255, 255, 255, .92);
}

.ui-public-shell .ui-article-card .ui-article-content {
    padding: 13px 16px 15px !important;
}

.ui-public-shell .ui-article-card .blog-grid-title {
    margin-top: 0 !important;
    font-size: 16px !important;
    line-height: 1.25;
}

.ui-public-shell .ui-article-card .blog-grid-desc {
    margin-top: 9px !important;
    color: var(--ui-text);
    font-size: 12px;
    line-height: 1.45;
}

.ui-public-shell .ui-article-card .blog-grid-footer {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: 11px;
}

/* Public catalog and editorial pages */
.ui-public-shell .site-top-banner.ui-page-intro {
    position: relative;
    height: 220px !important;
    min-height: 220px;
    max-height: 220px;
    isolation: isolate;
    overflow: hidden;
    border-top: 1px solid #eef3f7;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(135deg, #f8fbfd, #eef6f9);
}

.ui-public-shell .site-top-banner.ui-page-intro::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(248, 251, 253, .99) 0%, rgba(248, 251, 253, .96) 48%, rgba(248, 251, 253, .62) 72%, rgba(248, 251, 253, .18) 100%);
}

.ui-public-shell .site-top-banner.ui-page-intro::after {
    position: absolute;
    z-index: -1;
    top: -96px;
    right: 58px;
    left: auto;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(11, 145, 162, .18);
    border-radius: 50%;
    content: "";
    background-color: transparent;
    background-image:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 20px, rgba(11, 145, 162, .08) 21px 22px),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(11, 145, 162, .08) 35px 36px);
    opacity: .75;
    transform: rotate(-14deg);
}

.ui-public-shell .site-top-banner.ui-page-intro > img {
    position: absolute;
    z-index: -2;
    inset: 0 0 0 auto;
    width: 54%;
    height: 100%;
    opacity: .14;
    object-position: center;
    filter: saturate(.82) contrast(.92);
}

.ui-public-shell .site-top-banner.ui-page-intro .container,
.ui-public-shell .site-top-banner.ui-page-intro .container > .row {
    min-height: 220px;
}

.ui-public-shell .ui-page-intro-content {
    display: grid;
    max-width: 760px;
    grid-template-columns: max-content minmax(340px, 1fr);
    align-items: center;
    gap: 10px 16px;
    text-align: left;
}

.ui-public-shell .site-top-banner.ui-page-intro .ui-page-intro-content h1 {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding-left: 18px;
    color: var(--ui-ink) !important;
    font-size: clamp(30px, 3.2vw, 44px) !important;
    font-weight: 700;
    line-height: 1.08;
    text-shadow: none !important;
}

.ui-public-shell .ui-page-intro-content h1::before {
    display: inline-block;
    width: 6px;
    height: .78em;
    margin-right: 13px;
    border-radius: 3px;
    content: "";
    background: linear-gradient(180deg, var(--ui-green-500), var(--ui-green-700));
    vertical-align: -.02em;
}

.ui-public-shell .ui-page-intro-content .course-count-badge {
    justify-self: start;
    margin-left: 18px;
    color: var(--ui-teal-700) !important;
    background: var(--ui-cyan-100);
    font-size: 12px;
    font-weight: 700;
}

.ui-public-shell .ui-page-intro-content .search-input {
    width: 100%;
    max-width: 540px;
    margin: 0;
    padding: 6px !important;
    border: 1px solid var(--ui-border-strong);
    border-radius: 10px;
    box-shadow: var(--ui-shadow-sm);
}

.ui-public-shell .ui-page-intro-content .search-input .form-control {
    min-height: 42px;
    padding: 7px 13px;
}

.ui-public-shell .ui-page-intro-content .search-input .btn {
    min-width: 100px;
    min-height: 42px;
    border-radius: 8px !important;
}

.ui-public-shell .ui-catalog-section,
.ui-public-shell .ui-blog-section {
    margin-top: 34px !important;
    padding-top: 0 !important;
}

.ui-public-shell .ui-filter-toolbar {
    padding: 14px 18px !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.ui-public-shell .ui-filter-toolbar .checkbox-button label {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    color: var(--ui-ink);
}

.ui-public-shell .ui-filter-toolbar .checkbox-button input:checked + label {
    border-color: transparent !important;
    color: var(--ui-teal-700);
    background: var(--ui-cyan-100) !important;
}

.ui-public-shell .ui-filter-toolbar .checkbox-button input:checked + label svg {
    color: var(--ui-teal-700) !important;
    stroke: currentColor;
}

.ui-public-shell .ui-filter-toolbar label,
.ui-public-shell .ui-filter-toolbar .form-control {
    color: var(--ui-ink);
    font-size: 12px !important;
    font-weight: 600;
}

.ui-public-shell .custom-switch .custom-control-label::before,
.ui-public-shell .custom-checkbox .custom-control-label::before {
    border-color: var(--ui-border-strong);
    box-shadow: none !important;
}

.ui-public-shell .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.ui-public-shell .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--ui-green-600);
    background-color: var(--ui-green-600);
}

.ui-public-shell .ui-layout-grid {
    align-items: flex-start;
}

.ui-public-shell .ui-card-grid {
    margin-right: -7px;
    margin-left: -7px;
}

.ui-public-shell .ui-card-grid > [class*="col-"] {
    padding-right: 7px;
    padding-left: 7px;
}

.ui-public-shell .ui-catalog-section .ui-course-card {
    min-height: 382px;
}

.ui-public-shell .ui-catalog-section .ui-course-card .ui-course-media {
    height: 150px !important;
    min-height: 150px;
}

.ui-public-shell .ui-catalog-section .ui-course-card .ui-course-content {
    min-height: 230px;
    padding: 12px 13px 14px !important;
}

.ui-public-shell .ui-catalog-section .ui-course-card .ui-course-title {
    font-size: 14px !important;
}

.ui-public-shell .ui-sidebar-card {
    padding: 19px !important;
    border-radius: 12px !important;
}

.ui-public-shell .ui-catalog-section .ui-sidebar-card {
    position: sticky;
    top: 96px;
}

.ui-public-shell .ui-sidebar-card .category-filter-title {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-ink) !important;
    font-size: 16px !important;
}

.ui-public-shell .ui-sidebar-card label,
.ui-public-shell .ui-sidebar-card a {
    color: var(--ui-text) !important;
    font-size: 12px !important;
    line-height: 1.35;
}

.ui-public-shell .ui-sidebar-card a:hover {
    color: var(--ui-green-700) !important;
}

.ui-public-shell .ui-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-public-shell .ui-link-list a {
    margin: 0 !important;
    padding: 7px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface-soft);
}

.ui-public-shell .ui-blog-section .ui-article-card {
    min-height: 382px;
}

.ui-public-shell .ui-blog-section .ui-article-card .ui-article-media {
    height: 175px;
}

.ui-public-shell .ui-secondary-grid {
    align-items: stretch;
}

.ui-public-shell .ui-secondary-grid > [class*="col-"] {
    display: flex;
}

.ui-public-shell .ui-secondary-grid .ui-sidebar-card {
    width: 100%;
}

.ui-public-shell .ui-popular-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.ui-public-shell .ui-popular-grid .popular-post {
    min-width: 0;
    margin-top: 0 !important;
    padding: 9px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface-soft);
}

.ui-public-shell .ui-popular-grid .popular-post-image {
    width: 76px;
    min-width: 76px;
    height: 62px;
    overflow: hidden;
}

.ui-public-shell .ui-popular-grid .popular-post-content {
    min-width: 0;
}

.ui-public-shell .ui-popular-grid .popular-post-content h3 {
    margin: 0;
    font-size: 11px !important;
    line-height: 1.35;
}

.ui-public-shell .ui-popular-grid > .btn {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
    min-width: 190px;
    margin-top: 4px !important;
}

.ui-public-shell .ui-footer {
    margin-top: 78px;
    padding-bottom: 8px;
}

.ui-public-shell .ui-newsletter {
    top: -42px;
    min-height: 126px;
    margin-bottom: -6px;
    padding: 24px 38px;
    background: linear-gradient(110deg, #087f91, #0fa3ad);
}

.ui-public-shell .ui-newsletter strong {
    font-size: 22px;
}

.ui-public-shell .ui-newsletter .subscribe-input {
    max-width: 500px;
    padding: 6px !important;
}

.ui-public-shell .ui-newsletter .form-control {
    min-height: 40px;
}

.ui-public-shell .ui-newsletter .btn {
    min-height: 40px;
    padding-right: 18px;
    padding-left: 18px;
}

.ui-public-shell .ui-footer .header {
    font-size: 16px;
}

.ui-public-shell .ui-footer .footer-logo img {
    width: 150px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Student campus */
.ui-panel-shell .panel-sidebar::before {
    content: none;
}

.ui-panel-shell .panel-sidebar {
    width: 240px;
    padding: 16px 14px !important;
}

.ui-panel-shell .panel-sidebar .ui-brand {
    width: 190px;
    height: 58px;
    margin: 0 auto 13px;
}

.ui-panel-shell .panel-sidebar .ui-brand-logo {
    width: 100%;
    height: 52px;
    object-fit: contain;
}

.ui-panel-shell #navbar {
    left: 240px;
    height: 62px;
}

.ui-panel-shell #navbar .container-fluid {
    padding-right: 24px;
    padding-left: 24px;
}

.ui-panel-shell #navbar .navbar-toggle-content {
    margin-left: 12px !important;
}

.ui-panel-shell #navbar .navbar-brand {
    width: 0;
    min-width: 0;
    padding: 0;
}

.ui-panel-shell #navbar .nav-start-a-live-btn {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--ui-teal-600) !important;
    color: var(--ui-teal-700) !important;
    background: #fff !important;
    box-shadow: none;
}

.ui-panel-shell .panel-sidebar .user-info {
    min-height: 70px;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 10px 8px;
    background: transparent;
}

.ui-panel-shell .panel-sidebar .user-avatar {
    width: 50px;
    min-width: 50px;
    height: 50px;
}

.ui-panel-shell .panel-sidebar .user-info > div:last-child {
    align-items: flex-start !important;
    justify-content: center !important;
}

.ui-panel-shell .sidebar-user-stats {
    display: flex !important;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin: 2px 8px 9px !important;
    padding: 7px 0 !important;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.ui-panel-shell .sidebar-user-stats .border-left {
    height: 30px;
    margin-right: 18px !important;
    margin-left: 18px !important;
}

.ui-panel-shell .sidebar-user-stat-item strong {
    color: var(--ui-ink);
    font-size: 14px;
}

.ui-panel-shell .sidebar-user-stat-item span {
    color: var(--ui-muted);
    font-size: 9px !important;
}

.ui-panel-shell .sidebar-menu {
    height: calc(100vh - 215px) !important;
    padding-top: 2px !important;
}

.ui-panel-shell .sidebar-menu .sidenav-item > a {
    min-height: 40px;
    padding: 8px 10px;
}

.ui-panel-shell .sidebar-menu .sidenav-item > a span {
    font-size: 12px !important;
}

.ui-panel-shell .sidebar-menu .sidenav-item-icon svg,
.ui-panel-shell .sidebar-menu .sidenav-item-icon img {
    width: 20px;
    height: 20px;
}

.ui-panel-shell .panel-content {
    width: calc(100% - 240px);
    margin-top: 62px;
    padding: 26px 28px 46px;
}

.ui-panel-shell .panel-content .section-title {
    color: var(--ui-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.ui-panel-shell .ui-page-header {
    margin-bottom: 18px;
}

.ui-panel-shell .dashboard-banner-container {
    min-height: 210px;
    overflow: hidden;
    padding: 28px !important;
}

.ui-panel-shell .dashboard-banner-container .dashboard-banner {
    right: 18px;
    width: 42%;
    height: 100%;
}

.ui-panel-shell .dashboard .row {
    margin-right: -8px;
    margin-left: -8px;
}

.ui-panel-shell .dashboard .row > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.ui-panel-shell .dashboard .ui-stat-card {
    min-height: 105px;
}

.ui-panel-shell .activities-container {
    padding: 18px !important;
}

.ui-panel-shell .activities-container .row > div {
    min-height: 94px;
    border-right: 1px solid var(--ui-border);
}

.ui-panel-shell .activities-container .row > div:last-child {
    border-right: 0;
}

.ui-panel-shell .activities-container img {
    width: 48px;
    height: 48px;
    padding: 9px;
    border-radius: 10px;
    background: var(--ui-cyan-100);
}

.ui-panel-shell .activities-container strong {
    margin-top: 4px !important;
    color: var(--ui-ink) !important;
    font-size: 23px !important;
}

.ui-panel-shell .activities-container span {
    font-size: 12px !important;
}

.ui-panel-shell .webinar-list {
    min-height: 178px;
    overflow: hidden;
}

.ui-panel-shell .webinar-list .image-box {
    width: 260px;
    min-width: 260px;
    height: auto;
    min-height: 178px;
}

.ui-panel-shell .webinar-list .webinar-card-body {
    padding: 18px 22px !important;
}

.ui-panel-shell .ui-empty-state {
    min-height: 360px;
    margin-top: 20px !important;
    padding: 42px 24px;
}

.ui-panel-shell .ui-empty-state .no-result-logo {
    width: 130px;
    height: 130px;
    padding: 22px;
    border-radius: 50%;
    background: var(--ui-cyan-100);
}

.ui-panel-shell .ui-empty-state .no-result-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ui-panel-shell .ui-empty-state h2 {
    font-size: 25px;
}

.ui-panel-shell .webinar-progress {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.ui-panel-shell .ui-form-layout {
    margin-top: 18px !important;
}

.ui-panel-shell .ui-form-grid > .row > [class*="col-"] {
    display: grid;
    max-width: 100%;
    flex: 0 0 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
}

.ui-panel-shell .ui-form-grid .form-group {
    margin-bottom: 16px;
}

.ui-panel-shell .ui-form-grid .form-group:nth-last-child(-n+2) {
    grid-column: auto;
}

/* Administration */
.ui-admin-shell .navbar-bg,
.ui-admin-shell .main-navbar {
    left: 224px;
    height: 58px;
}

.ui-admin-shell .main-navbar {
    padding: 0 24px;
}

.ui-admin-shell .main-sidebar {
    width: 224px;
}

.ui-admin-shell .main-sidebar .sidebar-brand {
    height: 78px;
    padding: 8px 14px;
}

.ui-admin-shell .main-sidebar .sidebar-brand .ui-brand {
    width: 190px;
    height: 60px;
}

.ui-admin-shell .main-sidebar .sidebar-brand .ui-brand-logo {
    width: 100%;
    height: 56px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.ui-admin-shell .main-sidebar .sidebar-brand-sm .ui-brand {
    width: auto;
}

.ui-admin-shell .main-sidebar .sidebar-menu {
    padding: 10px 8px 26px;
}

.ui-admin-shell .main-sidebar .sidebar-menu .menu-header {
    margin: 17px 12px 6px;
    color: rgba(255, 255, 255, .64);
}

.ui-admin-shell .main-sidebar .sidebar-menu > li > a {
    min-height: 39px;
    padding: 8px 11px;
    font-size: 12px;
}

.ui-admin-shell .main-sidebar .sidebar-menu > li > a i {
    width: 20px;
    margin-right: 7px;
    font-size: 15px;
}

.ui-admin-shell .main-sidebar .dropdown-menu li a {
    min-height: 30px;
    padding: 6px 8px !important;
    font-size: 11px;
}

.ui-admin-shell .main-content {
    margin-left: 224px;
    padding: 82px 24px 44px;
}

.ui-admin-shell .section-header {
    margin-bottom: 18px;
}

.ui-admin-shell .section-header h1 {
    font-size: 31px;
}

.ui-admin-shell .section-header-breadcrumb {
    color: var(--ui-muted);
    font-size: 11px;
}

.ui-admin-shell .ui-banner {
    min-height: 170px;
    overflow: hidden;
    border: 0 !important;
    background-color: var(--ui-navy-900);
    background-image: linear-gradient(110deg, rgba(6, 44, 67, .98), rgba(11, 145, 162, .86)) !important;
}

.ui-admin-shell .ui-banner .hero-inner {
    padding: 24px 28px;
}

.ui-admin-shell .ui-banner h2 {
    color: #fff;
    font-size: 27px;
}

.ui-admin-shell .ui-banner .lead {
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
}

.ui-admin-shell .card {
    margin-bottom: 18px;
}

.ui-admin-shell .card .card-header {
    min-height: 50px;
    padding: 13px 17px;
}

.ui-admin-shell .card .card-body {
    padding: 17px;
}

.ui-admin-shell .ui-stat-card,
.ui-admin-shell .card-statistic-1 {
    min-height: 96px;
}

.ui-admin-shell .card-statistic-1 .card-icon,
.ui-admin-shell .ui-stat-card .card-icon {
    width: 52px;
    height: 52px;
    margin: 16px;
    border-radius: 11px;
}

.ui-admin-shell .card-statistic-1 .card-wrap,
.ui-admin-shell .ui-stat-card .card-wrap {
    padding-top: 13px;
}

.ui-admin-shell .card-statistic-1 .card-header h4,
.ui-admin-shell .ui-stat-card .card-header h4 {
    font-size: 11px;
}

.ui-admin-shell .card-statistic-1 .card-body,
.ui-admin-shell .ui-stat-card .card-body {
    font-size: 25px;
}

.ui-admin-shell .ui-filter-card {
    padding: 0 !important;
}

.ui-admin-shell .ui-filter-card .card-body {
    padding: 16px !important;
}

.ui-admin-shell .ui-filter-card .form-group {
    margin-bottom: 12px;
}

.ui-admin-shell .input-label {
    margin-bottom: 5px;
    color: var(--ui-ink);
    font-size: 11px;
    font-weight: 600;
}

.ui-admin-shell .form-control,
.ui-admin-shell .custom-select,
.ui-admin-shell .select2-selection {
    min-height: 38px;
    font-size: 12px;
}

.ui-admin-shell .btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12px;
}

.ui-admin-shell table thead th {
    padding: 10px 9px !important;
    font-size: 10px;
}

.ui-admin-shell table tbody td {
    padding: 9px !important;
    font-size: 11px;
}

.ui-admin-shell .ui-form-shell {
    padding: 0;
}

.ui-admin-shell .ui-form-shell > .card-body {
    padding: 22px;
}

@media (max-width: 1199.98px) {
    .ui-public-shell .ui-navbar .navbar-brand {
        width: 190px;
        min-width: 190px;
        padding-right: 20px;
    }

    .ui-public-shell .ui-navbar .navbar-brand img {
        width: 165px !important;
    }

    .ui-public-shell .ui-navbar .navbar-toggle-content {
        margin-right: 6px !important;
        margin-left: 12px !important;
    }

    .ui-public-shell .ui-navbar .nav-link,
    .ui-public-shell .ui-navbar .xs-categories-toggle {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 12px;
    }

    .ui-public-shell .ui-nav-actions {
        gap: 4px;
    }

    .ui-public-shell .ui-nav-icon,
    .ui-public-shell .ui-nav-icon .btn-transparent {
        width: 40px;
    }

    .ui-public-shell .ui-login-link {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 12px !important;
    }

    .ui-public-shell .ui-navbar .nav-start-a-live-btn {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ui-panel-shell .panel-sidebar {
        width: 225px;
    }

    .ui-panel-shell #navbar {
        left: 225px;
    }

    .ui-panel-shell .panel-content {
        width: calc(100% - 225px);
    }
}

@media (max-width: 991.98px) {
    .ui-public-shell .ui-topbar {
        display: flex !important;
        height: auto;
        min-height: 40px;
    }

    .ui-public-shell .ui-topbar > .container {
        min-height: 40px;
    }

    .ui-public-shell .ui-topbar .top-contact-box span {
        font-size: 11px !important;
    }

    .ui-public-shell .ui-navbar .navbar-brand {
        width: 150px;
        min-width: 150px;
    }

    .ui-public-shell .ui-navbar .navbar-brand img {
        width: 138px !important;
    }

    .ui-public-shell .ui-nav-search {
        display: flex !important;
    }

    .ui-public-shell .ui-user-menu .user-name {
        display: none;
    }

    .ui-public-shell .ui-page-intro-content {
        max-width: 690px;
        grid-template-columns: max-content minmax(280px, 1fr);
    }

    .ui-public-shell .ui-catalog-section .ui-sidebar-card {
        position: static;
    }

    .ui-public-shell .ui-hero.slider-container::after {
        display: block;
        left: 57%;
        width: 90px;
    }

    .ui-public-shell .ui-hero .slider-content h1 {
        font-size: 38px;
    }

    .ui-panel-shell #navbar {
        left: 0;
    }

    .ui-panel-shell .panel-content {
        width: 100%;
    }

    .ui-admin-shell .navbar-bg,
    .ui-admin-shell .main-navbar {
        left: 0;
    }

    .ui-admin-shell .main-content {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .ui-public-shell .ui-topbar > .container {
        width: calc(100% - 20px);
    }

    .ui-public-shell .ui-topbar .top-contact-box span:last-child,
    .ui-public-shell .ui-topbar .top-contact-box .border-left {
        display: inline-flex;
    }

    .ui-public-shell .ui-nav-icon {
        display: flex !important;
    }

    .ui-public-shell .ui-login-link {
        padding: 0 5px;
        font-size: 11px !important;
    }

    .ui-public-shell .ui-navbar .nav-start-a-live-btn {
        max-width: 118px;
        padding: 5px 7px;
    }

    .ui-public-shell .ui-banner-grid {
        margin-top: 26px;
        margin-bottom: 30px;
    }

    .ui-public-shell .ui-banner-grid .ui-banner-item {
        margin-bottom: 14px;
    }

    .ui-public-shell .site-top-banner.ui-page-intro,
    .ui-public-shell .site-top-banner.ui-page-intro .container,
    .ui-public-shell .site-top-banner.ui-page-intro .container > .row {
        height: 245px !important;
        min-height: 245px;
        max-height: 245px;
    }

    .ui-public-shell .site-top-banner.ui-page-intro::after {
        right: -80px;
    }

    .ui-public-shell .site-top-banner.ui-page-intro > img {
        width: 78%;
        opacity: .1;
    }

    .ui-public-shell .ui-page-intro-content {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 26px 0;
    }

    .ui-public-shell .ui-page-intro-content h1 {
        padding-left: 0;
        font-size: 31px !important;
    }

    .ui-public-shell .ui-page-intro-content .course-count-badge {
        margin-left: 0;
    }

    .ui-public-shell .ui-page-intro-content .search-input {
        max-width: none;
    }

    .ui-public-shell .ui-filter-toolbar > .row > [class*="col-"] {
        justify-content: flex-start !important;
    }

    .ui-public-shell .ui-popular-grid {
        grid-template-columns: 1fr;
    }

    .ui-public-shell .ui-popular-grid > .btn {
        grid-column: auto;
        width: 100%;
    }

    .ui-public-shell .ui-hero.slider-container,
    .ui-public-shell .ui-hero .slider-content {
        min-height: 510px;
    }

    .ui-public-shell .ui-hero .hero-section2 {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child {
        display: flex;
        min-height: 175px;
        order: 2;
    }

    .ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:first-child {
        order: 1;
    }

    .ui-public-shell .ui-hero.slider-hero-section2 .hero-section2 > div:last-child img,
    .ui-public-shell .ui-hero.slider-hero-section2 lottie-player {
        height: 170px;
    }

    .ui-public-shell .ui-hero.slider-container::after {
        top: 280px;
        left: 44%;
        width: 70px;
        height: 300px;
    }

    .ui-public-shell .stats-container .stats-item {
        min-height: 102px;
    }

    .ui-public-shell .ui-profile-card figure {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .ui-public-shell .ui-profile-card .image-box {
        width: 82px;
        height: 82px !important;
    }

    .ui-panel-shell .activities-container .row > div {
        border-right: 0;
    }

    .ui-panel-shell .webinar-list {
        flex-direction: column;
    }

    .ui-panel-shell .webinar-list .image-box {
        width: 100%;
        height: 190px;
        min-height: 190px;
    }

    .ui-panel-shell .ui-form-grid > .row > [class*="col-"] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .ui-public-shell .ui-navbar .navbar-brand {
        width: 112px;
        min-width: 112px;
        padding-right: 4px;
    }

    .ui-public-shell .ui-navbar .navbar-brand img {
        width: 106px !important;
    }

    .ui-public-shell .ui-navbar .nav-start-a-live-btn {
        max-width: 100px;
        font-size: 10px !important;
    }

    .ui-public-shell .ui-hero .slider-content h1 {
        font-size: 32px;
    }

    .ui-public-shell .ui-hero .slider-search input {
        font-size: 12px;
    }

    .ui-public-shell .ui-hero .slider-search .btn {
        min-width: 76px;
        font-size: 11px;
    }

    .ui-public-shell .ui-newsletter {
        padding: 20px;
    }

    .ui-public-shell .ui-newsletter strong {
        font-size: 18px;
    }
}


/* ==========================================================================
   Reference alignment: implementation pass (refs 01-13)
   Presentation only. New helper classes are additive; no functional selector
   (IDs, names, data-*, js-*) is restyled in a way that hides or removes it.
   ========================================================================== */

/* Accessibility baseline */
.ui-public-shell a:focus-visible,
.ui-public-shell button:focus-visible,
.ui-public-shell .btn:focus-visible,
.ui-panel-shell a:focus-visible,
.ui-panel-shell button:focus-visible,
.ui-panel-shell .btn:focus-visible,
.ui-admin-shell a:focus-visible,
.ui-admin-shell button:focus-visible,
.ui-admin-shell .btn:focus-visible {
    outline: 3px solid rgba(22, 141, 159, .55);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ui-public-shell *,
    .ui-panel-shell *,
    .ui-admin-shell * {
        transition: none !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .ui-card:hover,
    a.ui-stat-card:hover,
    .ui-public-shell .btn:hover,
    .ui-panel-shell .btn:hover,
    .ui-admin-shell .btn:hover {
        transform: none;
    }
}

/* Page actions (header buttons) */
.ui-page-actions {
    gap: 10px;
    margin-left: auto;
}

.ui-admin-shell .section-header.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.ui-admin-shell .section-header.ui-page-header .section-header-breadcrumb {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
}

.ui-btn-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

/* Status badges built from existing status text */
.ui-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.ui-status--success { background: #e7f7ee; color: #15803d !important; }
.ui-status--warning { background: #fff4de; color: #b45309 !important; }
.ui-status--danger  { background: #feeceb; color: #b42318 !important; }
.ui-status--muted   { background: #eef2f6; color: #475467 !important; }
.ui-status--info    { background: #e3f4f6; color: #127a89 !important; }

.ui-status-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
}

.ui-status-note--warning { color: #b45309 !important; }
.ui-status-note--info    { color: #127a89 !important; }
.ui-status-note--muted   { color: #5f6f80 !important; }

/* Table helpers */
.ui-table-media {
    gap: 12px;
    min-width: 220px;
}

.ui-table-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--ui-surface-muted);
}

.ui-table-media-body {
    min-width: 0;
}

.ui-progress {
    width: 100%;
    min-width: 84px;
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6edf2;
}

.ui-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-green-400);
}

.ui-row-actions {
    white-space: nowrap;
}

.ui-admin-shell .ui-row-actions .btn-transparent,
.ui-admin-shell .ui-row-actions > a,
.ui-admin-shell .ui-row-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 2px;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px;
    background: #fff;
    color: var(--ui-teal-700) !important;
}

.ui-admin-shell .ui-row-actions .btn-transparent:hover,
.ui-admin-shell .ui-row-actions > a:hover,
.ui-admin-shell .ui-row-actions > button:hover {
    border-color: var(--ui-teal-600) !important;
    background: var(--ui-cyan-100);
}

/* Segmented tabs (links) */
.ui-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: #fff;
}

.ui-segmented-item {
    padding: 8px 18px;
    border-radius: 7px;
    color: var(--ui-ink) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.ui-segmented-item:hover {
    background: var(--ui-surface-muted);
}

.ui-segmented-item.active {
    background: var(--ui-teal-700);
    color: #fff !important;
}

.ui-admin-shell .ui-chart-toggle {
    padding: 3px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: #fff;
}

.ui-admin-shell .ui-chart-toggle .btn {
    min-height: 32px;
    padding: 5px 16px;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--ui-ink) !important;
    box-shadow: none !important;
}

.ui-admin-shell .ui-chart-toggle .btn.btn-primary {
    background: var(--ui-teal-700) !important;
    color: #fff !important;
}

/* Admin top bar */
.ui-admin-breadcrumb {
    gap: 10px;
    margin-left: 4px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 500;
}

.ui-admin-breadcrumb-root {
    color: var(--ui-text) !important;
}

.ui-admin-breadcrumb-sep {
    font-size: 9px;
    opacity: .7;
}

.ui-admin-breadcrumb-current {
    max-width: 320px;
    overflow: hidden;
    color: var(--ui-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-admin-shell .main-navbar .ui-admin-site-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-teal-700) !important;
    font-size: 13px;
    font-weight: 700;
}

/* Admin sidebar user card */
.ui-admin-sidebar-user {
    gap: 10px;
    margin: 18px 14px 0;
    padding: 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ui-admin-sidebar-user-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .25);
}

.ui-admin-sidebar-user-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25;
}

.ui-admin-sidebar-user-name {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-admin-sidebar-user-role {
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
}

body.sidebar-mini .ui-admin-sidebar-user-info,
body.sidebar-mini .ui-admin-breadcrumb {
    display: none !important;
}

/* Admin KPI cards closer to refs 05-09 */
.ui-admin-shell .ui-stat-card .card-icon {
    background: var(--ui-cyan-100) !important;
    box-shadow: none !important;
}

.ui-admin-shell .ui-stat-card .card-icon i {
    color: var(--ui-teal-700) !important;
}

.ui-admin-shell .ui-stat-card .card-icon.bg-warning {
    background: #fff4de !important;
}

.ui-admin-shell .ui-stat-card .card-icon.bg-warning i {
    color: #b45309 !important;
}

.ui-admin-shell .ui-stat-card .card-icon.bg-danger {
    background: #feeceb !important;
}

.ui-admin-shell .ui-stat-card .card-icon.bg-danger i {
    color: #b42318 !important;
}

.ui-admin-shell .ui-stat-card .card-icon.bg-success {
    background: #e7f7ee !important;
}

.ui-admin-shell .ui-stat-card .card-icon.bg-success i {
    color: #15803d !important;
}

.ui-admin-shell .ui-stat-card .card-body {
    color: var(--ui-ink) !important;
    font-weight: 700;
}

.ui-admin-shell .ui-register-link-card #registrationLink:not(:empty) {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--ui-border-strong);
    border-radius: 8px;
    background: var(--ui-surface-soft);
    color: var(--ui-ink);
    font-size: 12px;
    word-break: break-all;
}

/* Student campus additions (refs 10-13) */
.ui-panel-shell .sidebar-menu .sidenav-item > a {
    width: 100%;
}

.ui-sidenav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ui-green-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ui-sidebar-help {
    margin: 18px 4px 6px;
    padding: 16px;
    border: 1px solid #cfe9ed;
    border-radius: var(--ui-radius-md);
    background: #eaf6f8;
    color: var(--ui-text);
}

.ui-sidebar-help-icon {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--ui-teal-700);
}

.ui-sidebar-help-title {
    display: block;
    color: var(--ui-ink);
    font-size: 15px;
}

.ui-sidebar-help-text {
    margin: 4px 0 12px;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ui-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.ui-steps-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: #fff;
    color: var(--ui-ink);
    font-weight: 700;
}

.ui-steps-number {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 8px;
    background: var(--ui-green-100);
    color: #15803d;
}

@media (max-width: 767.98px) {
    .ui-steps {
        grid-template-columns: 1fr;
    }

    .ui-page-actions {
        width: 100%;
        margin-left: 0;
    }

    .ui-page-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .ui-segmented {
        display: flex;
        width: 100%;
    }

    .ui-segmented-item {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ==========================================================================
   Reference alignment: phase 3 (deep restyle after review of /, /admin, /panel)
   ========================================================================== */

/* ---------- Landing: fixed top bars ---------- */
.ui-public-shell #navbar.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(16, 45, 67, .10);
    animation: none;
}
.ui-public-shell .top-navbar { position: relative; z-index: 1031; }

/* ---------- Landing: hero ---------- */
.ui-public-shell .ui-hero { padding-top: 56px; padding-bottom: 72px; background-color: #f5f7fa; }
.ui-public-shell .ui-hero h1 { color: var(--ui-navy-900, #102d43) !important; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -.02em; }
.ui-public-shell .ui-hero .slide-hint { color: #5f6f80 !important; font-size: 1.05rem; line-height: 1.6; max-width: 34rem; }
.ui-hero-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: 18px;
    border-radius: 999px; background: rgba(22, 141, 159, .10);
    color: #127a89; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ui-hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34c977; }
.ui-public-shell .ui-hero .slider-search {
    position: relative; gap: 10px;
    border: 1px solid #e3e9ef !important; border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(16, 45, 67, .08) !important;
    padding: 8px 8px 8px 16px !important;
}
.ui-hero-search-icon { color: #5f6f80; flex: 0 0 auto; }
.ui-public-shell .ui-hero .slider-search .form-control { height: 48px; font-size: 1rem; box-shadow: none !important; margin-right: 0 !important; }
.ui-public-shell .ui-hero .slider-search .btn {
    height: 48px; padding: 0 28px; border-radius: 10px !important;
    background: #127a89 !important; border-color: #127a89 !important; color: #fff !important; font-weight: 700;
}
.ui-public-shell .ui-hero .slider-search .btn:hover { background: #0f6672 !important; }
.ui-hero-actions { gap: 12px; margin-top: 22px; }
.ui-hero-actions .btn { height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.ui-btn-ghost {
    background: #fff !important; color: var(--ui-navy-900, #102d43) !important;
    border: 1px solid #b8c4ce !important;
}
.ui-btn-ghost:hover { border-color: #127a89 !important; color: #127a89 !important; }
.ui-btn-outline-teal {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 10px; border: 1px solid #127a89; color: #127a89 !important; background: #fff; font-weight: 600; font-size: .9rem;
}
.ui-btn-outline-teal:hover { background: rgba(18, 122, 137, .08); }

/* ---------- Landing: stats as one white bar ---------- */
.ui-public-shell .stats-container.ui-stat-list { margin-top: -44px !important; position: relative; z-index: 3; padding: 0 !important; background: transparent !important; }
.ui-public-shell .stats-container.ui-stat-list .row {
    margin: 0; background: #fff; border: 1px solid #e3e9ef; border-radius: 16px;
    box-shadow: 0 14px 36px rgba(16, 45, 67, .08); overflow: hidden;
}
.ui-public-shell .stats-container.ui-stat-list .row > [class*="col-"] { margin-top: 0 !important; padding: 0; }
.ui-public-shell .stats-container.ui-stat-list .stats-item {
    flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 14px;
    padding: 22px 24px !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; height: 100%;
}
@media (min-width: 992px) {
    .ui-public-shell .stats-container.ui-stat-list .row > [class*="col-"] + [class*="col-"] .stats-item { border-left: 1px solid #e3e9ef; }
}
@media (max-width: 991.98px) {
    .ui-public-shell .stats-container.ui-stat-list .row > [class*="col-"] .stats-item { border-bottom: 1px solid #e3e9ef; }
}
.ui-public-shell .stat-icon-box,
.ui-public-shell .stat-icon-box.teacher,
.ui-public-shell .stat-icon-box.video,
.ui-public-shell .stat-icon-box.student,
.ui-public-shell .stat-icon-box.course {
    width: 52px !important; height: 52px !important; min-width: 52px; border-radius: 14px !important;
    background: rgba(22, 141, 159, .10) !important; box-shadow: none !important; margin: 0 !important;
}
.ui-public-shell .stat-icon-box img { width: 26px; height: 26px; filter: brightness(0) saturate(100%) invert(33%) sepia(73%) saturate(560%) hue-rotate(145deg) brightness(92%); }
.ui-public-shell .stats-item .stat-number { color: var(--ui-navy-900, #102d43) !important; font-size: 1.6rem !important; margin-top: 0 !important; line-height: 1.1; }
.ui-public-shell .stats-item .stat-title { color: var(--ui-navy-900, #102d43) !important; font-size: .95rem !important; margin-top: 2px !important; }
.ui-public-shell .stats-item .stat-desc { color: #5f6f80 !important; font-size: .82rem !important; margin-top: 2px !important; }

/* ---------- Landing: sections ---------- */
.ui-public-shell .home-sections { margin-top: 64px !important; }
.ui-public-shell .section-title { color: var(--ui-navy-900, #102d43) !important; font-weight: 800; letter-spacing: -.01em; }
.ui-public-shell .section-hint { color: #5f6f80 !important; }
.ui-public-shell .home-sections .btn-border-white,
.ui-public-shell .home-sections .view-all-btn,
.ui-public-shell .home-sections a.btn-border-white { border: 1px solid #127a89 !important; color: #127a89 !important; border-radius: 10px !important; background: #fff !important; }
.ui-public-shell .webinar-card .webinar-card-body .webinar-title { color: var(--ui-navy-900, #102d43); }
.ui-public-shell .webinar-card { border: 1px solid #e3e9ef; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(16, 45, 67, .05) !important; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.ui-public-shell .webinar-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 45, 67, .10) !important; }
.ui-public-shell .trending-card, .ui-public-shell .home-categories-card, .ui-public-shell .instructor-card, .ui-public-shell .organization-card {
    border: 1px solid #e3e9ef; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(16, 45, 67, .05) !important; background: #fff;
}
.ui-public-shell .home-subscribe, .ui-public-shell .subscribes-container {
    border-radius: 20px !important; background: linear-gradient(120deg, #102d43 0%, #163a54 60%, #127a89 100%) !important; color: #fff;
}
.ui-public-shell footer { background: #0c2436 !important; }

/* ---------- Admin: layout fixes ---------- */
.ui-admin-shell .main-content { margin-left: 0 !important; padding-left: 274px !important; padding-right: 30px !important; width: 100% !important; }
.ui-admin-shell.sidebar-mini .main-content, body.sidebar-mini.ui-admin-shell .main-content { padding-left: 100px !important; }
@media (max-width: 1024px) {
    .ui-admin-shell .main-content { padding-left: 22px !important; padding-right: 22px !important; }
}
.ui-admin-shell .sidebar-brand.sidebar-brand-sm { display: none !important; }
body.sidebar-mini.ui-admin-shell .sidebar-brand.sidebar-brand-sm { display: flex !important; }
body.sidebar-mini.ui-admin-shell .sidebar-brand:not(.sidebar-brand-sm) { display: none !important; }
.ui-admin-shell .sidebar-brand:not(.sidebar-brand-sm) { flex-direction: column; align-items: flex-start !important; justify-content: center; padding: 0 24px; height: auto !important; min-height: 76px; }
.ui-admin-shell .sidebar-brand:not(.sidebar-brand-sm)::after {
    content: "Administración"; display: block; margin-top: 2px;
    color: rgba(255, 255, 255, .55); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.ui-admin-shell .main-sidebar .sidebar-menu li a { font-size: .875rem; height: 42px; margin: 2px 12px; border-radius: 10px; padding: 0 14px !important; }
.ui-admin-shell .main-sidebar .sidebar-menu li.menu-header { padding: 18px 26px 6px !important; font-size: .68rem; letter-spacing: .12em; color: rgba(255, 255, 255, .45) !important; }
.ui-admin-shell .main-sidebar .sidebar-menu li.active > a { background: rgba(31, 163, 181, .18) !important; color: #fff !important; box-shadow: inset 3px 0 0 #34c977; }

/* ---------- Admin: compact light welcome card ---------- */
.ui-admin-shell .hero.ui-banner {
    background: #fff !important; background-image: none !important; color: var(--ui-navy-900, #102d43) !important;
    border: 1px solid #e3e9ef; border-left: 4px solid #168d9f; border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(16, 45, 67, .05) !important; padding: 22px 26px !important; min-height: 0 !important;
}
.ui-admin-shell .hero.ui-banner::before, .ui-admin-shell .hero.ui-banner::after { display: none !important; }
.ui-admin-shell .hero.ui-banner h2, .ui-admin-shell .hero.ui-banner h1 { color: var(--ui-navy-900, #102d43) !important; font-size: 1.35rem !important; margin-bottom: 4px; }
.ui-admin-shell .hero.ui-banner .lead { color: #5f6f80 !important; font-size: .95rem !important; margin-bottom: 8px; }
.ui-admin-shell .hero.ui-banner .btn-outline-white {
    color: #127a89 !important; border: 1px solid #c9dfe3 !important; background: #f3fafb !important;
    font-size: .85rem !important; padding: 8px 14px !important; border-radius: 10px !important; box-shadow: none !important;
}
.ui-admin-shell .hero.ui-banner .btn-outline-white:hover { background: #127a89 !important; color: #fff !important; }
.ui-admin-shell .hero.ui-banner img { max-height: 120px; width: auto; }

/* ---------- Admin: KPI cards ---------- */
.ui-admin-shell .card.card-statistic-1, .ui-admin-shell .ui-stat-card {
    display: flex; align-items: center; border: 1px solid #e3e9ef !important; border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(16, 45, 67, .04) !important; padding: 18px 18px !important; min-height: 104px;
}
.ui-admin-shell .card.card-statistic-1 .card-icon, .ui-admin-shell .ui-stat-card .card-icon {
    width: 52px !important; height: 52px !important; line-height: 52px !important; margin: 0 14px 0 0 !important; border-radius: 14px !important; float: none !important; flex: 0 0 52px;
}
.ui-admin-shell .card.card-statistic-1 .card-icon i { font-size: 22px !important; line-height: 52px !important; }
.ui-admin-shell .card.card-statistic-1 .card-wrap { flex: 1 1 auto; min-width: 0; }
.ui-admin-shell .card.card-statistic-1 .card-header { padding: 0 !important; min-height: 0 !important; border: 0 !important; }
.ui-admin-shell .card.card-statistic-1 .card-header h4 { color: #5f6f80 !important; font-size: .8rem !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0; line-height: 1.3 !important; }
.ui-admin-shell .card.card-statistic-1 .card-body { padding: 4px 0 0 !important; color: var(--ui-navy-900, #102d43) !important; font-size: 1.5rem !important; font-weight: 800 !important; }
.ui-admin-shell .card { border-radius: 16px; }
.ui-admin-shell .card .card-header h4 { color: var(--ui-navy-900, #102d43); }

/* ---------- Panel: spacing, greeting, stats ---------- */
.ui-panel-shell .dashboard-banner-container { margin-top: 20px !important; }
.ui-panel-shell .ui-page-subtitle { margin: 4px 0 0; color: #5f6f80; font-size: .95rem; }
.ui-panel-shell .dashboard-banner-container .dashboard-banner,
.ui-panel-shell .dashboard-banner {
    min-height: 0 !important; padding: 24px 28px !important; border-radius: 16px !important;
    background: linear-gradient(110deg, #102d43 0%, #163a54 55%, #127a89 100%) !important;
}
.ui-panel-shell .dashboard-banner img { max-height: 150px; width: auto; }
.ui-panel-shell .dashboard-stats { gap: 0; }
.ui-panel-shell .dashboard-stats .stat-icon,
.ui-panel-shell .stat-icon,
.ui-panel-shell .stat-icon.requests,
.ui-panel-shell .stat-icon.monthly-sales,
.ui-panel-shell .stat-icon.support-messages,
.ui-panel-shell .stat-icon.comments {
    width: 52px !important; height: 52px !important; min-width: 52px; border-radius: 14px !important;
    background: #168d9f !important; box-shadow: none !important;
}
.ui-panel-shell .stat-icon.monthly-sales { background: #178a4a !important; }
.ui-panel-shell .stat-icon.support-messages { background: #1d4a69 !important; }
.ui-panel-shell .stat-icon.comments { background: #b45309 !important; }
.ui-panel-shell .stat-icon img { width: 24px !important; height: 24px !important; }
.ui-panel-shell .dashboard-stats .bg-white,
.ui-panel-shell .dashboard-stats > [class*="col-"] > div,
.ui-panel-shell .account-balance {
    border: 1px solid #e3e9ef; border-radius: 16px !important; box-shadow: 0 4px 14px rgba(16, 45, 67, .04) !important;
}
.ui-panel-shell .dashboard-stats strong, .ui-panel-shell .dashboard-stats .font-30 { color: var(--ui-navy-900, #102d43) !important; }

/* ---------- Panel: navbar ---------- */
.ui-panel-shell .ui-nav-catalog { margin-right: 14px; }
.ui-panel-shell #navbar .ui-nav-icon > * + * { margin-left: 6px; }
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle,
.ui-panel-shell #navbar .ui-nav-icon > div > button,
.ui-panel-shell #navbar .ui-nav-icon > div > a {
    width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: #f5f7fa; border: 1px solid #e3e9ef; color: var(--ui-navy-900, #102d43);
}

/* ---------- Panel: sidebar ---------- */
@media (min-width: 992px) {
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column {
        flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 12px; text-align: left;
        padding: 16px; margin: 0 12px; border: 1px solid #e3e9ef; border-radius: 14px; background: #f5f7fa;
    }
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column .user-avatar { width: 48px !important; height: 48px !important; min-width: 48px; margin: 0 !important; }
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column .user-avatar img { width: 48px; height: 48px; border-radius: 50%; }
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column .user-name, .ui-panel-shell .panel-sidebar .user-info.flex-lg-column h3 { margin: 0 !important; font-size: .95rem !important; text-align: left; }
}
.ui-sidebar-role { display: block; margin-top: 2px; color: #127a89; font-size: .78rem; font-weight: 600; }
.ui-sidebar-role:empty { display: none; }
.ui-sidenav-heading {
    list-style: none; padding: 18px 20px 6px; color: #5f6f80; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ui-panel-shell .panel-sidebar .sidenav-item > a { border-radius: 10px; padding: 10px 14px; }
.ui-panel-shell .panel-sidebar .sidenav-item-active > a, .ui-panel-shell .panel-sidebar .sidenav-item.sidenav-item-active > a {
    background: rgba(22, 141, 159, .10) !important; color: #127a89 !important; box-shadow: inset 3px 0 0 #168d9f;
}
.ui-panel-shell .panel-sidebar .sidenav-item-active .sidenav-item-icon svg, .ui-panel-shell .panel-sidebar .sidenav-item-active .font-14 { color: #127a89 !important; }
.ui-panel-shell .panel-content { background: #f5f7fa; }
.ui-panel-shell .panel-section-card { border: 1px solid #e3e9ef; border-radius: 16px !important; box-shadow: 0 4px 14px rgba(16, 45, 67, .04) !important; }
.ui-panel-shell .nav-tabs .nav-link.active, .ui-panel-shell .nav-tabs .nav-item a.active { color: #127a89 !important; border-bottom-color: #168d9f !important; }

/* ==========================================================================
   Reference alignment: phase 4 (fixes from second screenshot review)
   ========================================================================== */

/* ---------- Landing: hero spacing so the stats bar never covers search ---------- */
.ui-public-shell .slider-container.ui-hero { padding: 56px 0 120px !important; height: auto !important; min-height: 0 !important; }
.ui-public-shell .ui-hero .slider-content { min-height: 0 !important; }
.ui-public-shell .stats-container.ui-stat-list { margin-top: -64px !important; margin-bottom: 0 !important; }
.ui-public-shell .stats-container.ui-stat-list .stats-item {
    display: grid !important;
    grid-template-columns: 52px 1fr;
    grid-template-areas: "icon number" "icon title" "desc desc";
    column-gap: 14px; row-gap: 2px; align-items: center;
}
.ui-public-shell .stats-container.ui-stat-list .stat-icon-box { grid-area: icon; align-self: center; }
.ui-public-shell .stats-container.ui-stat-list .stat-number { grid-area: number; align-self: end; }
.ui-public-shell .stats-container.ui-stat-list .stat-title { grid-area: title; align-self: start; margin: 0 !important; }
.ui-public-shell .stats-container.ui-stat-list .stat-desc { grid-area: desc; margin: 8px 0 0 !important; }
.ui-public-shell .ui-banner-grid--after-hero { margin-top: 48px !important; }

/* ---------- Admin: sidebar submenus (were white boxes) ---------- */
.ui-admin-shell .main-sidebar .sidebar-menu li ul.dropdown-menu { background: transparent !important; padding: 2px 0 6px 0 !important; margin: 0 !important; }
.ui-admin-shell .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
    background: transparent !important; color: rgba(255, 255, 255, .72) !important;
    height: auto !important; min-height: 34px; line-height: 1.3 !important;
    margin: 1px 12px 1px 22px !important; padding: 8px 12px 8px 26px !important;
    font-size: .82rem !important; font-weight: 500; border-radius: 8px; box-shadow: none !important; border: 0 !important;
    display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-admin-shell .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.ui-admin-shell .main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
    background: rgba(31, 163, 181, .16) !important; color: #fff !important; font-weight: 600; box-shadow: none !important;
}
.ui-admin-shell .main-sidebar .sidebar-menu li ul.dropdown-menu li a::before { display: none !important; }
.ui-admin-shell .main-sidebar .sidebar-menu > li > a { white-space: nowrap; overflow: hidden; }
.ui-admin-shell .main-sidebar .sidebar-menu > li > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Admin: KPI cards icon-left (ref 05) ---------- */
.ui-admin-shell .card.card-statistic-1.ui-stat-card {
    display: grid !important; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: center;
    text-align: left !important; padding: 20px !important; min-height: 100px;
}
.ui-admin-shell .card.card-statistic-1.ui-stat-card .card-icon { margin: 0 !important; justify-self: start; }
.ui-admin-shell .card.card-statistic-1.ui-stat-card .card-wrap { text-align: left !important; padding: 0 !important; margin: 0 !important; }
.ui-admin-shell .card.card-statistic-1.ui-stat-card .card-header,
.ui-admin-shell .card.card-statistic-1.ui-stat-card .card-body { text-align: left !important; padding: 0 !important; justify-content: flex-start !important; }

.ui-admin-shell .card.card-statistic-2.ui-stat-card {
    display: grid !important; grid-template-columns: 52px 1fr; grid-template-areas: "stats stats" "icon wrap";
    column-gap: 16px; row-gap: 16px; align-items: center; text-align: left !important; padding: 20px !important;
}
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-stats { grid-area: stats; padding: 0 0 16px !important; margin: 0 !important; border-bottom: 1px solid #e3e9ef; text-align: left !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-stats-title { padding: 0 0 10px !important; color: var(--ui-navy-900, #102d43) !important; font-size: .9rem !important; font-weight: 700 !important; text-align: left !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-stats-items { display: flex !important; gap: 8px; margin: 0 !important; height: auto !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-stats-item {
    flex: 1 1 0; padding: 8px 10px !important; background: #f5f7fa; border-radius: 10px; text-align: left !important;
}
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-stats-item-count { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--ui-navy-900, #102d43) !important; text-align: left !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-stats-item-label { font-size: .75rem !important; color: #5f6f80 !important; text-align: left !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-icon { grid-area: icon; margin: 0 !important; float: none !important; position: static !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-wrap { grid-area: wrap; text-align: left !important; padding: 0 !important; margin: 0 !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-header,
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-body { text-align: left !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-header h4 { color: #5f6f80 !important; font-size: .8rem !important; font-weight: 600 !important; margin: 0 !important; }
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-body { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--ui-navy-900, #102d43) !important; }

/* ---------- Admin: students page (ref 09) ---------- */
.ui-admin-shell .ui-register-link-card { padding: 16px 20px !important; }
.ui-admin-shell .ui-register-link-card h2, .ui-admin-shell .ui-register-link-card h3, .ui-admin-shell .ui-register-link-card .section-title { font-size: 1rem !important; margin: 0 0 8px !important; }
.ui-admin-shell .card .form-group label { color: #5f6f80; font-size: .75rem; font-weight: 600; }
.ui-admin-shell .table thead th { background: #f5f7fa !important; color: #5f6f80 !important; font-size: .75rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; }
.ui-admin-shell .table td { font-size: .85rem; color: var(--ui-text, #33475b); vertical-align: middle !important; }
.ui-admin-shell .table tbody tr:hover { background: #f8fbfc; }

/* ---------- Panel: top gap ---------- */
.ui-panel-shell .panel-content { margin-top: 62px !important; padding-top: 24px !important; }
.ui-panel-shell .panel-content > section:first-child,
.ui-panel-shell .panel-content > .ui-section:first-child { margin-top: 0 !important; padding-top: 0 !important; }
.ui-panel-shell .panel-content .ui-page-header { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 18px !important; }
.ui-panel-shell .dashboard.ui-section { margin-top: 8px !important; }
.ui-panel-shell .dashboard .mt-35 { margin-top: 20px !important; }

/* ---------- Panel: greeting card (light, illustration inside) ---------- */
.ui-panel-shell .dashboard-banner-container {
    min-height: 220px; padding: 28px 32px !important; padding-right: 42% !important; overflow: hidden;
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 52%, #e8f4f6 100%) !important;
    border: 1px solid #e3e9ef; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(16, 45, 67, .05) !important;
}
.ui-panel-shell .dashboard-banner-container h2 { color: var(--ui-navy-900, #102d43) !important; font-size: 1.6rem !important; }
.ui-panel-shell .dashboard-banner-container h2 .text-secondary, .ui-panel-shell .dashboard-banner-container h2 .font-16 { color: #127a89 !important; font-size: .95rem !important; margin-top: 6px; }
.ui-panel-shell .dashboard-banner-container > a {
    display: inline-flex !important; align-items: center; height: 40px; padding: 0 18px; margin-top: 16px !important;
    border-radius: 10px; background: #127a89; color: #fff !important; font-size: .9rem;
}
.ui-panel-shell .dashboard-banner-container > a:hover { background: #0f6672; }
.ui-panel-shell .dashboard-banner-container .dashboard-banner {
    position: absolute !important; right: 24px !important; bottom: 0 !important; top: auto !important; left: auto !important;
    width: 38% !important; height: 100% !important; min-height: 0 !important; padding: 12px 0 0 !important;
    background: transparent !important; border-radius: 0 !important; display: flex; align-items: flex-end; justify-content: center;
}
.ui-panel-shell .dashboard-banner-container .dashboard-banner img { max-height: 200px !important; width: auto !important; height: auto !important; object-fit: contain !important; }
@media (max-width: 767.98px) {
    .ui-panel-shell .dashboard-banner-container { padding-right: 20px !important; }
    .ui-panel-shell .dashboard-banner-container .dashboard-banner { position: relative !important; right: auto !important; width: 100% !important; height: auto !important; }
}

/* ---------- Panel: navbar must fit ---------- */
.ui-panel-shell #navbar .container-fluid > .d-flex { min-width: 0; flex-wrap: nowrap; }
.ui-panel-shell #navbar .navbar-toggle-content { min-width: 0; flex: 1 1 auto; margin-left: 0 !important; margin-right: 16px !important; }
.ui-panel-shell #navbar .nav-icons-or-start-live { flex: 0 0 auto; gap: 8px; }
.ui-panel-shell #navbar .user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Reference alignment: phase 5 (pixel pass against refs 01-13)
   Shared scale: radius 12px cards / 10px controls, border #e3e9ef,
   shadow 0 1px 2px + 0 6px 18px navy at 4-5%, Montserrat 400/600/700/800.
   ========================================================================== */
:root {
    --ref-navy: #102d43;
    --ref-navy-deep: #0c2436;
    --ref-teal: #127a89;
    --ref-teal-500: #168d9f;
    --ref-teal-soft: #e7f4f6;
    --ref-mint-soft: #e6f6ee;
    --ref-green: #1a8f4f;
    --ref-green-grad: linear-gradient(180deg, #27ae60 0%, #1a8f4f 100%);
    --ref-border: #e3e9ef;
    --ref-bg: #f5f7fa;
    --ref-text: #33475b;
    --ref-muted: #5f6f80;
    --ref-shadow: 0 1px 2px rgba(16, 45, 67, .04), 0 6px 18px rgba(16, 45, 67, .05);
    --ref-shadow-hover: 0 2px 4px rgba(16, 45, 67, .05), 0 14px 30px rgba(16, 45, 67, .10);
    --ref-radius: 12px;
    --ref-radius-sm: 10px;
}

/* ---------- Shared buttons (all three areas) ---------- */
.ui-public-shell .btn-primary, .ui-panel-shell .btn-primary, .ui-admin-shell .btn-primary,
.ui-public-shell .btn-success, .ui-panel-shell .btn-success, .ui-admin-shell .btn-success {
    background: var(--ref-green-grad) !important; border-color: #1a8f4f !important; color: #fff !important;
    font-weight: 700 !important; border-radius: var(--ref-radius-sm) !important; box-shadow: 0 4px 12px rgba(26, 143, 79, .22) !important;
}
.ui-public-shell .btn-primary:hover, .ui-panel-shell .btn-primary:hover, .ui-admin-shell .btn-primary:hover { filter: brightness(.95); }
.ui-public-shell .btn-outline-primary, .ui-panel-shell .btn-outline-primary, .ui-admin-shell .btn-outline-primary,
.ui-public-shell .btn-border-white, .ui-panel-shell .btn-border-white,
.ui-public-shell .btn-dark, .ui-panel-shell .btn-dark {
    background: #fff !important; color: var(--ref-teal) !important; border: 1.5px solid var(--ref-teal) !important;
    font-weight: 700 !important; border-radius: var(--ref-radius-sm) !important; box-shadow: none !important;
}
.ui-public-shell .btn-outline-primary:hover, .ui-panel-shell .btn-outline-primary:hover, .ui-admin-shell .btn-outline-primary:hover,
.ui-public-shell .btn-dark:hover, .ui-panel-shell .btn-dark:hover { background: var(--ref-teal-soft) !important; }

/* ==========================================================================
   LANDING (refs 01-04) and course detail
   ========================================================================== */
.ui-public-shell { background: var(--ref-bg) !important; color: var(--ref-text); }

/* Full width (no boxed layout) */
.ui-public-shell .container {
    width: 100% !important; max-width: none !important;
    padding-left: clamp(16px, 4.5vw, 96px) !important; padding-right: clamp(16px, 4.5vw, 96px) !important;
}
.ui-public-shell .container .container { padding-left: 0 !important; padding-right: 0 !important; }
.ui-public-shell #app, .ui-public-shell .ui-app { max-width: none !important; width: 100% !important; margin: 0 !important; box-shadow: none !important; }

/* Top bars */
.ui-public-shell .top-navbar, .ui-public-shell .ui-topbar { background: var(--ref-navy) !important; min-height: 44px; }
.ui-public-shell .top-navbar *, .ui-public-shell .ui-topbar * { color: #fff; }
.ui-public-shell #navbar { background: #fff !important; border-bottom: 1px solid var(--ref-border) !important; min-height: 76px; box-shadow: none; }
.ui-public-shell #navbar .nav-link, .ui-public-shell #navbar .xs-categories-toggle { color: var(--ref-navy) !important; font-size: 1rem !important; font-weight: 500 !important; }
.ui-public-shell #navbar .nav-link:hover, .ui-public-shell #navbar .xs-categories-toggle:hover { color: var(--ref-teal) !important; }
.ui-public-shell #navbar .navbar-brand img { max-height: 54px; width: auto; }
.ui-public-shell #navbar a.nav-start-a-live-btn.btn-primary {
    height: 44px; padding: 0 22px !important; display: inline-flex !important; align-items: center; font-size: 1rem !important;
}

/* Hero */
.ui-public-shell .slider-container.ui-hero {
    background-color: #f3f7fa !important;
    background-image: linear-gradient(90deg, #f6f9fb 0%, #f6f9fb 45%, rgba(246, 249, 251, 0) 75%), var(--hero-bg, none);
    padding: 48px 0 56px !important; border-bottom: 1px solid var(--ref-border);
}
.ui-public-shell .ui-hero h1 { font-size: clamp(2.2rem, 3.4vw, 3.4rem) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.025em; margin-bottom: 14px; }
.ui-public-shell .ui-hero .slide-hint { font-size: clamp(1rem, 1.2vw, 1.2rem) !important; color: var(--ref-text) !important; margin-top: 0 !important; }
.ui-hero-kicker {
    background: transparent !important; padding: 0 0 0 14px !important; border-radius: 0 !important;
    border-left: 5px solid #27ae60; color: var(--ref-navy) !important; font-size: .95rem !important; font-weight: 800 !important; letter-spacing: .03em !important;
}
.ui-hero-kicker::before { display: none !important; }
.ui-public-shell .ui-hero .slider-search { max-width: 620px; border-radius: var(--ref-radius-sm) !important; padding: 6px 6px 6px 18px !important; }
.ui-public-shell .ui-hero .slider-search .btn { background: var(--ref-teal-500) !important; border-color: var(--ref-teal-500) !important; box-shadow: none !important; padding: 0 30px !important; border-radius: 8px !important; }
.ui-public-shell .ui-hero .slider-search .btn:hover { background: var(--ref-teal) !important; }
.ui-hero-actions .btn { height: 52px !important; padding: 0 26px !important; font-size: 1.05rem !important; }
.ui-hero-actions .ui-btn-ghost { border: 1.5px solid #c9d4dd !important; box-shadow: var(--ref-shadow) !important; }

/* Stats bar: below the hero, thin, icon outline teal (ref 01) */
.ui-public-shell .stats-container.ui-stat-list { margin-top: 20px !important; }
.ui-public-shell .stats-container.ui-stat-list .row { border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important; }
.ui-public-shell .stats-container.ui-stat-list .stats-item { padding: 16px 28px !important; grid-template-columns: 44px 1fr !important; }
.ui-public-shell .stat-icon-box, .ui-public-shell .stat-icon-box.teacher, .ui-public-shell .stat-icon-box.video,
.ui-public-shell .stat-icon-box.student, .ui-public-shell .stat-icon-box.course {
    width: 44px !important; height: 44px !important; min-width: 44px; background: transparent !important; border-radius: 0 !important;
}
.ui-public-shell .stat-icon-box img { width: 38px !important; height: 38px !important; }
.ui-public-shell .stats-item .stat-number { font-size: 1.5rem !important; font-weight: 800 !important; }
.ui-public-shell .stats-item .stat-title { font-size: 1rem !important; font-weight: 500 !important; color: var(--ref-text) !important; }
.ui-public-shell .stats-item .stat-desc { font-size: .8rem !important; color: var(--ref-muted) !important; }

/* Section headings: green accent bar (refs 02-04) */
.ui-public-shell .home-sections { margin-top: 56px !important; }
.ui-public-shell .home-sections .section-title {
    position: relative; padding-left: 20px; font-size: clamp(1.7rem, 2.4vw, 2.4rem) !important; font-weight: 800 !important;
    color: var(--ref-navy) !important; line-height: 1.15; letter-spacing: -.02em;
}
.ui-public-shell .home-sections .section-title::before {
    content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 6px; border-radius: 3px; background: #27ae60;
}
.ui-public-shell .home-sections .section-hint { font-size: 1.05rem !important; margin-top: 6px !important; padding-left: 20px; }
.ui-public-shell .ui-section-heading > a, .ui-public-shell .home-sections .ui-section-heading .btn {
    background: transparent !important; border: 0 !important; color: var(--ref-teal) !important; text-decoration: underline; text-underline-offset: 4px; font-weight: 700 !important; box-shadow: none !important;
}

/* Generic public cards */
.ui-public-shell .ui-card, .ui-public-shell .webinar-card, .ui-public-shell .blog-grid-card {
    background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important;
}
.ui-public-shell .webinar-card:hover, .ui-public-shell .blog-grid-card:hover { box-shadow: var(--ref-shadow-hover) !important; transform: translateY(-2px); }

/* Category cards: horizontal tile (ref 02) */
.ui-public-shell .ui-category-card { overflow: hidden; }
.ui-public-shell .ui-category-card figure { display: flex; align-items: center; gap: 18px; margin: 0; padding: 14px 52px 14px 18px; position: relative; min-height: 84px; }
.ui-public-shell .ui-category-card .image-box { width: 60px !important; height: 60px !important; min-width: 60px; border-radius: 10px !important; overflow: hidden; background: var(--ref-teal-soft); }
.ui-public-shell .ui-category-card .image-box img { width: 100%; height: 100%; object-fit: cover; }
.ui-public-shell .ui-category-card .webinar-card-body { padding: 0 !important; }
.ui-public-shell .ui-category-card .webinar-title { margin: 0 !important; font-size: 1.1rem !important; font-weight: 700 !important; color: var(--ref-navy) !important; }
.ui-public-shell .ui-category-card .webinar-card-body span { margin-top: 2px !important; color: var(--ref-muted); font-size: .95rem !important; }
.ui-public-shell .ui-category-card figure::after {
    content: "\2192"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #1a8f4f; font-size: 1.5rem; font-weight: 700;
}
.ui-public-shell .ui-compact-grid .ui-grid-item .swiper-slide { padding-top: 14px !important; }

/* Course cards (ref 02) */
.ui-public-shell .ui-course-card { overflow: hidden; }
.ui-public-shell .ui-course-card .image-box { height: 190px !important; border-radius: 0 !important; }
.ui-public-shell .ui-course-card .image-box .badge { top: 14px !important; left: 14px !important; background: #fff !important; color: #1a8f4f !important; border-radius: 999px !important; padding: 6px 12px !important; font-weight: 700; box-shadow: var(--ref-shadow); }
.ui-public-shell .ui-course-content { padding: 16px 20px 20px !important; }
.ui-public-shell .ui-course-instructor .avatar { width: 34px !important; height: 34px !important; border-radius: 50%; overflow: hidden; }
.ui-public-shell .ui-course-instructor .user-name { color: var(--ref-text) !important; font-size: .85rem !important; }
.ui-public-shell .ui-course-title { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; line-height: 1.3; margin-top: 10px !important; }
.ui-public-shell .ui-course-category { color: var(--ref-muted); font-size: .85rem !important; }
.ui-public-shell .ui-course-meta { margin-top: 12px !important; padding-bottom: 12px; border-bottom: 1px solid var(--ref-border); color: var(--ref-text); font-size: .85rem; }
.ui-public-shell .ui-course-meta .vertical-line { background: var(--ref-border) !important; }
.ui-public-shell .ui-course-actions { margin-top: 4px; }
.ui-public-shell .ui-course-actions .btn { margin-top: 14px !important; height: 44px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; font-size: .95rem !important; }
.ui-public-shell .ui-course-price { margin-top: 12px !important; }
.ui-public-shell .ui-course-price .real { color: #1a8f4f !important; font-weight: 800 !important; }

/* Blog cards (ref 04) */
.ui-public-shell .ui-article-card { overflow: hidden; }
.ui-public-shell .ui-article-media { height: 200px !important; margin: 8px 8px 0; border-radius: 8px !important; overflow: hidden; }
.ui-public-shell .ui-article-content { padding: 16px 20px 20px !important; }
.ui-public-shell .ui-article-card .badge.created-at { background: var(--ref-mint-soft) !important; color: var(--ref-navy) !important; border-radius: 6px !important; font-weight: 600; }
.ui-public-shell .ui-article-card .blog-grid-title { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; }
.ui-public-shell .ui-article-card .blog-grid-desc { color: var(--ref-text) !important; font-size: .95rem; }
.ui-public-shell .ui-article-card .blog-grid-footer { padding-top: 12px; border-top: 1px solid var(--ref-border); color: var(--ref-muted); }

/* Logos / advisors (ref 03) */
.ui-public-shell .ui-logo-grid .ui-card, .ui-public-shell .ui-profile-grid .ui-card { padding: 18px !important; }
.ui-public-shell .ui-profile-grid img.rounded-circle, .ui-public-shell .ui-profile-grid .avatar img { border: 4px solid var(--ref-teal-soft); }
.ui-public-shell .ui-profile-grid .btn { border: 1.5px solid #1a8f4f !important; color: #1a8f4f !important; background: #fff !important; box-shadow: none !important; }

/* Subscribe band and footer (ref 04) */
.ui-public-shell .home-subscribe, .ui-public-shell .subscribes-container, .ui-public-shell .ui-media-section .ui-card {
    background: linear-gradient(100deg, #127a89 0%, #168d9f 55%, #1a7f8e 100%) !important; border: 0 !important; border-radius: 16px !important;
}
.ui-public-shell footer, .ui-public-shell .footer { background: var(--ref-navy) !important; color: #fff; margin-top: 64px; }
.ui-public-shell footer .footer-copyright-card, .ui-public-shell footer .container .border-top { border-color: rgba(255, 255, 255, .14) !important; }
.ui-public-shell footer a, .ui-public-shell footer p, .ui-public-shell footer span, .ui-public-shell footer li { color: rgba(255, 255, 255, .86) !important; }
.ui-public-shell footer a:hover { color: #6ee7a8 !important; }
.ui-public-shell footer h3, .ui-public-shell footer h4, .ui-public-shell footer .header { color: #fff !important; font-weight: 800 !important; }

/* Course detail page */
.ui-public-shell .course-cover-container { background: var(--ref-navy); }
.ui-public-shell .course-cover-container .course-cover-img { opacity: .28; }
.ui-public-shell .course-content-section { padding-bottom: 48px; }
.ui-public-shell .course-content-section #tabs-tab {
    background: #fff !important; border: 1px solid var(--ref-border); border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow); padding: 10px !important;
}
.ui-public-shell .course-content-section #tabs-tab .nav-item { width: 100%; margin: 2px 0 !important; }
.ui-public-shell .course-content-section #tabs-tab .nav-item a {
    display: block; width: 100%; padding: 10px 14px; border-radius: 8px; color: var(--ref-navy) !important; font-weight: 600;
}
.ui-public-shell .course-content-section #tabs-tab .nav-item a.active { background: var(--ref-teal-soft) !important; color: var(--ref-teal) !important; box-shadow: inset 4px 0 0 #27ae60; }
.ui-public-shell .course-content-section #tabs-tab .nav-item a::after { display: none !important; }
.ui-public-shell .course-sidebar, .ui-public-shell .course-content-sidebar, .ui-public-shell .rounded-lg.shadow-sm {
    border: 1px solid var(--ref-border); border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important; background: #fff;
}
.ui-public-shell .course-progress .progress-bar { background: #27ae60 !important; }

/* ==========================================================================
   ADMIN (refs 05-09)
   ========================================================================== */
.ui-admin-shell, .ui-admin-shell .main-content { background: var(--ref-bg) !important; color: var(--ref-text); font-family: "Montserrat", sans-serif; }
.ui-admin-shell .main-sidebar, .ui-admin-shell .main-sidebar .sidebar-menu, .ui-admin-shell #sidebar-wrapper { background: var(--ref-navy) !important; }
.ui-admin-shell .main-sidebar { box-shadow: none !important; width: 240px !important; }
.ui-admin-shell .main-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .10); margin: 0 18px 8px; padding: 14px 6px 16px !important; }
.ui-admin-shell .sidebar-brand:not(.sidebar-brand-sm) { align-items: center !important; }
.ui-admin-shell .sidebar-brand:not(.sidebar-brand-sm)::after { text-transform: none !important; letter-spacing: 0 !important; font-size: .82rem !important; color: rgba(255, 255, 255, .78) !important; font-weight: 500 !important; margin-top: 6px !important; }
.ui-admin-shell .main-sidebar .sidebar-menu li.menu-header {
    color: rgba(255, 255, 255, .82) !important; font-size: .74rem !important; font-weight: 700 !important; letter-spacing: .1em !important; padding: 22px 26px 8px !important;
}
.ui-admin-shell .main-sidebar .sidebar-menu > li > a {
    color: rgba(255, 255, 255, .9) !important; font-size: .95rem !important; font-weight: 500 !important; height: 40px !important; margin: 2px 10px !important; padding: 0 16px !important;
}
.ui-admin-shell .main-sidebar .sidebar-menu > li > a i { color: rgba(255, 255, 255, .9) !important; width: 22px !important; margin-right: 14px !important; font-size: 16px !important; }
.ui-admin-shell .main-sidebar .sidebar-menu > li > a:hover { background: rgba(255, 255, 255, .06) !important; }
.ui-admin-shell .main-sidebar .sidebar-menu > li.active > a {
    background: var(--ref-teal) !important; color: #fff !important; font-weight: 600 !important; box-shadow: inset 4px 0 0 #34c977 !important; border-radius: 8px !important;
}
.ui-admin-shell .main-content { padding-left: 270px !important; padding-top: 84px !important; }
body.sidebar-mini.ui-admin-shell .main-content { padding-left: 100px !important; }
@media (max-width: 1024px) { .ui-admin-shell .main-content { padding-left: 20px !important; } }
.ui-admin-shell .navbar-bg { background: #fff !important; height: 56px !important; border-bottom: 1px solid var(--ref-border); box-shadow: none !important; }
.ui-admin-shell .main-navbar { left: 240px !important; height: 56px; }
body.sidebar-mini.ui-admin-shell .main-navbar { left: 65px !important; }
@media (max-width: 1024px) { .ui-admin-shell .main-navbar { left: 0 !important; } }
.ui-admin-shell .main-navbar .nav-link, .ui-admin-shell .main-navbar .nav-link i { color: var(--ref-navy) !important; }
.ui-admin-shell .ui-admin-site-link { color: var(--ref-teal) !important; font-weight: 700; }
.ui-admin-breadcrumb-root { color: var(--ref-text) !important; }
.ui-admin-breadcrumb-current { color: var(--ref-navy) !important; font-weight: 600; }

/* Page header */
.ui-admin-shell .section .section-header, .ui-admin-shell .ui-page-header {
    background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 22px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.ui-admin-shell .section .section-header h1 { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; letter-spacing: -.02em; margin: 0 auto 0 0 !important; }

/* Cards */
.ui-admin-shell .card { border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important; margin-bottom: 22px; }
.ui-admin-shell .card .card-header { border-bottom: 1px solid var(--ref-border) !important; padding: 18px 22px !important; min-height: 0 !important; }
.ui-admin-shell .card .card-header h4 { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; }
.ui-admin-shell .card .card-body { padding: 20px 22px !important; }
.ui-admin-shell .card.ui-stat-card .card-header { border-bottom: 0 !important; }

/* KPI tiles: soft tinted squares, colored icon (ref 05/06/09) */
.ui-admin-shell .ui-stat-card .card-icon { box-shadow: none !important; border-radius: 10px !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-primary, .ui-admin-shell .ui-stat-card .card-icon.shadow-primary { background: var(--ref-mint-soft) !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-primary i, .ui-admin-shell .ui-stat-card .card-icon.shadow-primary i { color: #1a8f4f !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-warning { background: #fff4df !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-warning i { color: #d48806 !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-danger { background: #fdecea !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-danger i { color: #c0392b !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-success { background: var(--ref-teal-soft) !important; }
.ui-admin-shell .ui-stat-card .card-icon.bg-success i { color: var(--ref-teal) !important; }
.ui-admin-shell .card.card-statistic-1.ui-stat-card .card-header h4,
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-header h4 { color: var(--ref-navy) !important; font-size: .9rem !important; font-weight: 700 !important; }
.ui-admin-shell .card.card-statistic-1.ui-stat-card .card-body,
.ui-admin-shell .card.card-statistic-2.ui-stat-card .card-body { font-size: 1.9rem !important; line-height: 1.15 !important; }

/* Welcome card + chart toggle */
.ui-admin-shell .hero.ui-banner { border-left: 1px solid var(--ref-border) !important; }
.ui-admin-shell .ui-chart-toggle .btn, .ui-admin-shell .ui-segmented-item {
    background: #fff !important; color: var(--ref-text) !important; border: 1px solid var(--ref-border) !important; box-shadow: none !important; font-weight: 600 !important; min-height: 36px;
}
.ui-admin-shell .ui-chart-toggle .btn.active, .ui-admin-shell .ui-chart-toggle .btn-primary,
.ui-admin-shell .ui-segmented-item.active { background: var(--ref-teal) !important; border-color: var(--ref-teal) !important; color: #fff !important; }
.ui-admin-shell .ui-segmented { background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius-sm); padding: 4px; display: inline-flex; gap: 4px; margin-bottom: 16px; }
.ui-admin-shell .ui-segmented-item { border: 0 !important; border-radius: 8px !important; padding: 8px 22px !important; }

/* Forms and filters */
.ui-admin-shell .form-control, .ui-admin-shell .custom-select, .ui-admin-shell .select2-container .select2-selection {
    min-height: 40px !important; border: 1px solid #d5dee6 !important; border-radius: 8px !important; background: #fff !important; color: var(--ref-text) !important; font-size: .9rem !important; box-shadow: none !important;
}
.ui-admin-shell .form-control:focus { border-color: var(--ref-teal-500) !important; box-shadow: 0 0 0 3px rgba(22, 141, 159, .14) !important; }
.ui-admin-shell .form-group label, .ui-admin-shell .input-label { color: var(--ref-navy) !important; font-size: .82rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
.ui-admin-shell form .btn-primary.btn-block, .ui-admin-shell .card form button[type=submit].btn-primary { background: var(--ref-teal) !important; border-color: var(--ref-teal) !important; box-shadow: none !important; max-width: 220px; }

/* Tables */
.ui-admin-shell .table { color: var(--ref-text); }
.ui-admin-shell .table thead th, .ui-admin-shell .table tr:first-child th {
    background: var(--ref-bg) !important; color: var(--ref-navy) !important; font-size: .8rem !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; padding: 12px 14px !important; height: auto !important;
}
.ui-admin-shell .table th:first-child { border-radius: 8px 0 0 8px; }
.ui-admin-shell .table th:last-child { border-radius: 0 8px 8px 0; }
.ui-admin-shell .table td { padding: 12px 14px !important; border-top: 1px solid #eef2f6 !important; font-size: .85rem !important; }
.ui-admin-shell .table td a { color: var(--ref-navy); }
.ui-admin-shell .badge, .ui-admin-shell .ui-status { border-radius: 6px !important; font-weight: 600 !important; padding: 5px 10px !important; font-size: .78rem !important; }
.ui-admin-shell .badge-success, .ui-admin-shell .ui-status--success { background: var(--ref-mint-soft) !important; color: #147a41 !important; }
.ui-admin-shell .badge-warning, .ui-admin-shell .ui-status--warning { background: #fff4df !important; color: #b45309 !important; }
.ui-admin-shell .badge-danger, .ui-admin-shell .ui-status--danger { background: #fdecea !important; color: #c0392b !important; }
.ui-admin-shell .ui-row-actions .btn, .ui-admin-shell .ui-row-actions a.btn-transparent {
    width: 32px; height: 32px; min-height: 32px !important; padding: 0 !important; border-radius: 8px !important; border: 1px solid var(--ref-border) !important; background: #fff !important; color: var(--ref-navy) !important; box-shadow: none !important;
}
.ui-admin-shell .pagination .page-link { border: 1px solid var(--ref-border) !important; border-radius: 8px !important; margin: 0 3px; color: var(--ref-navy) !important; min-width: 36px; text-align: center; }
.ui-admin-shell .pagination .page-item.active .page-link { background: var(--ref-teal) !important; border-color: var(--ref-teal) !important; color: #fff !important; }

/* ==========================================================================
   STUDENT CAMPUS (refs 10-13)
   ========================================================================== */
.ui-panel-shell, .ui-panel-shell .panel-content { background: var(--ref-bg) !important; color: var(--ref-text); }
.ui-panel-shell .panel-sidebar {
    background: #fff !important; border-right: 1px solid var(--ref-border) !important; box-shadow: none !important; padding: 20px 16px 24px !important;
}
.ui-panel-shell .panel-sidebar .ui-brand { flex-direction: column; margin-bottom: 18px; }
.ui-panel-shell .panel-sidebar .ui-brand img { max-height: 48px; width: auto; }
.ui-panel-shell .panel-sidebar .ui-brand::after { content: "Campus virtual"; display: block; margin-top: 6px; font-size: .85rem; color: var(--ref-text); }
@media (min-width: 992px) {
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column { background: transparent !important; border: 0 !important; padding: 6px 4px !important; margin: 0 !important; gap: 14px !important; }
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column .user-avatar, .ui-panel-shell .panel-sidebar .user-info.flex-lg-column .user-avatar img { width: 56px !important; height: 56px !important; min-width: 56px; }
    .ui-panel-shell .panel-sidebar .user-info.flex-lg-column > div { align-items: flex-start !important; }
}
.ui-panel-shell .panel-sidebar .user-name { margin-top: 0 !important; }
.ui-panel-shell .panel-sidebar .user-name h3 { color: var(--ref-navy) !important; font-size: 1rem !important; font-weight: 700 !important; text-align: left !important; }
.ui-panel-shell .ui-sidebar-role { color: var(--ref-text) !important; font-weight: 500 !important; font-size: .9rem !important; }
.ui-panel-shell .panel-sidebar .sidebar-user-stats { margin: 10px 0 4px !important; padding: 10px 4px !important; border-top: 1px solid var(--ref-border); border-bottom: 1px solid var(--ref-border); justify-content: space-around; }
.ui-panel-shell .panel-sidebar .sidebar-user-stats strong { color: var(--ref-navy); font-size: 1rem; }
.ui-panel-shell .panel-sidebar .sidebar-user-stats span { color: var(--ref-muted); }
.ui-sidenav-heading { text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; font-weight: 500 !important; color: var(--ref-text) !important; padding: 18px 8px 8px !important; }
.ui-panel-shell .panel-sidebar .sidenav-item { margin: 2px 0 !important; }
.ui-panel-shell .panel-sidebar .sidenav-item > a { padding: 10px 14px !important; border-radius: 8px !important; min-height: 44px; }
.ui-panel-shell .panel-sidebar .sidenav-item > a .font-14 { font-size: .98rem !important; color: var(--ref-navy) !important; font-weight: 500 !important; }
.ui-panel-shell .panel-sidebar .sidenav-item > a:hover { background: var(--ref-bg) !important; }
.ui-panel-shell .panel-sidebar .sidenav-item-active > a, .ui-panel-shell .panel-sidebar .sidenav-item.sidenav-item-active > a {
    background: #dff3ee !important; box-shadow: inset 4px 0 0 #27ae60 !important;
}
.ui-panel-shell .panel-sidebar .sidenav-item-active > a .font-14 { color: var(--ref-teal) !important; font-weight: 700 !important; }
.ui-panel-shell .panel-sidebar .sidenav-item-icon svg { width: 24px; height: 24px; }
.ui-sidebar-help { background: var(--ref-teal-soft) !important; border: 0 !important; border-radius: var(--ref-radius) !important; }
.ui-sidebar-help .btn { background: #fff !important; color: var(--ref-teal) !important; border: 1.5px solid var(--ref-teal) !important; box-shadow: none !important; }
.ui-sidenav-badge { background: #1a8f4f !important; color: #fff !important; }

/* Topbar */
.ui-panel-shell #navbar { background: #fff !important; border-bottom: 1px solid var(--ref-border) !important; box-shadow: none !important; }
.ui-panel-shell #navbar .nav-link, .ui-panel-shell #navbar .xs-categories-toggle { color: var(--ref-navy) !important; font-weight: 500; }
.ui-panel-shell #navbar .ui-nav-search .form-control { background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: 8px !important; }
.ui-btn-outline-teal { border-width: 1.5px !important; font-weight: 700 !important; }

/* Page header and cards */
.ui-panel-shell .panel-content .section-title, .ui-panel-shell .panel-content h1.section-title { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; letter-spacing: -.02em; }
.ui-panel-shell .panel-content h2.section-title, .ui-panel-shell .panel-content .ui-section > h2.section-title { font-size: 1.35rem !important; }
.ui-panel-shell .ui-page-subtitle { font-size: 1.05rem !important; color: var(--ref-text) !important; }
.ui-panel-shell .panel-section-card, .ui-panel-shell .ui-card, .ui-panel-shell .bg-white.panel-shadow, .ui-panel-shell .dashboard-stats,
.ui-panel-shell .webinar-card, .ui-panel-shell .account-balance, .ui-panel-shell .dashboard-banner-container {
    background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important;
}
.ui-panel-shell .dashboard-banner-container { background: linear-gradient(100deg, #fff 0%, #fff 55%, var(--ref-teal-soft) 100%) !important; }
.ui-panel-shell .dashboard-stats .stat-icon, .ui-panel-shell .stat-icon,
.ui-panel-shell .stat-icon.requests, .ui-panel-shell .stat-icon.monthly-sales, .ui-panel-shell .stat-icon.support-messages, .ui-panel-shell .stat-icon.comments {
    width: 56px !important; height: 56px !important; border-radius: 10px !important; background: var(--ref-teal-soft) !important;
}
.ui-panel-shell .stat-icon img { filter: brightness(0) saturate(100%) invert(33%) sepia(73%) saturate(560%) hue-rotate(145deg) brightness(92%); width: 28px !important; height: 28px !important; }
.ui-panel-shell .dashboard-stats .font-30 { font-size: 1.6rem !important; font-weight: 800 !important; }
.ui-panel-shell .dashboard-stats .text-gray { color: var(--ref-text) !important; font-size: .95rem !important; }
.ui-panel-shell .nav-tabs { border-bottom: 1px solid var(--ref-border) !important; }
.ui-panel-shell .nav-tabs .nav-link, .ui-panel-shell .nav-tabs .nav-item a { color: var(--ref-text) !important; font-weight: 600; border: 0 !important; border-bottom: 3px solid transparent !important; }
.ui-panel-shell .form-control, .ui-panel-shell .custom-select { min-height: 44px; border: 1px solid #d5dee6 !important; border-radius: 8px !important; box-shadow: none !important; }
.ui-panel-shell .form-control:focus { border-color: var(--ref-teal-500) !important; box-shadow: 0 0 0 3px rgba(22, 141, 159, .14) !important; }
.ui-panel-shell .input-label, .ui-panel-shell .form-group label { color: var(--ref-navy) !important; font-weight: 600 !important; }
.ui-panel-shell .table thead th { background: var(--ref-bg) !important; color: var(--ref-navy) !important; font-weight: 700 !important; border: 0 !important; }

/* ---------- Phase 5 fix: stray borders around the stats bar, duplicated CTA ---------- */
.ui-public-shell .stats-container,
.ui-public-shell .stats-container.ui-stat-list {
    width: 100% !important; margin: 24px 0 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.ui-public-shell .stats-container > .container { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ui-public-shell .stats-container .row::before, .ui-public-shell .stats-container .row::after,
.ui-public-shell .stats-container::before, .ui-public-shell .stats-container::after { display: none !important; }
.ui-public-shell .slider-container.ui-hero { border-bottom: 0 !important; background-color: var(--ref-bg) !important; margin-bottom: 0 !important; }
.ui-public-shell #navbar a.nav-start-a-live-btn.d-lg-none { display: none !important; }
@media (max-width: 991.98px) {
    .ui-public-shell #navbar a.nav-start-a-live-btn.d-lg-none { display: flex !important; }
    .ui-public-shell #navbar a.nav-start-a-live-btn.d-lg-flex { display: none !important; }
}
.ui-public-shell .stats-container.ui-stat-list .stats-item { align-content: center; }
.ui-public-shell .stats-container.ui-stat-list .stat-desc { padding-left: 58px; }

/* ==========================================================================
   Phase 6: admin course editor layout (ref 07) + cleaner empty states
   ========================================================================== */

/* Admin accent: replace Stisla purple with the brand teal */
.ui-admin-shell .custom-control-input:checked ~ .custom-control-label::before,
.ui-panel-shell .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ref-teal) !important; border-color: var(--ref-teal) !important; }
.ui-admin-shell .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(22, 141, 159, .18) !important; }
.ui-admin-shell .bootstrap-tagsinput .tag, .ui-admin-shell .badge-primary, .ui-admin-shell .badge-info { background: var(--ref-teal-soft) !important; color: var(--ref-teal) !important; }
.ui-admin-shell .section-header-breadcrumb a, .ui-admin-shell .breadcrumb-item a, .ui-admin-shell .text-primary, .ui-admin-shell .card a:not(.btn):not(.dropdown-item) { color: var(--ref-teal) !important; }
.ui-admin-shell .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ref-teal) !important; }
.ui-admin-shell .section-title.after-line::before, .ui-admin-shell .section-title.after-line::after { display: none !important; }

/* Header */
.ui-course-editor .ui-editor-header { align-items: flex-start !important; }
.ui-course-editor .ui-editor-heading { margin-right: auto; }
.ui-course-editor .ui-editor-heading h1 { margin: 0 !important; }
.ui-course-editor .ui-editor-heading .ui-page-subtitle { margin: 4px 0 0; color: var(--ref-text); font-size: 1.1rem; }
.ui-course-editor .section-header-breadcrumb { order: -1; width: 100%; margin: 0 0 4px !important; font-size: .82rem; }
.ui-course-editor .ui-page-actions { gap: 10px; }
.ui-course-editor .ui-page-actions .btn { height: 44px; padding: 0 20px !important; font-size: .95rem !important; }

/* Section tabs */
.ui-editor-tabs {
    position: sticky; top: 56px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 22px; padding: 0 8px; background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow);
}
.ui-editor-tabs::-webkit-scrollbar { display: none; }
.ui-editor-tab {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 16px 18px 13px;
    color: var(--ref-navy) !important; font-weight: 500; font-size: .95rem; border-bottom: 3px solid transparent; text-decoration: none !important;
}
.ui-editor-tab i { color: var(--ref-text); font-size: 1rem; }
.ui-editor-tab:hover { background: var(--ref-bg); }
.ui-editor-tab.active { color: var(--ref-teal) !important; font-weight: 700; border-bottom-color: var(--ref-teal); background: linear-gradient(180deg, #fff 0%, var(--ref-teal-soft) 100%); }
.ui-editor-tab.active i { color: var(--ref-teal); }

/* Form sections become cards */
.ui-course-editor .ui-form-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ui-course-editor .ui-form-shell > .card-body { padding: 0 !important; }
.ui-course-editor #webinarForm > section {
    background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow);
    padding: 22px 24px 24px; margin: 0 0 20px !important; scroll-margin-top: 140px;
}
.ui-course-editor #webinarForm .section-title {
    font-size: 1.35rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; margin: 0 0 6px !important; padding: 0 !important; scroll-margin-top: 140px;
}
.ui-course-editor #webinarForm > section > .d-flex { margin-bottom: 6px; }
.ui-course-editor #webinarForm > section > .d-flex .btn { margin-top: 0 !important; }

/* Basic & additional information: two-column field grid */
@media (min-width: 768px) {
    .ui-course-editor #webinarForm > section > .row > .col-md-5,
    .ui-course-editor #webinarForm > section > .row > .col-md-6 {
        flex: 0 0 100%; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start;
    }
    .ui-course-editor #webinarForm > section > .row > .col-md-5 > *,
    .ui-course-editor #webinarForm > section > .row > .col-md-6 > * { min-width: 0; }
    .ui-course-editor #webinarForm > section > .row > .col-md-6 > .row { grid-column: 1 / -1; }
}
.ui-course-editor #webinarForm .form-group { margin-top: 14px !important; margin-bottom: 0 !important; }
.ui-course-editor #webinarForm .input-group-prepend .input-group-text,
.ui-course-editor #webinarForm .input-group-append .input-group-text {
    background: var(--ref-bg) !important; border: 1px solid #d5dee6 !important; color: var(--ref-teal) !important; min-width: 42px; justify-content: center;
}
.ui-course-editor #webinarForm .input-group-prepend .input-group-text { border-radius: 8px 0 0 8px !important; }
.ui-course-editor #webinarForm .input-group-append .input-group-text { border-radius: 0 8px 8px 0 !important; }
.ui-course-editor #webinarForm .input-group > .form-control { border-radius: 0 !important; }
.ui-course-editor #webinarForm .input-group > .form-control:first-child { border-radius: 8px 0 0 8px !important; }
.ui-course-editor #webinarForm .input-group > .form-control:last-child { border-radius: 0 8px 8px 0 !important; }
/* switches: compact bordered rows */
.ui-course-editor #webinarForm .form-group.d-flex.justify-content-between {
    margin-top: 14px !important; padding: 12px 14px; border: 1px solid var(--ref-border); border-radius: 10px; background: #fff;
}
.ui-course-editor #webinarForm .form-group.d-flex.justify-content-between label { margin: 0; color: var(--ref-navy); font-weight: 600; font-size: .9rem; }
.ui-course-editor .note-editor.note-frame { border: 1px solid #d5dee6 !important; border-radius: 10px !important; overflow: hidden; }
.ui-course-editor .note-toolbar { background: var(--ref-bg) !important; border-bottom: 1px solid var(--ref-border) !important; }
.ui-course-editor .note-toolbar .btn { min-height: 32px !important; background: #fff !important; border: 1px solid var(--ref-border) !important; box-shadow: none !important; color: var(--ref-navy) !important; }

/* Lists inside the editor (prices, chapters, files...) */
.ui-course-editor #webinarForm .table-responsive { border: 1px solid var(--ref-border); border-radius: 10px; }
.ui-course-editor #webinarForm .table { margin: 0; }

/* Sticky action bar */
.ui-course-editor .ui-editor-actionbar {
    position: sticky; bottom: 0; z-index: 25; margin: 8px 0 0 !important; padding: 14px 20px;
    background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: 0 -8px 24px rgba(16, 45, 67, .08);
}
.ui-course-editor .ui-editor-actionbar > div { gap: 10px; padding: 0 !important; }
.ui-course-editor .ui-editor-actionbar .btn { height: 44px; padding: 0 22px !important; }
.ui-course-editor .ui-editor-actionbar #saveAndPublish { order: 3; }
.ui-course-editor .ui-editor-actionbar #saveReject { order: 2; background: #fff !important; color: #b45309 !important; border: 1.5px solid #f0c27a !important; box-shadow: none !important; }
.ui-course-editor .ui-editor-actionbar .btn-danger { order: 1; background: #fff !important; color: #c0392b !important; border: 1.5px solid #f1b5ae !important; box-shadow: none !important; }
.ui-editor-dirty { order: 0; margin-right: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ref-text); font-weight: 500; visibility: hidden; }
.ui-editor-dirty i { color: #d48806; }
.ui-course-editor.is-dirty .ui-editor-dirty { visibility: visible; }

/* Right column */
.ui-editor-aside { position: sticky; top: 140px; }
.ui-editor-card { padding: 20px 22px !important; }
.ui-editor-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ui-editor-card-head h3 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--ref-navy); }
.ui-editor-facts { margin: 0 0 14px; }
.ui-editor-facts > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ref-border); font-size: .9rem; }
.ui-editor-facts dt { font-weight: 500; color: var(--ref-text); display: flex; align-items: center; gap: 10px; }
.ui-editor-facts dt i { color: var(--ref-teal); width: 16px; text-align: center; }
.ui-editor-facts dd { margin: 0; color: var(--ref-navy); font-weight: 600; }
.ui-editor-link { color: #1a8f4f !important; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.ui-editor-image { display: grid; grid-template-columns: 1fr 46%; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ref-border); }
.ui-editor-image:first-of-type { border-top: 0; padding-top: 0; }
.ui-editor-image strong { display: block; color: var(--ref-navy); font-size: .95rem; }
.ui-editor-image span { display: block; color: var(--ref-text); font-size: .8rem; margin: 2px 0 10px; }
.ui-editor-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--ref-border); background: var(--ref-bg); }
.ui-editor-image .btn { color: #1a8f4f !important; border-color: #1a8f4f !important; }
.ui-editor-note { margin: 0; color: var(--ref-text); font-size: .9rem; }
@media (max-width: 1199.98px) { .ui-editor-aside { position: static; } }

/* Empty states: soft icon instead of large illustrations (all areas) */
.ui-empty-illustration { display: none !important; }
.no-result .no-result-logo { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; }
.ui-empty-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px;
    background: var(--ref-teal-soft); color: var(--ref-teal); font-size: 26px;
}
.ui-empty-icon svg { width: 28px; height: 28px; }
.no-result.default-no-result {
    margin: 12px 0 0 !important; padding: 28px 20px !important; border: 1.5px dashed #cfdbe4 !important; border-radius: var(--ref-radius) !important;
    background: #fafcfd !important; box-shadow: none !important; min-height: 0 !important;
}
.no-result.default-no-result h2 { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--ref-navy) !important; margin: 0 !important; }
.no-result.default-no-result p { font-size: .9rem !important; color: var(--ref-text) !important; max-width: 460px; margin-top: 4px !important; }
.no-result.default-no-result > .d-flex { margin-top: 12px !important; }
.no-result.default-no-result .btn { margin-top: 12px !important; }
.no-result .no-result-logo { padding: 0 !important; border-radius: 0 !important; }

/* ---------- Phase 6 fix: wide tables stay inside their card ---------- */
.ui-admin-shell .ui-course-editor-main, .ui-admin-shell .card, .ui-admin-shell .card-body,
.ui-course-editor #webinarForm > section, .ui-course-editor #webinarForm > section .row > [class*="col-"] { min-width: 0; }
.ui-admin-shell .table-responsive { display: block; width: 100%; max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.ui-course-editor #webinarForm .table { width: 100%; min-width: 640px; }
.ui-course-editor #webinarForm .table th, .ui-course-editor #webinarForm .table td {
    white-space: nowrap; text-align: left !important; vertical-align: middle !important; font-weight: 400 !important; color: var(--ref-text);
}
.ui-course-editor #webinarForm .table tr:first-child th { font-weight: 700 !important; color: var(--ref-navy) !important; }
.ui-course-editor #webinarForm .table tbody tr > :nth-child(2) {
    white-space: normal; min-width: 200px; max-width: 280px; color: var(--ref-navy) !important; font-weight: 600 !important;
}
.ui-course-editor #webinarForm .table td.text-right { position: sticky; right: 0; background: #fff; box-shadow: -8px 0 12px -10px rgba(16, 45, 67, .25); }
.ui-course-editor #webinarForm .table td.text-right .btn, .ui-course-editor #webinarForm .table td.text-right button {
    width: 32px; height: 32px; min-height: 32px !important; padding: 0 !important; margin: 0 2px !important; border-radius: 8px !important;
    border: 1px solid var(--ref-border) !important; background: #fff !important; color: var(--ref-navy) !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center;
}
.ui-course-editor #webinarForm .table-striped tbody tr:nth-of-type(odd) { background: #fafcfd; }
.ui-admin-shell .table-responsive::-webkit-scrollbar { height: 8px; }
.ui-admin-shell .table-responsive::-webkit-scrollbar-thumb { background: #cfdbe4; border-radius: 8px; }

/* ==========================================================================
   Phase 7: public course detail (light header, horizontal tabs, card sidebar)
   ========================================================================== */
html body.ui-public-shell #navbar a.nav-start-a-live-btn.d-lg-none { display: none !important; }
@media (max-width: 991.98px) { html body.ui-public-shell #navbar a.nav-start-a-live-btn.d-lg-none { display: flex !important; } }

/* No dark photo hero: the cover keeps only the special offer, on the page background */
.ui-public-shell .course-cover-container { height: auto !important; min-height: 0 !important; background: transparent !important; position: relative; }
.ui-public-shell .course-cover-container .course-cover-img { display: none !important; }
.ui-public-shell .course-cover-container .cover-content { position: static !important; padding-top: 0 !important; }
.ui-public-shell .course-cover-container::before, .ui-public-shell .course-cover-container::after { display: none !important; }
.ui-public-shell .course-content-section { margin-top: 28px !important; padding-top: 0 !important; }
.ui-public-shell .course-content-section .course-body-on-cover {
    position: static !important; margin: 0 !important; transform: none !important; color: var(--ref-text) !important; min-height: 0 !important;
}

.ui-course-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--ref-text); margin-bottom: 16px; }
.ui-course-breadcrumb a { color: var(--ref-text) !important; display: inline-flex; align-items: center; gap: 6px; }
.ui-course-breadcrumb a:hover { color: var(--ref-teal) !important; }
.ui-course-breadcrumb-current { color: var(--ref-navy); font-weight: 600; }
.ui-course-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ui-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; background: var(--ref-teal-soft); color: var(--ref-navy); font-size: .88rem; font-weight: 500; }
.ui-chip svg { color: var(--ref-teal); }

.ui-public-shell .course-body-on-cover .course-title {
    color: var(--ref-navy) !important; font-size: clamp(2rem, 3vw, 2.8rem) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em; margin: 0 0 8px;
}
.ui-public-shell .course-body-on-cover > span.d-block { color: var(--ref-text) !important; font-size: 1.05rem !important; }
.ui-public-shell .course-body-on-cover a.text-white, .ui-public-shell .course-body-on-cover .text-white { color: var(--ref-teal) !important; }
.ui-public-shell .course-body-on-cover .font-14 { color: var(--ref-text); }
.ui-course-instructor-row { display: flex; align-items: center; gap: 14px; }
.ui-course-instructor-row > div { display: flex; flex-direction: column; }
.ui-course-instructor-row a { font-size: 1.05rem !important; font-weight: 700 !important; }
.ui-course-instructor-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--ref-shadow); }

.ui-course-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 22px;
    background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow);
}
.ui-course-fact { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.ui-course-fact + .ui-course-fact { border-left: 1px solid var(--ref-border); }
.ui-course-fact svg { color: var(--ref-teal); flex: 0 0 auto; }
.ui-course-fact strong { display: block; color: var(--ref-navy); font-size: .95rem; }
.ui-course-fact span { display: block; color: var(--ref-text); font-size: .9rem; }
@media (max-width: 575.98px) { .ui-course-fact + .ui-course-fact { border-left: 0; border-top: 1px solid var(--ref-border); } }

.ui-course-availability-title {
    margin-top: 16px; padding: 16px 20px 0; background: #fff; border: 1px solid var(--ref-border); border-bottom: 0;
    border-radius: var(--ref-radius) var(--ref-radius) 0 0; color: var(--ref-navy); font-weight: 700;
}
.ui-public-shell .ui-course-availability {
    margin-top: 0 !important; padding: 10px 20px 18px; background: #fff; border: 1px solid var(--ref-border); border-top: 0;
    border-radius: 0 0 var(--ref-radius) var(--ref-radius); box-shadow: var(--ref-shadow);
}
.ui-public-shell .ui-course-availability .course-progress { height: 10px !important; background: #e3e9ef !important; border-radius: 999px !important; box-shadow: none !important; }
.ui-public-shell .ui-course-availability .progress-bar { background: var(--ref-teal-500) !important; border-radius: 999px !important; }
.ui-public-shell .ui-course-availability > span { color: var(--ref-navy) !important; font-weight: 600 !important; white-space: nowrap; }

/* Horizontal tabs + content as a card */
.ui-course-tabs-wrap { margin: 24px 0 0 !important; background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); overflow: hidden; }
.ui-course-tabs-wrap > [class*="col-"] { padding: 0 !important; }
.ui-public-shell .course-content-section #tabs-tab.ui-course-tabs {
    background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--ref-border) !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 12px !important; overflow-x: auto; scrollbar-width: none; gap: 4px;
}
.ui-public-shell .course-content-section #tabs-tab.ui-course-tabs .nav-item { width: auto; margin: 0 !important; flex: 0 0 auto; }
.ui-public-shell .course-content-section #tabs-tab.ui-course-tabs .nav-item a {
    display: block; padding: 16px 14px 13px !important; border-radius: 0 !important; color: var(--ref-navy) !important; font-weight: 500 !important;
    border-bottom: 3px solid transparent; box-shadow: none !important; background: transparent !important; white-space: nowrap;
}
.ui-public-shell .course-content-section #tabs-tab.ui-course-tabs .nav-item a.active { color: #1a8f4f !important; font-weight: 700 !important; border-bottom-color: #27ae60; }
.ui-public-shell .course-content-section .tab-content { padding: 8px 24px 24px; }
.ui-public-shell .course-content-section .tab-content .section-title { font-size: 1.5rem !important; }
.ui-public-shell .course-content-section .course-description { color: var(--ref-text); line-height: 1.7; }
.ui-public-shell .course-content-section .accordion-row { box-shadow: none !important; border: 1px solid var(--ref-border) !important; border-radius: 10px !important; padding: 14px 18px !important; }
.ui-public-shell .course-content-section textarea.form-control { border: 1px solid #d5dee6 !important; border-radius: 10px !important; min-height: 110px; }

/* Sidebar purchase card (order: price + cart first, reservation below) */
.ui-public-shell .course-content-sidebar > .rounded-lg {
    background: #fff; border: 1px solid var(--ref-border) !important; border-radius: 16px !important; box-shadow: var(--ref-shadow) !important; overflow: hidden;
}
.ui-public-shell .course-content-sidebar .course-img { border-radius: 0 !important; margin: 0 !important; }
.ui-public-shell .course-content-sidebar .course-img img { aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; }
.ui-public-shell .course-content-sidebar > .rounded-lg > .px-20 { display: flex; flex-direction: column; padding: 4px 22px 24px !important; }
.ui-public-shell .course-content-sidebar form[action="/cart/store"] { order: 1; }
.ui-public-shell .course-content-sidebar form[action="/cart/reserve"] { order: 2; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--ref-border); }
.ui-public-shell .course-content-sidebar > .rounded-lg > .px-20 > :not(form) { order: 3; }
.ui-public-shell .course-content-sidebar form[action="/cart/store"]::before {
    content: "Inscríbete a este curso"; display: block; margin-top: 18px; padding-left: 12px; border-left: 5px solid #27ae60;
    color: var(--ref-navy); font-size: 1.25rem; font-weight: 800; line-height: 1.2;
}
.ui-public-shell .course-content-sidebar #priceBox, .ui-public-shell .course-content-sidebar .d-flex.justify-content-center.mt-20:has(.font-36) { justify-content: flex-start !important; margin-top: 12px !important; }
.ui-public-shell .course-content-sidebar #priceBox .text-primary, .ui-public-shell .course-content-sidebar .font-36.text-primary {
    color: var(--ref-navy) !important; font-size: 2.2rem !important; font-weight: 800 !important;
}
.ui-public-shell .course-content-sidebar #priceBox .font-30.text-primary { font-size: 2.2rem !important; }
.ui-public-shell .course-content-sidebar strong.text-secondary { color: var(--ref-navy) !important; font-size: 1rem; }
.ui-public-shell .course-content-sidebar form[action="/cart/reserve"] .mt-35 { margin-top: 0 !important; }
.ui-public-shell .course-content-sidebar form[action="/cart/store"] .btn-primary { height: 50px; font-size: 1.05rem !important; }
.ui-public-shell .course-content-sidebar form[action="/cart/reserve"] .btn-primary {
    height: 50px; background: #fff !important; color: var(--ref-teal) !important; border: 2px solid var(--ref-teal) !important; box-shadow: none !important; font-size: 1.05rem !important;
}
.ui-public-shell .course-content-sidebar form[action="/cart/reserve"] .btn-primary:hover { background: var(--ref-teal-soft) !important; }
.ui-public-shell .course-content-sidebar .btn-primary:disabled, .ui-public-shell .course-content-sidebar .btn-primary.disabled { opacity: .55 !important; }
.ui-public-shell .course-content-sidebar .text-gray { color: var(--ref-text) !important; }
.ui-public-shell .course-content-sidebar .mt-35 > strong { font-size: 1.15rem; font-weight: 800 !important; }
.ui-public-shell .course-content-sidebar [data-feather], .ui-public-shell .course-content-sidebar svg.feather { color: var(--ref-teal); }
.ui-public-shell .course-content-sidebar > .rounded-lg > .px-20 > .mt-20.d-flex.text-gray {
    justify-content: flex-start !important; align-items: flex-start !important; padding: 12px 14px; margin-top: 18px !important; background: var(--ref-bg); border-radius: 10px;
}
.ui-public-shell .course-content-sidebar .favorites-share-box { border: 1px solid var(--ref-border) !important; border-radius: 10px !important; margin: 24px 0 0 !important; }
.ui-public-shell .course-content-sidebar .course-teacher-card, .ui-public-shell .course-content-sidebar > .rounded-lg ~ * .rounded-lg {
    background: #fff; border: 1px solid var(--ref-border) !important; border-radius: 16px !important; box-shadow: var(--ref-shadow) !important;
}
@media (min-width: 992px) { .ui-public-shell .course-content-sidebar { position: sticky; top: 96px; align-self: flex-start; } }
.ui-public-shell .course-content-sidebar .course-img { height: auto !important; }
.ui-public-shell .course-content-sidebar .course-img:not(.has-video)::after { display: none !important; }
.ui-public-shell .course-content-sidebar .course-img img { border-radius: 0 !important; width: 100%; }
.ui-public-shell .course-content-section .course-content-sidebar { margin-top: 0 !important; }
.ui-public-shell .course-content-section { top: 0 !important; margin-bottom: 48px !important; }
.ui-public-shell .course-content-section .course-title { min-height: 0 !important; max-height: none !important; overflow: visible !important; }

/* ==========================================================================
   Fase 8: panel del estudiante (refs 10-13)
   ========================================================================== */

/* ---- Barra superior del panel ---- */
.ui-panel-shell #navbar .navbar-toggle-content { display: none !important; }
.ui-panel-shell #navbar { background: #fff !important; border-bottom: 1px solid var(--ref-border) !important; box-shadow: none !important; }
.ui-panel-shell .ui-panel-breadcrumb { align-items: center; gap: 8px; font-size: .9rem; color: var(--ref-muted); margin-right: auto; padding-left: 8px; }
.ui-panel-shell .ui-panel-breadcrumb a { color: var(--ref-muted) !important; display: inline-flex; align-items: center; }
.ui-panel-shell .ui-panel-breadcrumb a:hover { color: var(--ref-teal) !important; }
.ui-panel-shell .ui-panel-breadcrumb .js-ui-panel-crumb { color: var(--ref-navy); font-weight: 600; }
.ui-panel-shell #navbar .ui-nav-search { display: flex !important; width: 300px; max-width: 34vw; margin-right: 14px; }
.ui-panel-shell #navbar .ui-nav-search .form-control {
    height: 42px !important; border-radius: 10px !important; border: 1px solid var(--ref-border) !important;
    background: var(--ref-bg) !important; padding-left: 40px !important; font-size: .9rem; color: var(--ref-text);
}
.ui-panel-shell #navbar .ui-nav-search .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ref-muted); }
.ui-panel-shell #navbar .ui-nav-catalog { margin-right: 14px; }
.ui-panel-shell #navbar .navbar-user img { width: 38px !important; height: 38px !important; border-radius: 50% !important; }

/* ---- Sidebar: columna completa con ayuda y salir al fondo ---- */
@media (min-width: 992px) {
    .ui-panel-shell .panel-sidebar { display: flex !important; flex-direction: column; }
    .ui-panel-shell .panel-sidebar .sidebar-menu { flex: 1 1 auto; min-height: 0; }
}
.ui-panel-shell .ui-sidebar-help {
    margin: 18px 0 10px; padding: 16px; border-radius: var(--ref-radius); background: var(--ref-mint-soft);
    border: 1px solid #cfeadb; display: flex; flex-direction: column; gap: 6px;
}
.ui-panel-shell .ui-sidebar-help-icon { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--ref-green); display: inline-flex; align-items: center; justify-content: center; }
.ui-panel-shell .ui-sidebar-help-title { color: var(--ref-navy); font-size: .95rem; }
.ui-panel-shell .ui-sidebar-help-text { color: var(--ref-muted); font-size: .82rem; margin: 0; }
.ui-panel-shell .ui-sidebar-logout { list-style: none; border-top: 1px solid var(--ref-border); padding-top: 10px; margin-top: 6px; }
.ui-panel-shell .ui-sidebar-logout a { display: flex !important; align-items: center; gap: 10px; color: var(--ref-muted) !important; padding: 10px 12px; border-radius: 10px; font-weight: 500; }
.ui-panel-shell .ui-sidebar-logout a:hover { background: #fdeeee; color: #c0392b !important; }

/* ---- Encabezados de página ---- */
.ui-panel-shell .ui-panel-page-header { margin-bottom: 22px !important; gap: 12px; }
.ui-panel-shell .panel-content .ui-page-header h1.section-title { font-size: 1.75rem !important; font-weight: 700 !important; color: var(--ref-navy) !important; padding-left: 0 !important; }
.ui-panel-shell .panel-content .ui-page-header h1.section-title::before,
.ui-panel-shell .panel-content .ui-page-header h1.section-title::after { display: none !important; }
.ui-panel-shell .ui-panel-date { display: inline-flex; align-items: center; gap: 8px; color: var(--ref-muted); font-size: .9rem; text-transform: capitalize; background: #fff; border: 1px solid var(--ref-border); padding: 8px 14px; border-radius: 10px; }
.ui-panel-shell .ui-card-title { display: flex !important; align-items: center; gap: 10px; font-size: 1rem !important; font-weight: 700 !important; color: var(--ref-navy) !important; margin: 0 0 14px !important; }
.ui-panel-shell .ui-card-title svg { color: var(--ref-teal); flex: 0 0 auto; }
.ui-panel-shell .ui-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--ref-mint-soft); color: var(--ref-green); }

/* ---- Inicio (ref 10) ---- */
.ui-panel-shell .dashboard-banner-container { padding: 20px 24px !important; border: 1px solid var(--ref-border) !important; box-shadow: var(--ref-shadow) !important; border-radius: var(--ref-radius) !important; min-height: 0 !important; }
.ui-panel-shell .dashboard-banner,
.ui-panel-shell .dashboard-banner-container .dashboard-banner img { display: none !important; }
.ui-panel-shell .account-balance-icon { display: none !important; }
.ui-panel-shell .ui-badge-card [data-percent] { display: none !important; }

@media (min-width: 992px) {
    .ui-panel-shell section.dashboard { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
    .ui-panel-shell section.dashboard > .row,
    .ui-panel-shell section.dashboard > .row > [class*="col-"] { display: contents !important; }
    .ui-panel-shell section.dashboard .dashboard-stats { grid-column: span 3; order: 1; margin: 0 !important; }
    .ui-panel-shell section.dashboard .account-balance:not(.ui-badge-card) { grid-column: span 4; order: 3; margin: 0 !important; }
    .ui-panel-shell section.dashboard .ui-badge-card { grid-column: span 4; order: 4; margin: 0 !important; }
    .ui-panel-shell section.dashboard > .row:last-child > [class*="col-"]:first-child > * { grid-column: span 4; order: 2; margin: 0 !important; }
    .ui-panel-shell section.dashboard > .row:last-child > [class*="col-"]:last-child > * { grid-column: span 12; order: 5; margin: 0 !important; }
}
.ui-panel-shell section.dashboard .ui-stat-card,
.ui-panel-shell section.dashboard .noticeboard,
.ui-panel-shell section.dashboard .dashboard-chart {
    background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important;
    box-shadow: var(--ref-shadow) !important; padding: 20px !important; height: 100%;
}
.ui-panel-shell section.dashboard .dashboard-stats { display: flex !important; align-items: center; gap: 14px; }
.ui-panel-shell section.dashboard .dashboard-stats .stat-icon,
.ui-panel-shell section.dashboard .dashboard-stats .stat-icon img { width: 48px !important; height: 48px !important; }
.ui-panel-shell section.dashboard .dashboard-stats .stat-icon { border-radius: 12px !important; background: var(--ref-teal-soft) !important; display: inline-flex; align-items: center; justify-content: center; padding: 10px; flex: 0 0 auto; }
.ui-panel-shell section.dashboard .dashboard-stats strong { font-size: 1.6rem !important; color: var(--ref-navy) !important; line-height: 1.1; }
.ui-panel-shell section.dashboard .dashboard-stats span { color: var(--ref-muted) !important; font-size: .85rem !important; }
.ui-panel-shell .ui-badge-summary { display: flex; align-items: center; gap: 14px; }
.ui-panel-shell .ui-badge-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--ref-mint-soft); color: var(--ref-green); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ui-panel-shell .ui-progress { display: block; height: 8px; border-radius: 999px; background: #e9eef3; overflow: hidden; }
.ui-panel-shell .ui-progress > span { display: block; height: 100%; background: var(--ref-green-grad, var(--ref-green)); border-radius: 999px; }
.ui-panel-shell .ui-badge-percent { font-weight: 700; color: var(--ref-green); font-size: .9rem; }

/* ---- Tarjetas de estadísticas en vistas internas ---- */
.ui-panel-shell .activities-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.ui-panel-shell .activities-container > .row > [class*="col-"] { margin-bottom: 16px; }
.ui-panel-shell .activities-container > .row > [class*="col-"] > div {
    background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow);
    padding: 18px 20px; height: 100%; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px; text-align: left !important;
}
.ui-panel-shell .activities-container > .row > [class*="col-"] > div img { width: 48px !important; height: 48px !important; padding: 10px; border-radius: 12px; background: var(--ref-teal-soft); flex: 0 0 auto; }
.ui-panel-shell .activities-container > .row > [class*="col-"] > div strong { display: block; font-size: 1.5rem !important; color: var(--ref-navy) !important; margin: 0 !important; }
.ui-panel-shell .activities-container > .row > [class*="col-"] > div span { color: var(--ref-muted) !important; font-size: .85rem !important; margin: 0 !important; }
.ui-panel-shell .ui-visually-subtle { font-size: 1.05rem !important; }

/* ---- Mis cursos (ref 11) ---- */
.ui-panel-shell .webinar-card.webinar-list {
    background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important;
    box-shadow: var(--ref-shadow) !important; overflow: hidden; margin-top: 18px !important; padding: 0 !important;
}
.ui-panel-shell .webinar-card.webinar-list .image-box { width: 280px !important; min-width: 280px; height: auto !important; min-height: 190px; border-radius: 0 !important; }
.ui-panel-shell .webinar-card.webinar-list .image-box img { height: 100% !important; object-fit: cover; border-radius: 0 !important; }
.ui-panel-shell .webinar-card.webinar-list .webinar-card-body { padding: 20px 24px !important; display: flex; flex-direction: column; }
.ui-panel-shell .webinar-card.webinar-list .webinar-title { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--ref-navy) !important; }
.ui-panel-shell .webinar-card.webinar-list .badge-dark { background: var(--ref-mint-soft) !important; color: var(--ref-green) !important; border-radius: 999px !important; padding: 5px 10px !important; font-weight: 600; font-size: .75rem; }
.ui-panel-shell .webinar-card.webinar-list .stat-title { color: var(--ref-muted) !important; font-size: .78rem !important; }
.ui-panel-shell .webinar-card.webinar-list .stat-value { color: var(--ref-navy) !important; font-weight: 600; font-size: .88rem !important; }
.ui-panel-shell .webinar-card.webinar-list .progress { height: 6px !important; background: #e9eef3 !important; border-radius: 999px; }
.ui-panel-shell .webinar-card.webinar-list .progress .progress-bar { background: var(--ref-green) !important; }
.ui-panel-shell .ui-course-cta { align-self: flex-start; background: var(--ref-green-grad, var(--ref-green)) !important; border: 0 !important; border-radius: 10px !important; padding: 9px 22px !important; font-weight: 600; color: #fff !important; }
@media (max-width: 767.98px) {
    .ui-panel-shell .webinar-card.webinar-list { flex-direction: column !important; }
    .ui-panel-shell .webinar-card.webinar-list .image-box { width: 100% !important; min-width: 0; height: 180px !important; }
}

/* ---- Certificados (ref 12) y filtros ---- */
.ui-panel-shell .panel-section-card,
.ui-panel-shell .ui-section > .panel-shadow,
.ui-panel-shell .ui-section > .bg-white.rounded-sm {
    border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important;
}
.ui-panel-shell .custom-table thead th { background: var(--ref-bg) !important; color: var(--ref-muted) !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .03em; border: 0 !important; }
.ui-panel-shell .custom-table td { border-top: 1px solid var(--ref-border) !important; vertical-align: middle !important; }
.ui-panel-shell .ui-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; padding: 0; margin: 20px 0 0; }
.ui-panel-shell .ui-steps-item { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ref-border); border-radius: 999px; padding: 8px 16px 8px 8px; color: var(--ref-text); font-size: .88rem; }
.ui-panel-shell .ui-steps-number { width: 28px; height: 28px; border-radius: 50%; background: var(--ref-teal); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; }

/* ---- Configuración (ref 13) ---- */
.ui-panel-shell .ui-settings-layout { align-items: flex-start; }
.ui-panel-shell .ui-settings-main .webinar-progress {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px !important;
    border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important;
}
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item { flex: 0 0 auto; margin: 0 !important; padding: 6px 10px; border-radius: 10px; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item:has(.active) { background: var(--ref-teal-soft); }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon { width: 38px !important; height: 38px !important; padding: 8px !important; background: var(--ref-bg) !important; border: 0 !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon.active { background: var(--ref-teal) !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon.active img { filter: brightness(0) invert(1); }
.ui-panel-shell .ui-settings-main .webinar-progress h4 { font-size: .9rem !important; color: var(--ref-navy) !important; margin: 0; }
.ui-panel-shell #userSettingForm {
    background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); padding: 24px 28px !important;
}
.ui-panel-shell #userSettingForm .section-title { font-size: 1.1rem !important; color: var(--ref-navy) !important; }
.ui-panel-shell #userSettingForm .form-control { border-radius: 10px !important; border-color: var(--ref-border) !important; min-height: 44px; }
.ui-panel-shell #userSettingForm .form-control:focus { border-color: var(--ref-teal) !important; box-shadow: 0 0 0 3px rgba(18,122,137,.15) !important; }
.ui-panel-shell #userSettingForm label.input-label { color: var(--ref-navy) !important; font-weight: 600; font-size: .88rem; }
.ui-panel-shell .ui-settings-main .create-webinar-footer {
    position: sticky; bottom: 0; z-index: 5; background: #fff; border: 1px solid var(--ref-border) !important;
    border-radius: var(--ref-radius); box-shadow: 0 -6px 20px rgba(16,45,67,.06); padding: 12px 18px !important;
}
.ui-panel-shell .ui-settings-main .create-webinar-footer #saveData { padding: 10px 26px !important; border-radius: 10px !important; background: var(--ref-green-grad, var(--ref-green)) !important; border: 0 !important; font-weight: 600; }
.ui-panel-shell .ui-settings-aside { position: sticky; top: 96px; margin-top: 30px; }
.ui-panel-shell .ui-profile-card { background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); padding: 22px; }
.ui-panel-shell .ui-profile-card-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ui-panel-shell .ui-profile-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ref-teal-soft); margin-bottom: 8px; }
.ui-panel-shell .ui-profile-name { color: var(--ref-navy); font-size: 1.05rem; }
.ui-panel-shell .ui-profile-meta { color: var(--ref-muted); font-size: .85rem; word-break: break-word; }
.ui-panel-shell .ui-profile-tip { background: var(--ref-mint-soft); border-color: #cfeadb; }
@media (max-width: 1199.98px) { .ui-panel-shell .ui-settings-aside { position: static; } }

/* ---- Resto de vistas del panel: tarjetas, tablas y filtros coherentes ---- */
.ui-panel-shell .panel-content .section-title { color: var(--ref-navy) !important; }
.ui-panel-shell .panel-content .panel-shadow { box-shadow: var(--ref-shadow) !important; }
.ui-panel-shell .panel-content .rounded-sm { border-radius: var(--ref-radius) !important; }
.ui-panel-shell .panel-content .btn-primary:not(.ui-course-cta) { background: var(--ref-teal) !important; border-color: var(--ref-teal) !important; border-radius: 10px !important; }
.ui-panel-shell .panel-content .no-result { border-radius: var(--ref-radius) !important; }
.ui-panel-shell section.dashboard .dashboard-stats .d-flex.flex-column > span:first-child { font-size: 1.7rem !important; font-weight: 700; color: var(--ref-navy) !important; line-height: 1.1; }
.ui-panel-shell section.dashboard > .row:last-child > [class*="col-"] > .bg-white { background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important; padding: 20px !important; }

/* Fase 8b: barra superior del panel sin desbordes y contenido acotado al ancho */
.ui-panel-shell #navbar .container-fluid { max-width: 100%; }
.ui-panel-shell #navbar .container-fluid > .d-flex { min-width: 0; gap: 12px; }
.ui-panel-shell #navbar .ui-panel-breadcrumb { flex: 0 1 auto; min-width: 0; margin-right: 0; white-space: nowrap; overflow: hidden; }
.ui-panel-shell #navbar .ui-panel-breadcrumb .js-ui-panel-crumb { overflow: hidden; text-overflow: ellipsis; }
.ui-panel-shell #navbar .nav-icons-or-start-live.ui-nav-actions { flex: 1 1 auto !important; min-width: 0; justify-content: flex-end; gap: 10px; }
.ui-panel-shell #navbar .ui-nav-search,
.ui-panel-shell #navbar .ui-nav-search:hover,
.ui-panel-shell #navbar .ui-nav-search:focus-within {
    flex: 0 1 320px; width: auto !important; min-width: 150px; max-width: 320px; height: 42px;
    margin-right: 4px; border: 0 !important; border-left: 0 !important; border-radius: 10px;
}
.ui-panel-shell #navbar .ui-nav-search .form-control,
.ui-panel-shell #navbar .ui-nav-search:hover .form-control,
.ui-panel-shell #navbar .ui-nav-search:focus-within .form-control {
    position: static !important; width: 100% !important; opacity: 1 !important; pointer-events: auto !important;
    padding: 9px 12px 9px 40px !important; box-shadow: none !important; top: auto; right: auto;
}
.ui-panel-shell #navbar .ui-nav-search .search-icon { width: 24px !important; min-width: 24px !important; height: 24px !important; background: transparent !important; margin: 0 !important; z-index: 5; }
.ui-panel-shell #navbar .ui-nav-search .search-icon svg { width: 18px; height: 18px; }
.ui-panel-shell #navbar .ui-nav-catalog { flex: 0 0 auto; margin-right: 0; white-space: nowrap; }
.ui-panel-shell #navbar .ui-nav-icon { flex: 0 0 auto; width: 42px; height: 42px; border-left: 0 !important; }
.ui-panel-shell #navbar .ui-nav-icon svg { width: 20px !important; height: 20px !important; }
.ui-panel-shell #navbar .ui-user-menu { flex: 0 0 auto; }
.ui-panel-shell #navbar .ui-user-menu .user-name { display: none !important; }
.ui-panel-shell #navbar .ui-user-menu .navbar-user { padding: 2px !important; }
.ui-panel-shell #navbar .ui-user-menu .navbar-user::after { margin-left: 6px; }
@media (max-width: 1199.98px) { .ui-panel-shell #navbar .ui-nav-search { flex-basis: 220px; } }

.ui-panel-shell .panel-content { min-width: 0; max-width: 100%; overflow-x: clip; }
.ui-panel-shell .ui-settings-layout > [class*="col-"] { min-width: 0; }
.ui-panel-shell .ui-settings-main .ui-sticky-actions { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
.ui-panel-shell .ui-settings-aside { margin-top: 0; }
@media (max-width: 1199.98px) { .ui-panel-shell .ui-settings-aside { margin-top: 24px; } }

/* Fase 9: avatares con iniciales, iconos de línea, pestañas de configuración y acciones de la barra superior */
.ui-avatar-initials {
    display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important;
    background: var(--ref-teal-soft, #e7f4f6); color: var(--ref-navy, #102d43); font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; user-select: none; line-height: 1; overflow: hidden;
}
.ui-panel-shell .panel-sidebar .user-avatar .ui-avatar-initials { width: 100%; height: 100%; font-size: 1.35rem; }
.ui-panel-shell .panel-sidebar .user-avatar { background: var(--ref-teal-soft) !important; }
#navbar .navbar-user .ui-avatar-initials { width: 38px; height: 38px; font-size: .85rem; }
.ui-panel-shell .ui-profile-card .ui-avatar-initials.ui-profile-avatar { font-size: 1.8rem; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ref-border); }

/* Sidebar: iconos de línea simples */
.ui-panel-shell .panel-sidebar .sidenav-item-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }
.ui-panel-shell .panel-sidebar .ui-sidenav-feather { width: 20px !important; height: 20px !important; color: var(--ref-muted); stroke: currentColor; margin: 0 !important; }
.ui-panel-shell .panel-sidebar .sidenav-item-active .ui-sidenav-feather,
.ui-panel-shell .panel-sidebar .sidenav-item > a:hover .ui-sidenav-feather { color: var(--ref-teal); }
.ui-panel-shell .panel-sidebar .sidenav-item > a > .font-14 { font-size: .92rem !important; }

/* Configuración: pestañas con icono y texto, sin desborde */
.ui-panel-shell .ui-settings-main .webinar-progress { flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item { padding: 4px 12px 4px 4px !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item > div.d-lg-none,
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item > div { display: block !important; margin-left: 8px !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon { width: 34px !important; height: 34px !important; padding: 0 !important; color: var(--ref-muted); }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon img { display: none !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon.active { color: #fff; }
.ui-panel-shell .ui-settings-main .webinar-progress .ui-step-feather { width: 18px; height: 18px; }
.ui-panel-shell .ui-settings-main .webinar-progress h4 { font-size: .86rem !important; font-weight: 600 !important; color: var(--ref-muted) !important; white-space: nowrap; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item:has(.active) h4 { color: var(--ref-navy) !important; }

/* Barra superior: campana y carrito como iconos simples */
.ui-panel-shell #navbar .ui-nav-icon { width: 40px !important; height: 40px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ui-panel-shell #navbar .ui-nav-icon .dropdown { position: static; }
.ui-panel-shell #navbar .ui-nav-icon { position: relative; }
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle {
    position: relative; width: 40px !important; height: 40px !important; padding: 0 !important; display: inline-flex !important;
    align-items: center; justify-content: center; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important;
}
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle:hover { background: var(--ref-bg) !important; }
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle::after { display: none !important; }
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle svg { width: 21px !important; height: 21px !important; margin: 0 !important; color: var(--ref-navy) !important; }
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle .badge {
    position: absolute !important; top: 3px; right: 1px; min-width: 16px; height: 16px !important; width: auto !important; padding: 0 4px !important;
    border-radius: 999px !important; background: var(--ref-green) !important; color: #fff !important; font-size: 10px !important; font-weight: 700;
    line-height: 16px; border: 2px solid #fff; box-sizing: content-box; margin: 0 !important;
}
.ui-panel-shell #navbar .ui-nav-icon .dropdown-toggle:disabled { opacity: 1; }
.ui-panel-shell #navbar .ui-user-menu .navbar-user { gap: 6px; background: transparent !important; border: 0 !important; }

/* Desplegables alineados a la derecha dentro de la pantalla */
#navbar .ui-nav-dropdown.dropdown-menu {
    right: 0 !important; left: auto !important; width: 340px; max-width: calc(100vw - 32px);
    border: 1px solid var(--ref-border, #e3e9ef) !important; border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(16, 45, 67, .12) !important; padding: 12px !important; margin-top: 8px !important;
}
.ui-panel-shell #navbar .ui-nav-dropdown.dropdown-menu { top: 100% !important; transform: none !important; }
#navbar .ui-nav-dropdown.dropdown-menu::before, #navbar .ui-nav-dropdown.dropdown-menu::after { display: none !important; }
#navbar .ui-nav-dropdown .navbar-notification-item { padding: 12px 8px !important; border-radius: 8px; border-bottom: 1px solid var(--ref-border, #e3e9ef) !important; }
#navbar .ui-nav-dropdown a:hover .navbar-notification-item { background: var(--ref-bg, #f5f7fa); }
#navbar .ui-nav-dropdown .navbar-notification-item h4 { font-size: .88rem !important; color: var(--ref-navy, #102d43) !important; white-space: normal; }
#navbar .ui-nav-dropdown .notify-at { font-size: .78rem; color: var(--ref-muted, #5f6f80); }
#navbar .ui-nav-dropdown .ui-btn-outline-teal.btn-danger {
    background: #fff !important; color: var(--ref-teal, #127a89) !important; border: 1.5px solid var(--ref-teal, #127a89) !important;
    border-radius: 10px !important; font-weight: 600; padding: 9px 12px !important; box-shadow: none !important;
}
#navbar .ui-nav-dropdown .ui-btn-outline-teal.btn-danger:hover { background: var(--ref-teal-soft, #e7f4f6) !important; }

/* ==========================================================================
   Fase 10: panel del estudiante, estructura de refs 10-13
   ========================================================================== */
.ui-panel-shell .ui-panel-date { text-transform: none !important; }
.ui-panel-shell .panel-content > .ui-dashboard-head,
.ui-panel-shell .panel-content > section.ui-dashboard-head { margin: 0 0 18px !important; padding: 0 !important; }
.ui-panel-shell .ui-dashboard-head .ui-page-header { margin-bottom: 0 !important; }
.ui-panel-shell .panel-content h1.section-title { font-size: 2rem !important; letter-spacing: -.02em; }

/* Botones y elementos comunes */
.ui-btn-outline-green { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ref-green) !important; color: var(--ref-green) !important; background: #fff !important; border-radius: 10px !important; font-weight: 600; padding: 9px 18px !important; }
.ui-btn-outline-green:hover { background: var(--ref-mint-soft) !important; }
.ui-panel-shell .ui-btn-outline-teal { border-radius: 10px !important; font-weight: 600; }
.ui-panel-shell .ui-link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ref-teal) !important; font-weight: 600; font-size: .9rem; }
.ui-panel-shell .ui-link-arrow:hover { text-decoration: underline; }
.ui-panel-shell .ui-link-small { color: var(--ref-teal) !important; font-weight: 600; font-size: .88rem; }
.ui-panel-shell .ui-card-action { width: 100%; display: inline-flex !important; justify-content: center; align-items: center; gap: 8px; padding: 9px 14px !important; }
.ui-panel-shell .ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ref-border); padding-bottom: 12px; margin-bottom: 16px; }
.ui-panel-shell .ui-card-head .ui-card-title { margin: 0 !important; }
.ui-panel-shell .ui-dash-card > .ui-card-title { border-bottom: 1px solid var(--ref-border); padding-bottom: 12px; margin-bottom: 16px !important; font-size: 1.1rem !important; }

.ui-panel-shell .ui-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.ui-panel-shell .ui-status-pill.is-soon { background: #fdf0dc; color: #a35f00; }
.ui-panel-shell .ui-status-pill.is-upcoming { background: var(--ref-teal-soft); color: var(--ref-teal); }
.ui-panel-shell .ui-status-pill.is-active { background: var(--ref-mint-soft); color: var(--ref-green); }
.ui-panel-shell .ui-status-pill.is-done { background: #eef1f4; color: var(--ref-muted); }
.ui-panel-shell .ui-date-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ref-mint-soft); color: var(--ref-green); border-radius: 6px; padding: 4px 8px; font-size: .78rem; font-weight: 600; }

/* ---- Inicio ---- */
.ui-panel-shell .ui-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.ui-panel-shell .ui-dash-grid > * { min-width: 0; }
.ui-panel-shell .ui-dash-card,
.ui-panel-shell .ui-dash-cell > .ui-card,
.ui-panel-shell .ui-dash-cell > .ui-stat-card {
    background: #fff !important; border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important;
    box-shadow: var(--ref-shadow) !important; padding: 20px 22px !important; height: 100%; margin: 0 !important;
}
.ui-panel-shell .ui-dash-cell > .ui-card:hover, .ui-panel-shell .ui-dash-cell > .ui-stat-card:hover { transform: none !important; }
.ui-panel-shell .ui-dash-next { grid-column: span 8; }
.ui-panel-shell .ui-dash-activity { grid-column: span 4; }
.ui-panel-shell .ui-dash-courses { grid-column: span 7; }
.ui-panel-shell .ui-dash-agenda { grid-column: span 5; }
.ui-panel-shell .ui-dash-cell { grid-column: span 4; display: flex; flex-direction: column; }
@media (max-width: 1199.98px) {
    .ui-panel-shell .ui-dash-next, .ui-panel-shell .ui-dash-activity, .ui-panel-shell .ui-dash-courses, .ui-panel-shell .ui-dash-agenda { grid-column: span 12; }
    .ui-panel-shell .ui-dash-cell { grid-column: span 6; }
}
@media (max-width: 767.98px) { .ui-panel-shell .ui-dash-cell { grid-column: span 12; } }

.ui-panel-shell .ui-next-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 20px; align-items: stretch; }
.ui-panel-shell .ui-next-title { font-size: 1.35rem; font-weight: 800; color: var(--ref-navy); margin: 0 0 12px; line-height: 1.25; }
.ui-panel-shell .ui-next-title a { color: inherit !important; }
.ui-panel-shell .ui-next-line { display: flex; align-items: flex-start; gap: 10px; color: var(--ref-text); font-size: .95rem; margin: 0 0 10px; }
.ui-panel-shell .ui-next-line svg { color: var(--ref-muted); flex: 0 0 auto; margin-top: 2px; }
.ui-panel-shell .ui-next-line strong { display: block; color: var(--ref-navy); }
.ui-panel-shell .ui-next-line small { display: block; color: var(--ref-muted); font-size: .8rem; }
.ui-panel-shell .ui-next-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ui-panel-shell .ui-next-actions .btn { min-width: 150px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.ui-panel-shell .ui-next-media { display: block; border-radius: 12px; overflow: hidden; min-height: 200px; background: var(--ref-bg); }
.ui-panel-shell .ui-next-media img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
@media (max-width: 767.98px) { .ui-panel-shell .ui-next-body { grid-template-columns: 1fr; } .ui-panel-shell .ui-next-media { order: -1; } }

.ui-panel-shell .ui-activity-list { list-style: none; margin: 0; padding: 0; }
.ui-panel-shell .ui-activity-list li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ref-border); }
.ui-panel-shell .ui-activity-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-panel-shell .ui-activity-list strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ref-navy); line-height: 1.1; }
.ui-panel-shell .ui-activity-list span:not(.ui-kpi-icon) { color: var(--ref-muted); font-size: .9rem; }
.ui-panel-shell .ui-kpi-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--ref-teal-soft); color: var(--ref-teal); display: inline-flex; align-items: center; justify-content: center; }

.ui-panel-shell .ui-mini-courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-panel-shell .ui-mini-course { display: flex; gap: 14px; border: 1px solid var(--ref-border); border-radius: 12px; padding: 12px; min-width: 0; }
.ui-panel-shell .ui-mini-media { flex: 0 0 112px; border-radius: 10px; overflow: hidden; background: var(--ref-bg); }
.ui-panel-shell .ui-mini-media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
.ui-panel-shell .ui-mini-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-panel-shell .ui-mini-body h3 { font-size: 1rem; font-weight: 800; color: var(--ref-navy); margin: 0; line-height: 1.25; }
.ui-panel-shell .ui-mini-body h3 a { color: inherit !important; }
.ui-panel-shell .ui-mini-body p { font-size: .8rem; color: var(--ref-muted); margin: 0; }
.ui-panel-shell .ui-mini-body .btn { margin-top: auto; }
@media (max-width: 767.98px) { .ui-panel-shell .ui-mini-courses { grid-template-columns: 1fr; } }

.ui-panel-shell .ui-agenda { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.ui-panel-shell .ui-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ui-panel-shell .ui-calendar-head strong { color: var(--ref-navy); font-size: .95rem; }
.ui-panel-shell .ui-calendar-head button { border: 0; background: transparent; color: var(--ref-navy); width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.ui-panel-shell .ui-calendar-head button:hover { background: var(--ref-bg); }
.ui-panel-shell .ui-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ui-panel-shell .ui-cal-dow { font-size: .72rem; color: var(--ref-muted); padding-bottom: 6px; }
.ui-panel-shell .ui-cal-day { font-size: .82rem; color: var(--ref-text); height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.ui-panel-shell .ui-cal-day.is-today { background: var(--ref-teal); color: #fff; font-weight: 700; }
.ui-panel-shell .ui-cal-day.has-event { background: var(--ref-mint-soft); color: var(--ref-green); font-weight: 700; }
.ui-panel-shell .ui-cal-day.is-today.has-event { background: var(--ref-teal); color: #fff; }
.ui-panel-shell .ui-agenda-list { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--ref-border); }
.ui-panel-shell .ui-agenda-list li { position: relative; padding: 0 0 14px 16px; }
.ui-panel-shell .ui-agenda-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ref-teal); }
.ui-panel-shell .ui-agenda-list li:nth-child(2n)::before { background: var(--ref-green); }
.ui-panel-shell .ui-agenda-list a { display: block; color: var(--ref-text) !important; }
.ui-panel-shell .ui-agenda-list strong { display: block; color: var(--ref-navy); font-size: .88rem; line-height: 1.25; }
.ui-panel-shell .ui-agenda-list span { display: block; color: var(--ref-muted); font-size: .8rem; }
.ui-panel-shell .ui-agenda-list .ui-agenda-empty { color: var(--ref-muted); font-size: .85rem; }
.ui-panel-shell .ui-agenda-list .ui-agenda-empty::before { background: var(--ref-border); }
@media (max-width: 575.98px) { .ui-panel-shell .ui-agenda { grid-template-columns: 1fr; } .ui-panel-shell .ui-agenda-list { border-left: 0; padding-left: 0; } }

.ui-panel-shell .ui-dash-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--ref-muted); }
.ui-panel-shell .ui-dash-empty p { margin: 0; }

/* Avisos, Mi cuenta e insignia */
.ui-panel-shell .ui-dash-notices .dashboard-banner-container { display: flex; flex-direction: column; }
.ui-panel-shell .ui-dash-notices .dashboard-banner-container h2 { font-size: 1rem !important; line-height: 1.3 !important; margin: 0 !important; }
.ui-panel-shell .ui-dash-notices .dashboard-banner-container h2 .ui-card-title { border-bottom: 1px solid var(--ref-border); padding-bottom: 12px; margin-bottom: 10px !important; font-size: 1.1rem !important; }
.ui-panel-shell .ui-dash-notices .dashboard-banner-container h2 > span:not(.ui-card-title) { color: var(--ref-muted) !important; font-size: .85rem !important; font-weight: 500 !important; }
.ui-panel-shell .ui-dash-notices .unread-notification-lists { list-style: none; padding: 0; margin: 12px 0 0 !important; display: flex; flex-direction: column; gap: 8px; }
.ui-panel-shell .ui-notice-item { display: flex; align-items: center; gap: 12px; background: var(--ref-mint-soft); border-radius: 10px; padding: 12px 14px; }
.ui-panel-shell .ui-notice-check { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--ref-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ui-panel-shell .ui-notice-item strong { display: block; color: var(--ref-navy); font-size: .9rem; }
.ui-panel-shell .ui-notice-item small { display: block; color: var(--ref-muted); font-size: .78rem; }
.ui-panel-shell .ui-notice-empty { color: var(--ref-muted); font-size: .9rem; margin: 12px 0 0; }
.ui-panel-shell .ui-dash-notices .ui-card-action,
.ui-panel-shell .ui-dash-balance .ui-card-action,
.ui-panel-shell .ui-dash-badge .ui-card-action { margin-top: auto !important; }
.ui-panel-shell .ui-dash-balance .account-balance,
.ui-panel-shell .ui-dash-badge .account-balance { display: flex !important; flex-direction: column; }
.ui-panel-shell .ui-dash-balance .account-balance > .text-center { text-align: left !important; }
.ui-panel-shell .ui-dash-balance .account-balance h3.text-gray { margin-top: 4px !important; font-size: .9rem !important; color: var(--ref-muted) !important; }
.ui-panel-shell .ui-balance-amount { font-size: 2rem !important; font-weight: 800 !important; color: var(--ref-navy) !important; }
.ui-panel-shell .ui-balance-amount small { font-size: 1.1rem; font-weight: 800; }
.ui-panel-shell .ui-dash-balance .account-balance > .border-top { border: 0 !important; padding-top: 4px !important; margin-top: 4px !important; justify-content: flex-start !important; }
.ui-panel-shell .ui-dash-balance .account-balance > .border-top span { font-size: .85rem !important; }
.ui-panel-shell .ui-dash-badge .ui-badge-hint { color: var(--ref-muted); font-size: .88rem; margin: 12px 0 0; }
.ui-panel-shell .ui-dash-badge .account-balance > .border-top { font-size: .85rem; }
.ui-panel-shell .ui-dash-badge .account-balance > .border-top span { font-size: .85rem !important; }
.ui-panel-shell .ui-dash-badge .ui-badge-icon { width: 64px; height: 64px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); border-radius: 0; background: var(--ref-mint-soft); }

/* Más actividad */
.ui-panel-shell section.dashboard.ui-dash-more { display: block !important; margin-top: 8px; }
.ui-panel-shell .ui-section-subtitle { font-size: 1.05rem !important; font-weight: 700; color: var(--ref-navy); margin: 0 0 14px; }
.ui-panel-shell .ui-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ui-panel-shell .ui-dash-stats .dashboard-stats { margin: 0 !important; padding: 14px 16px !important; }
.ui-panel-shell .ui-dash-stats .dashboard-stats .stat-icon,
.ui-panel-shell .ui-dash-stats .dashboard-stats .stat-icon img { width: 40px !important; height: 40px !important; }
.ui-panel-shell .ui-dash-stats .dashboard-stats .d-flex.flex-column > span:first-child { font-size: 1.3rem !important; }
.ui-panel-shell .ui-dash-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ui-panel-shell .ui-dash-bottom > .ui-card { margin: 0 !important; }
.ui-panel-shell .ui-dash-bottom .monthly-sales-chart { max-height: 220px; }
.ui-panel-shell .ui-dash-bottom .monthly-sales-chart canvas { max-height: 220px; }
@media (max-width: 991.98px) { .ui-panel-shell .ui-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-panel-shell .ui-dash-bottom { grid-template-columns: 1fr; } }

/* ---- Tarjetas KPI (Mis cursos, Certificados) ---- */
.ui-panel-shell .ui-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ui-panel-shell .ui-kpi-card { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); padding: 18px 22px; min-width: 0; }
.ui-panel-shell .ui-kpi-card .ui-kpi-icon { width: 60px; height: 60px; flex-basis: 60px; }
.ui-panel-shell .ui-kpi-legacy-icon { display: none !important; }
.ui-panel-shell .ui-kpi-value { display: block; font-size: 1.75rem; font-weight: 800; color: var(--ref-navy); line-height: 1.1; }
.ui-panel-shell .ui-kpi-label { display: block; color: var(--ref-muted); font-size: .95rem; }
.ui-panel-shell .ui-kpi-grid-stacked .ui-kpi-label { color: var(--ref-navy); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.ui-panel-shell .ui-kpi-note { display: block; color: var(--ref-muted); font-size: .82rem; }
@media (max-width: 767.98px) { .ui-panel-shell .ui-kpi-grid { grid-template-columns: 1fr; } }

/* ---- Mis cursos ---- */
.ui-panel-shell .ui-toolbar-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); padding: 14px 16px; margin-bottom: 18px; }
.ui-panel-shell .ui-toolbar-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.ui-panel-shell .ui-toolbar-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ref-muted); }
.ui-panel-shell .ui-toolbar-search .form-control { padding-left: 40px !important; height: 42px !important; border-radius: 10px !important; border: 1px solid var(--ref-border) !important; background: #fff; }
.ui-panel-shell .ui-status-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid var(--ref-border); border-radius: 10px; padding: 3px; }
.ui-panel-shell .ui-pill { border: 0; background: transparent; color: var(--ref-text); font-weight: 500; font-size: .88rem; padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
.ui-panel-shell .ui-pill:hover { background: var(--ref-bg); }
.ui-panel-shell .ui-pill.is-active { background: var(--ref-teal); color: #fff; font-weight: 600; }
.ui-panel-shell .ui-view-toggle { display: inline-flex; border: 1px solid var(--ref-border); border-radius: 10px; overflow: hidden; }
.ui-panel-shell .ui-view-toggle button { border: 0; background: #fff; color: var(--ref-muted); width: 42px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.ui-panel-shell .ui-view-toggle button.is-active { background: var(--ref-teal-soft); color: var(--ref-teal); }
.ui-panel-shell .ui-toolbar-select { position: relative; flex: 0 0 190px; }
.ui-panel-shell .ui-toolbar-select svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ref-muted); pointer-events: none; }
.ui-panel-shell .ui-toolbar-select .form-control { padding-left: 36px !important; height: 42px !important; border-radius: 10px !important; border: 1px solid var(--ref-border) !important; }
.ui-panel-shell .ui-toolbar-switch { flex: 1 0 100%; display: flex; justify-content: flex-end; border-top: 1px dashed var(--ref-border); padding-top: 10px; margin: 0; }
.ui-panel-shell .ui-toolbar-switch label.text-gray { font-size: .82rem !important; }

.ui-panel-shell .ui-course-list { display: flex; flex-direction: column; gap: 16px; }
.ui-panel-shell .ui-course-list .webinar-card.webinar-list.ui-course-row { margin: 0 !important; padding: 16px !important; gap: 20px; align-items: stretch; flex-direction: row !important; }
.ui-panel-shell .ui-course-row .image-box { width: 232px !important; min-width: 232px !important; height: 160px !important; min-height: 0 !important; border-radius: 10px !important; overflow: hidden; position: relative; }
.ui-panel-shell .ui-course-row .image-box img { width: 100%; height: 100% !important; object-fit: cover; }
.ui-panel-shell .ui-course-row .image-box .badge { position: absolute; top: 10px; left: 10px; font-size: .7rem; border-radius: 6px; padding: 4px 8px; }
.ui-panel-shell .ui-course-row .image-box .progress { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 5px !important; }
.ui-panel-shell .ui-course-row .ui-course-row-body { padding: 0 !important; gap: 10px; min-width: 0; }
.ui-panel-shell .ui-course-row .webinar-title { font-size: 1.2rem !important; font-weight: 800 !important; margin: 0; line-height: 1.25; }
.ui-panel-shell .ui-course-row .ui-type-chip { align-self: flex-start; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; }
.ui-panel-shell .ui-course-people { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.ui-panel-shell .ui-course-person { display: inline-flex; align-items: center; gap: 10px; color: var(--ref-text); font-size: .9rem; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--ref-border); }
.ui-panel-shell .ui-course-person:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ui-panel-shell .ui-course-person svg { color: var(--ref-muted); }
.ui-panel-shell .ui-course-person .stat-value { color: var(--ref-text) !important; font-weight: 500 !important; font-size: .9rem !important; }
.ui-panel-shell .ui-course-person-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover; font-size: .72rem; }
.ui-panel-shell .ui-course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.ui-panel-shell .ui-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ref-text); padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--ref-border); white-space: nowrap; }
.ui-panel-shell .ui-meta-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ui-panel-shell .ui-meta-item svg { color: var(--ref-muted); }
.ui-panel-shell .ui-meta-item .stat-title { color: var(--ref-muted) !important; font-size: .85rem !important; }
.ui-panel-shell .ui-meta-item .stat-value { color: var(--ref-text) !important; font-weight: 500 !important; font-size: .85rem !important; }
.ui-panel-shell .ui-meta-price.webinar-price-box { margin: 0 !important; }
.ui-panel-shell .ui-meta-price .real { color: var(--ref-navy) !important; font-weight: 800 !important; font-size: .95rem !important; }
.ui-panel-shell .ui-meta-price .off { font-size: .8rem !important; }
.ui-panel-shell .ui-course-extra { display: flex; align-items: center; gap: 14px; color: var(--ref-muted); font-size: .75rem; }
.ui-panel-shell .ui-course-extra .ui-course-rate { margin: 0 !important; }
.ui-panel-shell .ui-course-extra .stars-card svg { width: 13px !important; height: 13px !important; }
.ui-panel-shell .ui-course-extra .stars-card .badge { font-size: .65rem; padding: 2px 6px; background: var(--ref-bg) !important; color: var(--ref-muted) !important; }
.ui-panel-shell .ui-course-extra .stat-title, .ui-panel-shell .ui-course-extra .stat-value { font-size: .75rem !important; color: var(--ref-muted) !important; font-weight: 500 !important; }
.ui-panel-shell .ui-course-row-side { flex: 0 0 230px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; position: relative; padding-top: 24px; }
.ui-panel-shell .ui-course-row-side .table-actions { position: absolute; top: -4px; right: 0; }
.ui-panel-shell .ui-course-row-side .ui-status-pill { align-self: flex-start; }
.ui-panel-shell .ui-course-row-side .ui-course-cta { width: 100%; text-align: center; padding: 11px 16px !important; font-size: 1rem; }
.ui-panel-shell .ui-course-list.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-panel-shell .ui-course-list.is-grid .webinar-card.webinar-list.ui-course-row { flex-direction: column !important; }
.ui-panel-shell .ui-course-list.is-grid .ui-course-row .image-box { width: 100% !important; min-width: 0 !important; height: 180px !important; }
.ui-panel-shell .ui-course-list.is-grid .ui-course-row-side { flex: 0 0 auto; padding-top: 0; }
.ui-panel-shell .ui-course-list.is-grid .ui-course-row-side .table-actions { top: -200px; }
@media (max-width: 1199.98px) {
    .ui-panel-shell .ui-course-list .webinar-card.webinar-list.ui-course-row { flex-wrap: wrap; }
    .ui-panel-shell .ui-course-row-side { flex: 1 0 100%; flex-direction: row; align-items: center; padding-top: 0; }
    .ui-panel-shell .ui-course-row-side .table-actions { position: static; order: 3; }
    .ui-panel-shell .ui-course-row-side .ui-course-cta { width: auto; }
}
@media (max-width: 767.98px) {
    .ui-panel-shell .ui-course-list .webinar-card.webinar-list.ui-course-row { flex-direction: column !important; }
    .ui-panel-shell .ui-course-row .image-box { width: 100% !important; min-width: 0 !important; }
    .ui-panel-shell .ui-course-list.is-grid { grid-template-columns: 1fr; }
}
.ui-panel-shell .ui-filter-empty { display: flex; align-items: center; gap: 10px; color: var(--ref-muted); background: #fff; border: 1px dashed var(--ref-border); border-radius: var(--ref-radius); padding: 18px; margin-top: 12px; }
.ui-panel-shell .ui-filter-empty.d-none { display: none !important; }
.ui-panel-shell .ui-subtabs { display: flex; gap: 8px; border-bottom: 1px solid var(--ref-border); margin: 28px 0 16px; }
.ui-panel-shell .ui-subtab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--ref-muted) !important; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.ui-panel-shell .ui-subtab:first-child { color: var(--ref-teal) !important; border-bottom-color: var(--ref-teal); }
.ui-panel-shell .ui-subtab:hover { color: var(--ref-teal) !important; }
.ui-panel-shell .ui-tip-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(90deg, var(--ref-mint-soft), #f4fbf8); border: 1px solid #d7eee2; border-radius: var(--ref-radius); padding: 18px 20px; margin-bottom: 24px; }
.ui-panel-shell .ui-tip-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: #fff; color: var(--ref-green); display: inline-flex; align-items: center; justify-content: center; }
.ui-panel-shell .ui-tip-text { flex: 1 1 auto; }
.ui-panel-shell .ui-tip-text strong { display: block; color: var(--ref-navy); font-size: 1.1rem; }
.ui-panel-shell .ui-tip-text span { color: var(--ref-muted); }
@media (max-width: 767.98px) { .ui-panel-shell .ui-tip-banner { flex-wrap: wrap; } }

/* ---- Notificaciones ---- */
.ui-panel-shell .ui-notification-list .ui-notification-card { border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius) !important; box-shadow: var(--ref-shadow) !important; margin-top: 12px !important; padding: 16px 20px !important; }
.ui-panel-shell .ui-notification-card .notification-badge { width: 10px !important; height: 10px !important; min-width: 10px; padding: 0 !important; border-radius: 50% !important; background: var(--ref-green) !important; position: absolute; left: 10px; top: 50%; margin: 0 !important; transform: translateY(-50%); }
.ui-panel-shell .ui-notification-card .row > [class*="col-"]:first-child { position: relative; padding-left: 30px; gap: 14px; align-items: center !important; }
.ui-panel-shell .ui-notification-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--ref-teal-soft); color: var(--ref-teal); display: inline-flex; align-items: center; justify-content: center; }
.ui-panel-shell .ui-notification-card .notification-title { font-size: .98rem !important; color: var(--ref-navy) !important; margin: 0; }
.ui-panel-shell .ui-notification-card .notification-time { color: var(--ref-muted) !important; }
.ui-panel-shell .ui-notification-card .js-show-message { border: 1.5px solid var(--ref-teal) !important; color: var(--ref-teal) !important; background: #fff !important; border-radius: 10px !important; font-weight: 600; padding: 7px 22px !important; }
.ui-panel-shell .ui-notification-card .js-show-message.seen-at { border-color: var(--ref-border) !important; color: var(--ref-muted) !important; }

/* ---- Certificados ---- */
.ui-panel-shell .ui-filter-panel { background: #fff !important; padding: 18px 20px !important; margin-top: 0 !important; }
.ui-panel-shell .ui-filter-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ref-border); padding-bottom: 12px; margin-bottom: 14px; }
.ui-panel-shell .ui-filter-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1.4fr 1.2fr .9fr auto; gap: 14px; align-items: end; }
.ui-panel-shell .ui-filter-grid .form-group { margin: 0 !important; min-width: 0; }
.ui-panel-shell .ui-filter-grid .input-label { font-size: .85rem !important; color: var(--ref-navy) !important; font-weight: 500 !important; }
.ui-panel-shell .ui-filter-grid .form-control { height: 42px !important; border-radius: 10px !important; border: 1px solid var(--ref-border) !important; }
.ui-panel-shell .ui-filter-grid .input-group .form-control { border-left: 0 !important; border-radius: 0 10px 10px 0 !important; }
.ui-panel-shell .ui-filter-grid .input-group-text { background: #fff !important; border: 1px solid var(--ref-border) !important; border-right: 0 !important; border-radius: 10px 0 0 10px !important; }
.ui-panel-shell .ui-filter-grid .input-group-text svg { color: var(--ref-muted) !important; }
.ui-panel-shell .ui-filter-submit .btn { height: 42px; padding: 0 22px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .95rem; }
@media (max-width: 1199.98px) { .ui-panel-shell .ui-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ui-panel-shell .ui-filter-grid { grid-template-columns: 1fr; } }
.ui-panel-shell .ui-cert-empty { background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); padding: 36px 24px 28px; text-align: center; }
.ui-panel-shell .ui-cert-empty-icon { width: 120px; height: 120px; border-radius: 50%; background: var(--ref-mint-soft); color: var(--ref-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ui-panel-shell .ui-cert-empty-title { font-size: 1.5rem; font-weight: 800; color: var(--ref-navy); margin: 0 0 6px; }
.ui-panel-shell .ui-cert-empty-text { color: var(--ref-muted); margin: 0 0 20px; }
.ui-panel-shell .ui-cert-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.ui-panel-shell .ui-cert-empty-actions .btn { min-width: 220px; padding: 10px 20px !important; }
.ui-panel-shell .ui-steps.ui-steps-line { gap: 0; margin-top: 28px; }
.ui-panel-shell .ui-steps-line .ui-steps-item { border: 0; border-radius: 0; background: transparent; padding: 4px 36px; font-weight: 700; color: var(--ref-navy); border-right: 1px solid var(--ref-border); }
.ui-panel-shell .ui-steps-line .ui-steps-item:last-child { border-right: 0; }
.ui-panel-shell .ui-steps-line .ui-steps-number { background: var(--ref-mint-soft); color: var(--ref-green); border-radius: 8px; width: 36px; height: 36px; }
.ui-panel-shell .ui-info-banner { display: flex; align-items: center; gap: 14px; background: var(--ref-teal-soft); border-radius: var(--ref-radius); padding: 14px 18px; margin-bottom: 24px; color: var(--ref-text); }
.ui-panel-shell .ui-info-banner > svg { color: var(--ref-teal); flex: 0 0 auto; }
.ui-panel-shell .ui-info-banner p { margin: 0; flex: 1 1 auto; font-size: .92rem; }
.ui-panel-shell .ui-info-banner strong { color: var(--ref-navy); margin-right: 6px; }

/* ---- Configuración ---- */
.ui-panel-shell .ui-settings-main .webinar-progress {
    background: #fff !important; padding: 0 12px !important; gap: 0 !important; border-radius: var(--ref-radius) !important; flex-wrap: wrap !important;
}
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item { padding: 14px 16px 12px !important; border-radius: 0 !important; border-bottom: 3px solid transparent; background: transparent !important; position: relative; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item + .progress-item::before { content: ""; position: absolute; left: 0; top: 50%; height: 22px; transform: translateY(-50%); border-left: 1px solid var(--ref-border); }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item:has(.active) { border-bottom-color: var(--ref-green); background: transparent !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon,
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon.active { background: transparent !important; width: 24px !important; height: 24px !important; color: var(--ref-muted) !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-icon.active { color: var(--ref-teal) !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .ui-step-feather { width: 20px; height: 20px; }
.ui-panel-shell .ui-settings-main .webinar-progress h4 { font-size: .95rem !important; font-weight: 500 !important; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item:has(.active) h4 { color: var(--ref-teal) !important; font-weight: 700 !important; }
.ui-panel-shell #userSettingForm { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 18px !important; }
.ui-panel-shell .ui-settings-card { background: #fff; border: 1px solid var(--ref-border); border-radius: var(--ref-radius); box-shadow: var(--ref-shadow); padding: 20px 22px 6px; margin-bottom: 18px; }
.ui-panel-shell .ui-settings-card > .ui-card-title { font-size: 1.15rem !important; margin-bottom: 4px !important; }
.ui-panel-shell .ui-settings-card-sub { color: var(--ref-muted); font-size: .9rem; margin: 0; }
.ui-panel-shell .ui-settings-card .row.mt-15 { border-top: 1px solid var(--ref-border); padding-top: 14px; margin-top: 12px !important; }
.ui-panel-shell .ui-settings-footer-note { color: var(--ref-muted); font-size: .85rem; }
.ui-panel-shell .ui-settings-main .create-webinar-footer .ui-btn-outline-teal { padding: 10px 26px !important; }
.ui-panel-shell .ui-profile-card-body { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 18px !important; }
.ui-panel-shell .ui-profile-card .ui-profile-avatar { width: 96px !important; height: 96px !important; flex: 0 0 96px; margin: 0 !important; }
.ui-panel-shell .ui-profile-card .ui-avatar-initials.ui-profile-avatar { font-size: 2rem; }
.ui-panel-shell .ui-profile-id { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ui-panel-shell .ui-profile-role { color: var(--ref-muted); }
.ui-panel-shell .ui-completion { border-top: 1px solid var(--ref-border); margin-top: 18px; padding-top: 16px; }
.ui-panel-shell .ui-completion-head { display: flex; justify-content: space-between; color: var(--ref-navy); margin-bottom: 8px; }
.ui-panel-shell .ui-completion-head span { font-weight: 700; }
.ui-panel-shell .ui-completion-list { list-style: none; margin: 12px 0 0; padding: 0; }
.ui-panel-shell .ui-completion-list li + li { border-top: 1px solid var(--ref-border); }
.ui-panel-shell .ui-completion-list a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ref-text) !important; }
.ui-panel-shell .ui-completion-list .is-done svg:first-child { color: var(--ref-green); }
.ui-panel-shell .ui-completion-list .is-pending svg:first-child { color: #d48a1a; }
/* Fase 10b: ajustes tras render de prueba */
.ui-panel-shell section.dashboard.ui-dash-more .ui-dash-stats .dashboard-stats { grid-column: auto !important; order: 0 !important; height: auto; }
.ui-panel-shell section.dashboard.ui-dash-more .ui-dash-bottom > * { grid-column: auto !important; order: 0 !important; }
.ui-panel-shell .ui-dash-notices .ui-card-action.ui-btn-outline-teal { background: #fff !important; color: var(--ref-teal) !important; border: 1.5px solid var(--ref-teal) !important; }
.ui-panel-shell .ui-dash-notices .ui-card-action.ui-btn-outline-teal:hover { background: var(--ref-teal-soft) !important; }
.ui-panel-shell .ui-course-list .webinar-card.webinar-list.ui-course-row .image-box { width: 232px !important; min-width: 232px !important; height: 160px !important; min-height: 0 !important; align-self: center; flex: 0 0 232px; }
.ui-panel-shell .ui-course-list.is-grid .webinar-card.webinar-list.ui-course-row .image-box { width: 100% !important; min-width: 0 !important; height: 180px !important; flex: 0 0 auto; }
.ui-panel-shell .ui-course-row .ui-course-row-title { display: block; }
.ui-panel-shell .ui-course-row .ui-course-row-title .webinar-title { margin: 0 !important; padding: 0 !important; }
.ui-panel-shell .ui-course-row .ui-course-row-body { justify-content: center; }
.ui-panel-shell .ui-course-row .ui-type-chip { border: 0 !important; background: var(--ref-mint-soft) !important; color: var(--ref-green) !important; }
.ui-panel-shell .ui-settings-main .webinar-progress { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: thin; }
.ui-panel-shell .ui-settings-main .webinar-progress .progress-item { padding: 14px 12px 12px !important; flex: 0 0 auto; }
.ui-panel-shell .ui-settings-main .webinar-progress h4 { font-size: .9rem !important; }
.ui-panel-shell .ui-filter-head .ui-card-title { margin: 0 !important; }
.ui-panel-shell .ui-course-list .webinar-card.webinar-list .webinar-card-body.ui-course-row-body { padding: 4px 0 !important; }
.ui-panel-shell .ui-course-list .webinar-card.webinar-list .webinar-title { height: auto !important; min-height: 0 !important; max-height: none !important; }

/* ==========================================================================
   Fase 11: Resumen del admin (/admin)
   ========================================================================== */
.ui-admin-shell .ui-chart-box { height: 300px; }
.ui-admin-shell .ui-dash-chart-card .card-header h4,
.ui-admin-shell .ui-dash-comments .card-header h4,
.ui-admin-shell .ui-list-card .card-header h5 { color: var(--ref-navy) !important; font-weight: 700 !important; font-size: 1.05rem !important; }
.ui-admin-shell .ui-dash-chart-card .statistic-details { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px !important; }
.ui-admin-shell .ui-dash-chart-card .statistic-details-item { background: var(--ref-bg); border: 1px solid var(--ref-border); border-radius: 10px; padding: 12px 14px !important; text-align: left !important; width: auto !important; margin: 0 !important; display: flex; flex-direction: column; }
.ui-admin-shell .ui-dash-chart-card .statistic-details-item .detail-name { order: 1; color: var(--ref-muted) !important; font-size: .82rem !important; letter-spacing: 0 !important; }
.ui-admin-shell .ui-dash-chart-card .statistic-details-item .detail-value { order: 2; color: var(--ref-navy) !important; font-size: 1.25rem !important; font-weight: 800 !important; margin: 2px 0 !important; }
.ui-admin-shell .ui-dash-chart-card .statistic-details-item > .text-muted { order: 3; font-size: .78rem !important; }
.ui-admin-shell .ui-dash-chart-card .statistic-details-item .text-primary { color: var(--ref-green) !important; }
@media (max-width: 767.98px) { .ui-admin-shell .ui-dash-chart-card .statistic-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Comentarios recientes */
.ui-admin-shell .ui-dash-comments .list-unstyled-border li { border-bottom: 1px solid var(--ref-border) !important; padding-bottom: 14px !important; margin-bottom: 14px !important; }
.ui-admin-shell .ui-dash-comments .ui-comment-avatar { width: 42px !important; height: 42px !important; flex: 0 0 42px; font-size: .82rem; object-fit: cover; }
.ui-admin-shell .ui-dash-comments .media-title { color: var(--ref-navy) !important; font-weight: 700 !important; font-size: .92rem !important; margin-bottom: 2px !important; }
.ui-admin-shell .ui-dash-comments .float-right.text-primary { color: var(--ref-muted) !important; font-size: .75rem !important; }
.ui-admin-shell .ui-dash-comments .text-small.text-muted { color: var(--ref-muted) !important; font-size: .82rem !important; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-admin-shell .ui-btn-block { width: 100%; }
.ui-admin-shell .ui-btn-outline-teal { background: #fff !important; color: var(--ref-teal) !important; border: 1.5px solid var(--ref-teal) !important; border-radius: 10px !important; font-weight: 600; padding: 9px 16px !important; box-shadow: none !important; }
.ui-admin-shell .ui-btn-outline-teal:hover { background: var(--ref-teal-soft) !important; }

/* Listas: tickets, cursos en vivo y cursos */
.ui-admin-shell .card.card-hero.ui-list-card { display: flex; flex-direction: column; overflow: hidden; }
.ui-admin-shell .card.card-hero.ui-list-card .card-header {
    background: #fff !important; background-image: none !important; color: var(--ref-navy) !important; padding: 18px 20px 14px !important;
    display: grid !important; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
    border-bottom: 1px solid var(--ref-border) !important; min-height: 0 !important; overflow: visible !important; position: relative;
}
.ui-admin-shell .card.card-hero.ui-list-card .card-header .card-icon {
    position: static !important; grid-row: 1 / span 2; width: 44px !important; height: 44px !important; margin: 0 !important;
    border-radius: 12px !important; background: var(--ref-teal-soft) !important; display: flex !important; align-items: center; justify-content: center;
    font-size: 18px !important; line-height: 1 !important; color: var(--ref-teal) !important; opacity: 1 !important; transform: none !important; overflow: hidden;
}
.ui-admin-shell .card.card-hero.ui-list-card .card-header .card-icon i { font-size: 18px !important; color: var(--ref-teal) !important; opacity: 1 !important; position: static !important; }
.ui-admin-shell .card.card-hero.ui-list-card .card-header h5 { margin: 0 !important; line-height: 1.2 !important; }
.ui-admin-shell .card.card-hero.ui-list-card .card-header .card-description { color: var(--ref-muted) !important; font-size: .8rem !important; margin: 2px 0 0 !important; }
.ui-admin-shell .ui-list-card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.ui-admin-shell .ui-list-card .tickets-list { display: flex; flex-direction: column; flex: 1 1 auto; }
.ui-admin-shell .ui-list-card .ticket-item { display: block; padding: 14px 20px !important; border-bottom: 1px solid var(--ref-border) !important; margin: 0 !important; }
.ui-admin-shell .ui-list-card .ticket-item:hover { background: var(--ref-bg) !important; }
.ui-admin-shell .ui-list-card .ticket-title h4 { color: var(--ref-navy) !important; font-size: .92rem !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 0 0 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-admin-shell .ui-list-card .ticket-info { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ref-muted) !important; font-size: .8rem !important; }
.ui-admin-shell .ui-list-card .ticket-info .bullet { width: 4px; height: 4px; border-radius: 50%; background: var(--ref-border); margin: 0 2px !important; display: inline-block; }
.ui-admin-shell .ui-list-card .ticket-info .bullet::after { display: none !important; }
.ui-admin-shell .ui-list-card .ticket-more { margin-top: auto !important; border-bottom: 0 !important; text-align: center; color: var(--ref-teal) !important; font-weight: 600; font-size: .88rem; }
.ui-admin-shell .ui-list-empty { padding: 28px 20px; color: var(--ref-muted); font-size: .9rem; text-align: center; }
.ui-admin-shell .ui-list-empty i { color: var(--ref-green); margin-right: 6px; }
.ui-admin-shell .ui-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.ui-admin-shell .ui-badge.is-success { background: var(--ref-mint-soft); color: var(--ref-green); }
.ui-admin-shell .ui-badge.is-warning { background: #fdf0dc; color: #a35f00; }
.ui-admin-shell .ui-badge.is-info { background: var(--ref-teal-soft); color: var(--ref-teal); }
.ui-admin-shell .ui-badge.is-danger { background: #fdecec; color: #c0392b; }
.ui-admin-shell .ui-badge.is-muted { background: #eef1f4; color: var(--ref-muted); }
.ui-admin-shell .ui-avatar-initials { background: var(--ref-teal-soft); color: var(--ref-navy); }

/* Fase 11b: balance de columnas en Resumen admin */
@media (min-width: 992px) {
  .ui-admin-shell .ui-dash-comments .list-unstyled-border {
    max-height: 430px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    scrollbar-width: thin;
  }
  .ui-admin-shell .col-lg-8 > .ui-dash-chart-card,
  .ui-admin-shell .ui-dash-comments {
    height: calc(100% - 30px) !important;
  }
}
.ui-admin-shell .ui-dash-comments .ui-btn-block { justify-content: center !important; text-align: center !important; }
.ui-admin-shell .ui-dash-comments .media-body .float-right { color: var(--ref-muted) !important; }

/* Fase 12: encabezado de catálogo (/categories, /classes) con buscador completo */
.ui-public-shell .site-top-banner.ui-page-intro {
  height: auto !important;
  max-height: none !important;
  min-height: 220px !important;
}
.ui-public-shell .site-top-banner.ui-page-intro .container,
.ui-public-shell .site-top-banner.ui-page-intro .container > .row {
  height: auto !important;
  min-height: 220px !important;
}
.ui-public-shell .site-top-banner.ui-page-intro .container > .row > [class*="col-"] {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.ui-public-shell .ui-page-intro-content {
  max-width: 820px !important;
  gap: 18px 16px !important;
}
.ui-public-shell .ui-page-intro-content .course-count-badge {
  align-self: center !important;
  margin-top: 0 !important;
  padding: 7px 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.ui-public-shell .ui-page-intro-content .search-input {
  max-width: 600px !important;
  padding: 5px !important;
  border: 1px solid var(--ref-border, #e3e9ef) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(16, 45, 67, .06) !important;
}
.ui-public-shell .ui-page-intro-content .search-input:focus-within {
  border-color: var(--ref-teal, #127a89) !important;
  box-shadow: 0 0 0 3px rgba(18, 122, 137, .12) !important;
}
.ui-public-shell .ui-page-intro-content .search-input .form-group { gap: 6px; }
.ui-public-shell .ui-page-intro-content .search-input .form-control,
.ui-public-shell .ui-page-intro-content .search-input .form-control:focus {
  min-height: 42px !important;
  height: 42px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}
.ui-public-shell .ui-page-intro-content .search-input .btn {
  flex: 0 0 auto;
  min-width: 108px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
@media (max-width: 767.98px) {
  .ui-public-shell .ui-page-intro-content { grid-template-columns: 1fr !important; }
  .ui-public-shell .ui-page-intro-content .course-count-badge { margin-left: 18px !important; justify-self: start; }
}
/* Barra de filtros: nunca más ancha que su contenedor */
.ui-public-shell .ui-filter-toolbar { max-width: 100%; overflow: hidden; }
.ui-public-shell .ui-filter-toolbar > .row { flex-wrap: wrap; }
@media (min-width: 992px) {
  .ui-public-shell .ui-filter-toolbar > .row > .col-lg-6 { flex-wrap: wrap; row-gap: 10px; }
}
.ui-public-shell .site-top-banner.ui-page-intro { padding-top: 0 !important; padding-bottom: 0 !important; }
.ui-public-shell .site-top-banner.ui-page-intro .container,
.ui-public-shell .site-top-banner.ui-page-intro .container > .row { max-height: none !important; }
.ui-public-shell .site-top-banner.ui-page-intro .ui-page-intro-content { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 767.98px) {
  .ui-public-shell .site-top-banner.ui-page-intro .container > .row > [class*="col-"] { padding-top: 28px !important; padding-bottom: 28px !important; }
}

/* Fase 13: detalle de curso, una sola tarjeta en la columna derecha */
.ui-public-shell .course-content-sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ui-public-shell .ui-course-tabs-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.ui-public-shell .ui-course-facts + .ui-course-tabs-section,
.ui-public-shell .ui-course-tabs-section .ui-course-tabs-wrap { margin-top: 24px !important; }