.onboarding-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(5, 10, 25, .62);
            display: none;
        }

        .onboarding-overlay.active { display: block; }

        .onboarding-spotlight {
            position: fixed;
            z-index: 10001;
            pointer-events: none;
            border: 2px solid #fff;
            border-radius: 10px;
            box-shadow: 0 0 0 9999px rgba(5, 10, 25, .62),
                        0 0 0 4px rgba(255,255,255,.14);
            transition: all .22s ease;
            display: none;
        }

        .onboarding-card {
            position: fixed;
            z-index: 10002;
            width: min(360px, calc(100vw - 32px));
            background: #fff;
            color: #172033;
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 18px 50px rgba(0,0,0,.28);
            display: none;
        }

        .onboarding-card.active { display: block; }

        .onboarding-kicker {
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            opacity: .65;
            margin-bottom: 6px;
        }

        .onboarding-title {
            margin: 0 0 8px;
            font-size: 1.18rem;
            line-height: 1.3;
        }

        .onboarding-text {
            margin: 0;
            font-size: .92rem;
            line-height: 1.55;
            color: #4b5563;
        }

        .onboarding-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 18px;
        }

        .onboarding-progress {
            font-size: .78rem;
            color: #6b7280;
            white-space: nowrap;
        }

        .onboarding-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .onboarding-btn {
            border: 0;
            border-radius: 8px;
            padding: 9px 13px;
            cursor: pointer;
            font: inherit;
            font-weight: 600;
        }

        .onboarding-btn-skip {
            background: transparent;
            color: #6b7280;
        }

        .onboarding-btn-next {
            background: #0c154a;
            color: #fff;
        }

        .onboarding-btn-next:hover { opacity: .92; }

        .onboarding-welcome {
            position: fixed;
            z-index: 10003;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(430px, calc(100vw - 32px));
            background: #fff;
            color: #172033;
            border-radius: 16px;
            padding: 26px;
            box-shadow: 0 24px 70px rgba(0,0,0,.32);
            display: none;
        }

        .onboarding-welcome.active { display: block; }

        .onboarding-welcome-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .onboarding-welcome h2 {
            margin: 0 0 8px;
        }

        .onboarding-welcome p {
            margin: 0;
            line-height: 1.55;
            color: #4b5563;
        }

        .onboarding-welcome .onboarding-footer {
            margin-top: 20px;
        }

        @media (max-width: 768px) {
            .onboarding-card {
                width: min(340px, calc(100vw - 24px));
            }
        }