* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f4f8; color: #333; min-height: 100vh; }
header { background: linear-gradient(135deg, #1a3a5c, #2d6a9f); color: white; padding: 20px 32px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
header h1 { font-size: 1.8rem; margin-bottom: 4px; }
header p { font-size: 0.9rem; opacity: 0.85; }

/* Mode bar */
.mode-bar { background: #1a3a5c; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 20px; flex-wrap: wrap; }
.mode-bar span { color: #aac4e0; font-size: 0.82rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-right: 4px; }
.toggle-group { display: flex; background: #0f2540; border-radius: 30px; padding: 3px; gap: 2px; }
.toggle-btn { padding: 6px 18px; border: none; border-radius: 30px; cursor: pointer; font-size: 0.82rem; font-weight: 600; background: transparent; color: #aac4e0; transition: all 0.2s; }
.toggle-btn.active { background: white; color: #1a3a5c; }
.toggle-btn.active.learning { background: #f39c12; color: white; }
.toggle-btn.active.quiz { background: #2d6a9f; color: white; }
.toggle-btn.active.rand-on { background: #8e44ad; color: white; }
.toggle-btn.active.rand-off { background: #555; color: white; }

/* Stopwatch */
.stopwatch-bar { background: #1a3a5c; color: white; text-align: center; padding: 7px; font-size: 1.3rem; font-weight: bold; letter-spacing: 3px; display: none; }
.stopwatch-bar.stopped { background: #c0392b; }

/* Controls */
.controls { display: flex; justify-content: center; gap: 10px; padding: 14px; flex-wrap: wrap; background: white; border-bottom: 1px solid #ddd; }
.controls button { padding: 9px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: all 0.2s; }
#startBtn { background: #2d6a9f; color: white; }
#startBtn:hover { background: #1a3a5c; }
#submitBtn { background: #27ae60; color: white; display: none; }
#submitBtn:hover { background: #1e8449; }
#resetBtn { background: #e74c3c; color: white; display: none; }
#resetBtn:hover { background: #c0392b; }

.filter-controls { display: flex; justify-content: center; gap: 10px; padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #ddd; flex-wrap: wrap; align-items: center; }
.filter-controls label { font-size: 0.9rem; color: #555; }
.filter-controls select { padding: 6px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.9rem; }
#questionCount { font-size: 0.85rem; color: #666; padding: 6px 14px; background: #eaf2fb; border-radius: 20px; }

/* Progress bar */
.top-progress { position: sticky; top: 0; background: white; z-index: 100; padding: 8px 20px; border-bottom: 1px solid #eee; display: none; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.top-progress span { font-size: 0.82rem; color: #555; white-space: nowrap; }
.progress-bar-container { background: #ecf0f1; border-radius: 10px; height: 10px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #27ae60, #2ecc71); border-radius: 10px; transition: width 0.4s; }

#loadingMsg { text-align: center; padding: 40px; color: #555; }
#errorMsg { display: none; text-align: center; padding: 40px; color: #e74c3c; }

/* Welcome */
.welcome { max-width: 700px; margin: 36px auto; background: white; border-radius: 12px; padding: 32px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.welcome h2 { color: #1a3a5c; margin-bottom: 14px; font-size: 1.4rem; }
.welcome p { color: #555; line-height: 1.7; margin-bottom: 10px; }
.welcome .badge { display: inline-block; background: #eaf2fb; color: #2d6a9f; padding: 5px 14px; border-radius: 20px; font-weight: 600; margin: 6px 3px; font-size: 0.88rem; }
.mode-hint { margin-top: 16px; padding: 12px 18px; border-radius: 8px; font-size: 0.88rem; line-height: 1.6; }
.mode-hint.learning { background: #fef9e7; border-left: 4px solid #f39c12; color: #7d6608; }
.mode-hint.quiz { background: #eaf2fb; border-left: 4px solid #2d6a9f; color: #1a3a5c; }

/* Quiz */
.quiz-container { max-width: 860px; margin: 20px auto; padding: 0 16px 100px; display: none; }
.question-card { background: white; border-radius: 12px; padding: 22px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); border-left: 5px solid #2d6a9f; transition: border-color 0.3s; }
.question-card.correct-card { border-left-color: #27ae60; }
.question-card.wrong-card { border-left-color: #e74c3c; }
.question-card.unanswered-card { border-left-color: #f39c12; }
.question-card.learning-card { border-left-color: #f39c12; }
.question-num { background: #2d6a9f; color: white; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; display: inline-block; margin-bottom: 10px; }
.question-num.learning-badge { background: #f39c12; }
.question-text { font-size: 0.97rem; line-height: 1.65; margin-bottom: 14px; color: #2c3e50; white-space: pre-line; }
.question-image { max-width: 100%; height: auto; margin: 12px 0; border-radius: 8px; border: 1px solid #ddd; display: block; cursor: pointer; }
.question-image:hover { opacity: 0.9; }

/* Lightbox */
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 28px; color: white; font-size: 2rem; cursor: pointer; font-weight: bold; }

/* Options */
.options { list-style: none; }
.options li { margin-bottom: 8px; }
.options label { display: flex; align-items: flex-start; gap: 10px; padding: 9px 13px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 0.93rem; line-height: 1.5; }
.options label:hover:not(.locked) { border-color: #2d6a9f; background: #eaf2fb; }
.options input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.options label.correct-answer { border-color: #27ae60 !important; background: #d5f5e3 !important; font-weight: 600; }
.options label.wrong-answer { border-color: #e74c3c !important; background: #fadbd8 !important; }
.options label.locked { cursor: default; }

/* Result badge */
.result-badge { display: none; margin-top: 10px; padding: 8px 13px; border-radius: 6px; font-size: 0.88rem; font-weight: 600; }
.result-badge.correct { background: #d5f5e3; color: #1e8449; display: block; }
.result-badge.wrong { background: #fadbd8; color: #c0392b; display: block; }
.result-badge.unanswered { background: #fef9e7; color: #d68910; display: block; }
.result-badge.learning-reveal { background: #fef9e7; color: #7d6608; display: block; }

/* Community section */
.community-section { margin-top: 14px; border-radius: 8px; overflow: hidden; border: 1px solid #d4e6f1; }
.community-header { background: #2d6a9f; color: white; padding: 8px 14px; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.community-header:hover { background: #1a3a5c; }
.community-body { background: #eaf2fb; padding: 12px 14px; font-size: 0.88rem; line-height: 1.65; color: #1a3a5c; display: none; }
.community-body.open { display: block; }
.community-toggle-icon { margin-left: auto; transition: transform 0.2s; }
.community-toggle-icon.open { transform: rotate(180deg); }

/* Reveal Answer button */
.reveal-btn { margin-top: 10px; padding: 7px 16px; background: #8e44ad; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: background 0.2s; }
.reveal-btn:hover { background: #6c3483; }
.reveal-btn:disabled { background: #bbb; cursor: default; }

/* Scoreboard */
.scoreboard { display: none; background: white; margin: 20px auto; max-width: 860px; border-radius: 12px; padding: 28px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.scoreboard h2 { font-size: 1.4rem; margin-bottom: 10px; color: #1a3a5c; text-align: center; }
.score-display { font-size: 3rem; font-weight: bold; margin: 10px 0; text-align: center; }
.score-stats { display: flex; justify-content: center; gap: 24px; margin: 14px 0; flex-wrap: wrap; }
.stat-box { text-align: center; padding: 12px 20px; border-radius: 8px; min-width: 100px; }
.stat-box.correct { background: #d5f5e3; }
.stat-box.wrong { background: #fadbd8; }
.stat-box.unanswered { background: #fef9e7; }
.stat-box .num { font-size: 2rem; font-weight: bold; }
.stat-box .label { font-size: 0.78rem; color: #666; }
#scoreMessage, #timeTaken { color: #555; margin-top: 6px; text-align: center; }

/* Wrong review */
.wrong-review { margin-top: 24px; }
.wrong-review h3 { font-size: 1.1rem; color: #c0392b; margin-bottom: 14px; border-bottom: 2px solid #fadbd8; padding-bottom: 8px; }
.wrong-item { background: #fff8f8; border: 1px solid #f5c6cb; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.wrong-item .wi-qnum { font-size: 0.78rem; font-weight: 700; color: #c0392b; margin-bottom: 6px; }
.wrong-item .wi-question { font-size: 0.93rem; color: #2c3e50; margin-bottom: 10px; line-height: 1.5; white-space: pre-line; }
.wi-answers { display: flex; flex-direction: column; gap: 6px; }
.wi-answer { padding: 7px 12px; border-radius: 6px; font-size: 0.88rem; }
.wi-answer.your { background: #fadbd8; color: #c0392b; }
.wi-answer.correct { background: #d5f5e3; color: #1e8449; font-weight: 600; }
.wi-answer.not-answered { background: #fef9e7; color: #d68910; }
.wi-image { max-width: 200px; margin: 8px 0; border-radius: 6px; border: 1px solid #ddd; }

/* Floating buttons */
.float-btns { position: fixed; right: 20px; bottom: 30px; display: flex; flex-direction: column; gap: 10px; z-index: 999; }
.float-btn { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,0.25); transition: transform 0.2s; color: white; position: relative; }
.float-btn:hover { transform: scale(1.12); }
.float-btn.top { background: #2d6a9f; }
.float-btn.bottom { background: #2d6a9f; }
.float-btn.unanswered { background: #f39c12; }
.float-btn[title]:hover::after { content: attr(title); position: absolute; right: 54px; background: rgba(0,0,0,0.75); color: white; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; white-space: nowrap; }