body { font-family: sans-serif; background: #f4f4f9; padding: 20px; }
.container { max-width: 900px; margin: auto; background: white; padding: 30px; border-radius: 12px; }
textarea#sourceText { width: 100%; height: 100px; margin-bottom: 10px; }
.settings-row { display: flex; gap: 10px; margin-bottom: 20px; }
.question-card { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
.card-header { background: #e9ecef; padding: 10px; border-bottom: 1px solid #ddd; }
.card-body { padding: 15px; }
.opt { padding: 4px; margin: 2px 0; border-radius: 4px; }
.is-correct { background: #d4edda; color: #155724; }
.is-wrong { background: #f8d7da; color: #721c24; opacity: 0.8; }
.comment-field { width: 100%; height: 60px; margin-top: 10px; border: 1px solid #ccc; border-radius: 4px; padding: 5px; }
button { cursor: pointer; padding: 10px 20px; border-radius: 5px; border: none; font-weight: bold; }
#genBtn { background: #007bff; color: white; }
#mailBtn { background: #28a745; color: white; width: 100%; font-size: 18px; }