.gc-quiz-wrapper { width: 100%; max-width: 100%; margin: 0; padding: 10px 0 30px; font-family: inherit; } .gc-quiz-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); padding: 28px; margin-bottom: 24px; transition: all 0.2s ease-in-out; } .gc-quiz-card-header { border-bottom: 1.5px solid #f1f5f9; padding-bottom: 16px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .gc-quiz-title { font-size: 1.45rem; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 10px; } .gc-quiz-title-badge { background: #e6f7ef; color: #0e8c60; font-size: 0.85rem; font-weight: 600; padding: 4px 14px; border-radius: 20px; border: 1px solid #bbf7d0; } .gc-quiz-form-group { margin-bottom: 22px; } .gc-quiz-label { font-size: 0.95rem; font-weight: 600; color: #334155; margin-bottom: 8px; display: block; } .gc-quiz-input { width: 100%; padding: 11px 16px; font-size: 1rem; color: #1e293b; background-color: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 8px; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; box-sizing: border-box; } .gc-quiz-input:focus { outline: none; border-color: #0e8c60; background-color: #ffffff; box-shadow: 0 0 0 3.5px rgba(14, 140, 96, 0.15); } .gc-quiz-input-number { max-width: 160px; } .gc-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } @media (max-width: 991px) { .gc-topic-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .gc-topic-grid { grid-template-columns: 1fr; } } .gc-topic-tile { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease; } .gc-topic-tile:hover { background: #f0fdf4; border-color: #86efac; } .gc-topic-tile.selected { background: #e6f7ef; border-color: #0e8c60; box-shadow: 0 2px 8px rgba(14, 140, 96, 0.08); } .gc-topic-checkbox { width: 20px; height: 20px; accent-color: #0e8c60; cursor: pointer; } .gc-topic-label { font-size: 0.95rem; font-weight: 500; color: #334155; cursor: pointer; flex: 1; } .gc-select-all-bar { background: #f1f5f9; border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .gc-quiz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; font-size: 1rem; font-weight: 600; color: #ffffff !important; background: linear-gradient(135deg, #0e8c60 0%, #0b734e 100%); border: none; border-radius: 9px; cursor: pointer; box-shadow: 0 4px 14px rgba(14, 140, 96, 0.28); transition: all 0.2s ease; text-decoration: none !important; } .gc-quiz-btn:hover { background: linear-gradient(135deg, #0b734e 0%, #08593c 100%); box-shadow: 0 6px 18px rgba(14, 140, 96, 0.38); transform: translateY(-1.5px); } .gc-quiz-btn:active { transform: translateY(0); } .gc-quiz-btn-secondary { background: #ffffff; color: #334155 !important; border: 1.5px solid #cbd5e1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } .gc-quiz-btn-secondary:hover { background: #f8fafc; color: #0f172a !important; border-color: #94a3b8; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .gc-quiz-btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); } .gc-quiz-btn-danger:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); } .gc-quiz-btn-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; } #gc-test-previous, #gc-test-next { min-width: 135px; text-align: center; box-sizing: border-box; } .gc-quiz-meta-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 22px; margin-bottom: 24px; } @media (max-width: 767px) { .gc-quiz-meta-bar { grid-template-columns: repeat(2, 1fr); padding: 14px; gap: 12px; } } .gc-quiz-meta-item { display: flex; flex-direction: column; } .gc-quiz-meta-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; font-weight: 600; } .gc-quiz-meta-val { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-top: 4px; } .gc-quiz-timer { color: #2563eb; font-family: 'Courier New', Courier, monospace; font-size: 1.3rem; letter-spacing: 1px; } .gc-quiz-palette { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .gc-quiz-num-btn { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: 1.5px solid #e2e8f0; background: #ffffff; color: #64748b; user-select: none; } .gc-quiz-num-btn:hover { border-color: #0e8c60; color: #0e8c60; transform: translateY(-1px); } .gc-quiz-num-btn.unviewed { background: #f8fafc; border-color: #cbd5e1; color: #64748b; } .gc-quiz-num-btn.viewed { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; } .gc-quiz-num-btn.answered { background: #f0fdf4; border-color: #86efac; color: #15803d; } .gc-quiz-num-btn.active { background: #0e8c60; border-color: #0e8c60; color: #ffffff; box-shadow: 0 0 0 3.5px rgba(14, 140, 96, 0.25); font-weight: 700; transform: scale(1.06); } .gc-question-box { background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 26px; margin-bottom: 24px; } .gc-question-header { font-size: 0.88rem; font-weight: 700; color: #0e8c60; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; } .gc-question-text { font-size: 1.35rem; font-weight: 600; color: #1e293b; line-height: 1.5; margin-bottom: 26px; } .gc-answer-row { display: flex; align-items: center; gap: 14px; max-width: 520px; margin-bottom: 28px; } .gc-answer-label { font-size: 1.05rem; font-weight: 600; color: #334155; white-space: nowrap; } .gc-quiz-options-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; } @media (max-width: 640px) { .gc-quiz-options-group { grid-template-columns: 1fr; } } .gc-quiz-option-tile { background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; transition: all 0.2s ease; } .gc-quiz-option-tile:hover { background: #f0fdf4; border-color: #86efac; } .gc-quiz-option-tile.selected { background: #e6f7ef; border-color: #0e8c60; box-shadow: 0 0 0 3px rgba(14, 140, 96, 0.15); } .gc-quiz-radio { width: 20px; height: 20px; accent-color: #0e8c60; cursor: pointer; } .gc-quiz-option-badge { background: #e2e8f0; color: #334155; font-weight: 700; font-size: 0.88rem; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; } .gc-quiz-option-tile.selected .gc-quiz-option-badge { background: #0e8c60; color: #ffffff; } .gc-quiz-option-text { font-size: 1.1rem; font-weight: 600; color: #1e293b; flex: 1; } .gc-result-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } @media (max-width: 767px) { .gc-result-stats-grid { grid-template-columns: repeat(2, 1fr); } } .gc-stat-card { background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; transition: transform 0.2s; } .gc-stat-card:hover { transform: translateY(-2px); } .gc-stat-card.score-card { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #86efac; } .gc-stat-val { font-size: 1.85rem; font-weight: 800; color: #0e8c60; } .gc-stat-lbl { font-size: 0.85rem; color: #64748b; font-weight: 600; margin-top: 4px; } .gc-result-item { background: #ffffff; border: 1px solid #e2e8f0; border-left: 5px solid #cbd5e1; border-radius: 10px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .gc-result-item.correct { border-left-color: #22c55e; background: #f0fdf4; } .gc-result-item.incorrect { border-left-color: #ef4444; background: #fef2f2; } .gc-result-options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; } @media (max-width: 640px) { .gc-result-options-grid { grid-template-columns: 1fr; } } .gc-result-option-card { background: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 9px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 0.98rem; transition: all 0.2s ease; } .gc-result-option-card.selected-correct { background: #f0fdf4; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); } .gc-result-option-card.selected-incorrect { background: #fef2f2; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .gc-result-option-card.correct-target { background: #f0fdf4; border-color: #86efac; } .gc-result-option-badge { font-weight: 700; font-size: 0.85rem; width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; color: #334155; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .selected-correct .gc-result-option-badge, .correct-target .gc-result-option-badge { background: #16a34a; color: #ffffff; } .selected-incorrect .gc-result-option-badge { background: #dc2626; color: #ffffff; } .gc-result-option-text { font-weight: 600; color: #1e293b; flex: 1; } .gc-result-tag { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; } .gc-result-tag.tag-correct { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } .gc-result-tag.tag-wrong { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } .gc-result-q-title { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 12px; } .gc-result-ans-details { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.95rem; } .gc-badge-correct { color: #16a34a; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .gc-badge-wrong { color: #dc2626; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .gc-solution-link { color: #2563eb; font-weight: 600; text-decoration: none; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 4px; } .gc-solution-link:hover { text-decoration: underline; color: #1d4ed8; } .gc-quiz-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 0.85rem; color: #64748b; } .gc-legend-item { display: flex; align-items: center; gap: 6px; } .gc-legend-dot { width: 12px; height: 12px; border-radius: 50%; } .gc-topic-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 991px) { .gc-topic-links-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .gc-topic-links-grid { grid-template-columns: 1fr; } } .gc-topic-quick-link { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 9px; color: #0e8c60; font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: all 0.18s ease; line-height: 1.3; } .gc-topic-quick-link:hover { background: #e6f7ef; border-color: #0e8c60; color: #0b734e; box-shadow: 0 3px 10px rgba(14, 140, 96, 0.12); transform: translateY(-1.5px); text-decoration: none; } .gc-topic-quick-icon { font-size: 0.72rem; color: #0e8c60; flex-shrink: 0; background: #dcfce7; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .gc-quiz-card { padding: 18px 16px; border-radius: 10px; margin-bottom: 16px; } .gc-quiz-card-header { padding-bottom: 12px; margin-bottom: 16px; gap: 8px; } .gc-quiz-title { font-size: 1.15rem; } .gc-question-box { padding: 16px; margin-bottom: 18px; border-radius: 10px; } .gc-question-header { font-size: 0.8rem; margin-bottom: 10px; } .gc-question-text { font-size: 1.1rem; margin-bottom: 18px; } .gc-quiz-options-group { gap: 10px; margin-bottom: 20px; } .gc-quiz-option-tile { padding: 10px 14px; gap: 10px; } .gc-quiz-option-badge { width: 26px; height: 26px; font-size: 0.8rem; } .gc-quiz-option-text { font-size: 0.98rem; } .gc-quiz-btn { padding: 10px 18px; font-size: 0.9rem; } .gc-quiz-meta-val { font-size: 0.95rem; } .gc-quiz-timer { font-size: 1.05rem; } .gc-quiz-num-btn { width: 36px; height: 36px; font-size: 0.85rem; border-radius: 8px; } .gc-stat-val { font-size: 1.4rem; } .gc-stat-lbl { font-size: 0.78rem; } .gc-result-q-title { font-size: 0.98rem; } .gc-result-option-card { padding: 10px 12px; font-size: 0.9rem; } .gc-topic-quick-link { padding: 11px 14px; font-size: 0.88rem; } #gc-test-previous, #gc-test-next { min-width: 110px; padding: 10px 12px; } }