/* ============================================
   PROFESSIONAL LIGHT THEME
   TrustEd Institute - Design System
   Pastel Orange & Grey Tones
   ============================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ---- CSS Variables ---- */
:root {
    /* Background Colors - Warm Greys */
    --lp-bg-primary: #fafaf9;
    --lp-bg-secondary: #f5f5f4;
    --lp-bg-tertiary: #e7e5e4;
    --lp-bg-card: #ffffff;
    --lp-bg-card-hover: #fafaf9;
    --lp-bg-elevated: #ffffff;
    --lp-bg-hero: linear-gradient(135deg, #292524 0%, #44403c 50%, #57534e 100%);
    
    /* Text Colors */
    --lp-text-primary: #1c1917;
    --lp-text-secondary: #57534e;
    --lp-text-muted: #78716c;
    --lp-text-inverse: #fafaf9;
    
    /* Accent Colors - Pastel Orange/Coral */
    --lp-accent-primary: #f97316;
    --lp-accent-primary-soft: #fb923c;
    --lp-accent-primary-pastel: #fed7aa;
    --lp-accent-primary-bg: #fff7ed;
    --lp-accent-hover: #ea580c;
    --lp-accent-glow: rgba(249, 115, 22, 0.15);
    
    /* Secondary Accent - Warm Stone */
    --lp-stone-50: #fafaf9;
    --lp-stone-100: #f5f5f4;
    --lp-stone-200: #e7e5e4;
    --lp-stone-300: #d6d3d1;
    --lp-stone-400: #a8a29e;
    --lp-stone-500: #78716c;
    --lp-stone-600: #57534e;
    --lp-stone-700: #44403c;
    --lp-stone-800: #292524;
    --lp-stone-900: #1c1917;
    
    /* Status Colors */
    --lp-success: #16a34a;
    --lp-success-bg: #dcfce7;
    --lp-error: #dc2626;
    --lp-error-bg: #fee2e2;
    --lp-warning: #ca8a04;
    --lp-warning-bg: #fef9c3;
    --lp-info: #0284c7;
    --lp-info-bg: #e0f2fe;
    
    /* Border Colors */
    --lp-border-subtle: #e7e5e4;
    --lp-border-default: #d6d3d1;
    --lp-border-strong: #a8a29e;
    
    /* Shadows - Soft and Elegant */
    --lp-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --lp-shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
    --lp-shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
    --lp-shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.08), 0 8px 10px -6px rgba(28, 25, 23, 0.04);
    --lp-shadow-card: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px -1px rgba(28, 25, 23, 0.06);
    --lp-shadow-card-hover: 0 10px 30px -10px rgba(249, 115, 22, 0.15), 0 4px 6px -2px rgba(28, 25, 23, 0.05);
    
    /* Typography */
    --lp-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Spacing & Radius */
    --lp-radius-sm: 8px;
    --lp-radius-md: 12px;
    --lp-radius-lg: 16px;
    --lp-radius-xl: 24px;
    --lp-radius-full: 9999px;
    
    /* Transitions */
    --lp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --lp-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --lp-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Base Styles ---- */
body.dark-pro {
    background: var(--lp-bg-primary) !important;
    color: var(--lp-text-primary);
    font-family: var(--lp-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Ensure main content area is always light */
body.dark-pro main {
    background: var(--lp-bg-primary) !important;
}

/* Ensure all containers and content divs are light */
body.dark-pro .container,
body.dark-pro .container-fluid,
body.dark-pro .row,
body.dark-pro .col,
body.dark-pro [class*="col-"] {
    background: transparent !important;
}

/* Override any dark background classes */
body.dark-pro .bg-without-image-lighter,
body.dark-pro .bg-without-image {
    background: var(--lp-bg-primary) !important;
}

/* Ensure featured sections are light */
body.dark-pro .featured-certifications {
    background: var(--lp-bg-secondary) !important;
}

/* Category start page specific - ensure content after hero is light */
body.dark-pro .hero-section + *,
body.dark-pro .hero-section ~ * {
    background: var(--lp-bg-primary) !important;
}

/* ---- Typography ---- */
body.dark-pro h1, 
body.dark-pro h2, 
body.dark-pro h3, 
body.dark-pro h4, 
body.dark-pro h5, 
body.dark-pro h6 {
    color: var(--lp-text-primary);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

body.dark-pro h1 { font-size: 2.75rem; font-weight: 700; }
body.dark-pro h2 { font-size: 2rem; }
body.dark-pro h3 { font-size: 1.5rem; }
body.dark-pro h4 { font-size: 1.25rem; }
body.dark-pro h5 { font-size: 1.125rem; }
body.dark-pro h6 { font-size: 1rem; }

body.dark-pro .dark-pro-text-dark {
    color: #1a1225 !important;
}

body.dark-pro .card-title-wrap, body.dark-pro .card-title-wrap h1, body.dark-pro .card-title-wrap h2, body.dark-pro .card-title-wrap h3, body.dark-pro .card-title-wrap h4, body.dark-pro .card-title-wrap h5, body.dark-pro .card-title-wrap h6, body.dark-pro .form-check-label, body.dark-pro h1, body.dark-pro h2, body.dark-pro h3, body.dark-pro h4, body.dark-pro h5, body.dark-pro h6 {
    color: var(--lp-text-inverse) !important;
}

body.dark-pro p {
    color: var(--lp-text-secondary);
}

body.dark-pro .lead {
    font-size: 1.125rem;
    color: var(--lp-text-secondary);
}

body.dark-pro a {
    color: var(--lp-accent-primary);
    text-decoration: none;
    transition: color var(--lp-transition-fast);
}

body.dark-pro a:hover {
    color: var(--lp-accent-hover);
}

body.dark-pro .text-muted {
    color: var(--lp-text-muted) !important;
}

body.dark-pro .text-dark {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .text-light {
    color: var(--lp-text-inverse) !important;
}

/* ---- Navigation ---- */
body.dark-pro .navbar,
body.dark-pro #nav-header {
    background: var(--lp-bg-card) !important;
    border-bottom: 1px solid var(--lp-border-subtle);
    box-shadow: var(--lp-shadow-sm);
}

/* ---- Homepage Header - Dark Purple Background ---- */
body.dark-pro .navbar-dark,
body.dark-pro #nav-header.navbar-dark {
    background: #2d1b3d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

body.dark-pro .navbar-dark .navbar-brand svg path,
body.dark-pro .navbar-dark .navbar-brand {
    filter: brightness(0) invert(1);
}

body.dark-pro .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-pro .navbar-dark .navbar-nav .nav-link:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1);
}

body.dark-pro .navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-pro .navbar-dark .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

body.dark-pro .navbar-nav .nav-link {
    color: var(--lp-text-secondary) !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--lp-radius-sm);
    transition: all var(--lp-transition-fast);
}

body.dark-pro .navbar-nav .nav-link:hover {
    color: var(--lp-text-primary) !important;
    background: var(--lp-bg-secondary);
}

body.dark-pro .navbar-toggler {
    border-color: var(--lp-border-default);
}

/* ---- Buttons ---- */
body.dark-pro .btn {
    font-family: var(--lp-font-sans);
    font-weight: 600;
    border-radius: var(--lp-radius-md);
    padding: 0.75rem 1.5rem;
    transition: all var(--lp-transition-normal);
    border: none;
    cursor: pointer;
    letter-spacing: -0.01em;
}

body.dark-pro .btn-primary {
    background: var(--lp-accent-primary);
    color: white !important;
    box-shadow: 0 1px 2px rgba(249, 115, 22, 0.2);
}

body.dark-pro .btn-primary:hover,
body.dark-pro .btn-primary:focus {
    background: var(--lp-accent-hover);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

body.dark-pro .btn-primary:active {
    transform: translateY(0);
}

body.dark-pro .btn-secondary {
    background: var(--lp-bg-card);
    color: var(--lp-text-primary);
    border: 1px solid var(--lp-border-default);
    box-shadow: var(--lp-shadow-sm);
}

body.dark-pro .btn-secondary:hover {
    background: var(--lp-bg-secondary);
    border-color: var(--lp-border-strong);
}

body.dark-pro .btn-outline-primary {
    background: transparent;
    color: var(--lp-accent-primary);
    border: 2px solid var(--lp-accent-primary);
}

body.dark-pro .btn-outline-primary:hover {
    background: var(--lp-accent-primary-bg);
    color: var(--lp-accent-hover);
}

body.dark-pro .btn-success {
    background: var(--lp-accent-primary);
    color: white !important;
}

body.dark-pro .btn-success:hover {
    background: var(--lp-accent-hover);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

body.dark-pro .btn-light {
    background: var(--lp-bg-card);
    color: var(--lp-text-primary);
    border: 1px solid var(--lp-border-subtle);
}

body.dark-pro .btn-light:hover {
    background: var(--lp-bg-secondary);
    color: var(--lp-text-primary);
}

body.dark-pro .btn-warning,
body.dark-pro a.btn-warning,
body.dark-pro button.btn-warning {
    background: #4ade80 !important;
    background-image: none !important;
    color: #1a1225 !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4) !important;
    border-radius: 50px !important;
    padding: 0.75rem 2rem !important;
}

body.dark-pro .btn-warning:hover,
body.dark-pro a.btn-warning:hover,
body.dark-pro button.btn-warning:hover {
    background: #22c55e !important;
    color: #1a1225 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5) !important;
}

body.dark-pro .btn-danger {
    background: var(--lp-error);
    color: white;
}

body.dark-pro .btn-lg {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    border-radius: var(--lp-radius-lg);
}

body.dark-pro .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ---- Cards ---- */
body.dark-pro .card {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-subtle);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-card);
    transition: all var(--lp-transition-normal);
    /* overflow: hidden removed - breaks stretched-link */
}

body.dark-pro .card:hover {
    border-color: var(--lp-accent-primary-pastel);
    box-shadow: var(--lp-shadow-card-hover);
    transform: translateY(-2px);
}

body.dark-pro .card-body {
    padding: 1.5rem;
}

body.dark-pro .card-title {
    color: var(--lp-text-primary);
    font-weight: 600;
}

body.dark-pro .card-text {
    color: var(--lp-text-secondary);
}

body.dark-pro .card-header {
    background: var(--lp-bg-secondary);
    border-bottom: 1px solid var(--lp-border-subtle);
    padding: 1rem 1.5rem;
}

/* ---- Hero Section ---- */
/* Only apply dark hero on homepage index.html */
body.dark-pro .section-banner {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    position: relative;
}

body.dark-pro .section-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 0%, rgba(249, 115, 22, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(251, 146, 60, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.dark-pro .section-banner > * {
    position: relative;
    z-index: 1;
}

body.dark-pro .section-banner h1 {
    color: var(--lp-text-inverse);
}

body.dark-pro .section-banner .btn-primary,
body.dark-pro .section-banner .btn-success {
    background: var(--lp-accent-primary);
    color: white !important;
    border: none;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

body.dark-pro .section-banner .btn-primary:hover,
body.dark-pro .section-banner .btn-success:hover {
    background: var(--lp-accent-primary-soft);
    color: white !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

/* Category start hero section - can be dark if it has background image, otherwise light */
body.dark-pro .hero-section {
    position: relative;
}

/* If hero-section has a background image, keep it dark */
body.dark-pro .hero-section[style*="background-image"] {
    background: var(--lp-bg-hero) !important;
}

body.dark-pro .hero-section[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 0%, rgba(249, 115, 22, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(251, 146, 60, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body.dark-pro .hero-section[style*="background-image"] > * {
    position: relative;
    z-index: 1;
}

/* Hero section without background image should be light */
body.dark-pro .hero-section:not([style*="background-image"]) {
    background: var(--lp-bg-secondary) !important;
}

body.dark-pro .hero-section h1 {
    color: var(--lp-text-primary);
}

body.dark-pro .hero-section .btn-primary,
body.dark-pro .hero-section .btn-success {
    background: var(--lp-accent-primary);
    color: white !important;
    border: none;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

body.dark-pro .hero-section .btn-primary:hover,
body.dark-pro .hero-section .btn-success:hover {
    background: var(--lp-accent-primary-soft);
    color: white !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

/* ---- Forms ---- */
body.dark-pro .form-control,
body.dark-pro .form-select {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-default);
    color: var(--lp-text-primary);
    border-radius: var(--lp-radius-md);
    padding: 0.75rem 1rem;
    transition: all var(--lp-transition-fast);
    font-family: var(--lp-font-sans);
}

body.dark-pro .form-control:focus,
body.dark-pro .form-select:focus {
    background: var(--lp-bg-card);
    border-color: var(--lp-accent-primary);
    box-shadow: 0 0 0 3px var(--lp-accent-glow);
    outline: none;
}

body.dark-pro .form-control::placeholder {
    color: var(--lp-text-muted);
}

body.dark-pro .form-label {
    color: var(--lp-text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
body.dark-pro .card .form-label {
    color: var(--lp-text-inverse);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

body.dark-pro .form-text {
    color: var(--lp-text-muted) !important;
}

body.dark-pro .form-check-input {
    background-color: var(--lp-bg-card);
    border-color: var(--lp-border-default);
}

body.dark-pro .form-check-input:checked {
    background-color: var(--lp-accent-primary);
    border-color: var(--lp-accent-primary);
}

body.dark-pro .form-check-label {
    color: var(--lp-text-primary)!important;
}


body.dark-pro .topic-test-mode .form-check-label, body.dark-pro .topic-test-mode .form-label {
    color: var(--lp-text-inverse)!important;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

body.dark-pro .topic-test-mode .explanation {
    color: var(--lp-text-inverse)!important;
    background-color: var(--lp-bg-hero)!important;
}

/* ---- Alerts ---- */
body.dark-pro .alert {
    border-radius: var(--lp-radius-md);
    border: none;
    padding: 1rem 1.25rem;
}

body.dark-pro .alert-success {
    background: var(--lp-success-bg);
    color: var(--lp-success);
}

body.dark-pro .alert-danger {
    background: var(--lp-error-bg);
    color: var(--lp-error);
}

body.dark-pro .alert-warning {
    background: var(--lp-warning-bg);
    color: var(--lp-warning);
}

body.dark-pro .alert-info {
    background: var(--lp-info-bg);
    color: var(--lp-info);
}

/* ---- Badges ---- */
body.dark-pro .badge {
    font-weight: 500;
    padding: 0.4em 0.8em;
    border-radius: var(--lp-radius-full);
    font-size: 0.75rem;
}

body.dark-pro .badge.bg-success,
body.dark-pro .badge-pass {
    background: var(--lp-success-bg) !important;
    color: var(--lp-success) !important;
}

body.dark-pro .badge.bg-danger,
body.dark-pro .badge-fail {
    background: var(--lp-error-bg) !important;
    color: var(--lp-error) !important;
}

body.dark-pro .badge.bg-primary {
    background: var(--lp-accent-primary-bg) !important;
    color: var(--lp-accent-primary) !important;
}

body.dark-pro .badge.bg-warning {
    background: var(--lp-warning-bg) !important;
    color: var(--lp-warning) !important;
}

/* ---- Tables ---- */
body.dark-pro .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--lp-text-primary);
    border-color: var(--lp-border-subtle);
}

body.dark-pro .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--lp-text-secondary);
    border-bottom-color: var(--lp-border-subtle);
    padding: 1rem;
}

body.dark-pro .table thead th {
    color: var(--lp-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--lp-border-default);
}

body.dark-pro .table tbody tr {
    transition: background-color var(--lp-transition-fast);
}

body.dark-pro .table tbody tr:hover {
    background-color: var(--lp-bg-secondary);
}

/* Tables inside dark cards - ensure white text */
body.dark-pro .card .table,
body.dark-pro .card-large .table {
    --bs-table-bg: transparent !important;
    --bs-table-color: white !important;
    background: transparent !important;
}

body.dark-pro .card .table > :not(caption) > * > *,
body.dark-pro .card-large .table > :not(caption) > * > * {
    color: white !important;
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-pro .card .table thead,
body.dark-pro .card-large .table thead {
    background: transparent !important;
}

body.dark-pro .card .table thead th,
body.dark-pro .card-large .table thead th {
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    vertical-align: bottom !important;
}

body.dark-pro .card .table tbody,
body.dark-pro .card-large .table tbody {
    background: transparent !important;
}

body.dark-pro .card .table tbody tr,
body.dark-pro .card-large .table tbody tr {
    background: transparent !important;
}

body.dark-pro .card .table tbody td,
body.dark-pro .card-large .table tbody td {
    color: white !important;
    background: transparent !important;
}

body.dark-pro .card .table tbody tr:hover,
body.dark-pro .card-large .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Badges in tables should keep their colors */
body.dark-pro .card .table .badge,
body.dark-pro .card-large .table .badge {
    color: inherit;
}

/* Review button in table */
body.dark-pro .card .table .btn,
body.dark-pro .card-large .table .btn {
    background: white !important;
    color: var(--lp-text-primary) !important;
}

/* But keep btn-warning green in tables */
body.dark-pro .card .table .btn-warning,
body.dark-pro .card-large .table .btn-warning,
body.dark-pro .card .btn-warning,
body.dark-pro .card-large .btn-warning {
    background: #4ade80 !important;
    color: #1a1225 !important;
}

/* ---- Correct/Incorrect Answer Styling - PRESERVE THESE ---- */
/* These are critical for showing users if answers are correct or incorrect */
body.dark-pro .text-correct {
    color: #22c55e !important; /* Green */
}

body.dark-pro .text-incorrect {
    color: #ef4444 !important; /* Red */
}

body.dark-pro .bg-correct {
    background-color: #166534 !important; /* Dark green */
    color: white !important;
}

body.dark-pro .bg-incorrect {
    background-color: #dc2626 !important; /* Red */
    color: white !important;
}

body.dark-pro .border-correct {
    border-color: #22c55e !important; /* Green */
}

body.dark-pro .border-incorrect {
    border-color: #ef4444 !important; /* Red */
}

/* Ensure answer options with correct/incorrect states are visible */
body.dark-pro .answer-option.bg-correct,
body.dark-pro .answer-option.bg-incorrect {
    color: white !important;
}

body.dark-pro .answer-option.bg-correct .text-correct,
body.dark-pro .answer-option.bg-incorrect .text-incorrect {
    color: white !important;
}

/* Table responsive wrapper */
body.dark-pro .card .table-responsive,
body.dark-pro .card-large .table-responsive {
    background: transparent !important;
}

/* Fix Bootstrap table striping and hover that might add white backgrounds */
body.dark-pro .card .table-striped > tbody > tr:nth-of-type(odd) > *,
body.dark-pro .card-large .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, 0.03) !important;
    color: white !important;
}

body.dark-pro .card .table-hover > tbody > tr:hover > *,
body.dark-pro .card-large .table-hover > tbody > tr:hover > * {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

/* Ensure card-body in dark cards is transparent */
body.dark-pro .card > .card-body,
body.dark-pro .card-large > .card-body {
    background: transparent !important;
}

/* Clickable rows */
body.dark-pro .card .clickable-row,
body.dark-pro .card-large .clickable-row {
    background: transparent !important;
}

body.dark-pro .card .clickable-row td,
body.dark-pro .card-large .clickable-row td {
    color: white !important;
    background: transparent !important;
}

body.dark-pro .card .clickable-row:hover,
body.dark-pro .card-large .clickable-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* btn-outline-secondary in tables */
body.dark-pro .card .btn-outline-secondary,
body.dark-pro .card-large .btn-outline-secondary {
    background: transparent !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-pro .card .btn-outline-secondary:hover,
body.dark-pro .card-large .btn-outline-secondary:hover {
    background: white !important;
    color: var(--lp-text-primary) !important;
}

/* Fix table cell display - d-md-block breaks table layout, force table-cell */
@media (min-width: 768px) {
    body.dark-pro .table th.d-md-block,
    body.dark-pro .table td.d-md-block {
        display: table-cell !important;
    }
}

/* Ensure proper table layout */
body.dark-pro .card .table,
body.dark-pro .card-large .table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
}

body.dark-pro .card .table thead tr,
body.dark-pro .card-large .table thead tr {
    display: table-row !important;
}

body.dark-pro .card .table th,
body.dark-pro .card .table td,
body.dark-pro .card-large .table th,
body.dark-pro .card-large .table td {
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Allow topic column to wrap */
body.dark-pro .card .table td:nth-child(2),
body.dark-pro .card-large .table td:nth-child(2) {
    white-space: normal;
    max-width: 300px;
}

body.dark-pro .clickable-row {
    cursor: pointer;
    background-color: var(--lp-bg-card) !important;
}

body.dark-pro .clickable-row:hover,
body.dark-pro .clickable-row:hover td {
    background-color: var(--lp-accent-primary-bg) !important;
}

/* ---- Progress Bars ---- */
body.dark-pro .progress {
    background: var(--lp-bg-tertiary);
    border-radius: var(--lp-radius-full);
    overflow: hidden;
    height: 8px;
}

body.dark-pro .progress-bar {
    background: linear-gradient(90deg, var(--lp-accent-primary) 0%, var(--lp-accent-primary-soft) 100%);
    border-radius: var(--lp-radius-full);
}

body.dark-pro .progress-bar.bg-success {
    background: linear-gradient(90deg, var(--lp-success) 0%, #22c55e 100%) !important;
}

body.dark-pro .progress-bar.bg-danger {
    background: linear-gradient(90deg, var(--lp-error) 0%, #ef4444 100%) !important;
}

/* ---- Footer ---- */
body.dark-pro .footer {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--lp-text-inverse) !important;
}

body.dark-pro .footer h4 {
    color: var(--lp-text-inverse) !important;
}

body.dark-pro .footer,
body.dark-pro .footer p,
body.dark-pro .footer li,
body.dark-pro .footer div {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-pro .footer a {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color var(--lp-transition-fast);
}

body.dark-pro .footer a:hover {
    color: #c9f869 !important;
}

/* ---- Topic Card Tabs - Rounded corners to match card ---- */
.topic-card-tabs {
    background-color: #efefef;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.topic-card-tabs .nav-link {
    border: none !important;
    border-radius: 0 !important;
    color: #6c757d;
    background: transparent;
}

.topic-card-tabs .nav-link.active {
    color: black;
    background: transparent;
    border-bottom: 2px solid #0d6efd !important;
}

.topic-card-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: 16px !important;
}

.topic-card-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 16px !important;
}

/* Cards with tabs need overflow hidden to clip corners (light mode) */
.card:has(.topic-card-tabs),
.card-large:has(.topic-card-tabs) {
    overflow: hidden !important;
    border-radius: 16px !important;
}

/* ---- Question Cards - Rounded corners ---- */
.question-card {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.question-card .card-header {
    border-radius: 16px 16px 0 0 !important;
}

.question-card .card-footer {
    border-radius: 0 0 16px 16px !important;
}

/* Dark mode question cards */
body.dark-pro .question-card {
    border-radius: 16px !important;
    overflow: hidden !important;
}

body.dark-pro .question-card .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-pro .question-card .card-footer {
    background: transparent !important;
    border-radius: 0 0 16px 16px !important;
    border-top: none !important;
}

/* Dark mode topic card tabs */
body.dark-pro .topic-card-tabs {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-pro .topic-card-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-pro .topic-card-tabs .nav-link.active {
    color: white !important;
    border-bottom: 2px solid #c9f869 !important;
}

body.dark-pro .topic-card-tabs .nav-link:hover {
    color: white !important;
}

/* ---- Featured Test Packages / Category Cards - Dark Purple Theme ---- */
body.dark-pro .card,
body.dark-pro .card-large,
body.dark-pro .container-topics .card,
body.dark-pro #features .card {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: white !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible !important; /* Required for stretched-link to work */
}

/* Cards with tabs need overflow hidden to clip tab corners */
body.dark-pro .card:has(.topic-card-tabs),
body.dark-pro .card-large:has(.topic-card-tabs) {
    overflow: hidden !important;
}

/* Subtle glow effect on cards - disabled to prevent visual artifacts */
/* The glow was causing split highlights on table hover */

body.dark-pro .card:hover,
body.dark-pro .card-large:hover,
body.dark-pro .container-topics .card:hover,
body.dark-pro #features .card:hover {
    border-color: rgba(201, 248, 105, 0.3) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

/* Stretched-link support for clickable cards */
/* The card itself is positioned, so the ::after will extend to it */
/* We don't need card-body to be positioned - this allows ::after to extend to the card */
body.dark-pro .card > .card-body,
body.dark-pro .card-large > .card-body {
    position: static;
}

/* The link itself - Bootstrap's stretched-link works best with position: static */
/* This allows the ::after pseudo-element to extend to the card, not the link */
body.dark-pro .card .stretched-link,
body.dark-pro .card-large .stretched-link {
    position: static;
}

/* Ensure the stretched-link pseudo-element covers the entire card and is above all content */
/* Bootstrap creates the ::after pseudo-element that extends to the nearest positioned ancestor (the card) */
body.dark-pro .card .stretched-link::after,
body.dark-pro .card-large .stretched-link::after {
    z-index: 1;
    pointer-events: auto;
}

body.dark-pro .card:has(.stretched-link):hover,
body.dark-pro .card-large:has(.stretched-link):hover {
    cursor: pointer;
}

body.dark-pro .card h5,
body.dark-pro .card h6,
body.dark-pro .card-large h5,
body.dark-pro .card-large h6,
body.dark-pro .card-title,
body.dark-pro #features .card-title {
    color: white !important;
}

/* Container topics title - dark text on light background */
body.dark-pro .container-topics .title,
body.dark-pro .container-topics .title h4 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .card p,
body.dark-pro .card-large p,
body.dark-pro .card-text,
body.dark-pro .card .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-pro .card .fw-bold,
body.dark-pro .card-large .fw-bold {
    color: #c9f869 !important;
}

/* Add white background behind logos for visibility on dark cards */
body.dark-pro .card .card-image,
body.dark-pro .card-large .card-image {
    background: white;
    padding: 8px;
    border-radius: 10px;
}

/* Override text-dark in cards */
body.dark-pro .card .text-dark,
body.dark-pro .card-large .text-dark,
body.dark-pro .row.text-dark .card,
body.dark-pro .row.text-dark .card-large {
    color: white !important;
}

body.dark-pro .row.text-dark .card h5,
body.dark-pro .row.text-dark .card h6,
body.dark-pro .row.text-dark .card p,
body.dark-pro .row.text-dark .card .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-pro .row.text-dark .card h5 {
    color: white !important;
}

/* Card title wrap styling */
body.dark-pro .card-title-wrap h5,
body.dark-pro .card-title-wrap h6 {
    color: white !important;
}

body.dark-pro .card-title-wrap .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-pro .card .btn-primary,
body.dark-pro .card-large .btn-primary {
    background: #4ade80 !important;
    color: #1a1225 !important;
    border: none !important;
    font-weight: 700;
    border-radius: 50px !important;
    padding: 0.75rem 1.5rem !important;
}

body.dark-pro .card .btn-primary:hover,
body.dark-pro .card-large .btn-primary:hover {
    background: #86efac !important;
    color: #1a1225 !important;
    transform: scale(1.02);
}

body.dark-pro .knowledge-area-icon {
    color: #f97316 !important; /* Orange */
}

body.dark-pro .feature-icon {
    color: #c9f869 !important;
    font-size: 2.5rem;
}

/* Features section on category pages */
body.dark-pro #features {
    background: var(--lp-bg-primary) !important;
}

body.dark-pro #features h2 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro #features .card .card-body {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

body.dark-pro #features .card .card-title {
    color: white !important;
    font-weight: 600;
}

body.dark-pro #features .card .card-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ---- Sets Section ---- */
body.dark-pro #sets {
    background: var(--lp-bg-primary) !important;
}

body.dark-pro #sets h2 {
    color: var(--lp-text-primary);
}

/* ---- Featured Categories Section ---- */
body.dark-pro .featured-certifications {
    background: var(--lp-bg-primary) !important;
}

body.dark-pro .featured-certifications h1,
body.dark-pro .featured-certifications h2 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .finished-test h3{
    color: var(--lp-text-primary) !important;
}

body.dark-pro .test-results-header h1,
body.dark-pro .test-results-header h2 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro #register_form h1, body.dark-pro #register_form h2, body.dark-pro #register_form h3, body.dark-pro #register_form h4, body.dark-pro #register_form h5, body.dark-pro #register_form h6 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .article h1, body.dark-pro .article h2, body.dark-pro .article h3, body.dark-pro .article h4, body.dark-pro .article h5, body.dark-pro .article h6 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro  tbody.result-question-text h5.card-title, body.dark-pro  tbody.result-question-text .question-container, body.dark-pro  .extra-tags {
    color: var(--lp-text-inverse) !important;
}

/* ---- Score Circle (Results) ---- */
body.dark-pro .score-circle {
    background: var(--lp-bg-card);
    border: 4px solid var(--lp-success);
    box-shadow: 0 0 30px rgba(22, 163, 74, 0.15);
}

body.dark-pro .score-circle h2 {
    color: var(--lp-text-primary)!important;
}

/* ---- Question/Test Interface ---- */
/* Exclude bg-correct and bg-incorrect from default styling */
body.dark-pro .answer-option:not(.bg-correct):not(.bg-incorrect) {
    background: var(--lp-bg-card) !important;
    border: 2px solid var(--lp-border-default) !important;
    color: var(--lp-text-primary);
    transition: all var(--lp-transition-fast);
    border-radius: var(--lp-radius-md);
}

body.dark-pro .answer-option:not(.bg-correct):not(.bg-incorrect):hover {
    border-color: var(--lp-accent-primary-pastel) !important;
    background: var(--lp-accent-primary-bg) !important;
}

/* Correct answer styling */
body.dark-pro .answer-option.bg-correct {
    background-color: #166534 !important;
    border: 2px solid #22c55e !important;
    color: white !important;
    border-radius: var(--lp-radius-md);
}

/* Incorrect answer styling */
body.dark-pro .answer-option.bg-incorrect {
    background-color: #dc2626 !important;
    border: 2px solid #ef4444 !important;
    color: white !important;
    border-radius: var(--lp-radius-md);
}

body.dark-pro .my-label input[type="radio"]:checked + .answer-letters + .answer-option {
    border-color: var(--lp-accent-primary) !important;
    background: var(--lp-accent-primary-bg) !important;
    box-shadow: 0 0 0 3px var(--lp-accent-glow);
}

body.dark-pro .text-alphabet {
    color: var(--lp-accent-primary);
    font-weight: 600;
}

body.dark-pro #answers-container label {
    color: var(--lp-text-primary);
}

/* Correct/Wrong Answer States */
body.dark-pro .answer-correct {
    border-color: var(--lp-success) !important;
    background: var(--lp-success-bg) !important;
}

body.dark-pro .answer-wrong {
    border-color: var(--lp-error) !important;
    background: var(--lp-error-bg) !important;
}

/* ---- Profile Page - Dark Purple Theme ---- */
body.dark-pro .profile-hero {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
}

body.dark-pro .profile-hero h1,
body.dark-pro .profile-hero h2,
body.dark-pro .profile-hero p {
    color: white !important;
}

body.dark-pro .profile-container {
    background: transparent;
}

/* All cards on profile page - Dark Purple Theme */
body.dark-pro .stat-card,
body.dark-pro .quick-actions,
body.dark-pro .recent-tests,
body.dark-pro .topic-performance {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

body.dark-pro .stat-card h3,
body.dark-pro .quick-actions h2,
body.dark-pro .recent-tests h2,
body.dark-pro .topic-performance h2 {
    color: white !important;
}

body.dark-pro .stat-value {
    color: white !important;
    font-weight: 700;
}

body.dark-pro .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Suggested topics and suggested reading cards - LIGHT theme */
body.dark-pro .card.h-100.text-dark {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

body.dark-pro .card.h-100.text-dark .card-body {
    color: #1f2937 !important;
}

body.dark-pro .card.h-100.text-dark .fw-bold {
    color: #1f2937 !important;
}

body.dark-pro .card.h-100.text-dark a {
    color: #7c3aed !important; /* Purple links */
}

body.dark-pro .card.h-100.text-dark a:hover {
    color: #5b21b6 !important;
}

body.dark-pro .card.h-100.text-dark svg path[fill="#fff"] {
    fill: #6b7280 !important; /* Grey for the question mark icon */
}

/* Other cards - white text on dark */
body.dark-pro .card:not(.h-100) a,
body.dark-pro .card-large a {
    color: white !important;
}

body.dark-pro .card:not(.h-100) a:hover,
body.dark-pro .card-large a:hover {
    color: #c9f869 !important;
}

/* Action cards */
body.dark-pro .action-card-primary {
    background: #4ade80 !important;
    color: #1a1225 !important;
}

body.dark-pro .action-card-primary:hover {
    background: #22c55e !important;
    color: #1a1225 !important;
}

body.dark-pro .action-card-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-pro .action-card-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

/* Test items in recent tests */
body.dark-pro .test-item {
    background: transparent;
    border-radius: var(--lp-radius-md);
    color: white !important;
    transition: background var(--lp-transition-fast);
}

body.dark-pro .test-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-pro .test-date,
body.dark-pro .test-score-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-pro .test-category {
    color: white !important;
}

body.dark-pro .test-score-value {
    color: #4ade80 !important;
}

body.dark-pro .topic-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--lp-radius-md);
}

body.dark-pro .topic-name,
body.dark-pro .topic-name a {
    color: white !important;
}

body.dark-pro .topic-bar {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--lp-radius-full);
}

/* Percentile and Chart Section styling handled by parent containers */

/* Wrap percentile in card-like styling */
body.dark-pro .percentile-display {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #1f2937 !important;
    border-radius: 12px;
}

/* Percentile number - dark for readability on white */
body.dark-pro .percentile-number {
    color: #1f2937 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-shadow: none;
    display: block !important;
    margin-bottom: 0.25rem;
}

/* Ensure percentile is readable even when inside dark hero sections */
body.dark-pro .profile-hero .percentile-display,
body.dark-pro .score-hero .percentile-display {
    background: white !important;
}

body.dark-pro .profile-hero .percentile-number,
body.dark-pro .score-hero .percentile-number {
    color: #1f2937 !important;
}

body.dark-pro .percentile-label {
    color: #6b7280 !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    opacity: 1 !important;
    display: block;
}

/* Your history section - PMI triangle cards - LIGHT theme */
body.dark-pro .history-card,
body.dark-pro [class*="triangle-card"],
body.dark-pro .pdu-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

body.dark-pro .history-card h5,
body.dark-pro .history-card h6,
body.dark-pro .history-card p,
body.dark-pro .history-card span {
    color: #1f2937 !important;
}



/* But keep green for actual success indicators outside cards */
body.dark-pro .text-success:not(.card .text-success):not(.card-large .text-success) {
    color: #22c55e!important;
    
}

/* ---- Profile Suggested Topics & Reading Cards - White Text ---- */
body.dark-pro .card .fw-bold,
body.dark-pro .card-large .fw-bold {
    color: white !important;
}

/* Override inline colored links in cards - use purple for light cards */
body.dark-pro .card a[style*="color"],
body.dark-pro .card-large a[style*="color"],
body.dark-pro .card-header a,
body.dark-pro .card-body a {
    color: #7c3aed !important; /* Purple */
}

body.dark-pro .card a[style*="color"]:hover,
body.dark-pro .card-large a[style*="color"]:hover,
body.dark-pro .card-header a:hover,
body.dark-pro .card-body a:hover {
    color: #5b21b6 !important;
}

/* Card headers - light theme for history cards */
body.dark-pro .card-header {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

/* Card body text - dark for light cards */
body.dark-pro .card-body {
    color: white !important;
}

/* Keep text-dark as dark on light cards */
body.dark-pro .card.h-100.text-dark .card-body.text-dark,
body.dark-pro .card.h-100.text-dark .text-dark {
    color: #1f2937 !important;
}

/* Other cards text-dark should still be white */
body.dark-pro .card:not(.h-100) .card-body.text-dark,
body.dark-pro .card:not(.h-100) .text-dark {
    color: white !important;
}

/* Profile history section heading */
body.dark-pro h3.px-2 {
    color: #1f2937;
}

/* Certificate of PDUs link - orange for readability */
body.dark-pro a[href*="pmi-talent-triangles"] {
    color: #ea580c !important; /* Dark orange */
    font-weight: 600;
}

body.dark-pro a[href*="pmi-talent-triangles"]:hover {
    color: #c2410c !important;
    text-decoration: underline;
}

/* Time display in triangle cards - white text */
body.dark-pro .card .card-body.d-block.text-center.fw-bold {
    color: white !important;
    font-size: 1.5rem;
}

/* ---- Go Premium Banner - Full White Text ---- */
/* Target banners with dark inline styles */
body.dark-pro .card.shadow[style*="background-color: #2c3e50"],
body.dark-pro .card.shadow[style*="background-color:#2c3e50"],
body.dark-pro .card.shadow[style*="color: #ecf0f1"] {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* All text in dark banner cards should be white */
body.dark-pro .card.shadow[style*="background-color: #2c3e50"] *,
body.dark-pro .card.shadow[style*="background-color:#2c3e50"] *,
body.dark-pro .card.shadow[style*="color: #ecf0f1"] * {
    color: white !important;
}

/* But keep the logo wrapper white */
body.dark-pro .card.shadow .card-image.bg-white {
    background: white !important;
}

/* Banner list - use existing checkmark from styles.css, no disc bullets */
body.dark-pro .card.shadow[style*="background-color"] ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

body.dark-pro .card.shadow[style*="background-color"] ul li {
    margin-bottom: 0.75rem;
    padding-left: 2rem;
    position: relative;
}

/* The checkmark comes from styles.css ::before - just ensure it's visible */
body.dark-pro .card.shadow[style*="background-color"] ul li::before {
    left: 0 !important;
    top: 0.15rem !important;
}

/* Banner CTA button - lime green */
body.dark-pro .btn-warning.banner-cta {
    background: #4ade80 !important;
    color: #1a1225 !important;
    border: none !important;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
}

body.dark-pro .btn-warning.banner-cta:hover {
    background: #22c55e !important;
    color: #1a1225 !important;
}

/* ---- Percentile & Chart Section Redesign ---- */

/* Remove outer shadow container styling */
body.dark-pro .container.shadow {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Alert as a styled purple card */
body.dark-pro .alert-warning {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-radius: 16px !important;
    padding: 1.5rem 2rem !important;
    margin-bottom: 1.5rem !important;
}

body.dark-pro .alert-warning .alert-heading,
body.dark-pro .alert-warning h5 {
    color: white !important;
    font-weight: 700;
}

body.dark-pro .alert-warning p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 0;
}

body.dark-pro .alert-warning a {
    color: #ea580c !important; /* Darker orange for better contrast */
    font-weight: 600;
    text-decoration: underline;
}

body.dark-pro .alert-warning a:hover {
    color: #f97316 !important;
}

/* Percentile row layout - equal height cards with gap */
body.dark-pro .row.mb-md-4 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0 !important;
    align-items: stretch;
}

body.dark-pro .row.mb-md-4 > .col-md {
    min-width: 280px;
    max-width: none !important;
}

/* Percentile gauge card - smaller, purple outer, white inner */
body.dark-pro .row.mb-md-4 > .col-md.text-center {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    max-width: 320px !important;
    flex: 0 0 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* White inner area for the SVG gauge - constrained size */
body.dark-pro .row.mb-md-4 > .col-md.text-center svg {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    max-width: 240px;
    height: auto;
}

/* Percentile SVG text */
body.dark-pro svg text[fill="black"] {
    fill: #1f2937 !important;
}

/* Chart container card - purple outer, takes remaining space */
body.dark-pro .row.mb-md-4 > .col-md.px-0 {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    flex: 1 1 auto !important;
}

/* White inner container for the chart */
body.dark-pro [hx-get*="get_chart_hx"] {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    height: 100%;
}

body.dark-pro .chart-container {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    height: 100%;
}

/* ---- Shadows Override ---- */
body.dark-pro .shadow,
body.dark-pro .shadow-sm {
    box-shadow: var(--lp-shadow-md) !important;
}

body.dark-pro .shadow-lg {
    box-shadow: var(--lp-shadow-lg) !important;
}

/* ---- Background Utilities ---- */
body.dark-pro .bg-light {
    background: var(--lp-bg-secondary) !important;
}

body.dark-pro .bg-white {
    background: var(--lp-bg-card) !important;
}

/* Choose Plan Page - Fix card readability */
body.dark-pro .card.bg-white,
body.dark-pro .card.bg-white .card-body {
    background: white !important;
    color: var(--lp-text-primary) !important;
}

body.dark-pro .card.bg-white h5,
body.dark-pro .card.bg-white p,
body.dark-pro .card.bg-white li,
body.dark-pro .card.bg-white ul,
body.dark-pro .card.bg-white .card-title,
body.dark-pro .card.bg-white .card-text,
body.dark-pro .card.bg-white strong {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .card.bg-white ul {
    list-style: disc;
    padding-left: 1.5rem;
}

body.dark-pro .card.bg-white::before {
    display: none !important;
}

body.dark-pro .card.bg-white .btn-outline-dark {
    color: white !important;
    background: var(--lp-accent-primary) !important;
    border-color: var(--lp-accent-primary) !important;
}

body.dark-pro .card.bg-white .btn-outline-dark:hover {
    background: var(--lp-accent-primary-soft) !important;
}

body.dark-pro .bg-primary {
    background: var(--lp-accent-primary) !important;
}

/* ---- Border Utilities ---- */
body.dark-pro .border {
    border-color: var(--lp-border-default) !important;
}

body.dark-pro .rounded-3 {
    border-radius: var(--lp-radius-md) !important;
}

/* ---- Container Shadow Override ---- */
body.dark-pro .container.shadow {
    background: var(--lp-bg-card) !important;
    border: 1px solid var(--lp-border-subtle);
    border-radius: var(--lp-radius-xl);
}

/* ---- Dropdown ---- */
body.dark-pro .dropdown-menu {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-default);
    box-shadow: var(--lp-shadow-lg);
    border-radius: var(--lp-radius-md);
}

body.dark-pro .dropdown-item {
    color: var(--lp-text-secondary);
    padding: 0.5rem 1rem;
}

body.dark-pro .dropdown-item:hover {
    background: var(--lp-bg-secondary);
    color: var(--lp-text-primary);
}

/* ---- Modal ---- */
body.dark-pro .modal-content {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-default);
    border-radius: var(--lp-radius-lg);
}

body.dark-pro .modal-header {
    border-bottom-color: var(--lp-border-subtle);
}

body.dark-pro .modal-footer {
    border-top-color: var(--lp-border-subtle);
}

/* ---- Scrollbar ---- */
body.dark-pro::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-pro::-webkit-scrollbar-track {
    background: var(--lp-bg-secondary);
}

body.dark-pro::-webkit-scrollbar-thumb {
    background: var(--lp-stone-300);
    border-radius: 5px;
}

body.dark-pro::-webkit-scrollbar-thumb:hover {
    background: var(--lp-stone-400);
}

/* ---- Selection ---- */
body.dark-pro ::selection {
    background: var(--lp-accent-primary-pastel);
    color: var(--lp-text-primary);
}

/* ---- Index Page Specific ---- */
body.dark-pro .hero.section-banner {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
}

/* Container shadow on homepage */
body.dark-pro .container.shadow {
    background: transparent !important;
    box-shadow: none !important;
}

body.dark-pro .featured-certifications {
    background: var(--lp-bg-primary) !important;
    padding: 3rem 0;
}

body.dark-pro .featured-certifications h2 {
    color: var(--lp-text-primary);
    margin-bottom: 2rem;
}

body.dark-pro .job-interview-tips {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: white !important;
}

body.dark-pro .job-interview-tips h2,
body.dark-pro .job-interview-tips h3 {
    color: white !important;
}

body.dark-pro .job-interview-tips ol,
body.dark-pro .job-interview-tips ul,
body.dark-pro .job-interview-tips li {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-pro .job-interview-tips a {
    color: #c9f869 !important;
}

body.dark-pro .job-interview-tips a:hover {
    color: #a3e635 !important;
}

/* ---- Testimonials ---- */
body.dark-pro .testimonials-section {
    background: var(--lp-bg-primary) !important;
}

body.dark-pro .testimonial-card {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: white !important;
}

body.dark-pro .testimonial-card p,
body.dark-pro .testimonial-card .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-pro .testimonial-card strong {
    color: #c9f869 !important;
}

/* ---- Results Page ---- */
/* Quick Statistics inner cards - white background with dark text */
body.dark-pro .card .border.rounded.p-3,
body.dark-pro .card-large .border.rounded.p-3 {
    background: white !important;
    border-color: #e5e7eb !important;
    border-radius: var(--lp-radius-md) !important;
}

body.dark-pro .card .border.rounded.p-3 h4,
body.dark-pro .card-large .border.rounded.p-3 h4 {
    color: #1f2937 !important;
    font-weight: 700;
}

body.dark-pro .card .border.rounded.p-3 .text-muted,
body.dark-pro .card-large .border.rounded.p-3 .text-muted {
    color: #6b7280 !important;
}

body.dark-pro .card .border.rounded.p-3 i,
body.dark-pro .card-large .border.rounded.p-3 i {
    opacity: 1 !important;
}

/* ---- Question Review Page ---- */
body.dark-pro .question-nav-header {
    border-top: 1px solid var(--lp-border-default);
    border-bottom: 1px solid var(--lp-border-default);
    background: var(--lp-bg-secondary);
}

body.dark-pro .result-link {
    color: var(--lp-text-primary) !important;
    text-decoration: underline;
}

body.dark-pro .result-link:hover {
    color: var(--lp-accent-primary) !important;
}

body.dark-pro .blur-container {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-default) !important;
    color: var(--lp-text-primary);
    border-radius: var(--lp-radius-lg);
}

body.dark-pro .topic-link,
body.dark-pro .concept-link {
    color: var(--lp-accent-primary);
    text-decoration: underline;
}

body.dark-pro .topic-link:hover,
body.dark-pro .concept-link:hover {
    color: var(--lp-accent-hover);
}

/* ---- Feedback Form ---- */
body.dark-pro .feedback-container {
    max-width: 100%;
}

body.dark-pro #feedback-form-container textarea {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-default);
    color: var(--lp-text-primary);
    border-radius: var(--lp-radius-md);
}

body.dark-pro #feedback-form-container textarea:focus {
    border-color: var(--lp-accent-primary);
    box-shadow: 0 0 0 3px var(--lp-accent-glow);
}

/* ---- Question Container ---- */
body.dark-pro .question-container {
    line-height: 1.7;
}

body.dark-pro .question-container img {
    max-width: 100%;
    border-radius: var(--lp-radius-md);
    margin: 1rem 0;
}

/* ---- Overblur Section ---- */
body.dark-pro #overblur {
    color: var(--lp-text-primary);
}

/* ---- Flashcards ---- */
body.dark-pro .flashcard {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border-subtle);
    border-radius: var(--lp-radius-lg);
}

body.dark-pro .flashcard:hover {
    border-color: var(--lp-accent-primary-pastel);
    box-shadow: var(--lp-shadow-card-hover);
}

/* ---- Results Page - Fix Readability ---- */
/* Score Hero Section - Purple Gradient - Ensure White Text */
body.dark-pro .score-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

body.dark-pro .score-hero h1,
body.dark-pro .score-hero h3,
body.dark-pro .score-hero div,
body.dark-pro .score-hero span,
body.dark-pro .score-details h1,
body.dark-pro .score-details div,
body.dark-pro .score-meta,
body.dark-pro .score-meta-item,
body.dark-pro .score-meta-item span,
body.dark-pro .score-meta-item i {
    color: white !important;
}

body.dark-pro .score-circle-v2 {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

/* Results page cards - ensure text inside dark cards is visible */
body.dark-pro .card h3,
body.dark-pro .card-large h3 {
    color: white !important;
}

/* Alert boxes on result page */
body.dark-pro .card .alert,
body.dark-pro .card-large .alert {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .card .alert-warning,
body.dark-pro .card-large .alert-warning {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

body.dark-pro .card .alert-success,
body.dark-pro .card-large .alert-success {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
}

body.dark-pro .card .alert i,
body.dark-pro .card-large .alert i {
    color: inherit !important;
}

/* Quick Statistics section */
body.dark-pro .card h4,
body.dark-pro .card-large h4 {
    color: white !important;
}



body.dark-pro .card .card h5,
body.dark-pro .card .card p,
body.dark-pro .card .card span,
body.dark-pro .card-large .card h5,
body.dark-pro .card-large .card p,
body.dark-pro .card-large .card span {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .card .card::before,
body.dark-pro .card-large .card::before {
    display: none !important;
}

/* Action Prompt Section - White Card with Orange Border */
body.dark-pro .action-prompt {
    background: var(--lp-bg-card) !important;
    border-left-color: var(--lp-accent-primary) !important;
}

body.dark-pro .action-prompt h2 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .action-prompt h2 i {
    color: var(--lp-accent-primary) !important;
}

body.dark-pro .action-prompt p {
    color: var(--lp-text-secondary) !important;
}

body.dark-pro .action-prompt p strong {
    color: var(--lp-text-primary) !important;
}

/* Action Buttons - Fix Orange on Orange Issue */
body.dark-pro .action-button-primary {
    background: var(--lp-accent-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
}

body.dark-pro .action-button-primary:hover {
    background: var(--lp-accent-hover) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35) !important;
}

body.dark-pro .action-button-primary i {
    color: white !important;
}

body.dark-pro .action-button-secondary {
    background: var(--lp-bg-card) !important;
    color: var(--lp-text-primary) !important;
    border: 1px solid var(--lp-border-default) !important;
}

body.dark-pro .action-button-secondary:hover {
    background: var(--lp-bg-secondary) !important;
    color: var(--lp-text-primary) !important;
    border-color: var(--lp-accent-primary-pastel) !important;
}

body.dark-pro .action-button-secondary i {
    color: var(--lp-accent-primary) !important;
}

/* Performance Cards */
body.dark-pro .performance-card {
    background: var(--lp-bg-card) !important;
    border: 1px solid var(--lp-border-subtle);
}

body.dark-pro .performance-card h3 {
    color: var(--lp-text-muted) !important;
}

body.dark-pro .performance-card .stat-value {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .performance-card .stat-label {
    color: var(--lp-text-muted) !important;
}

/* Topics Section */
body.dark-pro .topics-section {
    background: var(--lp-bg-card) !important;
}

body.dark-pro .topics-section h2 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .topics-section h2 i {
    color: var(--lp-accent-primary) !important;
}

body.dark-pro .topic-name,
body.dark-pro .topic-name a {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .topic-name a:hover {
    color: var(--lp-accent-primary) !important;
}

body.dark-pro .topic-score {
    color: var(--lp-text-primary) !important;
    font-weight: 600;
}

body.dark-pro .topic-bar {
    background: var(--lp-bg-tertiary) !important;
}

/* Questions Section */
body.dark-pro .questions-section {
    background: var(--lp-bg-card) !important;
}

body.dark-pro .questions-section h2 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .question-row {
    background: transparent;
}

body.dark-pro .question-row:hover {
    background: var(--lp-bg-secondary) !important;
}

body.dark-pro .question-num {
    color: var(--lp-text-muted) !important;
}

body.dark-pro .question-topic {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .question-time {
    color: var(--lp-text-muted) !important;
}

body.dark-pro .review-button {
    background: var(--lp-bg-secondary) !important;
    color: var(--lp-text-primary) !important;
    border: 1px solid var(--lp-border-default) !important;
}

body.dark-pro .review-button:hover {
    background: var(--lp-bg-tertiary) !important;
    border-color: var(--lp-accent-primary-pastel) !important;
}

/* ============================================
   COLORFUL HERO SECTION - Homepage
   Inspired by Modern SaaS Design
   ============================================ */

body.dark-pro .hero-colorful {
    background: #2d1b3d;
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%);
    padding: 5rem 2rem 6rem;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Colorful Abstract Blobs */
body.dark-pro .hero-blob {
    position: absolute;
    border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
    filter: blur(40px);
    opacity: 0.8;
    z-index: 0;
    animation: blob-morph 15s ease-in-out infinite;
}

body.dark-pro .hero-blob-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #e879f9 100%);
    top: -150px;
    left: -150px;
    animation-delay: 0s;
}

body.dark-pro .hero-blob-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #c9f869 0%, #a3e635 100%);
    top: 20%;
    right: -100px;
    animation-delay: -3s;
}

body.dark-pro .hero-blob-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #38bdf8 0%, #67e8f9 100%);
    bottom: 10%;
    left: -80px;
    animation-delay: -6s;
}

body.dark-pro .hero-blob-4 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #fb7185 0%, #f472b6 100%);
    bottom: -100px;
    right: 10%;
    animation-delay: -9s;
}

body.dark-pro .hero-blob-5 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    top: 60%;
    right: 30%;
    opacity: 0.6;
    animation-delay: -12s;
}

@keyframes blob-morph {
    0%, 100% {
        border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
        transform: rotate(0deg) scale(1);
    }
    25% {
        border-radius: 60% 50% 40% 60% / 40% 50% 60% 50%;
        transform: rotate(5deg) scale(1.05);
    }
    50% {
        border-radius: 40% 60% 50% 40% / 60% 40% 50% 60%;
        transform: rotate(-5deg) scale(0.95);
    }
    75% {
        border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
        transform: rotate(3deg) scale(1.02);
    }
}

/* Hero Content */
body.dark-pro .hero-colorful-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
}

body.dark-pro .hero-badge-colorful {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-weight: 500;
}

body.dark-pro .hero-title-colorful {
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: white;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

body.dark-pro .hero-title-highlight {
    background: linear-gradient(135deg, #c9f869 0%, #a3e635 50%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-pro .hero-subtitle-colorful {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* CTA Buttons */
body.dark-pro .hero-cta-colorful {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

body.dark-pro .btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #4ade80;
    color: #1a1225 !important;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.35);
    transition: all 0.3s ease;
}

body.dark-pro .btn-cta-primary:hover {
    background: #86efac;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(74, 222, 128, 0.45);
    color: #1a1225 !important;
}

body.dark-pro .btn-cta-primary svg {
    transition: transform 0.3s ease;
}

body.dark-pro .btn-cta-primary:hover svg {
    transform: translateX(4px);
}

body.dark-pro .btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

body.dark-pro .btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: white !important;
}

/* Stats Row */
body.dark-pro .hero-stats-colorful {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

body.dark-pro .hero-stat-item {
    text-align: center;
}

body.dark-pro .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
}

body.dark-pro .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* Floating Success Cards */
body.dark-pro .hero-floating-cards {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

body.dark-pro .floating-card {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    animation: float-card 6s ease-in-out infinite;
    pointer-events: auto;
}

body.dark-pro .floating-card-1 {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
    min-width: 220px;
}

body.dark-pro .floating-card-2 {
    top: 25%;
    right: 8%;
    animation-delay: -2s;
}

body.dark-pro .floating-card-3 {
    bottom: 20%;
    left: 12%;
    animation-delay: -4s;
}

@keyframes float-card {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

body.dark-pro .floating-card-icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c9f869 0%, #a3e635 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

body.dark-pro .floating-card strong {
    display: block;
    color: #1a1225;
    font-size: 0.9rem;
    font-weight: 700;
}

body.dark-pro .floating-card span {
    color: #64748b;
    font-size: 0.8rem;
}

/* Certification Carousel in Floating Card */
body.dark-pro .floating-card-carousel {
    position: relative;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.dark-pro .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
}

body.dark-pro .carousel-slide.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

body.dark-pro .carousel-slide strong {
    color: #7c3aed;
}

/* Responsive Colorful Hero */
@media (max-width: 992px) {
    body.dark-pro .hero-colorful {
        padding: 4rem 1.5rem 5rem;
        min-height: auto;
    }
    
    body.dark-pro .hero-title-colorful {
        font-size: 2.75rem;
    }
    
    body.dark-pro .hero-subtitle-colorful {
        font-size: 1.1rem;
    }
    
    body.dark-pro .hero-blob-1 { width: 250px; height: 250px; }
    body.dark-pro .hero-blob-2 { width: 200px; height: 200px; }
    body.dark-pro .hero-blob-3 { width: 150px; height: 150px; }
    body.dark-pro .hero-blob-4 { width: 180px; height: 180px; }
    body.dark-pro .hero-blob-5 { display: none; }
}

@media (max-width: 576px) {
    body.dark-pro .hero-colorful {
        padding: 3rem 1rem 4rem;
    }
    
    body.dark-pro .hero-title-colorful {
        font-size: 2.25rem;
    }
    
    body.dark-pro .hero-subtitle-colorful {
        font-size: 1rem;
    }
    
    body.dark-pro .hero-cta-colorful {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    body.dark-pro .btn-cta-primary,
    body.dark-pro .btn-cta-secondary {
        width: 100%;
        justify-content: center;
    }
    
    body.dark-pro .hero-stats-colorful {
        gap: 1.5rem;
    }
    
    body.dark-pro .stat-number {
        font-size: 1.5rem;
    }
    
    body.dark-pro .hero-blob-1 { width: 180px; height: 180px; }
    body.dark-pro .hero-blob-2 { width: 150px; height: 150px; }
    body.dark-pro .hero-blob-3 { width: 120px; height: 120px; }
    body.dark-pro .hero-blob-4 { width: 140px; height: 140px; }
}

/* ============================================
   CATEGORY START PAGE - Colorful Hero
   ============================================ */

body.dark-pro .category-hero-colorful {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1225 100%);
    position: relative;
    overflow: hidden;
}

/* Category Page Blobs */
body.dark-pro .cat-blob {
    position: absolute;
    border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
    filter: blur(50px);
    opacity: 0.7;
    z-index: 0;
    animation: blob-morph 18s ease-in-out infinite;
}

body.dark-pro .cat-blob-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

body.dark-pro .cat-blob-2 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #c9f869 0%, #a3e635 100%);
    top: 50%;
    right: -80px;
    animation-delay: -4s;
}

body.dark-pro .cat-blob-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #38bdf8 0%, #67e8f9 100%);
    bottom: -60px;
    left: 20%;
    animation-delay: -8s;
}

body.dark-pro .cat-blob-4 {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #fb7185 0%, #f472b6 100%);
    bottom: 20%;
    right: 30%;
    opacity: 0.5;
    animation-delay: -12s;
}

/* Category Logo */
body.dark-pro .category-logo-wrapper {
    display: inline-flex;
    background: white;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

body.dark-pro .category-logo-wrapper svg {
    width: 60px;
    height: 60px;
}

/* Category Hero Typography */
body.dark-pro .category-hero-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

body.dark-pro .category-hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Category Hero CTA */
body.dark-pro .category-hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

body.dark-pro .btn-cat-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #4ade80;
    color: #1a1225 !important;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.35);
    transition: all 0.3s ease;
}

body.dark-pro .btn-cat-primary:hover {
    background: #86efac;
    transform: translateY(-2px);
    color: #1a1225 !important;
}

body.dark-pro .btn-cat-secondary {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

body.dark-pro .btn-cat-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white !important;
}

/* Category Stats */
body.dark-pro .category-hero-stats {
    display: flex;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

body.dark-pro .cat-stat {
    text-align: center;
}

body.dark-pro .cat-stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

body.dark-pro .cat-stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Category Image */
body.dark-pro .category-image-wrapper {
    position: relative;
    z-index: 1;
}

body.dark-pro .category-hero-image {
    max-height: 350px;
    width: auto;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Category Success Card */
body.dark-pro .category-success-card {
    position: absolute;
    bottom: 20px;
    left: -30px;
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    animation: float-card 5s ease-in-out infinite;
}

body.dark-pro .success-card-icon {
    font-size: 1.25rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c9f869 0%, #a3e635 100%);
    border-radius: 10px;
}

body.dark-pro .success-card-content strong {
    display: block;
    color: #7c3aed;
    font-size: 0.9rem;
}

body.dark-pro .success-card-content span {
    color: #64748b;
    font-size: 0.8rem;
}

/* Category Form Section */
body.dark-pro .category-form-section {
    background: var(--lp-bg-primary);
}

body.dark-pro .category-form-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

body.dark-pro .form-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lp-text-primary);
    margin-bottom: 1.5rem;
}

body.dark-pro .form-card-icon {
    font-size: 1.5rem;
}

body.dark-pro .form-group-colorful {
    margin-bottom: 1.5rem;
}

body.dark-pro .form-label-colorful {
    display: block;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin-bottom: 0.5rem;
}

body.dark-pro .form-range-colorful {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--lp-stone-200);
    appearance: none;
    -webkit-appearance: none;
}

body.dark-pro .form-range-colorful::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #7c3aed;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

body.dark-pro .form-range-colorful::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #7c3aed;
    cursor: pointer;
    border: none;
}

body.dark-pro .test-mode-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

body.dark-pro .test-mode-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lp-bg-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-pro .test-mode-option:hover {
    background: var(--lp-stone-200);
}

body.dark-pro .test-mode-option input[type="radio"] {
    accent-color: #7c3aed;
}

body.dark-pro .test-mode-option span {
    font-weight: 500;
    color: var(--lp-text-primary);
}

body.dark-pro .btn-start-test {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white !important;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
    transition: all 0.3s ease;
}

body.dark-pro .btn-start-test:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.45);
}

/* Category Page Responsive */
@media (max-width: 992px) {
    body.dark-pro .category-hero-colorful {
        text-align: center;
    }
    
    body.dark-pro .category-hero-cta {
        justify-content: center;
    }
    
    body.dark-pro .category-hero-stats {
        justify-content: center;
    }
    
    body.dark-pro .cat-blob-1 { width: 200px; height: 200px; }
    body.dark-pro .cat-blob-2 { width: 180px; height: 180px; }
    body.dark-pro .cat-blob-3 { width: 150px; height: 150px; }
    body.dark-pro .cat-blob-4 { display: none; }
}

@media (max-width: 576px) {
    body.dark-pro .category-hero-title {
        font-size: 2rem;
    }
    
    body.dark-pro .category-hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    body.dark-pro .btn-cat-primary,
    body.dark-pro .btn-cat-secondary {
        width: 100%;
        justify-content: center;
    }
    
    body.dark-pro .category-hero-stats {
        gap: 1.5rem;
    }
    
    body.dark-pro .category-form-card {
        padding: 1.5rem;
    }
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 768px) {
    body.dark-pro h1 { font-size: 2rem; }
    body.dark-pro h2 { font-size: 1.5rem; }
    body.dark-pro h3 { font-size: 1.25rem; }
    
    body.dark-pro .card-body {
        padding: 1rem;
    }
    
    body.dark-pro .btn {
        padding: 0.625rem 1.25rem;
    }
    
    body.dark-pro .btn-lg {
        padding: 0.875rem 1.5rem;
    }
}

/* ---- Subtle Hover Animations ---- */
@keyframes lp-subtle-lift {
    from {
        transform: translateY(0);
        box-shadow: var(--lp-shadow-card);
    }
    to {
        transform: translateY(-4px);
        box-shadow: var(--lp-shadow-card-hover);
    }
}

/* ---- Focus States for Accessibility ---- */
body.dark-pro *:focus-visible {
    outline: 2px solid var(--lp-accent-primary);
    outline-offset: 2px;
}

body.dark-pro .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--lp-accent-glow);
}

/* ============================================
   PREMIUM UPGRADE PAGE - Beautiful Dark Pro Design
   ============================================ */

/* Main Page Container - Light warm background */
body.dark-pro .premium-upgrade-page {
    background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%) !important;
    color: var(--lp-text-primary) !important;
    min-height: 100vh;
}

/* Breadcrumb Navigation - Transparent with dark text */
body.dark-pro .breadcrumb-nav {
    background: transparent !important;
    border-bottom: 1px solid #e7e5e4 !important;
    padding: 0.75rem 0;
}

body.dark-pro .breadcrumb-item,
body.dark-pro .breadcrumb-nav a {
    color: #57534e !important;
    text-decoration: none;
    font-weight: 500;
}

body.dark-pro .breadcrumb-item:hover,
body.dark-pro .breadcrumb-nav a:hover {
    color: #f97316 !important;
}

body.dark-pro .breadcrumb-separator {
    color: #a8a29e !important;
}

/* ---- Main Content Area - Left Side ---- */
body.dark-pro .premium-upgrade-page .main-content {
    position: relative;
}

/* Celebration Banner - Dark Pro Style */
body.dark-pro .celebration-banner,
body.dark-pro .premium-upgrade-page .main-content > div:first-child[style*="background"] {
    background: linear-gradient(135deg, #292524 0%, #44403c 100%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-radius: 16px !important;
    padding: 1.5rem 2rem !important;
    position: relative;
    overflow: hidden;
}

body.dark-pro .celebration-banner::before,
body.dark-pro .premium-upgrade-page .main-content > div:first-child[style*="background"]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

body.dark-pro .celebration-banner h2,
body.dark-pro .celebration-banner p,
body.dark-pro .celebration-banner div {
    color: white !important;
    position: relative;
    z-index: 1;
}

body.dark-pro .celebration-banner strong {
    color: #f97316 !important;
    position: relative;
    z-index: 1;
}

/* Premium Badge - Orange Style */
body.dark-pro .premium-badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
}

/* Course Header - Bold and elegant */
body.dark-pro .course-header {
    padding: 1.5rem 0;
}

body.dark-pro .course-header h1 {
    color: #1c1917 !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 800 !important;
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

body.dark-pro .course-subtitle {
    color: #57534e !important;
    font-size: 1.1rem !important;
    line-height: 1.6;
}

/* Meta Items - Pill style */
body.dark-pro .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem !important;
    margin-top: 1rem;
}

body.dark-pro .meta-item {
    background: white !important;
    color: #57534e !important;
    padding: 0.5rem 1rem !important;
    border-radius: 50px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: 1px solid #e7e5e4 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease;
}

body.dark-pro .meta-item:hover {
    border-color: #f97316 !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15) !important;
}

body.dark-pro .rating-stars {
    color: #f59e0b !important;
}

/* All Certifications Banner - Vibrant green with glow */
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"],
body.dark-pro .premium-upgrade-page .main-content > div[style*="#28a745"] {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%) !important;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.35), 0 0 60px rgba(34, 197, 94, 0.15) !important;
    border-radius: 16px !important;
    padding: 1.5rem 2rem !important;
    position: relative;
    overflow: hidden;
}

body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    pointer-events: none;
}

body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"] div,
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"] p {
    color: white !important;
    position: relative;
    z-index: 1;
}

/* Premium Badge - Dark elegant card */
body.dark-pro .premium-badge {
    background: linear-gradient(135deg, #292524 0%, #44403c 100%) !important;
    color: white !important;
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.25) !important;
    border-radius: 16px !important;
    padding: 1.25rem 1.5rem !important;
    position: relative;
    overflow: hidden;
}

body.dark-pro .premium-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(249, 115, 22, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

/* Progress Stats Section - Clean cards */
body.dark-pro .premium-upgrade-page [style*="background: rgba(255, 255, 255, 0.7)"] {
    background: white !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(28, 25, 23, 0.06) !important;
    padding: 1.5rem !important;
}

body.dark-pro .premium-upgrade-page [style*="background: rgba(255, 255, 255, 0.7)"] h3 {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

/* Stats Boxes inside progress section */
body.dark-pro .premium-upgrade-page [style*="rgba(40, 167, 69, 0.1)"] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
}

body.dark-pro .premium-upgrade-page [style*="rgba(108, 117, 125, 0.1)"] {
    background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
}

/* What You'll Learn / Benefits Section */
body.dark-pro .what-learn-section {
    margin-top: 2rem;
}

body.dark-pro .what-learn-section h2 {
    color: #1c1917 !important;
    font-weight: 800 !important;
    font-size: 1.75rem !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    display: inline-block;
}

body.dark-pro .what-learn-section h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #f97316, #fb923c);
    border-radius: 2px;
}

/* Benefits Grid - Beautiful cards */
body.dark-pro .benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.25rem !important;
}

body.dark-pro .benefit-item {
    background: white !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

body.dark-pro .benefit-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316, #fb923c, #fdba74);
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.dark-pro .benefit-item:hover {
    border-color: #fed7aa !important;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.12) !important;
    transform: translateY(-2px);
}

body.dark-pro .benefit-item:hover::before {
    opacity: 1;
}

body.dark-pro .benefit-icon {
    font-size: 1.5rem !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    flex-shrink: 0;
}

body.dark-pro .benefit-content h3 {
    color: #1c1917 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

body.dark-pro .benefit-content p {
    color: #78716c !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

body.dark-pro .premium-upgrade-page [style*="rgba(40, 167, 69, 0.1)"] > div:first-child {
    color: #16a34a !important;
    font-weight: 700 !important;
}

body.dark-pro [style*="rgba(40, 167, 69, 0.1)"] > div:last-child {
    color: var(--lp-text-muted) !important;
}

/* ---- Sidebar Pricing Card - Enhanced Design ---- */

/* Sidebar Pricing Card */
body.dark-pro .pricing-card {
    background: white !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(28, 25, 23, 0.1), 0 0 0 1px rgba(0,0,0,0.02) !important;
    overflow: hidden;
}

/* Course preview area at top of card */
body.dark-pro .course-preview:not([style*="background-image"]) {
    background: linear-gradient(135deg, #292524 0%, #44403c 100%) !important;
    position: relative;
}

body.dark-pro .course-preview:not([style*="background-image"])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(249, 115, 22, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

/* Preserve category images - don't override background-image */
body.dark-pro .course-preview[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
}

body.dark-pro .pricing-content {
    background: white !important;
    padding: 1.5rem !important;
}

/* Pricing Tabs - Pill style */
body.dark-pro .pricing-tabs {
    background: #f5f5f4 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    display: flex;
    gap: 4px;
}

body.dark-pro .pricing-tab {
    color: #78716c !important;
    background: transparent !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

body.dark-pro .pricing-tab.active {
    background: white !important;
    color: #1c1917 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.dark-pro .pricing-tab .tab-badge {
    background: #22c55e !important;
    color: white !important;
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
}

/* Savings Highlight */
body.dark-pro .savings-highlight {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    text-align: center;
    margin-bottom: 1rem;
}

body.dark-pro .savings-amount {
    color: #92400e !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
}

body.dark-pro .savings-detail {
    color: #a16207 !important;
    font-size: 0.85rem !important;
}

/* Price Display */
body.dark-pro .price-display {
    text-align: center;
    margin-bottom: 1rem;
}

body.dark-pro .price-main {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #1c1917 !important;
    line-height: 1.1;
}

body.dark-pro .price-main .price-period {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #78716c !important;
}

body.dark-pro .price-equivalent {
    color: #22c55e !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-top: 4px;
}

body.dark-pro .price-original {
    color: #a8a29e !important;
    text-decoration: line-through;
    font-size: 0.85rem !important;
    margin-top: 4px;
}

/* Pricing Notice */
body.dark-pro .pricing-notice {
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    color: #1c1917 !important;
    border-radius: 12px !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.9rem !important;
    margin-bottom: 1rem;
}

body.dark-pro .pricing-notice strong {
    color: #ea580c !important;
}

/* Urgency Display */
body.dark-pro .urgency-display {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.875rem 1rem !important;
    margin-bottom: 1rem;
}

body.dark-pro .urgency-text {
    color: #92400e !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* CTA Buttons - Orange gradient */
body.dark-pro .cta-primary {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35) !important;
    transition: all 0.3s ease !important;
    display: block;
    text-align: center;
    text-decoration: none;
}

body.dark-pro .cta-primary:hover {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.45) !important;
    color: white !important;
}

body.dark-pro .cta-secondary {
    background: transparent !important;
    color: #57534e !important;
    border: 2px solid #d6d3d1 !important;
    border-radius: 12px !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

body.dark-pro .cta-secondary:hover {
    border-color: #f97316 !important;
    color: #f97316 !important;
    background: #fff7ed !important;
}

/* Action Links */
body.dark-pro .action-links {
    border-top: 1px solid #e7e5e4 !important;
    padding-top: 1rem;
    margin-top: 1rem;
}

body.dark-pro .action-link {
    color: #f97316 !important;
    font-weight: 500 !important;
}

body.dark-pro .action-link:hover {
    color: #ea580c !important;
}

/* Debug Section */
body.dark-pro [style*="background: #f8f9fa"] {
    background: var(--lp-bg-secondary) !important;
    border-color: var(--lp-stone-200) !important;
    color: var(--lp-text-primary) !important;
}

/* Override Specific Inline Styles */
body.dark-pro .premium-upgrade-page [style*="background: rgba(51,161,253"] {
    background: var(--lp-bg-secondary) !important;
    border-color: var(--lp-stone-200) !important;
}

body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #ff6b6b"] {
    background: linear-gradient(135deg, var(--lp-accent-primary), var(--lp-accent-primary-soft)) !important;
}

body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #6c5ce7"] {
    background: linear-gradient(135deg, var(--lp-stone-700), var(--lp-stone-600)) !important;
}

body.dark-pro .premium-upgrade-page [style*="color: #212529"] {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .premium-upgrade-page [style*="color: #6c757d"] {
    color: var(--lp-text-muted) !important;
}

body.dark-pro .premium-upgrade-page [style*="color: #495057"] {
    color: var(--lp-text-secondary) !important;
}

/* Override blue borders */
body.dark-pro .premium-upgrade-page [style*="border: 1px solid rgba(51,161,253"] {
    border-color: var(--lp-stone-200) !important;
}

/* Stats Grid Items - Full override */
body.dark-pro .premium-upgrade-page [style*="background: rgba(255, 255, 255, 0.7)"] {
    background: var(--lp-bg-card) !important;
    border-color: var(--lp-stone-200) !important;
}

body.dark-pro .premium-upgrade-page [style*="text-align: center; padding: 1rem"] {
    border-radius: 10px !important;
}

body.dark-pro .premium-upgrade-page [style*="rgba(108, 117, 125, 0.1)"] {
    background: var(--lp-bg-secondary) !important;
}

body.dark-pro .premium-upgrade-page [style*="rgba(40, 167, 69, 0.1)"] {
    background: var(--lp-success-bg) !important;
}

body.dark-pro .premium-upgrade-page [style*="color: #28a745"] {
    color: var(--lp-success) !important;
}

/* Course Preview on Sidebar */
body.dark-pro .course-preview[style*="linear-gradient(135deg, #667eea"] {
    background: var(--lp-bg-hero) !important;
}

/* === Premium Upgrade Page Global Text Fixes === */
body.dark-pro .premium-upgrade-page h1,
body.dark-pro .premium-upgrade-page h2,
body.dark-pro .premium-upgrade-page h3,
body.dark-pro .premium-upgrade-page h4 {
    color: var(--lp-text-primary) !important;
}

body.dark-pro .premium-upgrade-page p {
    color: var(--lp-text-secondary) !important;
}

/* White text elements remain white (celebration banner, premium badge) */
body.dark-pro .celebration-banner,
body.dark-pro .celebration-banner h2,
body.dark-pro .celebration-banner p,
body.dark-pro .celebration-banner strong,
body.dark-pro .celebration-banner div {
    color: white !important;
}

body.dark-pro .premium-badge,
body.dark-pro .premium-badge div {
    color: white !important;
}

/* Green banner keeps white text */
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"] {
    color: white !important;
}

body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"] p,
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #28a745"] div {
    color: white !important;
}

/* Blue banner (explanation page) - convert to stone theme */
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #007bff"] {
    background: linear-gradient(135deg, var(--lp-stone-700), var(--lp-stone-600)) !important;
    color: white !important;
}

body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #007bff"] h2,
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #007bff"] p,
body.dark-pro .premium-upgrade-page [style*="linear-gradient(135deg, #007bff"] strong {
    color: white !important;
}

/* Blue tinted stats boxes */
body.dark-pro .premium-upgrade-page [style*="rgba(0, 123, 255, 0.1)"] {
    background: var(--lp-accent-primary-bg) !important;
}

body.dark-pro .premium-upgrade-page [style*="color: #007bff"] {
    color: var(--lp-accent-primary) !important;
}

/* Trial info styling */
body.dark-pro .trial-info div[style*="color: #28a745"] {
    color: var(--lp-success) !important;
}

body.dark-pro .trial-info div[style*="color: #6c757d"] {
    color: var(--lp-text-muted) !important;
}

/* Success Banner (hybrid page) */
body.dark-pro .success-banner {
    background: linear-gradient(135deg, var(--lp-success), #22c55e) !important;
    color: white !important;
}

/* Purple heading text */
body.dark-pro .premium-upgrade-page [style*="color: rgb(86, 36, 208)"],
body.dark-pro .premium-upgrade-page h3[style*="rgb(86"] {
    color: var(--lp-accent-primary) !important;
}

/* Mobile Responsive Fixes for Premium Upgrade */
@media (max-width: 992px) {
    body.dark-pro .premium-upgrade-page .content-grid {
        grid-template-columns: 1fr !important;
    }
    
    body.dark-pro .premium-upgrade-page .sidebar {
        order: -1;
        position: static !important;
    }
}

@media (max-width: 768px) {
    body.dark-pro .premium-upgrade-page {
        padding: 0 !important;
    }
    
    body.dark-pro .premium-upgrade-page .main-container {
        padding: 1rem !important;
    }
    
    body.dark-pro .celebration-banner,
    body.dark-pro .premium-upgrade-page .main-content > div:first-child[style*="background"] {
        margin: 0 !important;
        border-radius: 12px !important;
        padding: 1.25rem 1rem !important;
    }
    
    body.dark-pro .course-header h1 {
        font-size: 1.5rem !important;
    }
    
    body.dark-pro .course-meta {
        gap: 0.5rem !important;
    }
    
    body.dark-pro .meta-item {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    body.dark-pro .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    body.dark-pro .benefit-item {
        padding: 1rem !important;
    }
    
    body.dark-pro .benefit-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }
    
    body.dark-pro .what-learn-section h2 {
        font-size: 1.5rem !important;
    }
    
    body.dark-pro .pricing-card {
        border-radius: 16px !important;
    }
    
    body.dark-pro .pricing-content {
        padding: 1rem !important;
    }
}