.quiz-batch-card { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 10px; transition: var(--transition); }
  .quiz-batch-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(23,165,137,.12); }
  .quiz-batch-card .q-title { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); }
  .quiz-batch-card .q-meta { font-size: .82rem; color: var(--text-muted); }
  .quiz-batch-card .q-best { font-size: .88rem; }
  .quiz-question-box { max-width: 760px; margin: 0 auto; }
  .quiz-progress { height: 6px; background: #E8ECEF; border-radius: 3px; margin-bottom: 24px; overflow: hidden; }
  .quiz-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
  .quiz-q-text { font-size: 1.15rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 20px; line-height: 1.7; }
  .quiz-opt { display: block; width: 100%; text-align: left; padding: 14px 18px; margin-bottom: 12px; border: 1.5px solid var(--border-light); border-radius: 10px; background: #fff; cursor: pointer; font-size: .98rem; font-family: inherit; color: var(--text-dark); transition: var(--transition); line-height: 1.6; }
  .quiz-opt:hover:not(:disabled) { border-color: var(--accent); background: #F0FCF8; }
  .quiz-opt.correct { border-color: #17A589; background: #E8F8F5; font-weight: 600; }
  .quiz-opt.wrong { border-color: #E74C3C; background: #FDEDEC; }
  .quiz-opt:disabled { cursor: default; opacity: .92; }
  .quiz-feedback { margin: 16px 0; padding: 14px 18px; border-radius: 10px; font-size: .92rem; line-height: 1.7; }
  .quiz-feedback.ok { background: #E8F8F5; color: #0E7C63; border: 1px solid #A3E4D7; }
  .quiz-feedback.no { background: #FDEDEC; color: #943126; border: 1px solid #F5B7B1; }
  .quiz-feedback .exp { color: var(--text-muted); margin-top: 6px; font-size: .86rem; }
  .quiz-result-box { max-width: 640px; margin: 0 auto; text-align: center; }
  .quiz-score { font-size: 3rem; font-weight: 800; color: var(--accent); }
  .quiz-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.quiz-page { --text-muted:#69775f; --text-dark:#324f36; --border-light:#dfe6d5; }
.quiz-page .quiz-hero { background:#f1f4e9; color:#2d4d37; padding:24px 0 34px; border-bottom:1px solid #dde5d3; }
.quiz-hero .breadcrumb { color:#6b785f; margin-bottom:30px; font-size:13px; }
.quiz-page .quiz-hero h1 { font-size:40px; margin:0 0 12px; line-height:1.5; }
.quiz-hero .home-eyebrow { margin-bottom:12px; color:#9d744a; }
.quiz-page .quiz-hero p:last-child { font-size:15px; color:#637357; max-width:650px; line-height:1.9; }
.quiz-page .quiz-workspace { padding:30px 0 60px; min-height:450px; }
.quiz-guide { display:flex; gap:36px; align-items:center; justify-content:center; padding:0 0 26px; margin-bottom:28px; border-bottom:1px solid #e0e5d8; color:#6a795e; font-size:13px; }
.quiz-guide b { color:#9cae89; font-size:12px; margin-right:8px; }
.quiz-page #quiz-app { min-height:220px; }
.quiz-page #quiz-app h2 { font-size:26px; letter-spacing:.02em; }
.quiz-page .quiz-batch-card { padding:26px; border-radius:18px; background:#fffef9; box-shadow:none; gap:14px; }
.quiz-batch-card::before { content:''; display:block; width:36px; height:4px; background:#b2c59f; border-radius:3px; margin-bottom:6px; }
.quiz-page .quiz-batch-card:hover { border-color:#b4c5a2; box-shadow:0 8px 24px #38522e0c; }
.quiz-page .quiz-batch-card .q-title { font-size:20px; line-height:1.65; }
.quiz-page .quiz-batch-card .q-best { border-top:1px solid #e9ecdf; padding-top:14px; margin-top:auto; }
.quiz-page .quiz-question-box { background:#fffef9; border:1px solid #dce4d1; border-radius:20px; padding:30px; }
.quiz-page .quiz-progress { background:#e8eedf; margin-top:20px; }
.quiz-page .quiz-q-text { font-size:22px; margin-top:28px; }
.quiz-page .quiz-opt { min-height:54px; background:#fafbf6; border-radius:12px; padding:16px 20px; }
.quiz-page .quiz-opt:hover:not(:disabled) { background:#f0f5e8; border-color:#9bb189; }
.quiz-page .quiz-opt.correct, .quiz-page .quiz-feedback.ok { background:#eaf2df; border-color:#a8bf91; color:#3c6130; }
.quiz-page .quiz-feedback.no { background:#fbefe7; border-color:#e1b9a0; color:#8d4c31; }
.quiz-page .quiz-feedback .exp { color:inherit; opacity:.85; line-height:1.9; }
.quiz-page .quiz-result-box { padding:38px 28px; background:#fffef9; border:1px solid #dce4d1; border-radius:20px; }
.quiz-page .quiz-score { font-size:64px; letter-spacing:-.03em; }
.quiz-page .quiz-batches { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:20px; }
.quiz-page .msg-empty { padding:35px 20px; text-align:center; color:#69785e; }
.quiz-page .quiz-guest { max-width:580px; margin:20px auto; padding:36px; text-align:center; background:#fffef9; border:1px solid #dce4d1; border-radius:20px; }
.quiz-guest-art { width:62px; height:62px; margin:0 auto 18px; display:block; stroke:#8b9f77; stroke-width:1.6; fill:none; }
@media(max-width:600px){ .quiz-page .quiz-hero h1 { font-size:32px; } .quiz-page .quiz-hero { padding-bottom:26px; } .quiz-guide { gap:12px; justify-content:space-between; font-size:12px; } .quiz-guide b { display:block; margin:0 0 5px; } .quiz-page .quiz-question-box { padding:22px 18px; } .quiz-page .quiz-q-text { font-size:19px; } .quiz-page .quiz-result-box,.quiz-page .quiz-guest { padding:30px 22px; } }