.btn-primary,
.btn-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border-radius: 999px;
    border: 1px solid #0a0b0e;
    background: #0a0b0e;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 0;
}

    .btn-primary::before,
    .btn-ghost::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, #2a2b35, #0a0b0e);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
        z-index: -1;
    }

    .btn-primary:hover,
    .btn-ghost:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
        color: #ffffff;
    }

        .btn-primary:hover::before,
        .btn-ghost:hover::before {
            opacity: 1;
            transform: scaleX(1);
        }

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-ghost {
    background: #212529;
    color: var(--text);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text);
}

[data-theme="dark"] .btn-primary::before,
[data-theme="dark"] .btn-ghost::before {
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
}