body {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    min-height: 100vh;
}

.hero-card {
    background: radial-gradient(circle at top right, rgba(13, 110, 253, 0.10), rgba(13, 110, 253, 0.03));
    border: 1px solid rgba(13, 110, 253, 0.12);
}

.card {
    border-radius: 1rem;
}

input,
select,
textarea {
    border-radius: 0.75rem !important;
}

.btn {
    border-radius: 0.75rem;
}

.list-group-item {
    border-radius: 0.6rem !important;
    margin-bottom: 0.4rem;
}

.table thead th {
    white-space: nowrap;
}

.checkbox-grid {
    margin-top: 0.25rem;
}

.checkbox-tile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #dbe5f7;
    border-radius: 0.65rem;
    background: #fff;
    cursor: pointer;
    min-height: 42px;
    margin: 0;
}

.checkbox-tile:hover {
    background: #f8fbff;
    border-color: #b7cef6;
}

.checkbox-tile input[type='checkbox'] {
    margin: 0;
    flex: 0 0 auto;
}

.question-image {
    width: 100%;
    max-width: 760px;
    max-height: 460px;
    object-fit: contain;
    border: 1px solid #d9e5fb;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.35rem;
}

.option-item {
    align-items: flex-start;
}

.option-content {
    min-height: 32px;
}

.option-text {
    font-weight: 500;
}

.option-image {
    width: 100%;
    max-width: 240px;
    max-height: 170px;
    object-fit: contain;
    border: 1px solid #dbe5f7;
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.25rem;
}

@media (max-width: 576px) {
    .question-image {
        max-height: 320px;
    }

    .option-image {
        max-width: 100%;
        max-height: 150px;
    }
}