/* Add this inside the <style> tag */
        .content-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px; /* Optional: adds nice rounded corners */
        }
        /* Old styles for question list */
.question-card {
    border-left: 5px solid #ccc;
    transition: all 0.3s ease-in-out;
}
.question-card.status-red {
    border-left-color: #ef4444; /* red-500 */
    background-color: #fee2e2; /* red-100 */
}
.question-card.status-green {
    border-left-color: #22c55e; /* green-500 */
    background-color: #dcfce7; /* green-100 */
}
.answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding-top: 0;
    padding-bottom: 0;
}
.answer.revealed {
    max-height: 1000px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* NEW styles for the interactive clozes on the review screen */
.cloze {
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 2px dashed #93c5fd; /* blue-300 */
}
.cloze.revealed {
    background-color: transparent;
    color: inherit;
    border-bottom: none;
    cursor: default;
}
.cloze.selectable {
    cursor: copy;
}
.cloze.selected {
    outline: 2px solid #2563eb; /* blue-600 */
    background-color: #bfdbfe; /* blue-200 */
}