.onboarding-overlay {
    position: fixed;
    inset: 0;
    /* Tinted scrim + blur: reads clearly as a separate layer from the dashboard (not a generic dim). */
    background: linear-gradient(
        168deg,
        color-mix(in srgb, var(--accent-success) 18%, rgba(0, 0, 0, 0.08)) 0%,
        rgba(0, 0, 0, 0.38) 42%,
        color-mix(in srgb, var(--background-secondary) 35%, rgba(0, 0, 0, 0.5)) 100%
    );
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    z-index: 2200;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onboarding-overlay {
        background: linear-gradient(
            168deg,
            color-mix(in srgb, var(--accent-success) 14%, rgba(0, 0, 0, 0.42)) 0%,
            rgba(0, 0, 0, 0.52) 100%
        );
    }
}

/* Card is a direct child of body so it sits above the highlighted element (z-index 2201) */
.onboarding-card {
    position: fixed;
    z-index: 2202;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 96vw);
    border: 1px solid var(--border-primary);
    background: var(--background-modal);
    color: var(--text-primary);
    padding: 1rem;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-success) 22%, transparent),
        0 18px 48px rgba(0, 0, 0, 0.28);
}

.onboarding-progress {
    font-size: var(--font-size-controls);
    color: var(--text-tertiary);
    margin-bottom: 0.35rem;
}

.onboarding-title {
    font-size: var(--font-size-category);
    margin-bottom: 0.35rem;
}

.onboarding-body {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.onboarding-fields {
    margin-bottom: 0.75rem;
    display: grid;
    gap: 0.65rem;
}

.onboarding-field {
    display: grid;
    gap: 0.3rem;
}

.onboarding-field-label {
    color: var(--text-secondary);
    font-size: var(--font-size-controls);
}

.onboarding-input {
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    padding: 0.35rem 0.5rem;
}

.onboarding-fieldset {
    border: 1px solid var(--border-primary);
    padding: 0.45rem 0.6rem;
    display: grid;
    gap: 0.35rem;
}

.onboarding-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
}

.onboarding-field-hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-controls);
}

.onboarding-status-monitor-scope-note {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.onboarding-bookmark-check-page {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.onboarding-bookmark-checklist-items {
    display: grid;
    gap: 0.35rem;
    max-height: 11rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.onboarding-bookmark-check-option {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--text-primary);
    cursor: pointer;
}

.onboarding-bookmark-check-option.is-example {
    padding: 0.35rem 0.4rem;
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.onboarding-bookmark-check-label {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.onboarding-bookmark-check-name {
    font-size: var(--font-size-controls);
    font-weight: 600;
}

.onboarding-bookmark-check-hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-small, 0.72rem);
    line-height: 1.4;
}

.onboarding-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.onboarding-btn {
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}

.onboarding-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--background-secondary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

.onboarding-highlight {
    position: relative;
    z-index: 2201;
    box-shadow: 0 0 0 2px var(--accent-success), 0 0 0 6px color-mix(in srgb, var(--accent-success) 18%, transparent);
}

@media (max-width: 768px) {
    .onboarding-highlight {
        box-shadow: 0 0 0 1px var(--accent-success), 0 0 0 3px color-mix(in srgb, var(--accent-success) 14%, transparent);
    }
}