:root {
    --vs-navy-deep: #0E2A47;
    --vs-navy-royal: #123B68;
    --vs-gold: #C89A3D;
    --vs-gold-dark: #A87F2E;
    --vs-gold-surface: #F5EDD8;
    --vs-bg-blue-grey: #E8EEF6;
    --vs-text-navy-dark: #0A1F38;
    --vs-text-muted: #555770;
    --vs-border: #D4D8E2;
}

/* Corporate card accent + avatar palette (used by list IndexCard views). */
.vs-card-accent { border-color: var(--vs-gold-dark) !important; }
.vs-avatar-1 { background-color: var(--vs-navy-deep) !important; }
.vs-avatar-2 { background-color: var(--vs-navy-royal) !important; }
.vs-avatar-3 { background-color: var(--vs-gold-dark) !important; }
.vs-avatar-4 { background-color: var(--vs-text-muted) !important; }

/* Corporate horizontal topbar tokens. */
html[data-layout="topnav"][data-skin="material"][data-topbar-color="dark"] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: var(--vs-text-navy-dark);
    --ins-topbar-item-hover-color: var(--vs-navy-royal);
    --ins-topbar-search-bg: #ffffff;
    --ins-topbar-search-border: var(--vs-border);
}

html[data-layout="topnav"] .app-topbar {
    border-bottom: 1px solid var(--vs-border);
    box-shadow: 0 2px 8px rgba(10, 31, 56, 0.06);
}

/* The active topnav rule consumes the hover token. */
html[data-layout="topnav"][data-skin="material"][data-menu-color="light"] {
    --ins-sidenav-item-hover-color: var(--vs-navy-royal);
    --ins-sidenav-item-active-color: var(--vs-navy-royal);
}

/* Bootstrap text-light uses !important and bypasses --ins-topbar-item-color. */
html[data-layout="topnav"] .app-topbar .text-light {
    color: var(--vs-text-navy-dark) !important;
}

html[data-layout="topnav"] .app-topbar .text-light:hover,
html[data-layout="topnav"] .app-topbar .text-light:focus,
html[data-layout="topnav"] .app-topbar .text-light:active {
    color: var(--vs-navy-royal) !important;
}

/* The partner-name span has an inline white color on the white topbar. */
html[data-layout="topnav"] .app-topbar .d-none.d-lg-inline[title] {
    color: var(--vs-text-navy-dark) !important;
}

/* The dark-topbar stock rule gives the search icon and placeholder white colors. */
html[data-layout="topnav"][data-skin="material"][data-topbar-color="dark"] .app-topbar .app-search .app-search-icon {
    color: var(--vs-text-muted) !important;
}

html[data-layout="topnav"][data-skin="material"][data-topbar-color="dark"] .app-topbar .app-search input::placeholder {
    color: var(--vs-text-muted) !important;
    opacity: 1;
}

html[data-layout="topnav"][data-skin="material"][data-topbar-color="dark"] .app-topbar .app-search .topbar-search {
    border-color: var(--vs-border) !important;
    border-radius: 0.5rem;
}

html[data-layout="topnav"][data-skin="material"][data-topbar-color="dark"] .app-topbar .app-search .topbar-search:focus {
    border-color: var(--vs-gold-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.18);
    outline: 0;
}

html[data-layout="topnav"][data-skin="material"][data-topbar-color="dark"] .app-topbar .app-search .topbar-search:focus-visible {
    outline: 2px solid var(--vs-navy-royal);
    outline-offset: 1px;
}

/* Existing active-nav behavior plus a decorative corporate underline. */
html[data-layout="topnav"] .topnav .nav-item.active > a {
    border-bottom: 2px solid var(--vs-gold);
    border-radius: 0 0 0.3rem 0.3rem;
}

html[data-layout="topnav"] .app-topbar a:focus-visible,
html[data-layout="topnav"] .app-topbar button:focus-visible,
html[data-layout="topnav"] .topnav .nav-link:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

/* Match the layout's high-specificity, !important footer background rules. */
html[data-layout="topnav"] body > .wrapper > .content-page > footer.footer {
    background-color: var(--vs-navy-deep) !important;
    color: #D5D9E5;
    border-top: 1px solid var(--vs-navy-royal) !important;
}

html[data-layout="topnav"] footer.footer a.text-success {
    color: var(--vs-gold) !important;
}

html[data-layout="topnav"] footer.footer a.text-success:hover,
html[data-layout="topnav"] footer.footer a.text-success:focus {
    color: var(--vs-gold) !important;
    text-decoration: underline;
}

html[data-layout="topnav"] footer.footer .vs-footer-brand {
    color: var(--vs-gold) !important;
    font-weight: 600;
}

/* Corporate button palette (used by list IndexCard views). */
.vs-btn-primary { background-color: var(--vs-navy-royal) !important; border-color: var(--vs-navy-royal) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(14, 42, 71, 0.18); }
.vs-btn-primary:hover, .vs-btn-primary:focus { background-color: var(--vs-navy-deep) !important; border-color: var(--vs-gold) !important; color: #fff !important; }
.vs-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35); }
.vs-btn-outline { background-color: transparent !important; border-color: var(--vs-gold-dark) !important; color: var(--vs-navy-deep) !important; }
.vs-btn-outline:hover, .vs-btn-outline:focus { background-color: var(--vs-navy-deep) !important; border-color: var(--vs-navy-deep) !important; color: #fff !important; }
.vs-btn-link { color: var(--vs-navy-deep) !important; }
.vs-btn-link:hover, .vs-btn-link:focus { color: var(--vs-navy-deep) !important; text-decoration: underline !important; }

.filter-toolbar .btn-purple {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #fff !important;
}
.filter-toolbar .btn-purple:hover,
.filter-toolbar .btn-purple:focus {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #fff !important;
}
.filter-toolbar .btn-outline-purple {
    background-color: transparent !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
.filter-toolbar .btn-outline-purple:hover,
.filter-toolbar .btn-outline-purple:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #fff !important;
}
.filter-toolbar .btn-secondary {
    background-color: transparent !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
.filter-toolbar .btn-secondary:hover,
.filter-toolbar .btn-secondary:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #fff !important;
}

.vs-premium-banner {
    background-color: var(--vs-gold-surface) !important;
    border-left: 4px solid var(--vs-gold-dark) !important;
}
.vs-premium-banner .fa-crown {
    color: var(--vs-gold) !important;
}
.vs-premium-banner strong {
    color: var(--vs-navy-deep) !important;
}
.vs-premium-banner .text-muted {
    color: var(--vs-text-muted) !important;
}

/* =========================================================
   Corporate opt-in list utilities (Horoscope list view only)
   Scoped to the authenticated horizontal layout and the opt-in
   wrappers so other SHSS list screens are unaffected.
   ========================================================= */

/* --- List toolbar --- */
html[data-layout="topnav"] .vs-list-toolbar .filter-toolbar {
    background-color: #ffffff;
    border: 1px solid var(--vs-border);
    border-radius: 0.5rem;
    box-shadow: none;
}

html[data-layout="topnav"] .vs-list-toolbar .form-control,
html[data-layout="topnav"] .vs-list-toolbar .form-select {
    background-color: #ffffff;
    border-color: var(--vs-border);
}

html[data-layout="topnav"] .vs-list-toolbar .form-control::placeholder {
    color: var(--vs-text-muted);
    opacity: 1;
}

html[data-layout="topnav"] .vs-list-toolbar .form-control:focus,
html[data-layout="topnav"] .vs-list-toolbar .form-control:focus-visible,
html[data-layout="topnav"] .vs-list-toolbar .form-select:focus,
html[data-layout="topnav"] .vs-list-toolbar .form-select:focus-visible {
    border-color: var(--vs-gold-dark);
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.18);
    outline: 0;
}

/* Find -> corporate primary navy */
html[data-layout="topnav"] .vs-list-toolbar .btn-purple:not(:disabled) {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-list-toolbar .btn-purple:not(:disabled):hover,
html[data-layout="topnav"] .vs-list-toolbar .btn-purple:not(:disabled):focus,
html[data-layout="topnav"] .vs-list-toolbar .btn-purple:not(:disabled):focus-visible {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
}

/* Advanced Filter -> corporate gold-dark outline + navy */
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-purple:not(:disabled) {
    background-color: transparent !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-purple:not(:disabled):hover,
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-purple:not(:disabled):focus,
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-purple:not(:disabled):focus-visible {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #ffffff !important;
}

/* Download + pager -> restrained corporate outline (Clear filter keeps danger) */
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-secondary:not(:disabled),
html[data-layout="topnav"] .vs-list-toolbar .btn-secondary:not(:disabled) {
    background-color: transparent !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-secondary:not(:disabled):hover,
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-secondary:not(:disabled):focus,
html[data-layout="topnav"] .vs-list-toolbar .btn-outline-secondary:not(:disabled):focus-visible,
html[data-layout="topnav"] .vs-list-toolbar .btn-secondary:not(:disabled):hover,
html[data-layout="topnav"] .vs-list-toolbar .btn-secondary:not(:disabled):focus,
html[data-layout="topnav"] .vs-list-toolbar .btn-secondary:not(:disabled):focus-visible {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #ffffff !important;
}

/* Visible focus for actual toolbar controls */
html[data-layout="topnav"] .vs-list-toolbar .btn:focus-visible,
html[data-layout="topnav"] .vs-list-toolbar .form-control:focus-visible,
html[data-layout="topnav"] .vs-list-toolbar .form-select:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- List record card --- */
html[data-layout="topnav"] .vs-list-card {
    border: 1px solid var(--vs-border) !important;
    border-left: 3px solid var(--vs-gold-dark) !important;
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html[data-layout="topnav"] .vs-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10);
    border-left-color: var(--vs-gold) !important;
}

/* Refined name/metadata hierarchy (opt-in only) */
html[data-layout="topnav"] .vs-list-card h5.fw-bold {
    color: var(--vs-navy-deep);
}

html[data-layout="topnav"] .vs-list-card .badge.bg-light {
    background-color: #ffffff !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
}

/* Visible focus for actual card action controls */
html[data-layout="topnav"] .vs-list-card .btn:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Edit / Delete actions inside corporate list cards (opt-in) --- */
/* Edit: restrained pale-gold corporate action (not a warning color) */
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-warning {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-warning:hover,
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-warning:focus {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-warning:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35);
}

/* Delete: soft destructive at rest, explicit danger on hover/focus */
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-danger {
    background-color: rgba(var(--ins-danger-rgb), 0.10) !important;
    border-color: var(--ins-danger-border-subtle) !important;
    color: var(--ins-danger) !important;
}
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-danger:hover,
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-danger:focus {
    background-color: var(--ins-danger) !important;
    border-color: var(--ins-danger) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-list-card .crud-icons .btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--ins-danger-rgb), 0.35);
}

/* Reduced motion for the opt-in list card */
@media (prefers-reduced-motion: reduce) {
    html[data-layout="topnav"] .vs-list-card,
    html[data-layout="topnav"] .vs-list-card:hover {
        transition: none;
        transform: none;
    }
}

/* =========================================================
   Corporate opt-in DETAIL-PAGE utilities (Horoscope Details)
   Scoped to .vs-detail-shell so unrelated screens are unaffected.
   Visual-only; semantic/astrology colors are intentionally NOT
   overridden here (success/warning/danger/info, KP palette,
   chart internals, Dasa live-period markers).
   ========================================================= */

/* Opt-in boundary + header hooks (descendant rules do the work) */
html[data-layout="topnav"] .vs-detail-shell {
    color: inherit;
}
html[data-layout="topnav"] .vs-detail-header {
    /* hook for future detail-header theming; no forced background */
}

/* Unified corporate chart-title hierarchy (decorative titles only) */
html[data-layout="topnav"] .vs-detail-shell .vs-detail-chart-title {
    color: var(--vs-navy-royal);
}

/* --- Vedic/KP mode selector (inactive text) --- */
html[data-layout="topnav"] .vs-detail-shell .horo-view-selector .nav-link:not(.active) {
    color: var(--vs-navy-deep) !important;
}

/* --- Primary detail navigation --- */
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-primary-navigation .nav-link {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-primary-navigation .nav-link:hover {
    color: var(--vs-navy-deep) !important;
    background-color: #ffffff;
    border-color: var(--vs-border);
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-primary-navigation .nav-link.active {
    color: #ffffff !important;
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    border-bottom: 3px solid var(--vs-navy-royal) !important;
    box-shadow: 0 0.125rem 0.35rem rgba(14, 42, 71, 0.2);
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-primary-navigation .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.3);
}

/* --- Secondary detail navigation (desktop + mobile, gold active accent) --- */
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-secondary-navigation .nav-link {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-secondary-navigation .nav-link:hover {
    color: var(--vs-navy-deep) !important;
    background-color: #f8f9fa;
    border-color: var(--vs-border);
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-secondary-navigation .nav-link.active {
    color: var(--vs-navy-royal) !important;
    background-color: #ffffff;
    border-color: var(--vs-border) var(--vs-border) #ffffff;
    border-bottom: 3px solid var(--vs-gold) !important;
    font-weight: 700;
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-secondary-navigation .nav-link:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(200, 154, 61, 0.35);
}
html[data-layout="topnav"] .vs-detail-shell #horoscope-workspace-navigation .horoscope-secondary-navigation .nav-link.active i {
    color: inherit !important;
}

/* --- Facts content panel headings (decorative text-primary -> navy) --- */
html[data-layout="topnav"] .vs-detail-shell #tab-HoroscopeFacts .card-header .text-primary {
    color: var(--vs-navy-royal) !important;
}

/* --- Planetary Positions table header (scoped, JS-generated) --- */
html[data-layout="topnav"] .vs-detail-shell #GiragaSpudam table thead th {
    background-color: var(--vs-gold-surface) !important;
    color: var(--vs-text-navy-dark) !important;
    border-color: var(--vs-border) !important;
}

/* --- Dasa Bukthi: current Mahadasa chrome (decorative bg-primary -> navy) --- */
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent .card.border-primary {
    border-color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent .card-header.bg-primary {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent .card-header.bg-primary .text-white {
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent .card-header.bg-primary .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent td > a {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent td > a:hover,
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent td > a:focus {
    color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-detail-shell #DasaBukthiContent td > a:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Consultation: decorative purple/primary AI branding -> corporate navy/gold (scoped) --- */
html[data-layout="topnav"] .vs-detail-shell .text-purple {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-detail-shell .btn-purple {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell .btn-outline-purple {
    background-color: transparent !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-detail-shell .btn-outline-purple:hover,
html[data-layout="topnav"] .vs-detail-shell .btn-outline-purple:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-Questions .text-primary,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .text-primary {
    color: var(--vs-navy-royal) !important;
}

/* --- Consultation Practice pane: headings, metadata, and premium actions --- */
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .card-header h5.text-secondary {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .form-label.text-secondary {
    color: var(--vs-text-navy-dark) !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .card-header h5 .badge.bg-secondary {
    background-color: #ffffff !important;
    border: 1px solid var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice #initial-question-uiPractice .d-flex.align-items-center.justify-content-between > .badge {
    background-color: #ffffff !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice #btnGetAnswerPractice {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice #btnGetAnswerPractice:hover,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice #btnGetAnswerPractice:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice #btnGetAnswerPractice:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice > .row.mb-4 > .col-md-4.mb-3 > .bg-white.rounded > a.btn-warning {
    background-color: var(--vs-gold) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice > .row.mb-4 > .col-md-4.mb-3 > .bg-white.rounded > a.btn-warning:hover,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice > .row.mb-4 > .col-md-4.mb-3 > .bg-white.rounded > a.btn-warning:focus {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #ffffff !important;
}

/* --- Consultation: normal answer action --- */
html[data-layout="topnav"] .vs-detail-shell #tab-Questions #btnGetAnswer {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-Questions #btnGetAnswer:hover,
html[data-layout="topnav"] .vs-detail-shell #tab-Questions #btnGetAnswer:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #ffffff !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-Questions #btnGetAnswer:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Consultation: decorative KPI icon palette (status colors remain untouched) --- */
html[data-layout="topnav"] .vs-detail-shell #tab-Questions .card-body > .row > .col-6.col-md-3.mb-3 > .fa-check-circle,
html[data-layout="topnav"] .vs-detail-shell #tab-Questions .card-body > .row > .col-6.col-md-3.mb-3 > .fa-users,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .card-body > .row > .col-6.col-md-3.mb-3 > .fa-check-circle,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .card-body > .row > .col-6.col-md-3.mb-3 > .fa-users {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-detail-shell #tab-Questions .card-body > .row > .col-6.col-md-3.mb-3 > .fa-star,
html[data-layout="topnav"] .vs-detail-shell #tab-Questions .card-body > .row > .col-6.col-md-3.mb-3 > .fa-bolt,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .card-body > .row > .col-6.col-md-3.mb-3 > .fa-star,
html[data-layout="topnav"] .vs-detail-shell #tab-QuestionsPractice .card-body > .row > .col-6.col-md-3.mb-3 > .fa-bolt {
    color: var(--vs-gold-dark) !important;
}

/* =========================================================
   MyProfile page corporate theme
   ========================================================= */

/* Page background */
html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 {
    background-color: var(--vs-bg-blue-grey);
    border-radius: 0.75rem;
    padding: 0.5rem 0;
}

/* Main card: subtle border + shadow */
html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 > .col-12 > .card {
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.06);
    overflow: hidden;
}

/* Card header */
html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 > .col-12 > .card > .card-header {
    border-bottom: 1px solid var(--vs-border);
    background-color: #ffffff;
}

/* Page title */
html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 h4.mb-0.fw-bold {
    color: var(--vs-navy-deep);
}

/* Section labels: navy instead of Bootstrap blue */
html[data-layout="topnav"] .section-label {
    color: var(--vs-navy-royal) !important;
}

html[data-layout="topnav"] .section-label::after {
    background-color: var(--vs-border);
}

/* Accordion: corporate chrome */
html[data-layout="topnav"] #profileAccordion {
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(14, 42, 71, 0.05);
}

html[data-layout="topnav"] #profileAccordion .accordion-item {
    border: none;
    border-bottom: 1px solid var(--vs-border);
}

html[data-layout="topnav"] #profileAccordion .accordion-item:last-child {
    border-bottom: none;
}

html[data-layout="topnav"] #profileAccordion .accordion-button {
    color: var(--vs-navy-deep);
    font-weight: 600;
    background-color: #ffffff;
    border-bottom: 1px solid var(--vs-border);
}

html[data-layout="topnav"] #profileAccordion .accordion-button:not(.collapsed) {
    color: var(--vs-navy-royal);
    background-color: #f8f9fc;
    border-bottom: 1px solid var(--vs-border);
}

html[data-layout="topnav"] #profileAccordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(18, 59, 104, 0.15);
    border-color: var(--vs-border);
}

html[data-layout="topnav"] #profileAccordion .accordion-button::after {
    filter: brightness(0.4) saturate(0.5);
}

/* Primary buttons inside MyProfile: corporate navy via .vs-btn class */
html[data-layout="topnav"] .vs-btn {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #fff !important;
}

html[data-layout="topnav"] .vs-btn:hover,
html[data-layout="topnav"] .vs-btn:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}

/* Outline preview button: corporate accent */
html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 .btn-outline-primary {
    color: var(--vs-navy-royal) !important;
    border-color: var(--vs-gold-dark) !important;
}

html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 .btn-outline-primary:hover,
html[data-layout="topnav"] .container-fluid .row.mt-4.mb-4 .btn-outline-primary:focus {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}

/* Subscription banner: gold left border for Pro, navy for Standard */
html[data-layout="topnav"] .container-fluid .card.border-0.shadow-sm[style*="border-left"] {
    border-radius: 0.5rem;
}

/* Form controls: corporate border */
html[data-layout="topnav"] .container-fluid .form-control,
html[data-layout="topnav"] .container-fluid .form-select {
    border-color: var(--vs-border);
}

html[data-layout="topnav"] .container-fluid .form-control:focus,
html[data-layout="topnav"] .container-fluid .form-select:focus {
    border-color: var(--vs-gold-dark);
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.15);
}

/* Public visibility card */
html[data-layout="topnav"] .container-fluid .card.bg-light.border-0 {
    background-color: #f8f9fc !important;
    border: 1px solid var(--vs-border) !important;
}

/* Upgrade CTA for non-professional users */
html[data-layout="topnav"] .container-fluid .card[style*="linear-gradient(135deg, #667eea"] {
    background: linear-gradient(135deg, var(--vs-navy-deep) 0%, var(--vs-navy-royal) 100%) !important;
}

/* ===== Review Approval (Astrologer area) scoped visual refinement ===== */
/* KPI cards: neutral surface, semantic icon badge only */
.vs-review-approval .vs-review-kpi {
    background-color: #fff;
    border: 1px solid var(--vs-border);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(14, 42, 71, 0.06);
}
.vs-review-approval .vs-review-kpi-count {
    color: var(--vs-text-navy-dark);
}
.vs-review-approval .vs-review-kpi-label {
    color: var(--vs-text-muted);
}
.vs-review-approval .vs-review-kpi-icon {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vs-review-approval .vs-review-kpi-icon-warning { background-color: var(--vs-gold-dark); }
.vs-review-approval .vs-review-kpi-icon-success { background-color: #1F9254; }
.vs-review-approval .vs-review-kpi-icon-rating  { background-color: var(--vs-navy-royal); }

/* Refresh: secondary action */
.vs-review-approval .vs-review-refresh {
    background-color: #fff;
    color: var(--vs-text-navy-dark);
    border-color: var(--vs-border);
}
.vs-review-approval .vs-review-refresh:hover,
.vs-review-approval .vs-review-refresh:focus {
    background-color: var(--vs-gold-surface);
    border-color: var(--vs-gold-dark);
    color: var(--vs-navy-deep);
}

/* Tabs */
.vs-review-approval .nav-link {
    color: var(--vs-text-muted);
}
.vs-review-approval .nav-link:hover {
    color: var(--vs-navy-royal);
}
.vs-review-approval .nav-link.active {
    color: var(--vs-navy-deep);
    border-bottom: 2px solid var(--vs-gold);
}
.vs-review-approval .nav-link i {
    color: var(--vs-text-muted);
}
.vs-review-approval .nav-link.active i {
    color: var(--vs-gold-dark);
}

/* Empty state: soft neutral, readable message */
.vs-review-approval .vs-review-empty-icon {
    background-color: var(--vs-bg-blue-grey);
}
.vs-review-approval .vs-review-empty-icon i {
    color: var(--vs-text-muted);
    opacity: 1;
}
.vs-review-approval .vs-review-empty-msg {
    color: var(--vs-text-muted);
}

/* ===== Helpdesk / Ticket index corporate theme ===== */

/* Main list card */
.vs-ticket-index .container-fluid > .row > .col-12 > .card {
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.06);
}

.vs-ticket-index .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--vs-border);
}

.vs-ticket-index .card-header h4.mb-0 {
    color: var(--vs-navy-deep);
}

/* Stat cards: rounded, Total uses corporate navy instead of Bootstrap blue */
.vs-ticket-index .stat-card {
    border-radius: 0.75rem;
}

.vs-ticket-index .stat-card.border-primary {
    border-color: var(--vs-navy-royal) !important;
}

/* Blue text (KPI label, subject link, meta icons): corporate navy */
.vs-ticket-index .text-primary,
.vs-ticket-index .text-info {
    color: var(--vs-navy-royal) !important;
}

/* Status badges: Open -> navy, Closed -> navy-dark; semantics preserved */
.vs-ticket-index .badge.bg-primary {
    background-color: var(--vs-navy-royal) !important;
}

.vs-ticket-index .badge.bg-dark {
    background-color: var(--vs-text-navy-dark) !important;
}

/* Outline buttons (empty-state create, per-card View): gold border accent */
.vs-ticket-index .btn-outline-primary {
    color: var(--vs-navy-royal) !important;
    border-color: var(--vs-gold-dark) !important;
}

.vs-ticket-index .btn-outline-primary:hover,
.vs-ticket-index .btn-outline-primary:focus {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}

/* Modal drill-down table */
.vs-ticket-index .modal-content {
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
}

.vs-ticket-index .modal-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--vs-border);
}

.vs-ticket-index .modal-title {
    color: var(--vs-navy-deep);
}

.vs-ticket-index .table thead th {
    color: var(--vs-text-muted);
    font-weight: 600;
}

/* Loading spinner: corporate navy */
.vs-ticket-index .spinner-border.text-primary {
    color: var(--vs-navy-royal) !important;
}

/* ===== Helpdesk / Ticket create corporate theme ===== */

/* Main form card */
.vs-ticket-create > .row > .col-12 > .card {
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.06);
}

.vs-ticket-create .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--vs-border);
}

.vs-ticket-create .card-title {
    color: var(--vs-navy-deep);
}

.vs-ticket-create .form-label {
    color: var(--vs-text-navy-dark);
    font-weight: 600;
}

/* Back to list: neutral secondary action */
.vs-ticket-create .btn-secondary {
    background-color: #ffffff !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-text-navy-dark) !important;
}

.vs-ticket-create .btn-secondary:hover,
.vs-ticket-create .btn-secondary:focus {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}

/* Selectize dropdowns: corporate border */
.vs-ticket-create .selectize-input {
    border-color: var(--vs-border);
}

.vs-ticket-create .selectize-input.focus {
    border-color: var(--vs-gold-dark);
}

/* ===== Helpdesk / Ticket details corporate theme ===== */

/* Main shell card */
.vs-ticket-details > .row > .col-12 > .card {
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.06);
}

.vs-ticket-details .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--vs-border);
}

.vs-ticket-details .card-header h4.mb-0 {
    color: var(--vs-navy-deep);
}

/* Metadata card: navy accent instead of Bootstrap blue */
.vs-ticket-details .border-primary {
    border-color: var(--vs-navy-royal) !important;
}

/* Blue text (toggle link, sender names): corporate navy */
.vs-ticket-details .text-primary {
    color: var(--vs-navy-royal) !important;
}

/* Status badge: Open -> corporate navy; semantics preserved */
.vs-ticket-details .badge.bg-primary {
    background-color: var(--vs-navy-royal) !important;
}

/* Back to list / attachment buttons: neutral with gold hover accent */
.vs-ticket-details .btn-outline-secondary {
    color: var(--vs-text-navy-dark) !important;
    border-color: var(--vs-border) !important;
}

.vs-ticket-details .btn-outline-secondary:hover,
.vs-ticket-details .btn-outline-secondary:focus {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}

/* Reply card header */
.vs-ticket-details .card-header.bg-light {
    background-color: #f8f9fc !important;
    color: var(--vs-navy-deep);
}

/* Selectize status dropdown: corporate border */
.vs-ticket-details .selectize-input {
    border-color: var(--vs-border);
}

.vs-ticket-details .selectize-input.focus {
    border-color: var(--vs-gold-dark);
}

/* =========================================================
   AI Guru Dashboard — corporate chrome + KPI refinement
   Patch 1 — page chrome / certificate / KPI / level badge /
   review. Preserves Correct/Incorrect/Accuracy semantics and
   defers 4 certification progress-bar colors (bg-success /
   bg-info / bg-primary / bg-purple) to Patch 2.
   Scoped to .vs-ai-guru-dashboard so Competition /
   CaseStudies / other AI Guru views are unaffected.
   ========================================================= */

/* --- Page title (Tamil label) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard h2.text-primary {
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard h2.text-primary .fa-graduation-cap {
    color: var(--vs-navy-royal) !important;
}

/* --- Enter Arena — primary action (normal navigation, no assessment semantic) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-primary.btn-lg {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-primary.btn-lg:hover {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-primary.btn-lg:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-primary.btn-lg:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35);
}

/* --- Leaderboard — secondary action (trophy, no semantic) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-outline-warning {
    background-color: #fff !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-outline-warning:hover {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-outline-warning:focus {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.25) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .btn-outline-warning:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Overall mastery / Grandmaster card (shared partial, blue has no business meaning) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .card.bg-primary {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-navy-deep) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.12);
}
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .card.bg-primary .text-white-50 {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* --- Mastery rank pill (Bootstrap yellow → corporate gold + navy) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .badge.bg-warning {
    background-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
}

/* --- Certificate Download buttons (decorative gold, not level-specific) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .level-card .btn-warning {
    background-color: var(--vs-gold) !important;
    border-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .level-card .btn-warning:hover {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .level-card .btn-warning:focus {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard #mastery-status-bar .level-card .btn-warning:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* Progress-bar colors are DEFERRED to Patch 2 — do not override:
   .level-card .progress-bar.bg-success / .bg-info / .bg-primary / .bg-purple
   Earned completion check fa-check-circle.text-success is also preserved (no override).
*/

/* --- KPI — Total Attempts (neutral metric) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(1) .badge.bg-light {
    background-color: var(--vs-bg-blue-grey) !important;
    border: 1px solid var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(1) .badge.bg-light i {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(1) .fw-bold.text-dark {
    color: var(--vs-text-navy-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(1) small.text-muted {
    color: var(--vs-text-muted) !important;
}

/* --- KPI — Accuracy (ABSOLUTE PROTECTION — preserve semantic green) ---
   No overrides for Accuracy: bg-success-subtle / text-success / green percentage remain.
*/

/* --- KPI — Average Score (decorative blue → corporate navy) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(3) .badge.bg-primary-subtle {
    background-color: rgba(14, 42, 71, 0.08) !important;
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(3) .badge.bg-primary-subtle i {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(3) .fw-bold.text-primary {
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(3) small.text-muted {
    color: var(--vs-text-muted) !important;
}

/* --- KPI — Best Level (warning → corporate gold-surface / gold-dark) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(4) .badge.bg-warning-subtle {
    background-color: var(--vs-gold-surface) !important;
    color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(4) .badge.bg-warning-subtle i {
    color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(4) .fw-bold.text-dark {
    color: var(--vs-text-navy-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .card-body.py-4 .row.text-center > div:nth-child(4) small.text-muted {
    color: var(--vs-text-muted) !important;
}

/* --- Question level badge (always blue → neutral corporate pill) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .badge.bg-primary-subtle {
    background-color: var(--vs-bg-blue-grey) !important;
    color: var(--vs-navy-royal) !important;
    border: 1px solid var(--vs-border) !important;
}

/* Correct / Incorrect — ABSOLUTE PROTECTION (no overrides):
   .badge.bg-success-subtle.text-success / .bg-danger-subtle.text-danger
   and inline border-top #1ab394 / #ed5565 remain untouched.
   Negative score text-dark also preserved.
*/

/* --- Review button (neutral gray → navy outline + gold hover) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .btn-outline-secondary {
    background-color: #fff !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .btn-outline-secondary:hover {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .btn-outline-secondary:focus {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.25) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .btn-outline-secondary:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Toolbar / search / filter (shared partials — scoped only) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .filter-toolbar {
    background-color: #ffffff !important;
    border: 1px solid var(--vs-border) !important;
    box-shadow: none;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .filter-toolbar .form-control:focus,
html[data-layout="topnav"] .vs-ai-guru-dashboard .filter-toolbar .form-select:focus {
    border-color: var(--vs-gold-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.18) !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .filter-toolbar .btn:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Pagination (shared pager — scoped only) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .pagination .page-link {
    color: var(--vs-navy-deep);
    border-color: var(--vs-border);
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .pagination .page-link:hover {
    background-color: var(--vs-gold-surface);
    border-color: var(--vs-gold-dark);
    color: var(--vs-navy-deep);
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .pagination .page-item.active .page-link {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.25);
    border-color: var(--vs-gold-dark);
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .pagination .page-link:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Question cards — corporate shell (aligns with Horoscope .vs-list-card) --- */
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .card {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-left: 3px solid var(--vs-gold-dark) !important;
    border-top: 1px solid var(--vs-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10) !important;
    border-left-color: var(--vs-gold) !important;
}
@media (prefers-reduced-motion: reduce) {
    html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .card,
    html[data-layout="topnav"] .vs-ai-guru-dashboard .exam-log-card .card:hover {
        transition: none;
        transform: none;
    }
}

/* =========================================================
   AI Guru — Competition (Certification Arena) — corporate chrome
   Scoped to .vs-ai-guru-competition so Dashboard and shared
   _AIGuruScoreboard remain unaffected. Preserves green
   certification semantics and recommended state.
   ========================================================= */

/* --- Header / title (bright-blue → navy, trophy → gold) --- */
html[data-layout="topnav"] .vs-ai-guru-competition h2.text-primary {
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition h2.text-primary .fa-trophy.text-warning {
    color: var(--vs-gold-dark) !important;
}

/* --- Language selector (generic gray → white/neutral + navy text) --- */
html[data-layout="topnav"] .vs-ai-guru-competition .badge.bg-light.text-dark.border {
    background-color: #fff !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-navy-deep) !important;
}

/* --- Shared mastery / Grandmaster card (bg-primary → navy-deep, scoped only) --- */
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .card.bg-primary {
    background: var(--vs-navy-deep) !important;
    background-color: var(--vs-navy-deep) !important;
    background-image: none !important;
    border-color: var(--vs-navy-deep) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.12);
}
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .card.bg-primary .text-white-50 {
    color: rgba(255, 255, 255, 0.78) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .badge.bg-warning {
    background-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .level-card .btn-warning {
    background-color: var(--vs-gold) !important;
    border-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .level-card .btn-warning:hover {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .level-card .btn-warning:focus {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition #mastery-status-bar .level-card .btn-warning:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}
/* Progress-bar accents (bg-success/info/primary/purple) intentionally preserved — no override here.
   Earned check fa-check-circle.text-success is semantic green and is not overridden. */

/* --- Middle certification cards — corporate shell (consistent white) --- */
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10) !important;
    border-color: var(--vs-border) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Basic"] {
    border-color: var(--vs-border) !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
}

/* --- Level icons — normalize rainbow to restrained corporate (all levels pale navy + navy icon;
       Doctorate as premium gold — not an invented business tier, just highest-level restrained accent) --- */
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .icon-circle {
    background: rgba(14, 42, 71, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 42, 71, 0.04), 0 4px 10px rgba(14, 42, 71, 0.05) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .icon-circle i {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Doctorate"] .icon-circle {
    background: var(--vs-gold-surface) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Doctorate"] .icon-circle i {
    color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Basic"] .icon-circle,
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Advanced"] .icon-circle,
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Scholar"] .icon-circle {
    background: rgba(14, 42, 71, 0.08) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Basic"] .icon-circle i,
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Advanced"] .icon-circle i,
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Scholar"] .icon-circle i {
    color: var(--vs-navy-royal) !important;
}

/* Start buttons (per-level rainbow → corporate navy) — certificate buttons stay gold */
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card button.btn-primary {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card button.btn-primary:hover {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card button.btn-primary:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card button.btn-primary:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* YOU ARE CERTIFIED — preserve semantic green (pale surface + green icon/text) — ensure not overridden by shell */
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .badge.bg-success-subtle {
    background-color: #e6f7f1 !important;
    color: #1F9254 !important;
    border: 1px solid rgba(31, 146, 84, 0.18) !important;
}

/* Bottom certificate buttons inside middle cards (orange → corporate gold navy, same as top) */
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .btn-warning {
    background-color: var(--vs-gold) !important;
    border-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .btn-warning:hover {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .btn-warning:focus {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card .btn-warning:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* Recommended badge — verified source: static ::after on Basic (not dynamic next-level logic).
   Normalize from emerald to corporate gold/navy to reduce rainbow. Leave mechanism intact. */
html[data-layout="topnav"] .vs-ai-guru-competition .challenge-card[data-level="Basic"]::after {
    background: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
    border: 1px solid var(--vs-gold-dark) !important;
}

/* --- Reference Horoscope section header (purple → navy/gold) --- */
html[data-layout="topnav"] .vs-ai-guru-competition .card-header h5.text-secondary {
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition .card-header h5.text-secondary .fa-book-open.text-warning {
    color: var(--vs-gold-dark) !important;
}

/* --- Reference Horoscope card (large white panel) --- */
html[data-layout="topnav"] .vs-ai-guru-competition #astroData {
    background: #fff;
}
html[data-layout="topnav"] .vs-ai-guru-competition .card.shadow-lg[style*="border-radius: 12px"] {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    overflow: hidden;
}
html[data-layout="topnav"] .vs-ai-guru-competition .card.shadow-lg .card-header.bg-white {
    background: #fff !important;
    border-bottom: 1px solid var(--vs-border) !important;
}

/* --- Empty state contrast (faint → readable secondary) --- */
html[data-layout="topnav"] .vs-ai-guru-competition #astroData .fa-chart-pie {
    color: var(--vs-text-muted) !important;
    opacity: 0.45 !important;
    animation: none;
}
html[data-layout="topnav"] .vs-ai-guru-competition #astroData .d-flex.flex-column h5.fw-normal {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-ai-guru-competition #astroData .d-flex.flex-column p.small {
    color: var(--vs-text-muted) !important;
    opacity: 1 !important;
}

/* =========================================================
   Horoscope Leaderboard
   ========================================================= */

html[data-layout="topnav"] .vs-leaderboard h1 {
    color: var(--vs-navy-deep);
    font-weight: 700;
}

/* KPI Cards */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi {
    border: 1px solid var(--vs-border);
    border-left: 4px solid var(--vs-gold-dark);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--vs-text-navy-dark);
    box-shadow: 0 0.35rem 1rem rgba(14, 42, 71, 0.08) !important;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--vs-navy-deep), var(--vs-navy-royal), var(--vs-gold));
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi .card-body {
    padding: 1.25rem 1.4rem;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi-label {
    color: var(--vs-navy-royal);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi-caption {
    color: var(--vs-text-muted);
    margin-bottom: 0.35rem;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi-value {
    color: var(--vs-navy-deep);
    font-weight: 800;
    margin-bottom: 0;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi-value small {
    color: var(--vs-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-kpi:hover {
    border-left-color: var(--vs-gold);
    transform: translateY(-2px);
    box-shadow: 0 0.55rem 1.25rem rgba(14, 42, 71, 0.11) !important;
}

/* Leaderboard Card */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-card {
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0.35rem 1.1rem rgba(14, 42, 71, 0.08) !important;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-header {
    background: #fff;
    border-bottom: 1px solid var(--vs-border);
}

/* Tabs */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-tabs .nav-link {
    color: var(--vs-text-muted);
    font-weight: 600;
    border-color: transparent;
    background: transparent;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-tabs .nav-link:hover {
    color: var(--vs-navy-royal);
    background: var(--vs-gold-surface);
    border-color: var(--vs-border);
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-tabs .nav-link.active {
    color: var(--vs-navy-deep);
    font-weight: 700;
    background: #fff;
    border-color: var(--vs-border) var(--vs-border) #fff;
    border-bottom: 2px solid var(--vs-gold) !important;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-tabs .nav-link:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* List Title */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-list-title {
    color: var(--vs-navy-deep);
    font-weight: 700;
}

/* Rows */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row {
    border-left: 0;
    border-right: 0;
    border-color: var(--vs-border);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    background: #fff;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row:hover {
    background: #F8F9FC;
    box-shadow: inset 3px 0 0 var(--vs-gold);
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row.list-group-item-info {
    background: var(--vs-gold-surface) !important;
    color: var(--vs-text-navy-dark) !important;
    border-left: 3px solid var(--vs-gold) !important;
    border-color: var(--vs-border) !important;
}

/* Rank Column */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-rank {
    width: 60px;
    min-width: 60px;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row[data-rank="1"] .fa-trophy {
    color: var(--vs-gold) !important;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row[data-rank="2"] .fa-trophy {
    color: var(--vs-text-muted) !important;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row[data-rank="3"] .fa-trophy {
    color: var(--vs-gold-dark) !important;
    opacity: 0.92;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-rank-number {
    color: var(--vs-text-muted);
    font-weight: 700;
}

/* Name / Meta */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-name {
    color: var(--vs-text-navy-dark);
    font-weight: 700;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-meta {
    color: var(--vs-text-muted) !important;
    font-weight: 400;
}

/* You Badge */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-you {
    background: var(--vs-gold-surface) !important;
    color: var(--vs-navy-deep) !important;
    border: 1px solid var(--vs-gold) !important;
    font-weight: 700;
}

/* Right-Side Score */
html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-score {
    min-width: 80px;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-score-value {
    color: var(--vs-navy-royal) !important;
    font-weight: 800;
}

html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-score-label {
    color: var(--vs-text-muted) !important;
}

/* Responsive */
@media (max-width: 575.98px) {
    html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-row {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-rank {
        width: 48px;
        min-width: 48px;
    }
    html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-score {
        min-width: 64px;
    }
    html[data-layout="topnav"] .vs-leaderboard .vs-leaderboard-name {
        font-size: 0.95rem;
    }
}

/* =========================================================
   Astrologer Case Studies
   ========================================================= */

/* --- Page root --- */
html[data-layout="topnav"] .vs-case-studies {
    color: inherit;
}

/* --- Hero --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-hero {
    position: relative;
    overflow: hidden;
    padding: 2.25rem 0;
    background: #fff;
    border-bottom: 1px solid var(--vs-border);
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/Content/HomePage/img/LoginPage/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.10;
    z-index: 1;
    pointer-events: none;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-hero .container {
    position: relative;
    z-index: 2;
}

/* --- Hero Title --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-title {
    color: var(--vs-navy-deep);
    font-weight: 800;
    line-height: 1.2;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: var(--vs-gold);
    margin: 0.65rem auto 0;
    border-radius: 2px;
}

/* --- Hero Subtitle --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-subtitle {
    color: var(--vs-text-muted) !important;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    margin-top: 0.65rem;
}

/* --- Filter Toolbar --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters {
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06);
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-control,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-select {
    border-color: var(--vs-border);
    color: var(--vs-text-navy-dark);
    background-color: #fff;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-control::placeholder {
    color: var(--vs-text-muted);
    opacity: 1;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-control:focus,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-select:focus {
    border-color: var(--vs-gold-dark);
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.18);
    outline: 0;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-actions .vs-case-studies-filter-btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-actions .vs-case-studies-clear-btn {
    flex: 0 0 42px;
    width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* --- Filter Search Button --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-btn {
    background: var(--vs-navy-royal) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
    font-weight: 600;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-btn:hover,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-btn:focus {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}

/* --- Clear Button --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-clear-btn {
    background: #fff !important;
    color: var(--vs-navy-royal) !important;
    border: 1px solid var(--vs-border) !important;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-clear-btn:hover,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-clear-btn:focus {
    background: var(--vs-gold-surface) !important;
    color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold-dark) !important;
}

/* --- Case-Study Card --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-study-card {
    background: #fff;
    border: 1px solid var(--vs-border);
    border-top: 3px solid var(--vs-gold-dark);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-study-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10);
    border-top-color: var(--vs-gold);
}

@media (prefers-reduced-motion: reduce) {
    html[data-layout="topnav"] .vs-case-studies .vs-case-study-card,
    html[data-layout="topnav"] .vs-case-studies .vs-case-study-card:hover {
        transition: none;
        transform: none;
    }
}

/* --- Category --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-study-category {
    color: var(--vs-navy-royal);
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    font-weight: 700;
}

/* --- Metadata --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-study-meta {
    color: var(--vs-text-muted) !important;
    font-size: 0.80rem;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-study-meta i {
    color: var(--vs-text-muted);
}

/* --- Question --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-study-question {
    color: var(--vs-text-navy-dark);
    font-weight: 700;
    line-height: 1.35;
}

/* --- Answer Preview --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-study-preview {
    color: var(--vs-text-muted) !important;
    font-size: 0.90rem;
    line-height: 1.6;
}

/* --- Read-Full-Prediction Button --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-study-action {
    background: var(--vs-navy-royal) !important;
    color: #fff !important;
    border: 1px solid var(--vs-gold-dark) !important;
    font-weight: 600;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-study-action:hover,
html[data-layout="topnav"] .vs-case-studies .vs-case-study-action:focus {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}

/* --- Pagination --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-pagination .pagination .page-link {
    color: var(--vs-navy-deep);
    background: #fff;
    border-color: var(--vs-border);
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-pagination .pagination .page-link:hover {
    background: var(--vs-gold-surface);
    color: var(--vs-navy-deep);
    border-color: var(--vs-gold-dark);
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-pagination .pagination .page-item.active .page-link {
    background: var(--vs-navy-royal) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-pagination .pagination .page-item.disabled .page-link {
    color: var(--vs-text-muted);
    background: #fff;
    border-color: var(--vs-border);
    opacity: 0.65;
}

html[data-layout="topnav"] .vs-case-studies .vs-case-studies-pagination .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.25);
    border-color: var(--vs-gold-dark);
}

/* --- Empty State --- */
html[data-layout="topnav"] .vs-case-studies .alert.alert-info {
    background: #fff;
    color: var(--vs-text-navy-dark);
    border: 1px solid var(--vs-border);
    border-left: 3px solid var(--vs-gold);
}

/* --- Focus / Accessibility --- */
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filter-btn:focus-visible,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-clear-btn:focus-visible,
html[data-layout="topnav"] .vs-case-studies .vs-case-study-action:focus-visible,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-pagination .page-link:focus-visible,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-control:focus-visible,
html[data-layout="topnav"] .vs-case-studies .vs-case-studies-filters .form-select:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
    html[data-layout="topnav"] .vs-case-studies .vs-case-studies-hero {
        padding: 1.5rem 0;
    }
    html[data-layout="topnav"] .vs-case-studies .vs-case-studies-title {
        font-size: 1.6rem;
    }
}

/* =========================================================
   AI Guru Leaderboard — Stage 1 Corporate Chrome + Podium + Table
   + Stage 2 Current-Standing inline card
    Scoped to .vs-ai-guru-leaderboard.
    Preserves #1 gold / #2 silver / #3 bronze ranking semantics.
    ========================================================= */

/* --- Page title --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard h2.text-primary {
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard h2.text-primary .fa-trophy.text-warning {
    color: var(--vs-gold-dark) !important;
}

/* --- Back to Dashboard (secondary) --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard a.btn.btn-outline-secondary.rounded-pill {
    background: #fff !important;
    color: var(--vs-navy-deep) !important;
    border-color: var(--vs-border) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard a.btn.btn-outline-secondary.rounded-pill:hover,
html[data-layout="topnav"] .vs-ai-guru-leaderboard a.btn.btn-outline-secondary.rounded-pill:focus {
    background: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard a.btn.btn-outline-secondary.rounded-pill:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.25);
}

/* --- Tab card container --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard > .card.border-0.shadow-sm {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    overflow: hidden;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .card-header.bg-white {
    background: #fff !important;
    border-bottom: 1px solid var(--vs-border) !important;
}

/* --- Period tabs --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--vs-text-muted) !important;
    background: transparent !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .nav-tabs .nav-link:hover {
    color: var(--vs-navy-royal) !important;
    background: transparent !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
    background: transparent !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: -2px;
}

/* --- Period tab icons (restrained corporate) --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard #week-tab i.text-success,
html[data-layout="topnav"] .vs-ai-guru-leaderboard #month-tab i.text-primary {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard #alltime-tab i.text-warning {
    color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .nav-tabs .nav-link.active i {
    color: inherit !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard #alltime-tab.active i,
html[data-layout="topnav"] .vs-ai-guru-leaderboard #alltime-tab.nav-link.active i.text-warning {
    color: var(--vs-gold-dark) !important;
}

/* --- Podium card shells (white corporate, rank border preserved inline) --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard .podium-card {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-top-width: 5px !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .podium-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .podium-card h5.fw-bold {
    color: var(--vs-text-navy-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .podium-card small.text-muted {
    color: var(--vs-text-muted) !important;
}
@media (prefers-reduced-motion: reduce) {
    html[data-layout="topnav"] .vs-ai-guru-leaderboard .podium-card,
    html[data-layout="topnav"] .vs-ai-guru-leaderboard .podium-card:hover {
        transition: none;
        transform: none;
    }
}

/* Podium score retains inline medal color — no override. Readability fallback only if silver too faint:
   keep medal/border silver, only darken score if needed — not applied by default to preserve identity. */

/* --- Long table shell --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard .table-responsive + * { }
html[data-layout="topnav"] .vs-ai-guru-leaderboard div.card:has(> .table-responsive) {
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06);
    overflow: hidden;
}
/* Fallback for :has() support — the actual card wrapping the table */
html[data-layout="topnav"] .vs-ai-guru-leaderboard .tab-pane .card.border-0.shadow-sm:has(table) {
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard table.table {
    background: #fff;
}

/* --- Table header --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard table thead.bg-light {
    background: var(--vs-bg-blue-grey) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard table thead.bg-light tr th {
    background: var(--vs-bg-blue-grey) !important;
    color: var(--vs-text-navy-dark) !important;
    border-color: var(--vs-border) !important;
    font-weight: 700;
}

/* --- Table rows --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard table tbody tr {
    background: #fff;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard table tbody td {
    border-color: var(--vs-border) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard table.table-hover tbody tr:hover {
    background: rgba(245, 237, 216, 0.35) !important;
}

/* Rank numbers #4+ */
html[data-layout="topnav"] .vs-ai-guru-leaderboard table tbody td.ps-4.fw-bold.text-secondary {
    color: var(--vs-text-muted) !important;
}

/* User names */
html[data-layout="topnav"] .vs-ai-guru-leaderboard table tbody span.fw-bold.text-dark {
    color: var(--vs-text-navy-dark) !important;
}

/* Table scores — replace bright Bootstrap blue */
html[data-layout="topnav"] .vs-ai-guru-leaderboard table tbody td.text-primary {
    color: var(--vs-navy-royal) !important;
}

/* --- Mastery rank badges (neutral) --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard table tbody span.badge.bg-light {
    background: #fff !important;
    color: var(--vs-text-muted) !important;
    border: 1px solid var(--vs-border) !important;
}

/* --- Avatars protect — no border color change --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard .avatar-small,
html[data-layout="topnav"] .vs-ai-guru-leaderboard .avatar-large {
    background-color: var(--vs-bg-blue-grey) !important;
    border: 1px solid var(--vs-border);
}

/* --- Current Standing inline card (replaces former #sticky-rank-bar fixed overlay) --- */
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-card {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-left: 3px solid var(--vs-gold) !important;
    border-radius: 0.8rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-card .rank-circle {
    background: var(--vs-navy-deep) !important;
    color: #fff !important;
    border: 1px solid var(--vs-navy-deep) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-title {
    color: var(--vs-text-navy-dark) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-subtitle {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-muted {
    color: var(--vs-text-muted) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-badge {
    background: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
    border: 1px solid var(--vs-gold-dark) !important;
    font-weight: 700;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-cta {
    background: var(--vs-navy-royal) !important;
    border: 1px solid var(--vs-navy-royal) !important;
    color: #fff !important;
    font-weight: 600;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-cta:hover {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-cta:focus {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-ai-guru-leaderboard .vs-current-standing-cta:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* =========================================================
   Horoscope — Astrology as a Science
   ========================================================= */

/* --- Hero — premium corporate navy/gold (overrides page-local .hero-card bright blue) --- */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--vs-navy-deep) 0%, var(--vs-navy-royal) 100%) !important;
    border: 1px solid rgba(200, 154, 61, 0.40) !important;
    border-bottom: 3px solid var(--vs-gold-dark) !important;
    box-shadow: 0 12px 28px rgba(14, 42, 71, 0.18) !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 260px at 78% 0%, rgba(200, 154, 61, 0.14) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-hero > * {
    position: relative;
    z-index: 1;
}

/* Hero shapes — restrained pale gold/white tint, keep positions/sizes/rotations/animations */
html[data-layout="topnav"] .vs-astrology-science .hero-shape {
    color: rgba(245, 237, 216, 0.95) !important;
    opacity: 0.10 !important;
}
html[data-layout="topnav"] .vs-astrology-science .shape-3,
html[data-layout="topnav"] .vs-astrology-science .shape-4 {
    opacity: 0.22 !important;
    color: rgba(245, 237, 216, 0.90) !important;
}

/* Eyebrow / masterclass pill */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-eyebrow {
    display: inline-block;
    background: rgba(245, 237, 216, 0.12) !important;
    border: 1px solid rgba(200, 154, 61, 0.55) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px !important;
    backdrop-filter: blur(10px);
}

/* Hero title */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-title {
    color: #fff !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 14px rgba(14, 42, 71, 0.35) !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-title::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    background: var(--vs-gold);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

/* Hero subtitle */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-subtitle {
    max-width: 700px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    line-height: 1.6 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Video cards — corporate shell --- */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-card {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-top: 3px solid var(--vs-gold-dark) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-card:hover {
    transform: translateY(-3px) !important;
    border-top-color: var(--vs-gold) !important;
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10) !important;
}

/* Media wrapper */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-media {
    border-bottom: 1px solid var(--vs-border) !important;
}

/* Card body / title — preserve line-clamp via existing .card-title */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-title {
    color: var(--vs-text-navy-dark) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Description */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-description {
    color: var(--vs-text-muted) !important;
    line-height: 1.55 !important;
}

/* Badges — base */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-badge {
    border-radius: 999px !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    padding: 0.30rem 0.65rem !important;
    border: 1px solid var(--vs-border) !important;
    letter-spacing: 0.02em;
}
/* Featured / New-feature */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-badge-featured {
    background: var(--vs-gold) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}
/* Part 1–5 normalized */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-badge-part {
    background: var(--vs-gold-surface) !important;
    border-color: rgba(200, 154, 61, 0.55) !important;
    color: var(--vs-navy-royal) !important;
}

/* Meta row */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-meta {
    color: var(--vs-text-muted) !important;
    gap: 0.35rem;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-meta-icon {
    color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-meta-label {
    color: var(--vs-text-muted) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-meta-date {
    color: var(--vs-navy-deep) !important;
    font-weight: 700 !important;
}

/* CTA — corporate navy/gold */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-action {
    background: var(--vs-navy-royal) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-action:hover {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-action:focus {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-action:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* Card border-top meta section — normalize date row border */
html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-card > .border-top {
    border-color: var(--vs-border) !important;
}

/* Responsive — preserve hero padding/title/shape behavior at ~768px */
@media (max-width: 768px) {
    html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-hero {
        padding: 2rem !important;
    }
    html[data-layout="topnav"] .vs-astrology-science .vs-astrology-science-title {
        font-size: 2rem !important;
    }
}

/* Prefers-reduced-motion for cards */
@media (prefers-reduced-motion: reduce) {
    html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-card,
    html[data-layout="topnav"] .vs-astrology-science .vs-astrology-video-card:hover {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================
   Administrator — Educational Material
   ========================================================= */

/* --- Shell --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-shell {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.85rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
}

/* --- Header --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-header {
    background: #fff !important;
    border-bottom: 1px solid var(--vs-border) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-title {
    color: var(--vs-navy-deep) !important;
    font-weight: 700 !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-title-icon {
    color: var(--vs-gold-dark) !important;
}

/* --- Upload / Create --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-upload {
    background: var(--vs-navy-royal) !important;
    border-color: var(--vs-gold-dark) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-upload:hover {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-upload:focus {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-upload:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Body --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-body {
    background: #fff !important;
}

/* --- Toolbar --- remove extra outer boxing; single corporate toolbar is the inner .filter-toolbar --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Override shared _PagingAndFiltering inner toolbar only within this page */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .filter-toolbar {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    margin-bottom: 0 !important;
}

/* --- Search / Advanced / Clear rely on existing vs-list-toolbar corporate rules ---
   Additional page-scoped clear-filter restyle (btn-outline-danger) */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar #_btnClearFilter.btn-outline-danger {
    background: #fff !important;
    color: var(--vs-navy-royal) !important;
    border-color: var(--vs-border) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar #_btnClearFilter.btn-outline-danger:hover,
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar #_btnClearFilter.btn-outline-danger:focus {
    background: var(--vs-gold-surface) !important;
    color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar #_btnClearFilter.btn-outline-danger:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Pager --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .btn-secondary.btn-icon-fix {
    background: #fff !important;
    color: var(--vs-navy-deep) !important;
    border: 1px solid var(--vs-border) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .btn-secondary.btn-icon-fix:hover:not(:disabled),
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .btn-secondary.btn-icon-fix:focus:not(:disabled) {
    background: var(--vs-gold-surface) !important;
    color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold-dark) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .btn-secondary.btn-icon-fix:disabled,
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .btn-secondary.btn-icon-fix[disabled] {
    background: #f8f9fc !important;
    color: var(--vs-text-muted) !important;
    border-color: var(--vs-border) !important;
    opacity: 0.65 !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .btn-secondary.btn-icon-fix:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Range / Count --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .text-muted {
    color: var(--vs-text-muted) !important;
}

/* --- Material cards (builds on vs-list-card) --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-card {
    background: #fff !important;
    border: 1px solid var(--vs-border) !important;
    border-left: 3px solid var(--vs-gold-dark) !important;
    border-radius: 0.85rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-card:hover {
    transform: translateY(-3px) !important;
    border-left-color: var(--vs-gold) !important;
    box-shadow: 0 8px 18px rgba(14, 42, 71, 0.10) !important;
}

/* --- Cover image --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-cover {
    height: 180px !important;
    object-fit: cover !important;
    border-bottom: 1px solid var(--vs-border) !important;
}

/* --- Material icon (circle) --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-icon {
    background: var(--vs-gold-surface) !important;
    border-color: rgba(200, 154, 61, 0.45) !important;
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-icon i {
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-icon i.text-danger,
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-icon i.text-primary {
    color: var(--vs-navy-royal) !important;
}

/* --- Card title --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-card-title {
    color: var(--vs-text-navy-dark) !important;
    font-weight: 700 !important;
}

/* --- Language badge --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-language {
    background: #fff !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
}

/* --- Type badge --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-type {
    background: var(--vs-gold-surface) !important;
    border-color: rgba(200, 154, 61, 0.50) !important;
    color: var(--vs-navy-royal) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-type-overlay {
    background: var(--vs-gold-surface) !important;
    border-color: rgba(200, 154, 61, 0.65) !important;
    color: var(--vs-navy-royal) !important;
    box-shadow: 0 1px 4px rgba(14, 42, 71, 0.12) !important;
}

/* --- Meta --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-meta {
    color: var(--vs-text-muted) !important;
    font-size: 0.78rem !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-meta i {
    color: var(--vs-gold-dark) !important;
}

/* --- Description --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-description {
    color: var(--vs-text-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
}

/* --- Actions --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action {
    font-weight: 700 !important;
    border-radius: 0.35rem !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action-primary {
    background: var(--vs-navy-royal) !important;
    border: 1px solid var(--vs-gold-dark) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action-primary:hover,
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action-primary:focus {
    background: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #fff !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action-secondary {
    background: #fff !important;
    border: 1px solid var(--vs-navy-royal) !important;
    color: var(--vs-navy-royal) !important;
}
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action-secondary:hover,
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-action-secondary:focus {
    background: var(--vs-gold-surface) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}

/* --- Empty state (scoped) --- */
html[data-layout="topnav"] .vs-educational-material #material-card-container > .col-12.text-center {
    background: #fff;
    border: 1px solid var(--vs-border);
    border-left: 3px solid var(--vs-gold);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(14, 42, 71, 0.06);
}
html[data-layout="topnav"] .vs-educational-material #material-card-container > .col-12.text-center h5 {
    color: var(--vs-text-navy-dark) !important;
}

/* --- Focus / accessibility (form controls via vs-list-toolbar already covered) --- */
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .form-control:focus-visible,
html[data-layout="topnav"] .vs-educational-material .vs-educational-material-toolbar .form-select:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}

/* --- Prefers reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    html[data-layout="topnav"] .vs-educational-material .vs-educational-material-card,
    html[data-layout="topnav"] .vs-educational-material .vs-educational-material-card:hover {
        transition: none !important;
        transform: none !important;
    }
}