:root {
    --primary: #6c5ce7;
    --secondary: #a29bfe;
    --success: #00b894;
    --warning: #fdcb6e;
    --danger: #d63031;
    --dark: #2d3436;
    --light: #f8f9fa
}

body {
    font-family: "Poppins", sans-serif;
    background-color: #f9f7ff;
    color: #333
}

.app-container {
    margin: 0 auto;
    background: #fff;
    overflow: hidden
}

.app-header {
    background: #000;
    color: #fff;
    padding: 20px;
    text-align: center
}

.app-body {
    padding: 5px
}

.nav-pills .nav-link {
    color: var(--dark);
    border-radius: 8px;
    margin: 0 5px;
    transition: all .3s ease
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff
}

.btn-copy {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 0px;
    font-weight: 400;
    transition: all .3s ease
}

.btn-copy:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px #6c5ce766
}

.btn-generate {
    background: linear-gradient(135deg, var(--success), #00d8a4);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    transition: all .3s ease
}

.btn-generate:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px #00b89466
}

.copied-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    animation: fadeIn 0.5s, fadeOut .5s 2.5s;
    display: none
}

.response-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    animation: fadeIn 0.5s, fadeOut .5s 2.5s;
    display: none
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.loading-spinner {
    display: none;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}