/* Base */
.jlpt-sq-hidden{display:none}
.jlpt-sq-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.jlpt-sq-title{margin:0;font-size:1.75rem}
.jlpt-sq-btn{background:#1d9bf0;color:#fff;border:none;border-radius:10px;padding:9px 16px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.jlpt-sq-btn.is-disabled{opacity:.6;cursor:not-allowed}
.jlpt-sq-timer{font-weight:700}

.jlpt-sq-section{margin:16px 0;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.jlpt-sq-section-media{margin:8px 0}
.jlpt-sq-qmedia{margin:8px 0}

/* Responsive image sizing for BOTH section_image and question image */
.jlpt-sq-img-left{display:flex;align-items:flex-start}
.jlpt-sq-img-left img{
  display:block;
  width:auto;
  max-width:clamp(160px, 40vw, 300px); /* good across phone, tablet, desktop */
  height:auto;
  border-radius:10px;
  margin:2px 0;
}

/* Audio width */
.jlpt-sq-qmedia audio, .jlpt-sq-section-media audio{width:100%}

/* Numbered questions */
.jlpt-sq-questions{list-style:decimal;padding-left:1.5rem;margin-left:0}
.jlpt-sq-question{margin:12px 0}

/* Options layout: A-B same row, C-D same row */
.jlpt-sq-options{list-style:none;padding-left:0;margin:10px 0 0}
.jlpt-sq-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media (max-width:640px){ .jlpt-sq-grid-2{grid-template-columns:1fr} }

/* Option card look */
.jlpt-sq-option label{
  color:#000 !important; /* force black before submit */
  display:block;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  line-height:1.4;
}

/* Colors after grading */
.jlpt-sq-option.is-correct label{color:#16a34a !important;border-color:#16a34a;background:#f0fdf4;font-weight:700}
.jlpt-sq-option.is-wrong label{color:#dc2626 !important;border-color:#dc2626;background:#fef2f2;font-weight:700}

/* Actions & result */
.jlpt-sq-actions{margin-top:12px}
.jlpt-sq-result{margin-top:12px;font-weight:800}

/* Floating timer top-right */
.jlpt-sq-float-timer{
  position:fixed; top:16px; right:16px;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:8px 12px; z-index:9999;
}
.jlpt-sq-float-timer__text{font-weight:800}

/* Floating submit bottom-right */
.jlpt-sq-float-submit{
  position:fixed; bottom:16px; right:16px;
  z-index:9999;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}

/* Audio locked after submit: keep visible but ignore clicks */
.jlpt-sq-audio-locked{
  pointer-events:none;
  opacity:0.95;
}

/* Section title size tweak */
.jlpt-sq-section-title{font-size:1rem !important; font-weight:600; line-height:1.4; margin:6px 0 10px}

.jlpt-sq-qid{font-size:.9rem;color:#6b7280;margin-bottom:4px}

/* Larger section image */
.jlpt-sq-section-image{max-width:100%;width:480px;height:auto;display:block;margin:10px auto;}