:root {
    --color-turquesa: #11b5b0;
    --color-turquesa-dark: #0d8f8b;
    --color-white: #ffffff;
    --color-dark-gray: #2f3b45;
    --color-soft-gray: #f4f7f8;
}

body {
    background: var(--color-soft-gray);
    color: var(--color-dark-gray);
}

.app-topbar {
    background: linear-gradient(120deg, var(--color-turquesa), var(--color-turquesa-dark));
}

.card-soft {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(47, 59, 69, 0.08);
}

.btn-turquesa {
    background: var(--color-turquesa);
    color: var(--color-white);
    border: 0;
}

.btn-turquesa:hover {
    background: var(--color-turquesa-dark);
    color: var(--color-white);
}

.module-badge {
    background: rgba(17, 181, 176, 0.15);
    color: var(--color-turquesa-dark);
    border-radius: 20px;
    font-size: 0.8rem;
    padding: 0.28rem 0.7rem;
    display: inline-block;
}

.login-wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
}