/* ==========================================================================
   GraphicBidu Dark Theme Repair — Final Cascade Layer
   Loaded LAST. Visual/theme only.
   Purpose: removes white-card + white-text collisions in dark mode without
   changing routes, records, payment, media, R2, mail, or business logic.
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Existing token names are deliberately reused so legacy and newer CSS
       resolve to the same dark surface system. */
    --gb-ink: #f8fafc;
    --gb-ink-2: #e5e7eb;
    --gb-paper: #0b0f17;
    --gb-paper-soft: #111827;
    --gb-paper-muted: #182234;
    --gb-line: rgba(226, 232, 240, .16);
    --gb-line-strong: rgba(226, 232, 240, .30);
    --gb-text: #f8fafc;
    --gb-text-secondary: #cbd5e1;
    --gb-text-muted: #94a3b8;
    --gb-inverse: #0b0f17;
    --gb-shadow: 0 18px 48px rgba(0, 0, 0, .38);
    --gb-shadow-hover: 0 22px 54px rgba(0, 0, 0, .48);

    --bg: var(--gb-paper);
    --bg-soft: var(--gb-paper-soft);
    --panel: var(--gb-paper);
    --panel-2: var(--gb-paper-soft);
    --line: var(--gb-line);
    --text: var(--gb-text);
    --muted: var(--gb-text-secondary);
}

/* App frame and page bands. */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .candidate-dashboard-page,
html[data-theme="dark"] .candidate-dashboard-frame,
html[data-theme="dark"] .mentor-dashboard-page,
html[data-theme="dark"] .admin-shell {
    background-color: var(--gb-paper);
    color: var(--gb-text);
}

html[data-theme="dark"] :is(
    .section-dark,
    .candidate-v3-section--muted,
    .dashboard-sidebar,
    .dashboard-nav-group,
    .page-hero--muted,
    .info-page-section--muted,
    .verification-process-section,
    .billing-records-section
) {
    background-color: var(--gb-paper-soft) !important;
    border-color: var(--gb-line) !important;
}

/* --------------------------------------------------------------------------
   Universal raised-surface repair
   These classes are used across public pages, dashboards, mentor tools,
   admin screens, booking, verification, course pages, and marketplace.
   A late dark-mode background removes legacy #fff / #f7f7f5 surfaces.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] :is(
    .card,
    .panel,
    .pricing-card,
    .auth-card,
    .form-card,
    .table-card,
    .public-score-card,
    .summary-panel,
    .toggle-card,
    .message-thread-card,
    .conversation-bubble,
    .search-group,
    .quick-action-card,
    .outline-card,
    .lesson-card,
    .application-card,
    .marketplace-card,
    .purchase-card,
    .contact-support-card,
    .contact-form-card,
    .compact-card,
    .code-panel,
    .badge-panel,
    .checkbox-card,
    .course-board-v2-card,
    .course-board-v2-panel,
    .course-path-panel,
    .course-path-module,
    .course-active-lesson,
    .course-note-form,
    .course-question-card,
    .course-support-card,
    .course-resource-row,
    .course-live-session-row,
    .course-purchase-card,
    .course-official-program-card,
    .course-sales-block-card,
    .course-sales-v2-panel,
    .course-workspace-certificate-card,
    .course-preview-lesson-card,
    .course-media-health-panel,
    .course-media-diagnostic-card,
    .course-content-module-card,
    .course-content-lesson-editor,
    .candidate-page-intro,
    .candidate-readiness-card,
    .candidate-surface,
    .candidate-form-section,
    .candidate-check,
    .candidate-v3-action-card,
    .candidate-v3-summary-card,
    .candidate-v3-support-grid > article,
    .candidate-course-card,
    .candidate-course-continue-card,
    .candidate-mini-stat,
    .candidate-payment-row,
    .candidate-billing-state-card,
    .candidate-availability-card,
    .candidate-quiet-surface,
    .verification-journey-step,
    .verification-hero-panel,
    .verification-summary-card,
    .verification-process-card,
    .verification-apply-package,
    .candidate-apply-summary,
    .candidate-apply-note,
    .mentor-v9-card,
    .mentor-v9-availability-card,
    .mentor-v9-process-grid > article,
    .mentor-v10-card,
    .mentor-v10-filter-shell,
    .mentor-admin-context-card,
    .mentor-admin-controls-card,
    .mentor-admin-review-grid > article,
    .mentor-photo-card,
    .mentor-service-card,
    .mentor-booking-card,
    .gb-home-path-card,
    .gb-home-course-card,
    .gb-home-mentor-card,
    .gb-home-route-card,
    .gb-home-faq-grid > article,
    .gb-public-empty-state,
    .gb-phase2b-popup-presets,
    .gb-phase2b-popup-preview,
    .gb-popup-campaign__dialog
) {
    background-color: var(--gb-paper-soft) !important;
    color: var(--gb-text) !important;
    border-color: var(--gb-line) !important;
}

/* More elevated cards should separate from the page without becoming white. */
html[data-theme="dark"] :is(
    .pricing-card,
    .auth-card,
    .public-score-card,
    .candidate-readiness-card,
    .candidate-v3-summary-card,
    .course-purchase-card,
    .mentor-booking-card,
    .gb-home-route-card,
    .gb-popup-campaign__dialog
) {
    background-color: #151d2a !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .32) !important;
}

/* Text inside repaired cards. This overrides hard-coded black/white colors
   that were inherited from prior light-only layers. */
html[data-theme="dark"] :is(
    .card,
    .panel,
    .pricing-card,
    .auth-card,
    .form-card,
    .table-card,
    .public-score-card,
    .summary-panel,
    .toggle-card,
    .message-thread-card,
    .conversation-bubble,
    .search-group,
    .quick-action-card,
    .outline-card,
    .lesson-card,
    .application-card,
    .marketplace-card,
    .purchase-card,
    .contact-support-card,
    .contact-form-card,
    .course-board-v2-card,
    .course-board-v2-panel,
    .course-active-lesson,
    .candidate-page-intro,
    .candidate-readiness-card,
    .candidate-surface,
    .candidate-form-section,
    .candidate-v3-action-card,
    .candidate-v3-summary-card,
    .candidate-v3-support-grid > article,
    .candidate-course-card,
    .candidate-payment-row,
    .verification-journey-step,
    .mentor-v9-card,
    .mentor-v10-card,
    .mentor-admin-context-card,
    .mentor-admin-controls-card,
    .mentor-admin-review-grid > article,
    .gb-home-path-card,
    .gb-home-course-card,
    .gb-home-mentor-card,
    .gb-home-route-card,
    .gb-home-faq-grid > article,
    .gb-public-empty-state,
    .gb-popup-campaign__dialog
) :is(h1,h2,h3,h4,h5,h6,strong,b,label,legend,th,.eyebrow,.panel-label,.field-label,.price,.amount,.record-number) {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(
    .card,
    .panel,
    .pricing-card,
    .auth-card,
    .form-card,
    .table-card,
    .public-score-card,
    .summary-panel,
    .toggle-card,
    .message-thread-card,
    .conversation-bubble,
    .search-group,
    .quick-action-card,
    .outline-card,
    .lesson-card,
    .application-card,
    .marketplace-card,
    .purchase-card,
    .contact-support-card,
    .contact-form-card,
    .course-board-v2-card,
    .course-board-v2-panel,
    .course-active-lesson,
    .candidate-page-intro,
    .candidate-readiness-card,
    .candidate-surface,
    .candidate-form-section,
    .candidate-v3-action-card,
    .candidate-v3-summary-card,
    .candidate-v3-support-grid > article,
    .candidate-course-card,
    .candidate-payment-row,
    .verification-journey-step,
    .mentor-v9-card,
    .mentor-v10-card,
    .mentor-admin-context-card,
    .mentor-admin-controls-card,
    .mentor-admin-review-grid > article,
    .gb-home-path-card,
    .gb-home-course-card,
    .gb-home-mentor-card,
    .gb-home-route-card,
    .gb-home-faq-grid > article,
    .gb-public-empty-state,
    .gb-popup-campaign__dialog
) :is(p,li,dt,dd,small,span,.lead,.muted,.text-muted,.text-secondary,.field-help,.helper-text,.empty-state) {
    color: var(--gb-text-secondary) !important;
}

/* Links remain visible on all repaired surfaces. */
html[data-theme="dark"] :is(
    .card,
    .panel,
    .pricing-card,
    .auth-card,
    .form-card,
    .table-card,
    .public-score-card,
    .candidate-page-intro,
    .candidate-surface,
    .candidate-v3-action-card,
    .candidate-course-card,
    .candidate-payment-row,
    .mentor-v9-card,
    .mentor-v10-card,
    .gb-home-route-card,
    .gb-public-empty-state,
    .gb-popup-campaign__dialog
) a:not(.button) {
    color: var(--gb-text) !important;
}

/* Buttons: explicitly prevent white label on a white custom button surface. */
html[data-theme="dark"] .button-primary {
    background-color: var(--gb-ink) !important;
    border-color: var(--gb-ink) !important;
    color: var(--gb-inverse) !important;
}

html[data-theme="dark"] :is(.button-secondary,.button-ghost,.icon-button,.theme-toggle,.nav-toggle) {
    background-color: transparent;
    border-color: var(--gb-line-strong);
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(.button-secondary,.button-ghost,.icon-button,.theme-toggle,.nav-toggle):hover,
html[data-theme="dark"] :is(.button-secondary,.button-ghost,.icon-button,.theme-toggle,.nav-toggle):focus-visible {
    background-color: var(--gb-paper-muted);
    border-color: var(--gb-text-secondary);
    color: var(--gb-text) !important;
}

/* These buttons intentionally sit inside dark marketing bands. Their white
   fill remains readable because their text is explicitly dark. */
html[data-theme="dark"] :is(
    .gb-home-final-cta__actions,
    .gb-home-section--mentorship,
    .gb-public-empty-state
) .button-primary,
html[data-theme="dark"] :is(
    .gb-home-final-cta__actions,
    .gb-home-section--mentorship,
    .gb-public-empty-state
) .button-secondary {
    background-color: #f8fafc !important;
    border-color: #f8fafc !important;
    color: #0b0f17 !important;
}

/* Forms, tables, code/data rows, chips and tabs. */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
    background-color: #0f1724 !important;
    border-color: var(--gb-line-strong) !important;
    color: var(--gb-text) !important;
    caret-color: var(--gb-text);
}

html[data-theme="dark"] :is(input,textarea,select)::placeholder {
    color: var(--gb-text-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] :is(
    .data-table,
    .data-table th,
    .data-table td,
    .definition-list > div,
    .compact-definitions > div,
    .course-board-v2-definition-list > div,
    .candidate-fact-list > div,
    .mentor-admin-definition-list > div,
    .admin-course-resource-row,
    .course-resource-row,
    .course-live-session-row
) {
    border-color: var(--gb-line) !important;
}

html[data-theme="dark"] :is(.data-table th,.data-table td,.definition-list,.compact-definitions,.course-board-v2-definition-list,.candidate-fact-list,.mentor-admin-definition-list) {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(
    .chip,
    .status-pill,
    .public-badge-row > span,
    .course-sales-v2-badges > span,
    .compact-chip-wrap > span,
    .tag,
    .tag-pill
) {
    background-color: rgba(248, 250, 252, .08) !important;
    border-color: rgba(248, 250, 252, .22) !important;
    color: var(--gb-text) !important;
}

/* Restore meaningful status colors after the generic pill repair. */
html[data-theme="dark"] :is(.status-approved,.status-published,.status-active,.status-completed,.status-accepted,.registry-valid) {
    color: #a7f3c0 !important;
    background-color: rgba(22, 163, 74, .14) !important;
    border-color: rgba(134, 239, 172, .34) !important;
}

html[data-theme="dark"] :is(.status-under_review,.status-assigned,.status-submitted,.status-needs_improvement,.status-pending) {
    color: #fde68a !important;
    background-color: rgba(202, 138, 4, .16) !important;
    border-color: rgba(253, 230, 138, .30) !important;
}

html[data-theme="dark"] :is(.status-rejected,.status-expired,.registry-expired,.registry-revoked,.registry-not-found,.status-failed) {
    color: #fecaca !important;
    background-color: rgba(220, 38, 38, .16) !important;
    border-color: rgba(254, 202, 202, .30) !important;
}

/* Header, menus and footer are independent of .site-main. */
html[data-theme="dark"] :is(.site-header,.launch-header,.profile-menu,.dropdown-panel,.launch-nav-dropdown) {
    background-color: rgba(11, 15, 23, .96) !important;
    border-color: var(--gb-line) !important;
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(.site-header,.launch-header,.profile-menu,.dropdown-panel,.launch-nav-dropdown) :is(a:not(.button):not(.launch-mobile-auth-pill),button:not(.button-primary):not(.button-secondary):not(.button-ghost),strong,span) {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(.site-header,.launch-header,.launch-mobile-panel,.profile-menu,.dropdown-panel) .button-primary,
html[data-theme="dark"] .launch-mobile-auth-pill {
    background-color: var(--gb-ink) !important;
    border-color: var(--gb-ink) !important;
    color: var(--gb-inverse) !important;
}

html[data-theme="dark"] :is(.site-header,.launch-header,.launch-mobile-panel,.profile-menu,.dropdown-panel) .button-secondary,
html[data-theme="dark"] :is(.site-header,.launch-header,.launch-mobile-panel,.profile-menu,.dropdown-panel) .button-ghost {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(.site-footer,.launch-footer,footer) {
    background-color: #070a10 !important;
    border-color: var(--gb-line) !important;
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(.site-footer,.launch-footer,footer) :is(h1,h2,h3,h4,strong,b,a) {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(.site-footer,.launch-footer,footer) :is(p,span,small,li) {
    color: var(--gb-text-secondary) !important;
}

/* Intentional light artifact: the course certificate preview is paper,
   not an accidental white application card. Keep it readable in dark mode. */
html[data-theme="dark"] .gb-home-certificate__preview {
    background: linear-gradient(145deg, #fffdf7 0%, #fbf6e9 100%) !important;
    border-color: rgba(171, 126, 39, .28) !important;
    color: #172033 !important;
}

html[data-theme="dark"] .gb-home-certificate__preview :is(h1,h2,h3,h4,strong,b,p,span,.gb-home-certificate__label) {
    color: #172033 !important;
}

/* Course/video media intentionally stays black, not blue/white. */
html[data-theme="dark"] :is(
    .course-video-shell,
    .course-preview-video-shell,
    .course-protected-video-shell,
    .course-protected-video-host
) {
    background-color: #000 !important;
}

/* Prevent stale white-ish hover surfaces from appearing in cards. */
html[data-theme="dark"] :is(
    .gb-home-route-card a:hover,
    .gb-home-route-card a:focus-visible,
    .course-board-v2-card:hover,
    .mentor-v9-card:hover,
    .mentor-v10-card:hover,
    .marketplace-card:hover,
    .pricing-card:hover,
    .candidate-v3-action-card:hover,
    .candidate-course-card:hover
) {
    background-color: var(--gb-paper-muted) !important;
    color: var(--gb-text) !important;
}

/* Mobile remains dark after native form/browser color-scheme behavior. */
@media (max-width: 720px) {
    html[data-theme="dark"] .mobile-menu,
    html[data-theme="dark"] .mobile-menu-panel,
    html[data-theme="dark"] .mobile-nav {
        background-color: var(--gb-paper) !important;
        border-color: var(--gb-line) !important;
        color: var(--gb-text) !important;
    }
}


/* ==========================================================================
   GraphicBidu Dark Theme Repair V2
   Evidence-based correction for the currently supplied screenshots.

   This is appended to the existing dark-theme-repair.css so there is still
   one final dark-mode cascade file, not another loaded CSS layer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Mentor directory "How it works"
   The light version was rendering as thin bordered text blocks. Make these
   actual cards: contained, padded, and scannable.
   -------------------------------------------------------------------------- */
.mentor-v9-section--guide {
    background: #f5f7fa;
    border-top: 1px solid rgba(12, 18, 32, .10);
    border-bottom: 1px solid rgba(12, 18, 32, .10);
}

.mentor-v9-process-grid {
    align-items: stretch;
}

.mentor-v9-process-grid > article {
    display: flex;
    flex-direction: column;
    min-height: 172px;
    padding: clamp(1.2rem, 2.4vw, 1.7rem);
    border: 1px solid rgba(12, 18, 32, .14);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(12, 18, 32, .07);
}

.mentor-v9-process-grid > article > span {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(12, 18, 32, .16);
    border-radius: 999px;
    background: #f1f4f8;
    color: #344054;
    font: 800 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

.mentor-v9-process-grid > article h3 {
    margin: 0 0 .55rem;
    color: #101828;
    font-size: 1.04rem;
    line-height: 1.25;
}

.mentor-v9-process-grid > article p {
    margin: 0;
    color: #526075;
    line-height: 1.58;
}

/* --------------------------------------------------------------------------
   2) Dark-mode CTA hierarchy
   Evidence: white filled buttons were receiving light text and becoming
   unreadable. Dark bands now use either an explicit light-fill/dark-ink
   primary action or a transparent/light-ink secondary action.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .gb-home-section--mentorship .button-secondary,
html[data-theme="dark"] .gb-home-final-cta__actions .button-secondary {
    background: transparent !important;
    border-color: rgba(248, 250, 252, .68) !important;
    color: #f8fafc !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .gb-home-section--mentorship .button-secondary:hover,
html[data-theme="dark"] .gb-home-section--mentorship .button-secondary:focus-visible,
html[data-theme="dark"] .gb-home-final-cta__actions .button-secondary:hover,
html[data-theme="dark"] .gb-home-final-cta__actions .button-secondary:focus-visible {
    background: rgba(248, 250, 252, .12) !important;
    border-color: #f8fafc !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .gb-home-section--mentorship .button-primary,
html[data-theme="dark"] .gb-home-final-cta__actions .button-primary {
    background: #f8fafc !important;
    border-color: #f8fafc !important;
    color: #0b0f17 !important;
    text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   3) Homepage route card
   Evidence: the intentional "Choose your route" document card stayed light
   while global dark-mode text rules forced its type light. In dark mode it is
   deliberately converted into a dark elevated card so all copy is readable.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .gb-home-route-card {
    background: #151d2a !important;
    border-color: rgba(226, 232, 240, .24) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .gb-home-route-card :is(.panel-label, a, a strong) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .gb-home-route-card :is(a span, a small) {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .gb-home-route-card a {
    border-color: rgba(226, 232, 240, .16) !important;
}

html[data-theme="dark"] .gb-home-route-card a:hover,
html[data-theme="dark"] .gb-home-route-card a:focus-visible {
    background: rgba(248, 250, 252, .08) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4) Certificate preview
   Evidence: this is the one intentional light-paper artifact in dark mode.
   It must retain dark ink locally; global dark typography must not bleed in.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .gb-home-certificate__preview {
    background: linear-gradient(145deg, #fffdf7 0%, #fbf6e9 100%) !important;
    border-color: rgba(171, 126, 39, .45) !important;
    color: #172033 !important;
}

html[data-theme="dark"] .gb-home-certificate__preview :is(
    h1, h2, h3, h4, h5, h6,
    strong, b,
    p, span,
    .gb-home-certificate__label,
    .gb-home-certificate__footer
) {
    color: #172033 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .gb-home-certificate__preview .gb-home-certificate__label,
html[data-theme="dark"] .gb-home-certificate__preview .gb-home-certificate__seal {
    color: #8a641c !important;
}

html[data-theme="dark"] .gb-home-certificate__preview .gb-home-certificate__footer {
    color: #5a6472 !important;
}

html[data-theme="dark"] .gb-home-certificate__preview .gb-home-certificate__footer strong {
    color: #172033 !important;
}

/* --------------------------------------------------------------------------
   5) Pricing page: dark theme should be dark, not white panels with inherited
   white typography. This covers all elements visible in the supplied pricing
   screenshots: assurance card, three path cards, recessed band, and FAQ.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .pricing-v9-hero,
html[data-theme="dark"] .pricing-v9-section {
    background: #0d0f13;
}

html[data-theme="dark"] .pricing-v9-assurance,
html[data-theme="dark"] .pricing-v9-card,
html[data-theme="dark"] .pricing-v9-faqs details {
    background: #161b27 !important;
    border-color: rgba(226, 232, 240, .18) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .26) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .pricing-v9-card--featured {
    border-color: rgba(248, 250, 252, .52) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .36) !important;
}

html[data-theme="dark"] .pricing-v9-section--recessed {
    background: #111827 !important;
    border-color: rgba(226, 232, 240, .14) !important;
}

html[data-theme="dark"] :is(
    .pricing-v9-assurance,
    .pricing-v9-card,
    .pricing-v9-section--recessed,
    .pricing-v9-faqs details
) :is(h1,h2,h3,h4,h5,h6,strong,b,summary,dd) {
    color: #f8fafc !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .pricing-v9-card :is(h3, strong, summary, .button),
html[data-theme="dark"] .pricing-v9-assurance :is(strong, dd),
html[data-theme="dark"] .pricing-v9-price-copy,
html[data-theme="dark"] .pricing-v9-price-copy strong,
html[data-theme="dark"] .pricing-v9-price-copy span,
html[data-theme="dark"] .pricing-v9-price-copy--numeric,
html[data-theme="dark"] .pricing-v9-price-copy--numeric strong,
html[data-theme="dark"] .pricing-v9-price-copy--numeric span {
    color: #f8fafc !important;
    text-shadow: none !important;
}

html[data-theme="dark"] :is(
    .pricing-v9-assurance,
    .pricing-v9-card,
    .pricing-v9-section--recessed,
    .pricing-v9-faqs details
) :is(p,li,span,dt,small,.muted,.lead) {
    color: #cbd5e1 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .pricing-v9-assurance :is(dl, dl div) {
    border-color: rgba(226, 232, 240, .16) !important;
}

html[data-theme="dark"] .pricing-v9-index {
    background: rgba(248, 250, 252, .10) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .pricing-v9-list li::before {
    color: #f8fafc !important;
}

html[data-theme="dark"] .pricing-v9-card .button-ghost {
    background: transparent !important;
    border-color: rgba(248, 250, 252, .48) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .pricing-v9-card .button-ghost:hover,
html[data-theme="dark"] .pricing-v9-card .button-ghost:focus-visible {
    background: rgba(248, 250, 252, .10) !important;
    border-color: #f8fafc !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .pricing-v9-card .button-primary,
html[data-theme="dark"] .pricing-v9-hero-actions .button-primary {
    background: #f8fafc !important;
    border-color: #f8fafc !important;
    color: #0b0f17 !important;
}

html[data-theme="dark"] .pricing-v9-hero-actions .button-ghost {
    background: transparent !important;
    border-color: rgba(248, 250, 252, .58) !important;
    color: #f8fafc !important;
}

/* The FAQ trigger itself must stay dark-surface/light-ink. */
html[data-theme="dark"] .pricing-v9-faqs details[open] {
    background: #1b2230 !important;
}

/* --------------------------------------------------------------------------
   6) Mentor guide dark counterpart
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .mentor-v9-section--guide {
    background: #101522 !important;
    border-color: rgba(226, 232, 240, .12) !important;
}

html[data-theme="dark"] .mentor-v9-process-grid > article {
    background: #181d2b !important;
    border-color: rgba(226, 232, 240, .18) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .24) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .mentor-v9-process-grid > article > span {
    background: rgba(248, 250, 252, .10) !important;
    border-color: rgba(248, 250, 252, .22) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .mentor-v9-process-grid > article h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .mentor-v9-process-grid > article p {
    color: #cbd5e1 !important;
}

/* Do not let the guide cards flatten on compact widths. */
@media (max-width: 720px) {
    .mentor-v9-process-grid > article {
        min-height: 0;
        padding: 1.1rem;
    }

    .mentor-v9-process-grid > article > span {
        margin-bottom: .8rem;
    }
}