/* LicensePrep.ai Quiz System Styles */ :root { color-scheme: light; --primary: #3b82f6; --primary-dark: #2563eb; --secondary: #64748b; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --danger-hover: #dc2626; --bg-light: #f8fafc; --bg-dark: #1e293b; --card-bg: #fff; --text-primary: #1e293b; --text-muted: #64748b; --text-soft: #475569; --text-softer: #334155; --border: #e2e8f0; --border-strong: #cbd5e1; --shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); /* Surfaces & controls */ --bg-subtle: #f8fafc; /* raised option/panel surfaces on cards */ --bg-hover: #f1f5f9; /* hover states, timer chip, filter pills */ --btn2-bg: #e2e8f0; /* secondary buttons */ --btn2-bg-hover: #cbd5e1; --disabled: #94a3b8; /* Primary-tinted selection */ --sel-bg: #eff6ff; --sel-border: #bfdbfe; /* Success tints */ --ok-bg: #dcfce7; --ok-bg-strong: #bbf7d0; --ok-soft-bg: #f0fdf4; --ok-text: #166534; --ok-text-deep: #14532d; --ok-strong: var(--ok-strong); --ok-border-soft: #4ade80; /* Warning tints */ --warn-bg: #fef3c7; --warn-soft-bg: #fffbeb; --warn-text: #92400e; --warn-text-deep: #78350f; --warn-link: #b45309; --star-idle: #e2e8f0; --star-hover: #fbbf24; /* Danger tints */ --bad-bg: #fee2e2; --bad-bg-strong: #fecaca; --bad-soft-bg: #fef2f2; --bad-text: #dc2626; --bad-text-deep: #7f1d1d; --bad-border-soft: #f87171; /* Informational panels */ --info-bg: #dbeafe; /* bookmarked submit-warning */ --info-text: #1e40af; --note-bg: #f0f9ff; /* explanations + case panels */ --note-border: #bae6fd; --note-accent: #0369a1; /* Citation chip */ --cite-bg: #fff7ed; --cite-border: #fed7aa; --cite-accent: #f97316; --cite-text: #9a3412; /* Memory-exam banner */ --memo-bg: #fefce8; --memo-border: #fde047; --memo-text: #713f12; /* Jump-link chips inside tinted warning boxes */ --jump-bg: rgba(255,255,255,0.7); --jump-bg-hover: rgba(255,255,255,1); } /* Dark theme — activated by data-theme="dark" on (set by an inline head script from localStorage 'quiz_theme', falling back to the system preference). Diagram images keep their baked-in white; see .img-lightbox. */ [data-theme="dark"] { color-scheme: dark; --danger-hover: #b91c1c; --bg-light: #0f172a; --card-bg: #1e293b; --text-primary: #f1f5f9; --text-muted: #94a3b8; --text-soft: #b6c2d4; --text-softer: #cbd5e1; --border: #334155; --border-strong: #475569; --shadow: 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5); --bg-subtle: #263346; --bg-hover: #30405a; --btn2-bg: #334155; --btn2-bg-hover: #475569; --disabled: #475569; --sel-bg: rgba(59,130,246,0.20); --sel-border: rgba(96,165,250,0.5); --ok-bg: rgba(34,197,94,0.18); --ok-bg-strong: rgba(34,197,94,0.34); --ok-soft-bg: rgba(34,197,94,0.10); --ok-text: #4ade80; --ok-text-deep: #86efac; --ok-strong: #22c55e; --warn-bg: rgba(245,158,11,0.16); --warn-soft-bg: rgba(245,158,11,0.10); --warn-text: #fbbf24; --warn-text-deep: #fcd34d; --warn-link: #fbbf24; --star-idle: #475569; --bad-bg: rgba(239,68,68,0.16); --bad-bg-strong: rgba(239,68,68,0.32); --bad-soft-bg: rgba(239,68,68,0.10); --bad-text: #f87171; --bad-text-deep: #fca5a5; --info-bg: rgba(59,130,246,0.18); --info-text: #93c5fd; --note-bg: rgba(14,165,233,0.10); --note-border: rgba(56,189,248,0.35); --note-accent: #38bdf8; --cite-bg: rgba(249,115,22,0.12); --cite-border: rgba(249,115,22,0.35); --cite-accent: #fb923c; --cite-text: #fdba74; --memo-bg: rgba(250,204,21,0.10); --memo-border: rgba(250,204,21,0.4); --memo-text: #fde047; --jump-bg: rgba(255,255,255,0.10); --jump-bg-hover: rgba(255,255,255,0.20); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--bg-light); color: var(--text-primary); line-height: 1.6; } /* Quiz Container */ .quiz-container { max-width: 1200px; margin: 0 auto; padding: 20px; min-height: 100vh; display: flex; flex-direction: column; } /* Wrapper around header + palette. On mobile/tablet it's display:contents (layout-inert — children behave exactly as unwrapped); on desktop it becomes one sticky flex row so the chrome costs a single bar of height. */ .quiz-topbar { display: contents; } /* Quiz Header — sticky so the timer/counter stay visible on long questions */ .quiz-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 20px; flex-wrap: wrap; gap: 15px; position: sticky; top: 0; z-index: 100; } .quiz-info { display: flex; align-items: center; gap: 20px; } .exam-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); } .question-counter { font-size: 0.95rem; color: var(--text-muted); } .timer { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); padding: 8px 16px; background: var(--bg-hover); border-radius: 8px; } .timer.warning { background: var(--warn-bg); color: var(--warn-text); } .timer.danger { background: var(--bad-bg); color: var(--bad-text); animation: pulse 1s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .timer-icon { font-size: 1.1rem; } .header-actions { display: flex; gap: 10px; } /* Horizontal Navigation Bar */ .nav-bar { display: flex; align-items: center; gap: 15px; padding: 6px 16px; background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 15px; } .nav-bar-left { flex-shrink: 0; } .nav-bar-left .nav-stats { display: flex; flex-direction: column; gap: 2px; } .nav-bar-left .nav-stats .stat { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } .nav-grid-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .nav-grid-wrapper::-webkit-scrollbar { height: 6px; } .nav-grid-wrapper::-webkit-scrollbar-track { background: transparent; } .nav-grid-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .nav-grid-wrapper::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } .nav-bar-right { flex-shrink: 0; } .submit-btn-small { padding: 10px 20px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .submit-btn-small:hover { background: var(--primary-dark); } .unanswered-warning { padding: 10px 15px; background: var(--warn-bg); border-radius: 8px; font-size: 0.85rem; color: var(--warn-text); text-align: center; margin-bottom: 15px; } /* Quiz Body - Single Column */ .quiz-body { display: block; flex: 1; } /* Question Panel */ .question-panel { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); padding: 30px; display: flex; flex-direction: column; } .question-markers { display: flex; gap: 10px; margin-bottom: 20px; } .marker-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); cursor: pointer; font-size: 0.9rem; color: var(--text-muted); transition: all 0.2s; } .marker-btn:hover { background: var(--bg-subtle); } .marker-btn.active { background: var(--primary); color: white; border-color: var(--primary); } .marker-btn.bookmarked { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warning); } .marker-btn.flagged { background: var(--bad-bg); color: var(--bad-text); border-color: var(--danger); } .marker-btn.report-btn { margin-left: auto; color: var(--warn-text); } .marker-btn.report-btn:hover { background: var(--warn-bg); border-color: var(--warning); } /* Report Reasons */ .report-reasons { display: flex; flex-direction: column; gap: 8px; } .report-reason-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.9rem; transition: all 0.15s; } .report-reason-option:hover { background: var(--bg-subtle); border-color: var(--border-strong); } .report-reason-option input[type="radio"] { accent-color: var(--warning); width: 16px; height: 16px; } .report-reason-option input[type="radio"]:checked + span { font-weight: 500; color: var(--warn-text); } /* Report link on results page */ .report-link { color: var(--warn-link); font-size: 0.8rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; transition: color 0.15s; } .report-link:hover { color: var(--warn-text); text-decoration: underline; } .question-text { font-size: 1.1rem; line-height: 1.7; margin-bottom: 25px; color: var(--text-primary); } .question-image { margin: 15px 0; text-align: center; } .question-image img { max-width: 100%; max-height: 400px; border-radius: 8px; box-shadow: var(--shadow); cursor: zoom-in; } .question-image figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--text-muted); } /* Full-screen image lightbox (tap to open, tap anywhere to close). The question text rides along in a card at the bottom so you can read what's being asked while studying the diagram. */ .img-lightbox { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.92); z-index: 1100; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; cursor: zoom-out; } .img-lightbox.open { display: flex; } .img-lightbox img { max-width: 100%; flex: 0 1 auto; min-height: 0; object-fit: contain; border-radius: 8px; background: #fff; /* stays white in dark mode — diagrams have baked-in white backgrounds */ } .img-lightbox-question { flex-shrink: 0; max-width: 760px; background: var(--card-bg); color: var(--text-primary); border-radius: 10px; padding: 12px 18px; font-size: 1rem; line-height: 1.55; box-shadow: var(--shadow-lg); cursor: auto; } /* Answer Options */ .answer-options { display: flex; flex-direction: column; gap: 12px; flex: 1; } .answer-option { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; background: var(--bg-subtle); border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.2s; } .answer-option:hover { background: var(--bg-hover); border-color: var(--border-strong); } .answer-option.selected { background: var(--sel-bg); border-color: var(--primary); } .answer-option .letter { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--card-bg); border: 2px solid var(--border); border-radius: 50%; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); flex-shrink: 0; } .answer-option.selected .letter { background: var(--primary); border-color: var(--primary); color: white; } .answer-option .text { flex: 1; padding-top: 4px; font-size: 0.95rem; } /* True/False Options */ .tf-options { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .tf-option { display: flex; align-items: center; justify-content: center; padding: 25px; background: var(--bg-subtle); border: 2px solid transparent; border-radius: 10px; cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: all 0.2s; } .tf-option:hover { background: var(--bg-hover); } .tf-option.selected { background: var(--sel-bg); border-color: var(--primary); color: var(--primary); } .tf-option.true.selected { background: var(--ok-bg); border-color: var(--success); color: var(--ok-text); } .tf-option.false.selected { background: var(--bad-bg); border-color: var(--danger); color: var(--bad-text); } /* Question Navigation */ /* Sticky action bar: Previous/Next stay reachable while long questions (diagrams, case panels) scroll underneath. Negative margins bleed it across the panel's padding so scrolling content never peeks beside it. */ .question-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); position: sticky; bottom: 0; z-index: 50; background: var(--card-bg); margin: 25px -30px -30px; padding: 15px 30px; border-radius: 0 0 12px 12px; } .nav-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.95rem; color: var(--text-primary); transition: all 0.2s; } .nav-btn:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--primary); color: var(--primary); } .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; } .nav-btn.primary { background: var(--primary); color: white; border-color: var(--primary); } .nav-btn.primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); color: white; } .nav-btn.submit-mode { background: var(--success); color: white; border-color: var(--success); } .nav-btn.submit-mode:hover { background: var(--ok-strong); border-color: var(--ok-strong); } /* Legacy nav-panel styles (kept for backwards compatibility) */ .nav-panel { display: none; } .nav-panel-header { display: none; } .nav-grid { display: flex; gap: 6px; padding: 4px 0; } .nav-cell { display: flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; background: var(--bg-subtle); border: 2px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; flex-shrink: 0; } .nav-cell:hover { border-color: var(--primary); color: var(--primary); } .nav-cell.answered { background: var(--ok-bg); border-color: var(--success); color: var(--ok-text); } .nav-cell.bookmarked { position: relative; } .nav-cell.bookmarked::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: var(--warning); border-radius: 50%; } .nav-cell.flagged { background: var(--warn-bg); border-color: var(--warning); } /* Current must win over answered/flagged so "you are here" survives a revisit of an already-answered question — keep this rule below those states. */ .nav-cell.current { border-color: var(--primary); background: var(--primary); color: white; } /* Legend - hidden in horizontal layout, colors still used */ .nav-legend { display: none; } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-dot { width: 12px; height: 12px; border-radius: 3px; } .legend-dot.answered { background: var(--ok-bg); border: 1px solid var(--success); } .legend-dot.bookmarked { background: var(--warning); border-radius: 50%; } .legend-dot.flagged { background: var(--warn-bg); border: 1px solid var(--warning); } .legend-dot.current { background: var(--primary); } /* Submit Section (legacy - now using submit-btn-small in nav-bar) */ .submit-section { display: none; } .submit-btn { width: 100%; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .submit-btn:hover { background: var(--primary-dark); } .submit-btn:disabled { background: var(--disabled); cursor: not-allowed; } /* Buttons */ .btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--btn2-bg); color: var(--text-primary); } .btn-secondary:hover { background: var(--btn2-bg-hover); } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: var(--danger-hover); } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; } .modal-overlay.active { display: flex; } .modal { background: var(--card-bg); border-radius: 12px; width: 90%; max-width: 450px; box-shadow: var(--shadow-lg); overflow: hidden; } .modal-header { padding: 20px; border-bottom: 1px solid var(--border); } .modal-header h3 { font-size: 1.2rem; } .modal-body { padding: 20px; } .modal-body p { margin-bottom: 15px; color: var(--text-muted); } /* Submit warning items with jump links */ .submit-warning-item { padding: 12px 15px; border-radius: 8px; margin-bottom: 12px; font-size: 0.9rem; line-height: 1.5; } .submit-warning-item.unanswered { background: var(--warn-bg); color: var(--warn-text); } .submit-warning-item.bookmarked { background: var(--info-bg); color: var(--info-text); } .submit-warning-item strong { font-weight: 600; } .jump-links { display: block; margin-top: 6px; font-size: 0.85rem; } .jump-link { display: inline-block; padding: 2px 8px; margin: 2px; background: var(--jump-bg); border-radius: 4px; color: inherit; text-decoration: none; font-weight: 500; transition: all 0.15s; } .jump-link:hover { background: var(--jump-bg-hover); text-decoration: none; } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 15px 20px; background: var(--bg-subtle); } /* Loading State */ .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 20px; } .spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-size: 1rem; color: var(--text-muted); } /* Error State */ .error-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 15px; text-align: center; } .error-icon { font-size: 3rem; color: var(--danger); } .error-message { font-size: 1.1rem; color: var(--text-primary); } .error-details { font-size: 0.9rem; color: var(--text-muted); } /* Responsive */ @media (max-width: 900px) { .nav-bar { padding: 10px 15px; } .nav-bar-left { display: none; } } @media (max-width: 600px) { .quiz-container { padding: 10px; } /* One slim row: truncated title · "1 of 6" · timer · Pause. Must stay position:sticky (from base rule) — never relative. */ .quiz-header { flex-wrap: nowrap; align-items: center; padding: 8px 12px; gap: 8px; border-radius: 0 0 12px 12px; margin: -10px -10px 12px; /* bleed over container padding so it's flush at the top */ } .quiz-info { flex-direction: row; align-items: center; gap: 8px; flex: 1; min-width: 0; } .exam-title { font-size: 0.85rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .question-counter { font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; } .qc-label { display: none; /* "1 of 6" instead of "Question 1 of 6" */ } .timer { font-size: 0.95rem; padding: 5px 10px; flex-shrink: 0; } .timer-icon { font-size: 0.9rem; } .header-actions { flex-shrink: 0; } .header-actions .btn { padding: 6px 12px; font-size: 0.85rem; } .nav-bar { padding: 8px 12px; gap: 10px; } .nav-cell { min-width: 30px; height: 30px; font-size: 0.7rem; border-radius: 4px; } .submit-btn-small { padding: 8px 14px; font-size: 0.8rem; } .question-panel { padding: 20px 15px; overflow: visible; } .question-text { font-size: 1rem; } /* Tighter diagram cap on phones — tap to expand via the lightbox */ .question-image img { max-height: 260px; } .tf-options { grid-template-columns: 1fr; } .question-nav { flex-direction: row; gap: 10px; margin: 20px -15px -20px; /* match the panel's 20px 15px mobile padding */ padding: 10px 15px; } .nav-btn { flex: 1; justify-content: center; padding: 14px 16px; } .answer-option { padding: 12px 15px; } .answer-option .letter { width: 28px; height: 28px; font-size: 0.85rem; } } /* Wide screens: image questions go two-column — diagram left, question and answers right — so the whole question fits without scrolling. The class is set by displayQuestionImages() only when the question has images. */ @media (min-width: 1000px) { .question-panel.has-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "markers markers" "image text" "image answers" "nav nav"; grid-template-rows: auto auto 1fr auto; column-gap: 30px; } .question-panel.has-image .question-markers { grid-area: markers; } .question-panel.has-image #question-images { grid-area: image; align-self: start; position: sticky; top: 90px; /* below the sticky top bar */ } .question-panel.has-image .question-image { margin-top: 0; } .question-panel.has-image .question-image img { max-height: min(480px, 60vh); width: 100%; object-fit: contain; } .question-panel.has-image .question-text { grid-area: text; } .question-panel.has-image .answer-options { grid-area: answers; align-self: start; } .question-panel.has-image .tf-options { grid-area: answers; align-self: start; } .question-panel.has-image .question-nav { grid-area: nav; } } /* ========================================= RESULTS PAGE STYLES ========================================= */ .results-container { max-width: 900px; margin: 0 auto; padding: 30px 20px; } /* Score Card */ .score-card { background: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 40px; text-align: center; margin-bottom: 30px; } .score-card.passed { border-top: 4px solid var(--success); } .score-card.failed { border-top: 4px solid var(--danger); } .score-circle { width: 180px; height: 180px; border-radius: 50%; margin: 0 auto 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--border) 100%); position: relative; } .score-card.passed .score-circle { background: linear-gradient(135deg, var(--ok-bg) 0%, var(--ok-bg-strong) 100%); } .score-card.failed .score-circle { background: linear-gradient(135deg, var(--bad-bg) 0%, var(--bad-bg-strong) 100%); } .score-percentage { font-size: 3.5rem; font-weight: 700; line-height: 1; } .score-card.passed .score-percentage { color: var(--ok-text); } .score-card.failed .score-percentage { color: var(--bad-text); } .score-label { font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; } .result-badge { display: inline-block; padding: 8px 24px; border-radius: 30px; font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; } .result-badge.passed { background: var(--ok-bg); color: var(--ok-text); } .result-badge.failed { background: var(--bad-bg); color: var(--bad-text); } /* Encouragement Messages */ .encouragement-message { font-size: 0.95rem; line-height: 1.6; max-width: 600px; margin: 0 auto 20px; padding: 16px 20px; border-radius: 12px; font-style: italic; } .encouragement-message.tier-excellent { background: var(--ok-soft-bg); color: var(--ok-text-deep); border-left: 4px solid var(--success); } .encouragement-message.tier-good { background: var(--ok-soft-bg); color: var(--ok-text); border-left: 4px solid var(--ok-border-soft); } .encouragement-message.tier-close { background: var(--warn-soft-bg); color: var(--warn-text-deep); border-left: 4px solid var(--warning); } .encouragement-message.tier-keep-going { background: var(--bad-soft-bg); color: var(--bad-text-deep); border-left: 4px solid var(--bad-border-soft); } .score-details { display: flex; justify-content: center; gap: 40px; margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--border); } .score-detail { text-align: center; } .score-detail .value { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); } .score-detail .label { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; } /* Topic Breakdown */ .topic-breakdown { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); padding: 25px; margin-bottom: 30px; } .topic-breakdown h3 { font-size: 1.1rem; margin-bottom: 20px; } .topic-list { display: flex; flex-direction: column; gap: 15px; } .topic-row { display: flex; align-items: center; gap: 15px; } .topic-name { flex: 1; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topic-bar { width: 200px; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; } .topic-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease-out; } .topic-bar-fill.high { background: var(--success); } .topic-bar-fill.medium { background: var(--warning); } .topic-bar-fill.low { background: var(--danger); } .topic-score { font-size: 0.9rem; font-weight: 600; width: 45px; text-align: right; } /* Question Review */ .question-review { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .review-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .review-header h3 { font-size: 1.1rem; } .review-filters { display: flex; gap: 8px; } .filter-btn { padding: 8px 16px; background: var(--bg-hover); border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); transition: all 0.2s; } .filter-btn:hover { background: var(--btn2-bg); } .filter-btn.active { background: var(--primary); color: white; } .review-list { max-height: 600px; overflow-y: auto; } .review-item { padding: 25px; border-bottom: 1px solid var(--border); } .review-item:last-child { border-bottom: none; } .review-question-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .review-question-number { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bookmark-badge { display: inline-block; padding: 2px 8px; background: var(--warn-bg); color: var(--warn-text); border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .review-status { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; } .review-status.correct { color: var(--ok-text); } .review-status.incorrect { color: var(--bad-text); } .review-question-text { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; } .review-answers { display: flex; flex-direction: column; gap: 10px; } .review-answer { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; background: var(--bg-subtle); border-radius: 8px; font-size: 0.9rem; } .review-answer.correct-answer { background: var(--ok-bg); border: 1px solid var(--success); } .review-answer.user-wrong { background: var(--bad-bg); border: 1px solid var(--danger); } .review-answer .letter { font-weight: 600; color: var(--text-muted); min-width: 20px; } .review-answer.correct-answer .letter { color: var(--ok-text); } .review-answer.user-wrong .letter { color: var(--bad-text); } .review-explanation { margin-top: 15px; padding: 15px; background: var(--note-bg); border-radius: 8px; border-left: 3px solid var(--primary); } .review-explanation-label { font-size: 0.8rem; font-weight: 600; color: var(--primary); margin-bottom: 6px; } .review-explanation-text { font-size: 0.9rem; color: var(--text-primary); line-height: 1.6; } .review-citation { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; background: var(--cite-bg); border: 1px solid var(--cite-border); border-left: 4px solid var(--cite-accent); border-radius: 8px; font-size: 1rem; line-height: 1.4; color: var(--cite-text); } .review-citation.correct { background: var(--ok-soft-bg); border-color: var(--ok-bg-strong); border-left-color: var(--ok-strong); color: var(--ok-text); } .review-citation-icon { flex-shrink: 0; font-size: 1.25rem; line-height: 1; } .review-citation-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; margin-right: 4px; } .review-citation-value { font-weight: 700; } /* Actions */ .results-actions { display: flex; gap: 15px; justify-content: center; margin-top: 30px; } .results-actions .btn { padding: 14px 28px; font-size: 1rem; } /* Review Prompt */ .review-prompt { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); padding: 30px; margin-bottom: 30px; text-align: center; } .review-prompt-header h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--text-primary); } .review-prompt-header p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 25px; } .star-rating-large { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; } .star-lg { font-size: 2.5rem; color: var(--star-idle); cursor: pointer; transition: all 0.15s; } .star-lg:hover, .star-lg.hover { color: var(--star-hover); transform: scale(1.1); } .star-lg.selected { color: var(--warning); } .review-expanded-form { max-width: 500px; margin: 0 auto; text-align: left; } .review-expanded-form .form-row { display: flex; gap: 15px; margin-bottom: 15px; } .review-expanded-form .form-group { flex: 1; margin-bottom: 15px; } .review-expanded-form label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 500; color: var(--text-primary); } .review-expanded-form input, .review-expanded-form textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: var(--card-bg); color: var(--text-primary); transition: border-color 0.2s; } .review-expanded-form input:focus, .review-expanded-form textarea:focus { outline: none; border-color: var(--primary); } .review-expanded-form small { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-muted); } .review-expanded-form .btn { width: 100%; padding: 14px; font-size: 1rem; } .review-success { padding: 30px; text-align: center; } .review-success .success-icon { width: 60px; height: 60px; background: var(--ok-bg); color: var(--ok-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 15px; } .review-success .success-message { font-size: 1.1rem; color: var(--text-primary); } @media (max-width: 500px) { .review-expanded-form .form-row { flex-direction: column; gap: 0; } .star-lg { font-size: 2rem; } } /* Responsive Results */ @media (max-width: 600px) { .score-details { flex-direction: column; gap: 20px; } .topic-row { flex-wrap: wrap; } .topic-bar { width: 100%; order: 3; } .review-filters { width: 100%; overflow-x: auto; } } /* ── Memory-Exam Stimulus (timed study image → hidden → answer from memory) ── */ .stimulus-card { text-align: center; padding: 36px 24px; border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--bg-subtle); margin-bottom: 20px; } .stimulus-card-icon { font-size: 2.4rem; margin-bottom: 8px; } .stimulus-card h3 { margin: 0 0 10px; font-size: 1.25rem; color: var(--text-primary); } .stimulus-instructions { color: var(--text-softer); font-size: 1rem; margin: 0 0 12px; white-space: pre-line; } .stimulus-meta { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; max-width: 520px; margin: 0 auto 20px; } .stimulus-begin-btn { font-size: 1rem; padding: 12px 28px; } .stimulus-viewer-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--sel-bg); border: 1px solid var(--sel-border); margin-bottom: 14px; } .stimulus-countdown { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; color: var(--primary-dark); min-width: 64px; } .stimulus-countdown.danger { color: var(--bad-text); } .stimulus-viewer-hint { flex: 1; color: var(--text-soft); font-size: 0.85rem; min-width: 180px; } .stimulus-figure { margin: 0 0 16px; text-align: center; } .stimulus-figure img { max-width: 100%; max-height: 70vh; border-radius: 10px; border: 1px solid var(--border); } .stimulus-memory-banner { padding: 10px 14px; border-radius: 8px; background: var(--memo-bg); border: 1px solid var(--memo-border); color: var(--memo-text); font-size: 0.9rem; margin-bottom: 16px; } /* ── Case-Study Group (always-visible scenario panel) ── */ .case-panel { background: var(--note-bg); border: 1px solid var(--note-border); border-left: 4px solid var(--note-accent); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; } .case-panel-header { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--note-accent); margin-bottom: 8px; } .case-panel-instructions { font-size: 0.9rem; color: var(--text-soft); margin: 0 0 8px; white-space: pre-line; } .case-panel-body { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.55; color: var(--text-primary); margin-bottom: 8px; } .case-panel-figure { margin: 8px 0; } .case-panel-figure img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border-strong); } .case-panel-progress { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }