#vsq_wrap { font-family: Arial, sans-serif; max-width: 780px; margin: 0 auto; padding: 16px; background: #f4f6f9; border-radius: 12px; }
#vsq_wrap * { box-sizing: border-box; }
#vsq_header { background: #1F3864; color: #fff; border-radius: 10px; padding: 18px 22px; margin-bottom: 16px; }
#vsq_header_title { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 5px 0; }
#vsq_header_sub { color: #dde4f0; font-size: 13px; }
#vsq_stats { display: flex; gap: 10px; margin-bottom: 14px; }
.vsq_stat { flex: 1; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 10px; text-align: center; }
.vsq_sn { font-size: 22px; font-weight: 700; color: #1F3864; }
.vsq_sl { font-size: 11px; color: #888; margin-top: 2px; }
.vsq_blue { color: #185FA5 !important; }
.vsq_green { color: #1D9E75 !important; }
.vsq_red { color: #E24B4A !important; }
#vsq_prog_wrap { background: #ddd; border-radius: 99px; height: 8px; margin-bottom: 14px; overflow: hidden; }
#vsq_prog_fill { height: 8px; background: #1F3864; border-radius: 99px; width: 0%; transition: width 0.3s; }
#vsq_filter_wrap { margin-bottom: 14px; }
#vsq_filter { width: 100%; max-width: 360px; padding: 9px 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 13px; background: #fff; color: #333; cursor: pointer; }
#vsq_card { background: #fff; border: 2px solid #ddd; border-radius: 12px; padding: 22px; margin-bottom: 14px; }
#vsq_topic_tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 99px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
#vsq_qnum { font-size: 12px; color: #999; font-weight: 700; margin-bottom: 6px; }
#vsq_qtext { font-size: 15px; font-weight: 700; color: #1F3864; line-height: 1.55; margin-bottom: 16px; }
.vsq_opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; font-size: 13px; color: #333; line-height: 1.45; background: #fff; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s; width: 100%; text-align: left; }
.vsq_opt:hover { border-color: #185FA5; background: #f0f5ff; }
.vsq_opt_letter { font-weight: 800; color: #555; min-width: 18px; flex-shrink: 0; }
.vsq_opt_correct { border-color: #1D9E75 !important; background: #eafaf3 !important; color: #085041 !important; font-weight: 700 !important; }
.vsq_opt_wrong { border-color: #E24B4A !important; background: #fff0f0 !important; color: #791F1F !important; font-weight: 700 !important; }
#vsq_explanation { display: none; background: #f0f5ff; border-left: 4px solid #185FA5; border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: 13px; color: #333; line-height: 1.6; margin-top: 4px; }
#vsq_nav { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; flex-wrap: wrap; gap: 10px; }
#vsq_nav button { padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; border: 2px solid #1F3864; background: #1F3864; color: #fff; }
#vsq_nav button:hover { background: #162d55; border-color: #162d55; }
#vsq_nav button:disabled { background: #ccc !important; border-color: #ccc !important; color: #fff !important; cursor: default; }
#vsq_nav_info { font-size: 13px; color: #666; font-weight: 600; }
#vsq_result { display: none; background: #fff; border: 2px solid #1D9E75; border-radius: 12px; padding: 28px; text-align: center; margin-top: 14px; }
#vsq_result_title { font-size: 22px; font-weight: 700; color: #1D9E75; margin-bottom: 8px; }
#vsq_result_text { font-size: 15px; color: #444; margin-bottom: 16px; }
#vsq_result button { padding: 12px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; border: 2px solid #1F3864; background: #1F3864; color: #fff; }
#vsq_result button:hover { background: #162d55; }