.button-style {
    margin: auto;
    display: block;
    margin-top: 2rem;
}

h1 {
    text-align: center;
    margin-top: 2rem;
    font-family: 'Lexend Giga', sans-serif;
    color: var(--glow-magenta);
}

.link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.box {
    width: 25rem;
    margin: auto;
    margin-top: 5rem;
    padding: 2rem;
    border: 1px solid var(--glow-magenta);
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.6);
}

#profile-settings-style {
    width: min(92%, 25rem);
    text-align: center;
    margin: 5rem auto 2rem auto;
    padding: 2rem;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;


    /* Match SmartSuggestion glass background */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

#profiledatas {
    width: min(92%, 25rem);
    text-align: center;
    margin: 5rem auto 2rem auto;
    padding: 2rem;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;


    /* Match SmartSuggestion glass background */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;

}

#profilestatus {
    width: min(92%, 25rem);
    text-align: center;
    margin: 5rem auto 2rem auto;
    padding: 2rem;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;


    /* Match SmartSuggestion glass background */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;

}

#avatar-container {
    text-align: center;

}

#avatar-container img {
    border-radius: 50%;
    border: 3px solid #ddd;
    margin-bottom: 20px;
    background: #eee;
}

#username-style {
    margin: 250px;
    text-align: right;
}

#planstatus {
    width: 90%;
    background-color: var(--glow-magenta);
    margin: 2rem auto 2rem auto;
    padding: 1rem;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    .btn {
        display: block;
        border-radius: 20px;
    }
    .btn:hover {
        color: white; 
    }
}

.plan-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

#freeplan {
    width: min(92%, 30rem);
    margin: 0.5rem;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 1rem;


    /* Match SmartSuggestion glass background */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

#proplan {
    width: min(92%, 30rem);
    margin: 0.5rem;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 1rem;

    /* Match SmartSuggestion glass background */
    background: linear-gradient(135deg,
            rgba(255, 156, 6, 0.07),
            rgba(230, 189, 10, 0.03));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 218, 10, 0.842);
    box-shadow:
        0 18px 55px rgba(214, 218, 9, 0.45),
        0 0 0 1px rgba(255, 208, 0, 0.932) inset;

    h1 {
        color: rgba(255, 218, 10, 0.842);
    }
}