.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.tab {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    background: #f1f4f9;
    color: #3a3f44;

    border: none;
    border-radius: 10px;
    transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}

.tab:hover {
    transform: translateY(-2px);
    background: #e3ecfb;
    color: #1558b0;
    box-shadow: 0 4px 10px rgba(20, 90, 190, .15);
}

.tab.active {
    background: linear-gradient(135deg, #1558b0, #1a73e8);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #fff;
    box-shadow: 0 4px 14px rgba(20, 90, 190, .35);
    animation: tabPop .3s ease;
}

.tab.active:hover {
    background-position: 100% 50%;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(20, 90, 190, .45);
}

@keyframes tabPop {
    0% {
        transform: scale(.95);
    }

    60% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

.tab-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: all 0.35s ease;
    pointer-events: none;
}

.tab-content.active {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: contentFade .4s ease;
}

@keyframes contentFade {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}