/* ─── Onboarding V2 Design ─── */

/* ─── Design Tokens ─── */
:root {
    /* Warning alerts */
    --ob-alert-warning-bg: #FFF8E1;
    --ob-alert-warning-border: #FDE68A;
    --ob-alert-warning-text: #92400E;
    /* Background */
    --ob-bg: #F6F7FB;
    --ob-surface: #FFFFFF;

    /* Text */
    --ob-text: #111827;
    --ob-text-secondary: #6B7280;
    --ob-text-on-primary: #FFFFFF;

    /* Accent */
    --ob-accent: #1565C0;
    --ob-primary: #2A2F6F;
    --ob-primary-text: #FFFFFF;
    --ob-primary-hover: #1E2259;
    --ob-success: #00BC7D;
    --ob-success-hover: #00A36B;

    /* Step indicator */
    --ob-step-active: #1565C0;
    --ob-step-completed: #4CAF50;
    --ob-step-completed-icon: #E8F5E9;
    --ob-step-pending: rgba(156, 163, 175, 0.4);
    --ob-step-text: #FFFFFF;

    /* Card (outer section) */
    --ob-card-bg: rgba(229, 231, 235, 0.12);
    --ob-card-border: #F1F3F8;
    --ob-card-border-width: 2px;

    /* Form (inner white area) */
    --ob-form-bg: #FFFFFF;
    --ob-form-border: #F1F3F8;

    /* Input fields */
    --ob-input-bg: #FFFFFF;
    --ob-input-border: #D1D5DB;
    --ob-input-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.036);
    --ob-input-placeholder: #B0BEC5;

    /* Buttons */
    --ob-btn-outlined-bg: #FFFFFF;
    --ob-btn-outlined-border: #D1D5DB;
    --ob-btn-outlined-text: #6B7280;
    --ob-btn-outlined-hover-bg: #F9FAFB;
    --ob-btn-outlined-hover-border: #9CA3AF;

    /* Footer */
    --ob-footer-bg: rgba(229, 231, 235, 0.12);
    --ob-footer-shadow: 0px -6px 8px rgba(0, 0, 0, 0.05);

    /* Alerts */
    --ob-alert-info-bg: #EFF6FF;
    --ob-alert-info-border: #BFDBFE;
    --ob-alert-info-text: #1E40AF;
    --ob-alert-error-bg: #FEF2F2;
    --ob-alert-error-border: #FECACA;
    --ob-alert-error-text: #991B1B;

    /* Drop zone */
    --ob-dropzone-bg: var(--ob-bg);

    /* Spinner */
    --ob-spinner-track: rgba(255, 255, 255, 0.3);
    --ob-spinner-head: #FFFFFF;

    /* File table */
    --ob-table-bg: #FFFFFF;
    --ob-table-header-bg: #FFFFFF;
    --ob-table-header-text: #6B7280;
    --ob-table-border: #E5E7EB;
    --ob-table-text: #111827;
    --ob-name-chip-border: #1976D2;
    --ob-name-chip-icon: #0D47A1;
    --ob-name-chip-text: #0D47A1;
    --ob-select-bg: #FFFFFF;
    --ob-select-border: #D1D5DB;
    --ob-select-text: #111827;
    --ob-status-ready: #059669;
    --ob-status-processing: #2563EB;
    --ob-status-uploading: #2563EB;
    --ob-status-failed: #DC2626;
    --ob-status-type-required: #D97706;
    --ob-status-pending: #2563EB;
    --ob-action-remove-bg: rgba(17, 24, 39, 0.04);
    --ob-action-remove-hover: rgba(17, 24, 39, 0.1);
    --ob-action-remove-icon: #111827;
    --ob-action-disabled-bg: rgba(17, 24, 39, 0.06);
    --ob-action-disabled-icon: rgba(17, 24, 39, 0.16);

    /* Completion page */
    --ob-complete-subtitle: #6B7280;
    --ob-complete-option-bg: #FFFFFF;
    --ob-complete-option-text: #111827;
    --ob-complete-btn-primary-bg: #2A2F6F;
    --ob-complete-btn-outlined-bg: #FFFFFF;
    --ob-complete-btn-outlined-border: #6B7280;
    --ob-complete-btn-outlined-text: #111827;
    --ob-complete-btn-text-color: #111827;

    /* Card border width (changes in dark) */
    --ob-card-border-width: 1px;

    /* Component cards (outer wrappers) */
    --ob-comp-card-bg: rgba(229, 231, 235, 0.12);
    --ob-comp-card-border: #F1F3F8;

    /* Inner surfaces (form areas, lists) */
    --ob-comp-surface: #FFFFFF;
    --ob-comp-surface-border: #F1F3F8;

    /* Input fields */
    --ob-comp-input-bg: #FFFFFF;
    --ob-comp-input-border: #D1D5DB;
    --ob-comp-input-text: #111827;

    /* Labels */
    --ob-comp-label: #111827;

    /* Banner */
    --ob-banner-border: #BBDEFB;
    --ob-banner-title: #6B7280;
    --ob-banner-message: #B0BEC5;

    /* Checkbox label */
    --ob-checkbox-label: #111827;

    /* Disabled button */
    --ob-btn-disabled-bg: rgba(17, 24, 39, 0.06);
    --ob-btn-disabled-color: rgba(17, 24, 39, 0.16);

    /* Input focus */
    --ob-comp-input-focus-border: #BFDBFE;

    /* Checkbox colors */
    --ob-checkbox-checked: #1565C0;
    --ob-checkbox-unchecked: #9CA3AF;

    /* Item description */
    --ob-comp-item-description: #6B7280;

    /* Workflow icon colors */
    --ob-wf-blue-bg: #E3F2FD;
    --ob-wf-blue-fg: #1565C0;
    --ob-wf-warning-bg: #FF9800;
    --ob-wf-warning-fg: #FFFFFF;

    /* Expertise card */
    --ob-expertise-separator: #1565C0;
    --ob-expertise-card-border: var(--ob-comp-surface-border);

    /* Work mode cards */
    --ob-wm-option-bg: #FFFFFF;
    --ob-wm-option-border: #E5E7EB;
    --ob-wm-icon-bg: #E3F2FD;
    --ob-wm-icon-border: #BBDEFB;
    --ob-wm-icon-fill: #90CAF9;
    --ob-wm-desc: var(--ob-text);
    --ob-wm-warning: #F59E0B;
    --ob-wm-divider: #E5E7EB;
    --ob-wm-divider-blue: #BBDEFB;
    --ob-wm-footer-text: #6B7280;
    --ob-wm-footer-icon: #6B7280;
    --ob-wm-lock-border: #D1D5DB;
    --ob-wm-lock-fill: #9CA3AF;
    --ob-wm-uncheck-border: #BBDEFB;

    /* Table */
    --ob-table-header-bg: #FFFFFF;
    --ob-table-header-hover: #FAFAFA;
    --ob-table-header-color: #6B7280;
    --ob-table-header-sorted: #111827;
    --ob-table-border: #E5E7EB;
    --ob-table-name: #111827;
    --ob-table-email: #6B7280;
    --ob-table-avatar-bg: #F1F3F8;
    --ob-table-avatar-border: #E5E7EB;
    --ob-table-avatar-color: #6B7280;
    --ob-table-chip-bg: rgba(42, 47, 111, 0.06);
    --ob-table-chip-color: #1F245A;
    --ob-table-chip-admin-bg: rgba(59, 130, 246, 0.06);
    --ob-table-chip-admin-color: #2563EB;
    --ob-table-chip-dpo-bg: rgba(16, 185, 129, 0.06);
    --ob-table-chip-dpo-color: #059669;
    --ob-table-actions-bg: linear-gradient(to right, transparent, #FFFFFF 10%);
    --ob-table-action-hover: rgba(0, 0, 0, 0.04);
    --ob-table-action-icon: #6B7280;
    --ob-table-sort-color: #434956;
    --ob-table-sort-hover: #111827;
    --ob-table-scrollbar: #C4C4C4;

    /* Empty state */
    --ob-empty-icon-bg: #E3F2FD;
    --ob-empty-icon-border: #BBDEFB;

    /* Invite form */
    --ob-form-input-bg: #FFFFFF;
    --ob-form-input-border: #D1D5DB;
    --ob-form-label: #111827;
    --ob-form-role-name: #111827;
    --ob-form-role-desc: #6B7280;
    --ob-form-checkbox-unchecked: rgba(17, 24, 39, 0.64);

    /* Accent / brand */
    --ob-brand-blue: #1565C0;
    --ob-brand-blue-hover: #0D47A1;
    --ob-brand-blue-check: #90CAF9;

    /* Status colors */
    --ob-status-active: #43A047;
    --ob-status-pending: #F57C00;
    --ob-status-success: #4CAF50;

    /* Risk tolerance card */
    --ob-risk-card-bg: #FFFFFF;
    --ob-risk-card-border: #F1F3F8;
    --ob-risk-card-selected: #1565C0;
    --ob-risk-icon-bg: #E3F2FD;
    --ob-risk-icon-border: #BBDEFB;
    --ob-risk-icon-color: #90CAF9;
    --ob-risk-radio-border: #BBDEFB;
    --ob-risk-separator: #BBDEFB;
    --ob-risk-label-color: #1565C0;
    --ob-risk-title-color: #111827;
    --ob-risk-desc-color: #111827;
    --ob-risk-context-counter: #6B7280;
    --ob-risk-textarea-focus: #1565C0;
}

/* ─── Dark Mode ─── */
@media (prefers-color-scheme: dark) {
:root {
    --ob-bg: #1B2233;
    --ob-surface: #0B0F19;
    --ob-text: #FFFFFF;
    --ob-text-secondary: #9CA3AF;
    --ob-text-on-primary: #FFFFFF;
    --ob-primary: #FFFFFF;
    --ob-primary-text: #757575;
    --ob-primary-hover: #E5E7EB;
    --ob-step-pending: rgba(107, 114, 128, 0.2);
    --ob-card-bg: rgba(55, 65, 81, 0.3);
    --ob-card-border: #111827;
    --ob-card-border-width: 2px;
    --ob-form-bg: #0B0F19;
    --ob-form-border: #111827;
    --ob-input-bg: #1B2233;
    --ob-input-border: rgba(55, 65, 81, 0.3);
    --ob-input-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.036);
    --ob-input-placeholder: rgba(249, 250, 251, 0.7);
    --ob-btn-outlined-bg: #0B0F19;
    --ob-btn-outlined-border: rgba(255, 255, 255, 0.06);
    --ob-btn-outlined-text: #FFFFFF;
    --ob-btn-outlined-hover-bg: #141926;
    --ob-btn-outlined-hover-border: rgba(255, 255, 255, 0.12);
    --ob-footer-bg: linear-gradient(0deg, rgba(42, 49, 64, 0.12), rgba(42, 49, 64, 0.12)), rgba(33, 150, 243, 0.08);
    --ob-footer-shadow: none;
    --ob-alert-info-bg: rgba(33, 150, 243, 0.1);
    --ob-alert-info-border: rgba(33, 150, 243, 0.2);
    --ob-alert-info-text: #90CAF9;
    --ob-alert-error-bg: rgba(244, 67, 54, 0.1);
    --ob-alert-error-border: rgba(244, 67, 54, 0.2);
    --ob-alert-error-text: #EF9A9A;
    --ob-dropzone-bg: #0B0F19;
    --ob-spinner-track: rgba(117, 117, 117, 0.3);
    --ob-spinner-head: #757575;

    --ob-comp-card-bg: rgba(55, 65, 81, 0.3);
    --ob-comp-card-border: #111827;
    --ob-comp-surface: #0B0F19;
    --ob-comp-surface-border: #111827;
    --ob-comp-input-bg: #1B2233;
    --ob-comp-input-border: rgba(55, 65, 81, 0.3);
    --ob-comp-input-text: #FFFFFF;
    --ob-comp-label: rgba(249, 250, 251, 0.7);
    --ob-banner-border: #111827;
    --ob-banner-title: rgba(249, 250, 251, 0.7);
    --ob-banner-message: #FFFFFF;
    --ob-checkbox-label: rgba(249, 250, 251, 0.7);
    --ob-btn-disabled-bg: rgba(255, 255, 255, 0.12);
    --ob-btn-disabled-color: rgba(255, 255, 255, 0.2);
    --ob-comp-input-focus-border: #60A5FA;
    --ob-checkbox-checked: #1565C0;
    --ob-checkbox-unchecked: #6B7280;
    --ob-comp-item-description: #9CA3AF;
    --ob-alert-warning-bg: rgba(255, 152, 0, 0.1);
    --ob-alert-warning-border: rgba(255, 152, 0, 0.2);
    --ob-alert-warning-text: #FFB74D;
    --ob-wf-blue-bg: #0D47A1;
    --ob-wf-blue-fg: #BBDEFB;
    --ob-wf-warning-bg: #EF6C00;
    --ob-wf-warning-fg: #FFFFFF;
    --ob-expertise-separator: #1565C0;
    --ob-expertise-card-border: #111827;

    /* File table (dark) */
    --ob-table-bg: #0B0F19;
    --ob-table-header-bg: #1B2233;
    --ob-table-header-text: rgba(203, 213, 225, 0.6);
    --ob-table-border: rgba(42, 49, 64, 0.12);
    --ob-table-text: rgba(249, 250, 251, 0.7);
    --ob-name-chip-border: #3B82F6;
    --ob-name-chip-icon: #3B82F6;
    --ob-name-chip-text: #3B82F6;
    --ob-select-bg: #1B2233;
    --ob-select-border: rgba(55, 65, 81, 0.3);
    --ob-select-text: rgba(249, 250, 251, 0.7);
    --ob-status-ready: #10B981;
    --ob-status-processing: #3B82F6;
    --ob-status-uploading: #3B82F6;
    --ob-status-failed: #EF4444;
    --ob-status-type-required: #F59E0B;
    --ob-status-pending: #3B82F6;
    --ob-action-remove-bg: rgba(255, 255, 255, 0.06);
    --ob-action-remove-hover: rgba(255, 255, 255, 0.12);
    --ob-action-remove-icon: rgba(249, 250, 251, 0.7);
    --ob-action-disabled-bg: rgba(255, 255, 255, 0.12);
    --ob-action-disabled-icon: rgba(255, 255, 255, 0.2);

    /* Work mode cards */
    --ob-wm-option-bg: #0B0F19;
    --ob-wm-option-border: #111827;
    --ob-wm-icon-bg: #1565C0;
    --ob-wm-icon-border: #1565C0;
    --ob-wm-icon-fill: #BBDEFB;
    --ob-wm-desc: rgba(249, 250, 251, 0.7);
    --ob-wm-warning: #FB8C00;
    --ob-wm-divider: #1565C0;
    --ob-wm-divider-blue: #1565C0;
    --ob-wm-footer-text: rgba(255, 255, 255, 0.8);
    --ob-wm-footer-icon: rgba(255, 255, 255, 0.8);
    --ob-wm-lock-border: #BDBDBD;
    --ob-wm-lock-fill: #9E9E9E;
    --ob-wm-uncheck-border: #BBDEFB;

    /* Table */
    --ob-table-header-hover: #1F2937;
    --ob-table-header-color: rgba(249, 250, 251, 0.7);
    --ob-table-header-sorted: #FFFFFF;
    --ob-table-border: #1F2937;
    --ob-table-name: #FFFFFF;
    --ob-table-email: rgba(255, 255, 255, 0.8);
    --ob-table-avatar-bg: #111827;
    --ob-table-avatar-border: rgba(42, 49, 64, 0.12);
    --ob-table-avatar-color: rgba(255, 255, 255, 0.8);
    --ob-table-chip-bg: rgba(92, 107, 192, 0.16);
    --ob-table-chip-color: rgba(140, 158, 255, 0.8);
    --ob-table-chip-admin-bg: rgba(59, 130, 246, 0.06);
    --ob-table-chip-admin-color: #2563EB;
    --ob-table-chip-dpo-bg: rgba(16, 185, 129, 0.06);
    --ob-table-chip-dpo-color: #059669;
    --ob-table-actions-bg: linear-gradient(to right, transparent, #0B0F19 10%);
    --ob-table-action-hover: rgba(255, 255, 255, 0.08);
    --ob-table-action-icon: #FFFFFF;
    --ob-table-sort-color: rgba(249, 250, 251, 0.5);
    --ob-table-sort-hover: #FFFFFF;
    --ob-table-scrollbar: #374151;

    /* Empty state */
    --ob-empty-icon-bg: #1565C0;
    --ob-empty-icon-border: #1976D2;

    /* Invite form */
    --ob-form-input-bg: #1B2233;
    --ob-form-input-border: rgba(55, 65, 81, 0.3);
    --ob-form-label: rgba(249, 250, 251, 0.7);
    --ob-form-role-name: rgba(249, 250, 251, 0.7);
    --ob-form-role-desc: rgba(255, 255, 255, 0.8);
    --ob-form-checkbox-unchecked: #E5E7EB;

    /* Accent / brand */
    --ob-brand-blue: #1565C0;
    --ob-brand-blue-hover: #0D47A1;
    --ob-brand-blue-check: #BBDEFB;

    /* Status colors */
    --ob-status-active: #66BB6A;
    --ob-status-pending: #FFB74D;
    --ob-status-success: #66BB6A;

    /* Completion page (dark) */
    --ob-complete-subtitle: rgba(255, 255, 255, 0.8);
    --ob-complete-option-bg: #0B0F19;
    --ob-complete-option-text: #FFFFFF;
    --ob-complete-btn-primary-bg: #5C6BC0;
    --ob-complete-btn-outlined-bg: #0B0F19;
    --ob-complete-btn-outlined-border: rgba(255, 255, 255, 0.8);
    --ob-complete-btn-outlined-text: #FFFFFF;
    --ob-complete-btn-text-color: #FFFFFF;

    /* Risk tolerance card */
    --ob-risk-card-bg: #0B0F19;
    --ob-risk-card-border: #111827;
    --ob-risk-icon-bg: #1565C0;
    --ob-risk-icon-border: #1565C0;
    --ob-risk-icon-color: #64B5F6;
    --ob-risk-title-color: #FFFFFF;
    --ob-risk-desc-color: rgba(249, 250, 251, 0.7);
    --ob-risk-context-counter: rgba(255, 255, 255, 0.8);
    --ob-risk-textarea-bg: rgba(55, 65, 81, 0.3);
    --ob-risk-textarea-border: rgba(55, 65, 81, 0.3);
}
}

/* ─── MudSelect dropdown (global — popover renders outside component tree) ─── */
/* Layout */
.ob-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ob-bg);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ob-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 96px;
}

/* Header */
.ob-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.ob-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ob-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ob-step-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--ob-accent);
}

.ob-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
    color: var(--ob-text);
    margin: 0;
}

/* Step Indicator */
.ob-steps {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
}

.ob-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ob-step-dot--active {
    background: var(--ob-step-active);
    color: var(--ob-step-text);
}

.ob-step-dot--completed {
    background: var(--ob-step-completed);
    color: var(--ob-step-completed-icon);
}

.ob-step-dot--pending {
    background: var(--ob-step-pending);
    color: var(--ob-step-text);
}

.ob-step-dot--skipped {
    background: var(--ob-step-pending);
    color: var(--ob-step-text);
    opacity: 0.6;
}

.ob-step-dot--clickable {
    cursor: pointer;
}

.ob-step-dot--clickable:hover {
    opacity: 0.8;
}

/* Content — transparent container, pages provide their own cards */
.ob-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

/* ─── Shared component patterns ─── */
.ob-comp-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 24px;
    background: var(--ob-comp-card-bg);
    border: 2px solid var(--ob-comp-card-border);
    border-radius: 16px;
}

.ob-comp-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--ob-text);
    margin: 0;
}

.ob-comp-surface {
    box-sizing: border-box;
    width: 100%;
    background: var(--ob-comp-surface);
    border: 1px solid var(--ob-comp-surface-border);
    border-radius: 8px;
    padding: 32px;
}

/* ─── Reusable card ─── */
.ob-card {
    background: var(--ob-card-bg);
    border: var(--ob-card-border-width) solid var(--ob-card-border);
    border-radius: 16px;
    padding: 32px;
}

.ob-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: var(--ob-text);
    margin: 0 0 24px 0;
}

/* Completed alert */
.ob-completed-alert {
    background: var(--ob-alert-info-bg);
    border: 1px solid var(--ob-alert-info-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ob-alert-info-text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

.ob-completed-alert svg {
    flex-shrink: 0;
}

/* Loading / Error */
.ob-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 0;
}

.ob-error {
    background: var(--ob-alert-error-bg);
    border: 1px solid var(--ob-alert-error-border);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--ob-alert-error-text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

/* ─── Footer ─── */
.ob-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 16px 40px;
    height: 64px;
    background: var(--ob-footer-bg);
    box-shadow: var(--ob-footer-shadow);
    backdrop-filter: blur(8px);
    z-index: 100;
}

.ob-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 880px;
    width: 100%;
}

.ob-footer-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

@media (prefers-color-scheme: dark) {
    .mud-popover {
        background: var(--ob-input-bg) !important;
        border: 1px solid var(--ob-input-border) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        overflow: hidden !important;
    }

    .mud-popover .mud-list {
        background: var(--ob-input-bg) !important;
        color: var(--ob-text) !important;
    }

    .mud-popover .mud-list-item:hover {
        background: var(--ob-form-bg) !important;
    }

    .mud-popover .mud-list-item {
        color: var(--ob-text) !important;
    }

    .mud-popover .mud-list-item.mud-selected-item {
        background: var(--ob-form-bg) !important;
        color: var(--ob-accent) !important;
    }
}

/* Button base */
.ob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.ob-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ob-btn--outlined {
    background: var(--ob-btn-outlined-bg);
    border: 1px solid var(--ob-btn-outlined-border);
    color: var(--ob-btn-outlined-text);
    padding: 4px 12px;
    min-width: 200px;
}

.ob-btn--back {
    min-width: 84px;
}

.ob-btn--outlined:hover:not(:disabled) {
    background: var(--ob-btn-outlined-hover-bg);
    border-color: var(--ob-btn-outlined-hover-border);
}

.ob-btn--primary {
    background: var(--ob-primary);
    color: var(--ob-primary-text);
    padding: 6px 16px;
    min-width: 200px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.2);
}

.ob-btn--primary:hover:not(:disabled) {
    background: var(--ob-primary-hover);
}

.ob-btn--success {
    background: var(--ob-success);
    color: var(--ob-text-on-primary);
    padding: 6px 16px;
    min-width: 200px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.2);
}

.ob-btn--success:hover:not(:disabled) {
    background: var(--ob-success-hover);
}

.ob-btn-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ob-spinner-track);
    border-top-color: var(--ob-spinner-head);
    border-radius: 50%;
    animation: ob-spin 0.6s linear infinite;
}

@keyframes ob-spin {
    to { transform: rotate(360deg); }
}

/* ─── Description text ─── */
.ob-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text-secondary);
    margin: 0;
}

/* ─── Alerts ─── */
.ob-alert {
    border-radius: 12px;
    padding: 12px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ob-alert--error {
    background: var(--ob-alert-error-bg);
    border: 1px solid var(--ob-alert-error-border);
    color: var(--ob-alert-error-text);
    margin-bottom: 16px;
    justify-content: space-between;
}

.ob-alert--info-box {
    background: var(--ob-alert-info-bg);
    border: 1px solid var(--ob-alert-info-border);
    color: var(--ob-alert-info-text);
    margin-bottom: 20px;
}

.ob-alert--info-box .ob-alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.ob-alert-sub {
    font-style: italic;
    opacity: 0.85;
}

.ob-alert-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
}

.ob-alert-close:hover {
    opacity: 1;
}

/* ─── Required notice ─── */
.ob-required-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 32px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text);
    background: var(--ob-comp-card-bg);
    border: 2px solid var(--ob-comp-card-border);
}

.ob-required-notice-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--ob-text-secondary);
}

/* ─── Select field ─── */
.ob-select-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-select-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--ob-comp-label);
}

.ob-select-wrap .mud-input-outlined-border {
    border-color: var(--ob-comp-input-border) !important;
    border-radius: 12px !important;
}

.ob-select-wrap .mud-input.mud-input-outlined {
    padding: 4px 10px !important;
    min-height: 0 !important;
    height: 36px !important;
}

.ob-select-wrap .mud-input-label {
    display: none !important;
}

.ob-select-wrap .mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}

.ob-select-wrap .mud-input-control-input-container {
    margin-top: 0 !important;
}

.ob-select-wrap .mud-input-helper-text {
    display: none !important;
}

.ob-select-wrap .mud-select {
    margin: 0 !important;
}

.ob-select-wrap .mud-input-outlined-border legend {
    display: none !important;
}

.ob-select-wrap .mud-icon-default {
    color: var(--ob-text-secondary) !important;
}

.ob-select-wrap .mud-input,
.ob-select-wrap .mud-input > input,
.ob-select-wrap .mud-input-slot,
.ob-select-wrap .mud-input-root,
.ob-select-wrap .mud-input-root-outlined,
.ob-select-wrap .mud-select-input,
.ob-select-wrap .mud-typography,
.ob-select-wrap .mud-input-control .mud-input {
    color: var(--ob-comp-input-text) !important;
}

.ob-select-wrap .mud-input.mud-input-outlined {
    background: var(--ob-comp-input-bg) !important;
    border-radius: 12px !important;
}

.ob-select-wrap .mud-input-slot,
.ob-select-wrap .mud-input-root,
.ob-select-wrap .mud-input-root-outlined {
    background: transparent !important;
}

/* Hide email line inside selected value (input area only, not dropdown popover) */
.ob-select-wrap .mud-input-slot .mud-typography-caption {
    display: none !important;
}

.ob-select-wrap .mud-input-slot .mud-stack {
    flex-direction: row !important;
    gap: 0 !important;
}

/* Popover list styling — rendered outside ob-layout via MudPopoverProvider */
.mud-popover .mud-list,
.mud-popover .mud-paper {
    border-radius: 12px !important;
}

.mud-popover .mud-list-item .mud-typography,
.mud-popover .mud-list-item {
    color: var(--ob-text, #111827) !important;
}

.mud-popover .mud-list-item .mud-typography-secondary,
.mud-popover .mud-list-item .mud-typography[style*="color"] {
    color: var(--ob-text-secondary, #6B7280) !important;
}

@media (prefers-color-scheme: dark) {
    .mud-popover .mud-list,
    .mud-popover .mud-paper {
        background: var(--ob-comp-surface, #0B0F19) !important;
        border: 1px solid var(--ob-comp-input-border, rgba(55, 65, 81, 0.3)) !important;
    }

    .mud-popover .mud-list-item .mud-typography,
    .mud-popover .mud-list-item {
        color: var(--ob-comp-input-text, #FFFFFF) !important;
    }

    .mud-popover .mud-list-item:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .mud-popover .mud-list-item .mud-typography-secondary,
    .mud-popover .mud-list-item .mud-typography[style*="color"] {
        color: var(--ob-comp-item-description, #9CA3AF) !important;
    }
}

/* ─── Reviewers page layout ─── */
.ob-reviewers-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.ob-form-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ob-form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: var(--ob-checkbox-label);
    cursor: pointer;
}

.ob-form-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ob-checkbox-unchecked);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.ob-form-check input[type="checkbox"]:checked {
    background: var(--ob-checkbox-checked);
    border-color: var(--ob-checkbox-checked);
}

.ob-form-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

@media (prefers-color-scheme: dark) {
    .ob-form-check input[type="checkbox"]:checked::after {
        border-color: black;
    }

    .wf-connector {
        background: #1565C0;
    }

    .warning-banner {
        background: var(--ob-surface);
        color: #FF9800;
    }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .ob-page {
        padding: 24px 16px 88px;
    }

    .ob-header {
        flex-direction: column;
        gap: 12px;
    }

    .ob-steps {
        gap: 6px;
    }

    .ob-step-dot {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .ob-footer {
        padding: 12px 16px;
    }

    .ob-footer-container {
        gap: 8px;
    }

    .ob-btn {
        font-size: 13px;
        padding: 4px 10px;
    }

    .ob-reviewers-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ─── Step description ─── */
.ob-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text-secondary);
    margin: 0;
}

/* ─── Alert ─── */
.ob-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    margin-bottom: 16px;
}

.ob-alert--error {
    background: var(--ob-alert-error-bg);
    border: 1px solid var(--ob-alert-error-border);
    color: var(--ob-alert-error-text);
}

.ob-alert-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 12px;
    line-height: 1;
}

/* ─── Step 8: Your Profile ─── */

/* 3-column form row */
.ob-profile-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* Input field wrapper */
.ob-input-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ob-input-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: var(--ob-comp-label);
}

.ob-input-container {
    display: flex;
    align-items: center;
    height: 36px;
    background: var(--ob-comp-input-bg);
    border: 1px solid var(--ob-comp-input-border);
    border-radius: 12px;
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.036);
    transition: border-color 0.2s ease;
}

.ob-input-container:has(:focus) {
    border-color: var(--ob-comp-input-focus-border);
}

.ob-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.15px;
    color: var(--ob-comp-input-text);
    outline: none;
}

.ob-input::placeholder {
    color: var(--ob-input-placeholder);
}

/* Native select styling */
.ob-select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-comp-input-text);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ob-select option {
    background: var(--ob-comp-input-bg);
    color: var(--ob-comp-input-text);
}

.ob-select-chevron {
    position: relative;
}

.ob-select-chevron::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ob-text-secondary);
    pointer-events: none;
}

/* Groups section */
.ob-groups-section {
    margin-top: 4px;
}

.ob-groups-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text);
    margin: 0 0 12px 0;
}

@media (prefers-color-scheme: dark) {
    .ob-groups-label {
        color: var(--ob-text-secondary);
    }
}

.ob-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 24px;
}

/* ─── Expertise Section ─── */
.ob-expertise-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text-secondary);
    margin: 0 0 32px 0;
}

.ob-expertise-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.ob-expertise-card {
    position: relative;
    box-sizing: border-box;
    background: var(--ob-comp-surface);
    border: 2px solid var(--ob-expertise-card-border);
    border-radius: 12px;
    padding: 28px 24px 0;
    cursor: pointer;
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 345px;
}

.ob-expertise-card:hover {
    border-color: var(--ob-accent);
}

.ob-expertise-card--selected {
    border-color: var(--ob-accent);
}

.ob-default-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 32px;
    text-align: center;
    background: var(--ob-accent);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 32px;
    border-radius: 8px;
    white-space: nowrap;
    box-sizing: border-box;
}

.ob-expertise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ob-expertise-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--ob-text);
}

/* Custom radio circle */
.ob-radio {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--ob-checkbox-unchecked);
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.ob-radio--selected {
    border-color: var(--ob-accent);
    background: var(--ob-accent);
}

.ob-radio--selected::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.ob-expertise-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ob-expertise-upper {
    flex: 5;
}

.ob-expertise-lower {
    flex: 6;
}

.ob-expertise-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text-secondary);
    margin: 0;
}

.ob-expertise-separator {
    height: 1px;
    background: var(--ob-expertise-separator);
    margin: 8px 0;
}

@media (prefers-color-scheme: dark) {
    .ob-description {
        color: #FFFFFF;
    }

    .ob-expertise-card--selected {
        border-color: var(--ob-accent);
    }
}

.ob-ai-example-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-accent);
    display: block;
    margin-bottom: 6px;
}

.ob-ai-example-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-text-secondary);
    margin: 0;
}

/* ─── Step 8 Responsive ─── */
@media (max-width: 768px) {
    .ob-profile-form-row {
        grid-template-columns: 1fr;
    }

    .ob-group-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ob-expertise-cards {
        grid-template-columns: 1fr;
    }
}