@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

body {
    background: linear-gradient(120deg, #f5e6fa 0%, #f2d4ff 100%);
    font-family: 'Montserrat', Arial, sans-serif;
    color: #3c254b;
    margin: 0;
    padding: 0;
}

.navbar, .bg-primary {
    background: #7e05a3 !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 12px rgba(126,5,163,0.11);
    padding: 0.5rem 0;
}

.navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.navbar .navbar-brand img {
    height: 34px;
    margin-right: 10px;
}

.btn-primary, .btn-outline-primary, .btn-light {
    background: #a723cc !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(126,5,163,0.09);
    transition: background .2s;
    font-weight: 600;
    letter-spacing: .2px;
}

.btn-primary:hover, .btn-outline-primary:hover, .btn-light:hover {
    background: #7e05a3 !important;
    color: #fff !important;
}

.btn-outline-primary {
    background: transparent !important;
    color: #7e05a3 !important;
    border: 2px solid #7e05a3 !important;
}

.btn-outline-primary:hover {
    background: #7e05a3 !important;
    color: #fff !important;
}

.card {
    border-radius: 18px;
    border: none;
    box-shadow: 0 4px 24px rgba(126,5,163,0.09);
    margin-bottom: 28px;
}

.card-header {
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(90deg, #a723cc, #7e05a3 80%);
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .5px;
    font-size: 1.07em;
}

.table {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(126,5,163,0.07);
}

footer {
    background: #7e05a3;
    color: #fff;
    padding: 16px 0;
    text-align: center;
    border-radius: 0 0 12px 12px;
    margin-top: 48px;
    font-size: 1.1rem;
    letter-spacing: .5px;
}

a {
    color: #a723cc;
    text-decoration: none;
}
a:hover {
    color: #7e05a3;
    text-decoration: underline;
}

.alert-info {
    background: #f6eafd;
    color: #7e05a3;
    border: 1px solid #a723cc;
}

.alert-warning {
    background: #faedfc;
    color: #7e05a3;
    border: 1px solid #a723cc;
}

.alert-danger {
    background: #ffe6f3;
    color: #a723cc;
    border: 1px solid #a723cc;
}

.alert-success {
    background: #e3ffe6;
    color: #27823e;
    border: 1px solid #27823e;
}

.card .card-title {
    font-weight: bold;
    color: #7e05a3;
    font-size: 1.17em;
    letter-spacing: .2px;
}

.card .card-img-top {
    border-radius: 16px 16px 0 0 !important;
    background: #f6eafd;
    padding: 8px;
    object-fit: cover;
    width: 100%;
    height: 320px;
    max-height: 360px;
    aspect-ratio: 3/4;
}

.form-control:focus, .form-select:focus {
    border-color: #a723cc;
    box-shadow: 0 0 0 2px rgba(126,5,163,0.13);
}

::-webkit-scrollbar-thumb {
    background: #a723cc;
    border-radius: 8px;
}
::-webkit-scrollbar-track {
    background: #f7eafd;
}
::-webkit-scrollbar {
    width: 8px;
}

@media (max-width: 900px) {
    .col-md-4 {
        flex: 0 0 100%;
        max-width: 95%;
        margin: 0 auto 18px auto;
    }
    .container {
        padding: 8px;
    }
    .card {
        margin-bottom: 18px;
    }
    h3, .card-header {
        font-size: 1.15em !important;
    }
    .card .card-img-top {
        height: 220px;
        max-height: 260px;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 4px;
    }
    .card .card-img-top {
        height: 140px;
        max-height: 180px;
    }
    .navbar .navbar-brand {
        font-size: 1.01rem;
    }
    .card, .table {
        box-shadow: 0 2px 10px rgba(126,5,163,0.06);
    }
}