/* === Basic Reset & Body === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f0f2f5;
    color: #333;
    padding: 15px;
}

.app-container {
    max-width: 900px;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* === Header === */
header {
    background-color: #4a69bd;
    color: white;
    padding: 15px 25px;
    text-align: center;
    position: relative;
}
header h1 {
    font-size: 1.8em;
}
.start-over-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    padding: 8px 15px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}
.start-over-btn:hover {
    background-color: #c0392b;
}

/* === Main Content === */
main {
    padding: 25px;
}

/* === Mode Selection & Time Limit === */
.mode-selection-container,
.time-limit-container {
    text-align: center;
    padding: 20px 0;
}
.mode-selection-container h2,
.time-limit-container h2 {
    margin-bottom: 25px;
    color: #4a69bd;
    font-size: 1.5em;
}
.mode-button {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 15px auto;
    padding: 15px 20px;
    font-size: 1.1em;
    background-color: #5d8bdb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.mode-button:hover {
    background-color: #4a69bd;
}
.time-options {
    margin-bottom: 25px;
}
.time-limit-button {
    display: inline-block;
    width: auto;
    margin: 5px;
    padding: 12px 20px;
    font-size: 1em;
    background-color: #5d8bdb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
}
.time-limit-button:hover {
    background-color: #4a69bd;
}
.time-limit-button.selected {
    background-color: #34495e;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.custom-time-input {
    margin-bottom: 25px;
}
.custom-time-input label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 0.95em;
}
.custom-time-input input[type="number"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    max-width: 200px;
    font-size: 1em;
    text-align: center;
}
.custom-time-input input[type=number]::-webkit-inner-spin-button,
.custom-time-input input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.custom-time-input input[type=number] {
  -moz-appearance: textfield;
}
.start-test-btn {
    padding: 14px 30px; font-size: 1.1em; background-color: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; display: block; margin: 10px auto; width: fit-content;
}
.start-test-btn:disabled {
    background-color: #bdc3c7; cursor: not-allowed;
}
.start-test-btn:not(:disabled):hover {
     background-color: #2ecc71;
}
.cancel-button {
    display: block; width: 100%; max-width: 250px; margin: 10px auto; padding: 12px 15px; font-size: 1em; background-color: #95a5a6; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 15px;
}
.cancel-button:hover {
     background-color: #7f8c8d;
}

/* === Quiz Area === */
.quiz-container {}
.timer {
    font-size: 1.3em; font-weight: bold; color: #e74c3c; text-align: left; margin-bottom: 20px; padding: 10px; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 4px;
}

/* === Question Card === */
.question-card {
    background-color: #fdfdff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.question-card h3 {
    margin-bottom: 15px; color: #333; font-size: 1.3em; border-bottom: 1px solid #eee; padding-bottom: 10px; display: flex; align-items: center;
}
.question-number {
    display: inline-flex; align-items: center; justify-content: center; background-color: #4a69bd; color: white; border-radius: 50%; width: 30px; height: 30px; font-weight: bold; margin-right: 10px; font-size: 0.9em;
}
.question-text-block { /* Container for upper, mainContent, lower */
    margin-bottom: 15px;
}
.upper-text, .lower-text {
    margin-bottom: 10px;
    font-size: 1.05em;
    color: #444;
}

/* === Main Content Block (Image, Text, Table) === */
.main-content-block {
    margin: 20px 0; padding: 15px; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f9f9f9;
}
.main-content-text {
    line-height: 1.6; font-size: 1em; color: #333; white-space: pre-wrap;
}
.main-content-block .image-container { /* Reuses .image-container */
    margin: 0; background-color: transparent;
}
.main-content-table-container { /* Reuses .mcq-table-container */ }
.main-content-table { /* Reuses .mcq-table */
    margin-top: 0;
}
.main-content-table th, .main-content-table td {
    font-size: 0.9em; padding: 8px 10px;
}
/* Spacing around main content */
.upper-text + .main-content-block,
.main-content-block + .lower-text {
    margin-top: 15px;
}
.main-content-block + .tog-roman-list,
.main-content-block + .mcq-table-container,
.main-content-block + .mcqv3-options-container,
.main-content-block + .options-list {
    margin-top: 25px;
}

/* General Image Placeholder / Container Styles */
.image-container {
    margin: 15px 0; text-align: center; min-height: 50px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; display: flex; justify-content: center; align-items: center;
}
.question-image { /* Main image in mainContent */
    display: block; max-width: 100%; max-height: 400px; height: auto; border-radius: 4px;
}
/* Loading/Error for general images */
.image-loading {
    background-color: #e0e0e0; color: #888; padding: 20px; box-sizing: border-box; width: 90%; text-align: center; font-size: 0.9em;
}
.image-error {
    background-color: #f8d7da; color: #721c24; padding: 20px; box-sizing: border-box; width: 90%; border: 1px dashed #f5c6cb; text-align: center; font-size: 0.9em;
}


/* === TOG (Unified Text/Image Roman Numerals) === */
.tog-roman-list {
    list-style: none; padding: 0; margin: 20px 0;
}
.tog-roman-item {
    display: flex; align-items: flex-start; margin-bottom: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px; background-color: #fdfdfd;
}
.tog-roman-label {
    font-weight: bold; font-size: 1.1em; margin-right: 15px; min-width: 30px; padding-top: 5px; color: #444; flex-shrink: 0;
}
.tog-item-content {
    flex-grow: 1; text-align: left; min-height: 40px; line-height: 1.5;
}
.tog-roman-image {
    display: inline-block; max-width: 90%; max-height: 150px; height: auto; vertical-align: top; border: 1px solid #ddd; border-radius: 3px; background-color: #f0f0f0;
}
.tog-roman-list + .options-list {
    margin-top: 25px;
}

/* === MCQV2 / TOGV2 (Table-based questions) === */
.mcq-table-container {
    margin: 20px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.mcq-table {
    width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-size: 0.95em; background-color: #fff;
}
.mcq-table thead {
    background-color: #f2f2f2; border-bottom: 2px solid #ccc;
}
.mcq-table th, .mcq-table td {
    border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: middle;
}
.mcq-table th {
    font-weight: bold; color: #333;
}
.mcq-select-cell {
    text-align: center; width: 80px; padding: 0; vertical-align: middle;
}
.mcq-row-label {
    display: inline-flex; align-items: center; justify-content: center; padding: 10px 5px; cursor: pointer; margin: 0; height: 100%; width: 100%; box-sizing: border-box; font-weight: bold;
}
.mcq-row-label input[type="radio"] {
    margin-right: 8px;
}
.mcq-row-label:hover {
    background-color: #f0f5ff;
}
.table-cell-image { /* For images in MCQV2/TOGV2 headers/cells */
    display: block; max-width: 100px; max-height: 60px; height: auto; margin: 0 auto; vertical-align: middle;
}
.mcq-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.mcq-table tbody tr:has(.mcq-select-cell input[type="radio"]:checked) {
   background-color: #e6f0ff;
}

/* === MCQV3 (Image Options Grid) === */
.mcqv3-options-container {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 20px 0; padding: 10px; background-color: #fdfdfd; border: 1px solid #eee; border-radius: 4px;
}
.mcqv3-option {
    position: relative; border: 2px solid #ddd; border-radius: 5px; background-color: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden;
}
.mcqv3-option-label-wrapper {
    display: block; padding: 10px; cursor: pointer; text-align: center;
}
.mcqv3-radio-input {
     margin-bottom: 5px; display: block; margin-left: auto; margin-right: auto;
 }
.mcqv3-option-image {
    display: block; max-width: 100%; height: auto; min-height: 80px; margin: 0 auto; border-radius: 3px;
}
.mcqv3-option-letter {
    position: absolute; top: 5px; left: 8px; font-weight: bold; font-size: 1.1em; color: #555; background-color: rgba(255, 255, 255, 0.7); padding: 0 4px; border-radius: 3px; z-index: 1;
}
.mcqv3-option:hover {
    border-color: #a0c4ff; box-shadow: 0 0 5px rgba(160, 196, 255, 0.5);
}
.mcqv3-option:has(.mcqv3-radio-input:checked) {
    border-color: #4a69bd; background-color: #f0f5ff; box-shadow: 0 0 8px rgba(74, 105, 189, 0.6);
}

/* === Standard Options List (for MCQ, TOG, TOGV2) === */
.options-list {
    list-style: none; padding: 0; margin-top: 15px;
}
.options-list li {
    margin-bottom: 12px;
}
.options-list label {
    display: block; padding: 10px 15px; background-color: #ffffff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.options-list label:hover {
    background-color: #f5f5f5;
}
.options-list input[type="radio"] {
    margin-right: 10px; vertical-align: middle;
}

/* === Buttons & Feedback === */
.submit-single-button { /* For Practice/One-a-Day */
    padding: 12px 25px; font-size: 1em; background-color: #2ecc71; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 15px; display: block;
}
.submit-single-button:hover {
    opacity: 0.9;
}
#submit-all-test { /* For Test Mode */
    padding: 12px 25px; font-size: 1em; background-color: #e74c3c; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin: 20px auto; display: block; width: fit-content;
}
#submit-all-test:hover{
    opacity: 0.9;
}
#submit-all-test:disabled {
    background-color: #cccccc; cursor: not-allowed; opacity: 0.7;
}
.feedback {
    margin-top: 15px; padding: 10px 15px; border-radius: 4px; font-weight: bold;
}
.feedback.correct {
    background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;
}
.feedback.incorrect {
    background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
}

/* === Results Summary Area === */
#results-area {
    margin-bottom: 30px; padding: 20px; border: 1px solid #4a69bd; background-color: #eaf2ff; border-radius: 6px; text-align: center;
}
#results-area h2 {
    margin-bottom: 15px; color: #4a69bd;
}
#results-area p {
    font-size: 1.2em; margin-bottom: 10px;
}
#result-message {
    font-weight: bold; color: #e74c3c; margin-bottom: 15px;
}
#restart-quiz {
    padding: 12px 25px; font-size: 1em; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 15px; display: inline-block;
}
#restart-quiz:hover {
    opacity: 0.9;
}

/* === Responsive Design === */
@media (min-width: 600px) { /* Tablet */
    body { padding: 20px; }
    .app-container { margin: 30px auto; }
    header h1 { font-size: 2em; }
    .mode-button, .time-limit-button { font-size: 1.2em; }
    .timer { font-size: 1.4em; }
    .start-over-btn { right: 25px; padding: 10px 18px; }
}
@media (min-width: 900px) { /* Desktop */
    body { padding: 30px; }
    .app-container { margin: 40px auto; }
    header h1 { font-size: 2.2em; }
    main { padding: 30px; }
    .start-over-btn { right: 30px; }
    .timer { font-size: 1.5em; }
}