.btn-gradient-outline {
    position: relative;
    color: var(--text) !important;
    border: 1px solid transparent;
    background-image: linear-gradient(#020c18, #020c18),
        linear-gradient(135deg, var(--accent), var(--accent-strong));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 50px;
    padding: 0.4rem 1.1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    animation: borderGlow 12s linear infinite;
    background-size: 300% 300%;
}

.btn-gradient-outline:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 6px var(--accent);
}

.btn-gradient-outline.active {
    color: #fff;
    border: 1px solid transparent;
    background-image: linear-gradient(135deg, var(--accent), var(--accent-strong));
    background-size: 400% 400%;
    background-position: 0% 50%;
    border-radius: 50px;
    padding: 0.4rem 1.1rem;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    animation: glowFill 12s ease infinite;
    box-shadow: 0 0 8px rgba(110, 0, 255, 0.15);
}

.btn-fill-cutout {
    background-color: var(--primary);
    border-radius: 7px;
    color: var(--bg, #0B1725) !important;
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
}

.btn-fill-gradient-primary-tertiary {
    border-radius: 7px;
    background-image: linear-gradient(335deg, var(--primary), var(--tertiary));
    color: var(--bg, #0B1725) !important;
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    border: none;
}

.btn-standings-tab {
    border-radius: 7px;
    background-color: var(--primary-glow);
    color: var(--bg, #0B1725) !important;
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
}

.btn-standings-tab:hover {
    filter: brightness(1.05);
}

.btn-standings-tab.active {
    background-color: var(--primary);
    color: var(--bg, #0B1725) !important;
    border: none;
    box-shadow: none;
}

.btn-fill-cutout:hover {
        background-color: var(--primary-hover);
}

.btn-fill-gradient-primary-tertiary:hover {
    filter: brightness(1.05);
}

.btn-flat-secondary {
    background-color: var(--secondary);
    border-radius: 7px;
    color: var(--bg, #0B1725) !important;
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    border: none;
}

.btn-flat-secondary:hover {
    background-color: var(--secondary-hover);
}

.btn-flat-primary {
    background-color: var(--primary);
    border-radius: 7px;
    color: var(--bg, #0B1725) !important;
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    border: none;
}

.btn-flat-primary:hover {
    background-color: var(--primary-hover);
}

.btn-outline-secondary-glow {
    background: transparent;
    border-radius: 7px;
    color: var(--text) !important;
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    border: 1px solid var(--secondary-glow);
}

.btn-outline-secondary-glow:hover {
    filter: brightness(1.05);
}