:root { --primary-color: #2563eb; /* Blue-600 */ --secondary-color: #4f46e5; /* Indigo-600 */ --background-color: #f3f4f6; /* Gray-100 */ --card-background: #ffffff; --text-primary: #1f2937; /* Gray-800 */ --text-secondary: #6b7280; /* Gray-500 */ --border-color: #e5e7eb; /* Gray-200 */ --success-color: #16a34a; /* Green-600 */ --danger-color: #ef4444; /* Red-500 */ --warning-color: #f59e0b; /* Amber-500 */ --purple-color-dark: #7e22ce; /* Purple-700 */ --purple-color-medium: #5b21b6;/* Purple-700 Alt? */ --purple-color-light: #ede9fe; /* Purple-100 */ --purple-border-light: #c4b5fd;/* Purple-300 */ --green-light: #dcfce7; /* green-100 */ --green-dark: #166534; /* green-700 */ --green-border: #86efac; /* green-300 */ --red-light: #fee2e2; /* red-100 */ --red-dark: #b91c1c; /* red-700 */ --red-border: #fca5a5; /* red-300 */ --gray-light: #f9fafb; /* gray-50 */ --blue-light-bg: #eff6ff; /* blue-50 */ } body { background-color: var(--background-color); font-family: 'Inter', sans-serif; /* Ensure Inter font is linked in */ color: var(--text-primary); } .header-bg { background-color: var(--card-background); border-bottom: 1px solid var(--border-color); } .primary-text { color: var(--primary-color); } .primary-bg { background-color: var(--primary-color); } .mock-test-container, .sidebar-card { /* Basic card style */ background-color: var(--card-background); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07); } /* --- Mock Test Specific Styles --- */ .timer { font-size: 1.0rem; font-weight: 600; color: var(--danger-color); background-color: var(--red-light); padding: 0.3rem 0.7rem; border-radius: 999px; flex-shrink: 0; } .test-header h2 { font-size: 1.0rem; font-weight: 600; } .progress-container { margin-top: 0.5rem; margin-bottom: 0.75rem; } .question-title { font-size: 1.0rem; font-weight: 600; margin-bottom: 1rem; line-height: 1.5; color: var(--text-primary); } /* --- FINAL Corrected Option Styles --- */ .options-container .option-wrapper { display: flex; /* Use flexbox for overall alignment */ align-items: flex-start; /* Align radio button to the top of the content */ margin-bottom: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; background-color: #fff; } .options-container .option-wrapper:hover { background-color: var(--gray-light); border-color: #9ca3af; } .options-container input[type="radio"] { margin-top: 0.2rem; /* Adjust vertical position of radio */ margin-right: 0.7rem; /* Space between radio and label */ width: 1.1em; height: 1.1em; flex-shrink: 0; accent-color: var(--primary-color); cursor: pointer; } .options-container .option-wrapper label { flex-grow: 1; /* Take remaining space */ display: block; /* Label behaves like a block */ cursor: pointer; line-height: 1.5; color: var(--text-primary); font-size: 0.9rem; /* Smaller option text */ } /* Style the A./B. prefix part */ .options-container .option-wrapper label span.option-prefix { display: inline-block; /* Keep inline */ min-width: 1.4rem; /* Consistent space for A. B. C. D. */ font-weight: 500; margin-right: 0.4rem; /* Space after prefix */ color: var(--text-secondary); vertical-align: top; /* Align prefix with top of text line */ } /* Style the actual option text or image content */ .options-container .option-wrapper label span.option-content { display: inline; /* Allow text to wrap naturally after prefix */ word-break: break-word; vertical-align: top; /* Align content with top of text line */ } /* Style wrapper when its radio is checked */ .options-container .option-wrapper:has(input[type="radio"]:checked) { border-color: var(--primary-color); background-color: var(--blue-light-bg); } /* Style label text when its radio is checked */ .options-container .option-wrapper input[type="radio"]:checked + label { /* font-weight: 600; - Optional: Make selected text bold */ color: var(--primary-color); /* Make selected text blue */ } .option-image { max-height: 45px; max-width: 100%; display: inline-block; vertical-align: middle; /* Align image vertically */ margin-left: 0; /* No margin needed if inside content span */ border: 1px solid var(--border-color); border-radius: 4px; } /* --- End Corrected Option Styles --- */ .test-navigation { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding-top: 0.75rem; flex-wrap: wrap; gap: 4px; } .test-navigation button, .scorecard-actions button, .scorecard-actions a { padding: 5px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.8rem; font-weight: 500; cursor: pointer; background-color: #fff; transition: all 0.2s; color: var(--text-primary); } .test-navigation button:disabled { opacity: 0.5; cursor: not-allowed; background-color: #f9fafb; } .test-navigation button:not(:disabled):hover, .scorecard-actions button:hover, .scorecard-actions a:hover { background-color: #f3f4f6; } .submit-btn { background-color: var(--success-color); color: white; border-color: var(--success-color); } .submit-btn:hover:not(:disabled) { background-color: #15803d; border-color: #15803d; } #palette-modal-btn { background-color: #f3f4f6; } #palette-modal-btn:hover { background-color: #e5e7eb; } .scorecard-actions a { background-color: var(--primary-color); color: white; border-color: var(--primary-color);} .scorecard-actions a:hover { background-color: #1d4ed8; border-color: #1d4ed8; } .question-image { max-height: 200px; max-width: 100%; display: block; margin: 1rem auto; border: 1px solid var(--border-color); border-radius: 8px; } .suggested-test-card button { font-size: 0.875rem; padding: 0.25rem 0.75rem; border-radius: 6px; background-color: var(--primary-color); color: white; transition: background-color 0.2s; border: none; } .suggested-test-card button:hover { background-color: #1d4ed8; } /* --- Palette Styles --- */ .palette-item { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #d1d5db; border-radius: 6px; font-weight: 500; text-decoration: none; color: #374151; background-color: var(--gray-light); cursor: pointer; transition: all 0.2s; position: relative; } .palette-item:hover { border-color: var(--primary-color); } .palette-item.not-visited { background-color: var(--gray-light); color: #374151; } .palette-item.not-answered { background-color: var(--red-light); color: var(--red-dark); border-color: var(--red-border); } .palette-item.answered { background-color: var(--green-light); color: var(--green-dark); border-color: var(--green-border); } .palette-item.marked-review { background-color: var(--purple-color-light); color: var(--purple-color-medium); border-color: var(--purple-border-light); } .palette-item.answered-marked-review { background-color: var(--green-light); color: var(--green-dark); border-color: var(--green-border); } .palette-item.answered-marked-review::after { content: ''; position: absolute; bottom: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--purple-color-dark); } .palette-item.current { border-width: 2px; border-color: var(--primary-color); transform: scale(1.1); } #modal-palette-content { max-height: 60vh; overflow-y: auto; } /* --- Section Tab Styles --- */ #section-tabs-container { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem;} #section-tabs-container::-webkit-scrollbar { display: none; } #section-tabs { display: flex; } #section-tabs a { padding: 8px 16px; border-bottom: 3px solid transparent; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: all 0.2s; display: inline-block; margin-bottom: -1px; } #section-tabs a:hover { border-bottom-color: var(--border-color); color: var(--text-primary); } #section-tabs a.active-section { border-bottom-color: var(--primary-color); color: var(--primary-color); font-weight: 600; } .exam-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; /* Increased padding */ text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; background-color: var(--card-background); } .exam-card:hover { border-color: #9ca3af; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .exam-card.selected { border-color: var(--primary-color); background-color: var(--blue-light-bg); transform: scale(1.03); border-width: 2px; } .exam-card img { max-height: 404px; /* << INCREASED ICON HEIGHT */ margin: 0 auto 0.75rem auto; /* << INCREASED bottom margin */ display: block; opacity: 0.7; } .exam-card span { font-weight: 500; color: var(--text-primary); font-size: 0.875rem; /* << INCREASED FONT SIZE (14px) */ display: block; line-height: 1.3; }