/* SkillPass Frontend CSS - Build 4.5.3 */
:root {
    --sp-primary: #2563eb;
    --sp-primary-dark: #1d4ed8;
    --sp-success: #16a34a;
    --sp-danger: #dc2626;
    --sp-warning: #d97706;
    --sp-gray-50: #f8fafc;
    --sp-gray-100: #f1f5f9;
    --sp-gray-200: #e2e8f0;
    --sp-gray-400: #94a3b8;
    --sp-gray-600: #475569;
    --sp-gray-700: #334155;
    --sp-gray-800: #1e293b;
    --sp-radius: 12px;
    --sp-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --sp-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --sp-shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
}

.sp-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 900px; margin: 0 auto; padding: 20px 16px; color: var(--sp-gray-800); }

/* ── Buttons ── */
.sp-btn { display: inline-block; padding: 10px 22px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; text-decoration: none; }
.sp-btn-primary { background: var(--sp-primary); color: #fff; }
.sp-btn-primary:hover { background: var(--sp-primary-dark); color: #fff; }
.sp-btn-outline { background: transparent; color: var(--sp-primary); border: 2px solid var(--sp-primary); }
.sp-btn-outline:hover { background: var(--sp-primary); color: #fff; }
.sp-btn-danger { background: var(--sp-danger); color: #fff; }
.sp-btn-sm { padding: 6px 14px; font-size: 13px; }
.sp-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Card ── */
.sp-card { background: #fff; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); padding: 24px; box-shadow: var(--sp-shadow); }

/* ── Form ── */
.sp-form-group { margin-bottom: 16px; }
.sp-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.sp-input, .sp-select, .sp-textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--sp-gray-200); border-radius: 8px; font-size: 15px; box-sizing: border-box; transition: border-color .15s; }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus { outline: none; border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.sp-textarea { min-height: 100px; resize: vertical; }
.sp-field-error { color: var(--sp-danger); font-size: 13px; margin-top: 4px; }
.sp-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.sp-alert-success { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.sp-alert-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.sp-alert-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }

/* ── Auth pages (login/register/forgot) ── */
.sp-auth-wrap { max-width: 440px; margin: 40px auto; }
.sp-auth-wrap h2 { text-align: center; margin-bottom: 24px; font-size: 24px; }
.sp-auth-links { text-align: center; margin-top: 16px; font-size: 14px; }
.sp-auth-links a { color: var(--sp-primary); }

/* ── Dashboard ── */
.sp-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.sp-stat-card { background: #fff; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); padding: 20px; text-align: center; }
.sp-stat-card .sp-stat-num { font-size: 32px; font-weight: 700; color: var(--sp-primary); }
.sp-stat-card .sp-stat-label { font-size: 13px; color: var(--sp-gray-600); margin-top: 4px; }
.sp-section-title { font-size: 18px; font-weight: 700; margin: 24px 0 12px; border-bottom: 2px solid var(--sp-gray-200); padding-bottom: 8px; }
.sp-history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-history-table th { background: var(--sp-gray-100); padding: 10px 12px; text-align: left; font-weight: 600; }
.sp-history-table td { padding: 10px 12px; border-bottom: 1px solid var(--sp-gray-200); }
.sp-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.sp-badge-pass { background: #dcfce7; color: #15803d; }
.sp-badge-fail { background: #fee2e2; color: #b91c1c; }
.sp-badge-active { background: #dbeafe; color: #1d4ed8; }
.sp-badge-expired { background: #fef9c3; color: #854d0e; }

/* ── Exam ── */
.sp-exam-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.sp-exam-timer { font-size: 22px; font-weight: 700; color: var(--sp-danger); background: #fee2e2; padding: 6px 18px; border-radius: 8px; }
.sp-exam-timer.sp-timer-ok { color: var(--sp-success); background: #dcfce7; }
.sp-progress-bar { height: 6px; background: var(--sp-gray-200); border-radius: 3px; margin-bottom: 20px; }
.sp-progress-fill { height: 100%; background: var(--sp-primary); border-radius: 3px; transition: width .3s; }
.sp-question-box { background: #fff; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); padding: 24px; margin-bottom: 16px; }
.sp-question-text { font-size: 17px; font-weight: 600; margin-bottom: 20px; line-height: 1.5; }
.sp-choices { display: flex; flex-direction: column; gap: 10px; }
.sp-choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border: 2px solid var(--sp-gray-200); border-radius: 10px; cursor: pointer; transition: all .15s; background: #fff; }
.sp-choice:hover { border-color: var(--sp-primary); background: #eff6ff; }
.sp-choice.sp-selected { border-color: var(--sp-primary); background: #eff6ff; }
.sp-choice.sp-correct { border-color: var(--sp-success); background: #dcfce7; }
.sp-choice.sp-wrong { border-color: var(--sp-danger); background: #fee2e2; }
.sp-choice-letter { font-weight: 700; min-width: 26px; height: 26px; background: var(--sp-gray-100); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sp-choice.sp-selected .sp-choice-letter { background: var(--sp-primary); color: #fff; }
.sp-choice.sp-correct .sp-choice-letter { background: var(--sp-success); color: #fff; }
.sp-choice.sp-wrong .sp-choice-letter { background: var(--sp-danger); color: #fff; }
.sp-explanation { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 14px 16px; margin-top: 14px; font-size: 14px; display: none; }
.sp-explanation.sp-show { display: block; }
.sp-exam-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; flex-wrap: wrap; gap: 10px; }
.sp-question-num { font-size: 14px; color: var(--sp-gray-600); }
.sp-exam-setup { max-width: 560px; margin: 0 auto; }
.sp-exam-setup h2 { text-align: center; margin-bottom: 24px; }
.sp-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.sp-cat-card { border: 2px solid var(--sp-gray-200); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .15s; text-align: center; }
.sp-cat-card:hover, .sp-cat-card.sp-selected { border-color: var(--sp-primary); background: #eff6ff; }
.sp-cat-card .sp-cat-name { font-weight: 600; margin-bottom: 4px; }
.sp-cat-card .sp-cat-count { font-size: 13px; color: var(--sp-gray-600); }

/* ── Results ── */
.sp-results-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.sp-score-circle { width: 140px; height: 140px; border-radius: 50%; border: 8px solid var(--sp-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 24px; }
.sp-score-pct { font-size: 36px; font-weight: 700; color: var(--sp-primary); line-height: 1; }
.sp-score-label { font-size: 13px; color: var(--sp-gray-600); margin-top: 4px; }
.sp-results-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; }
.sp-results-stat b { font-size: 22px; display: block; }
.sp-result-review { text-align: left; margin-top: 24px; }

/* ── Pricing ── */
.sp-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.sp-plan-card { background: #fff; border: 2px solid var(--sp-gray-200); border-radius: var(--sp-radius); padding: 28px 24px; text-align: center; }
.sp-plan-card.sp-featured { border-color: var(--sp-primary); position: relative; }
.sp-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sp-primary); color: #fff; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-plan-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sp-plan-price { font-size: 38px; font-weight: 800; color: var(--sp-primary); margin-bottom: 4px; }
.sp-plan-period { font-size: 13px; color: var(--sp-gray-600); margin-bottom: 20px; }
.sp-plan-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; }
.sp-plan-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--sp-gray-200); }
.sp-plan-features li::before { content: '✓ '; color: var(--sp-success); font-weight: 700; }

/* ── FAQ ── */
.sp-faq-item { border: 1px solid var(--sp-gray-200); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.sp-faq-q { padding: 16px 20px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; }
.sp-faq-q:hover { background: var(--sp-gray-50); }
.sp-faq-icon { font-size: 20px; transition: transform .2s; color: var(--sp-primary); }
.sp-faq-item.sp-open .sp-faq-icon { transform: rotate(45deg); }
.sp-faq-a { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s; font-size: 15px; line-height: 1.7; color: var(--sp-gray-600); }
.sp-faq-item.sp-open .sp-faq-a { max-height: 1000px; padding: 0 20px 16px; }

/* ── Glossary ── */
.sp-glossary-search { display: flex; gap: 10px; margin-bottom: 20px; }
.sp-glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sp-glossary-card { background: #fff; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); padding: 18px; }
.sp-glossary-term { font-size: 16px; font-weight: 700; color: var(--sp-primary); margin-bottom: 8px; }
.sp-glossary-def { font-size: 14px; line-height: 1.6; color: var(--sp-gray-600); }
.sp-glossary-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sp-glossary-popup-inner { background: #fff; border-radius: var(--sp-radius); padding: 28px; max-width: 480px; width: 100%; box-shadow: var(--sp-shadow-md); }
.sp-glossary-popup-close { float: right; cursor: pointer; font-size: 20px; color: var(--sp-gray-400); border: none; background: none; }

/* ── Contact ── */
.sp-contact-wrap { max-width: 560px; margin: 0 auto; }

/* ── Terms ── */
.sp-terms-content { line-height: 1.8; font-size: 15px; color: var(--sp-gray-800); }
.sp-terms-content h2, .sp-terms-content h3 { margin-top: 24px; }
.sp-terms-meta { font-size: 13px; color: var(--sp-gray-600); margin-bottom: 20px; }

/* ── Profile / Account ── */
.sp-profile-grid { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.sp-profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--sp-primary); color: #fff; font-size: 32px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sp-profile-name { font-size: 18px; font-weight: 700; }
.sp-profile-email { font-size: 14px; color: var(--sp-gray-600); }
.sp-membership-box { background: var(--sp-gray-50); border: 1px solid var(--sp-gray-200); border-radius: 10px; padding: 16px; margin-top: 12px; font-size: 14px; }

/* ── Language selector ── */
.sp-lang-select-wrap { display: inline-flex; align-items: center; gap: 8px; }
.sp-lang-select-wrap label { font-size: 14px; font-weight: 600; }
.sp-lang-select-wrap select { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--sp-gray-200); font-size: 14px; }

/* ── Audio player ── */
.sp-audio-bar { display: flex; align-items: center; gap: 10px; background: var(--sp-gray-50); border: 1px solid var(--sp-gray-200); border-radius: 10px; padding: 10px 16px; margin-top: 12px; }
.sp-audio-bar audio { flex: 1; height: 32px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .sp-profile-grid { grid-template-columns: 1fr; }
    .sp-exam-header { flex-direction: column; align-items: flex-start; }
    .sp-results-stats { gap: 16px; }
    .sp-pricing-grid { grid-template-columns: 1fr; }
}

/* ── PassMyLicense Exam Center - Build 1.2.0 ── */
.sp-exam-center .sp-exam-shell { max-width: 880px; }
.sp-exam-hero { text-align: center; background: linear-gradient(135deg,#eff6ff,#ffffff); border: 1px solid var(--sp-gray-200); border-radius: 18px; padding: 26px 22px; margin-bottom: 18px; box-shadow: var(--sp-shadow-sm); }
.sp-exam-hero .sp-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-primary); background: #dbeafe; border-radius: 999px; padding: 5px 11px; margin-bottom: 10px; }
.sp-exam-hero h2 { margin: 0 0 8px; font-size: 28px; }
.sp-exam-hero p { margin: 0 auto; max-width: 680px; color: var(--sp-gray-600); line-height: 1.65; }
.sp-step-card { display: grid; grid-template-columns: 46px 1fr; gap: 16px; background: #fff; border: 1px solid var(--sp-gray-200); border-radius: 16px; padding: 18px; margin-bottom: 16px; box-shadow: var(--sp-shadow-sm); }
.sp-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--sp-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.sp-step-body h3 { margin: 2px 0 14px; font-size: 18px; }
.sp-settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; }
.sp-policy-box { background: var(--sp-gray-50); border: 1px solid var(--sp-gray-200); border-radius: 12px; padding: 14px 16px; color: var(--sp-gray-700); line-height: 1.6; margin-bottom: 12px; }
.sp-policy-box p { margin: 0 0 8px; }
.sp-policy-box p:last-child { margin-bottom: 0; }
.sp-policy-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; margin: 12px 0 16px; cursor: pointer; }
.sp-policy-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.sp-start-exam-btn { width: 100%; justify-content: center; }
.sp-start-exam-btn:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.2); }
.sp-field-error { margin-top: 10px; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.sp-cat-card { font-family: inherit; }
.sp-cat-card .sp-cat-name, .sp-cat-card .sp-cat-count { display: block; }
.sp-exam-center .sp-badge { margin-left: 8px; }
.sp-timer-danger { color: var(--sp-danger); background: #fee2e2; }

@media (max-width: 600px) {
    .sp-step-card { grid-template-columns: 1fr; gap: 10px; padding: 15px; }
    .sp-step-num { width: 32px; height: 32px; }
    .sp-exam-hero h2 { font-size: 23px; }
    .sp-exam-center .sp-badge { margin-left: 0; margin-top: 6px; }
}

/* ST 1.0 Hotfix Exam Setup: Full Test + Support Language */
.sp-full-test-card{
  background: linear-gradient(135deg,#eff6ff,#ffffff);
}
.sp-full-test-card.sp-selected{
  border-color: var(--sp-primary);
}
.sp-help-text{
  display:block;
  margin-top:6px;
  color:var(--sp-gray-600);
  font-size:12px;
  line-height:1.35;
}
.sp-translation-helper{
  margin:-6px 0 16px;
  padding:10px 12px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  border-radius:10px;
  color:#1e3a8a;
  font-size:13px;
  line-height:1.45;
}

/* ST 1.0 Hotfix v5.2 — Exam setup UI polish, click-safe */
.sp-exam-center .sp-exam-shell{
  max-width: 1040px;
}
.sp-exam-center .sp-exam-hero{
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:18px;
  padding:28px 24px;
  margin-bottom:20px;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.sp-exam-center .sp-exam-hero .sp-eyebrow{display:none;}
.sp-exam-center .sp-exam-hero h2{
  font-size:32px;
  line-height:1.18;
  margin:0 0 10px;
  color:#071a34;
}
.sp-exam-center .sp-exam-hero p{
  max-width:820px;
  font-size:18px;
  color:#31425b;
}
.sp-exam-center .sp-step-card{
  position:relative;
  grid-template-columns:54px 1fr;
  gap:18px;
  padding:24px;
  border-radius:18px;
  border:1px solid #d9e3f0;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  overflow:visible;
}
.sp-exam-center .sp-step-num{
  width:44px;
  height:44px;
  background:#123a67;
  box-shadow:0 7px 18px rgba(18,58,103,.25);
  font-size:19px;
}
.sp-exam-center .sp-step-card:not(:last-child)::after{
  content:"";
  position:absolute;
  left:45px;
  top:70px;
  bottom:-19px;
  width:2px;
  background:#dfe8f3;
}
.sp-exam-center .sp-step-body h3{
  margin:2px 0 14px;
  font-size:24px;
  line-height:1.2;
  color:#071a34;
}
.sp-exam-center .sp-cat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.sp-exam-center .sp-cat-card{
  position:relative;
  min-height:92px;
  border:2px solid #d9e3f0;
  background:#f8fafc;
  border-radius:10px;
  padding:20px 16px;
  color:#020d1f;
  box-shadow:none;
}
.sp-exam-center .sp-cat-card:hover{
  border-color:#214dff;
  background:#fff;
}
.sp-exam-center .sp-cat-card.sp-selected{
  border-color:#17206f;
  background:#fff;
  box-shadow:0 0 0 2px rgba(23,32,111,.12),0 10px 22px rgba(23,32,111,.24);
}
.sp-exam-center .sp-cat-card.sp-selected::after{
  content:"✓";
  position:absolute;
  right:14px;
  top:12px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#123a67;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
}
.sp-exam-center .sp-cat-card .sp-cat-name{
  display:block;
  font-size:22px;
  font-weight:800;
  margin-bottom:5px;
}
.sp-exam-center .sp-cat-card .sp-cat-count{
  display:block;
  font-size:16px;
  color:#263b5a;
}
.sp-exam-center .sp-settings-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.sp-exam-center .sp-label{
  color:#111827;
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
}
.sp-exam-center .sp-select{
  min-height:54px;
  border-radius:10px;
  border:1px solid #d8e2ee;
  background:#fff;
  box-shadow:0 10px 18px rgba(15,23,42,.05);
  font-size:18px;
  color:#111827;
  padding:11px 16px;
}
.sp-exam-center .sp-help-text{
  color:#64748b;
  font-size:14px;
  margin-top:8px;
}
.sp-exam-center .sp-policy-card .sp-step-body{
  display:grid;
  grid-template-columns:1fr;
}
.sp-exam-center .sp-policy-check{
  order:1;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  font-size:20px;
  color:#111827;
}
.sp-exam-center .sp-policy-check input{
  width:34px;
  height:34px;
  margin:0;
  accent-color:#2563eb;
}
.sp-exam-center .sp-policy-box{
  order:2;
  background:#f1f5f9;
  color:#1f2937;
  border-color:#e2e8f0;
  font-size:17px;
  padding:18px 20px;
  line-height:1.5;
  margin-bottom:22px;
}
.sp-exam-center .sp-start-row{
  order:3;
  display:flex;
  justify-content:center;
  margin-top:-4px;
}
.sp-exam-center .sp-start-exam-btn{
  width:auto;
  min-width:280px;
  border-radius:999px;
  padding:16px 40px;
  font-size:22px;
  font-weight:900;
  letter-spacing:.01em;
  background:linear-gradient(135deg,#0b3261,#4c55df);
  color:#fff;
  box-shadow:0 14px 28px rgba(35,45,142,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.sp-exam-center .sp-start-exam-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 18px 32px rgba(35,45,142,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
.sp-exam-center .sp-start-exam-btn:disabled{
  opacity:.48;
  filter:grayscale(.18);
}
.sp-exam-center #sp-exam-start-error{
  order:4;
}

@media (max-width: 760px){
  .sp-wrap.sp-exam-center{padding:14px 10px;}
  .sp-exam-center .sp-exam-hero{padding:20px 14px;margin-bottom:14px;}
  .sp-exam-center .sp-exam-hero h2{font-size:26px;}
  .sp-exam-center .sp-exam-hero p{font-size:14px;line-height:1.45;}
  .sp-exam-center .sp-step-card{grid-template-columns:1fr;padding:16px 14px;gap:10px;}
  .sp-exam-center .sp-step-card::after{display:none;}
  .sp-exam-center .sp-step-num{width:36px;height:36px;font-size:17px;}
  .sp-exam-center .sp-step-body h3{font-size:18px;}
  .sp-exam-center .sp-cat-grid{grid-template-columns:1fr;gap:10px;}
  .sp-exam-center .sp-cat-card{min-height:64px;text-align:left;padding:12px 44px 12px 14px;}
  .sp-exam-center .sp-cat-card .sp-cat-name{font-size:17px;}
  .sp-exam-center .sp-cat-card .sp-cat-count{font-size:13px;}
  .sp-exam-center .sp-cat-card.sp-selected::after{right:12px;top:50%;transform:translateY(-50%);}
  .sp-exam-center .sp-settings-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .sp-exam-center .sp-label{font-size:13px;margin-bottom:5px;}
  .sp-exam-center .sp-select{min-height:44px;font-size:14px;padding:8px 10px;}
  .sp-exam-center .sp-help-text{font-size:11px;}
  .sp-exam-center .sp-policy-check{font-size:14px;align-items:flex-start;}
  .sp-exam-center .sp-policy-check input{width:24px;height:24px;}
  .sp-exam-center .sp-policy-box{font-size:13px;padding:12px;}
  .sp-exam-center .sp-start-exam-btn{min-width:100%;font-size:16px;padding:13px 22px;}
}


/* ST 5.3 — Exam setup compact terms UX */
.sp-exam-center .sp-step-card{
  padding-top:22px;
  padding-bottom:22px;
  margin-bottom:18px;
}
.sp-exam-center .sp-cat-grid{gap:18px;}
.sp-exam-center .sp-settings-grid{gap:16px;}
.sp-exam-center .sp-policy-card .sp-step-body{display:block;}
.sp-exam-center .sp-policy-box{display:none;}
.sp-exam-center .sp-policy-agree-box{
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
  padding:18px 20px;
  margin:8px 0 18px;
  border:2px solid #dbe7f5;
  border-radius:16px;
  background:#f8fbff;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.sp-exam-center .sp-policy-agree-box:hover{
  border-color:#93b8f3;
  background:#f3f8ff;
  transform:translateY(-1px);
}
.sp-exam-center .sp-policy-agree-box input{
  width:32px;
  height:32px;
  min-width:32px;
  margin:2px 0 0;
  accent-color:#0f4c88;
  cursor:pointer;
}
.sp-exam-center .sp-policy-agree-box span{
  display:block;
  color:#0f172a;
  font-size:20px;
  line-height:1.35;
}
.sp-exam-center .sp-policy-agree-box small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:14px;
  line-height:1.45;
  font-weight:500;
}
.sp-exam-center .sp-policy-agree-box a{
  color:#0b5ed7;
  font-weight:800;
  text-decoration:none;
}
.sp-exam-center .sp-policy-agree-box a:hover{text-decoration:underline;}
.sp-exam-center .sp-policy-agree-box.sp-policy-ok{
  border-color:#22c55e;
  background:#effff5;
}
.sp-exam-center .sp-policy-agree-box.sp-policy-warn{
  border-color:#f97316;
  background:#fff7ed;
  box-shadow:0 0 0 4px rgba(249,115,22,.13),0 16px 34px rgba(249,115,22,.18);
}
.sp-exam-center .sp-start-row{margin-top:8px;}
.sp-exam-center .sp-start-exam-btn.is-locked{
  opacity:.72;
  background:linear-gradient(135deg,#94a3b8,#64748b);
  box-shadow:0 10px 22px rgba(100,116,139,.22);
}
.sp-exam-center .sp-start-exam-btn.is-ready{
  opacity:1;
  background:linear-gradient(135deg,#0b3261,#234ddf);
  box-shadow:0 16px 32px rgba(35,45,142,.36), inset 0 1px 0 rgba(255,255,255,.18);
}
.sp-exam-center #sp-exam-start-error{
  margin-top:12px;
  text-align:center;
  color:#b45309;
  font-weight:800;
}
@media (max-width:760px){
  .sp-exam-center .sp-step-card{padding:14px 12px;margin-bottom:12px;}
  .sp-exam-center .sp-policy-agree-box{padding:14px 12px;gap:12px;margin-bottom:14px;}
  .sp-exam-center .sp-policy-agree-box input{width:28px;height:28px;min-width:28px;}
  .sp-exam-center .sp-policy-agree-box span{font-size:15px;}
  .sp-exam-center .sp-policy-agree-box small{font-size:12px;}
}

/* ST 5.4 — Exam running UI: clean language badge, progress, glossary hooks */
.sp-exam-header{
  gap:12px;
}
.sp-exam-header > div:first-child{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.sp-exam-center .sp-badge-language{
  background:#f1f5f9;
  color:#334155;
  border:1px solid #e2e8f0;
}
.sp-progress-meta{
  margin:10px 0 7px;
  font-size:13px;
  font-weight:800;
  color:#475569;
  text-align:right;
}
.sp-progress-bar{
  height:9px;
  border-radius:999px;
  background:#e5edf7;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08);
}
.sp-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#0b3261,#234ddf);
  transition:width .25s ease;
}
.sp-question-box{
  margin-top:16px;
}
.sp-question-text{
  font-size:22px;
  line-height:1.45;
  font-weight:800;
  color:#071a34;
  margin-bottom:16px;
}
.sp-choices{
  display:grid;
  gap:10px;
}
.sp-choice{
  min-height:44px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid #dbe4f0;
  background:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:all .14s ease;
}
.sp-choice:hover{
  border-color:#93b8f3;
  background:#f8fbff;
}
.sp-choice-letter{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:#eef4fb;
  color:#0b3261;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sp-choice.sp-correct{
  border-color:#22c55e;
  background:#f0fdf4;
}
.sp-choice.sp-wrong{
  border-color:#ef4444;
  background:#fef2f2;
}
.sp-choice.sp-selected{
  border-color:#234ddf;
  background:#eef2ff;
}
.sp-learning-panel{
  margin-top:16px;
  display:grid;
  gap:10px;
}
.sp-correct-answer-line{
  padding:10px 12px;
  border-radius:12px;
  background:#f0fdf4;
  border:1px solid #86efac;
  color:#14532d;
  font-weight:800;
}
.sp-explanation.sp-show,
.sp-live-example.sp-show{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #dbe4f0;
  background:#f8fafc;
  color:#334155;
  line-height:1.55;
}
.sp-explanation.sp-show b,
.sp-live-example.sp-show b{
  display:block;
  color:#0f172a;
  margin-bottom:4px;
}
.sp-explanation.sp-show p,
.sp-live-example.sp-show p{
  margin:0;
}
.sp-live-example.sp-show{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.sp-keyword-row{
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1px dashed #cbd5e1;
}
.sp-keyword-row > b{
  display:block;
  margin-bottom:8px;
}
.sp-keyword-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sp-keyword-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1e3a8a;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.sp-keyword-chip:hover{
  background:#dbeafe;
  text-decoration:none;
}
@media (max-width:760px){
  .sp-progress-meta{text-align:left;font-size:12px;}
  .sp-question-text{font-size:18px;margin-bottom:12px;}
  .sp-choice{min-height:40px;padding:9px 10px;border-radius:10px;}
  .sp-choice-letter{width:25px;height:25px;min-width:25px;font-size:13px;}
  .sp-learning-panel{gap:8px;}
  .sp-explanation.sp-show,.sp-live-example.sp-show,.sp-correct-answer-line{font-size:13px;padding:10px 11px;}
}

/* ST 5.5 — Exam screen header locked UI */
.sp-exam-header-compact{
  margin-bottom:8px !important;
  padding:0 !important;
  align-items:flex-start !important;
  gap:10px !important;
}
.sp-exam-header-main{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
.sp-exam-header-main #sp-exam-qnum{
  font-size:15px;
  line-height:1.2;
  color:#0f172a;
  letter-spacing:-.01em;
}
.sp-exam-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.sp-exam-header-compact .sp-badge{
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.sp-exam-header-compact .sp-badge-language{
  background:#f8fafc;
  color:#334155;
  border:1px solid #e2e8f0;
}
.sp-exam-exit{
  margin-left:auto;
  min-height:32px;
  padding:7px 11px !important;
  border-radius:10px !important;
  font-weight:800 !important;
}
.sp-sr-progress{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.sp-exam-center .sp-progress-bar{
  height:8px !important;
  margin:8px 0 9px !important;
  border-radius:999px !important;
  background:#e8eef7 !important;
}
.sp-exam-title{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  color:#071a34;
  letter-spacing:-.02em;
}
.sp-question-box{
  margin-top:10px !important;
}
.sp-exam-nav{
  gap:12px !important;
  margin-top:14px !important;
}
.sp-exam-nav .sp-btn{
  min-width:190px;
  height:46px;
  padding:0 20px !important;
  border-radius:12px !important;
  font-size:15px !important;
  font-weight:900 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sp-exam-nav #sp-exam-prev{
  background:#fff;
}
.sp-exam-nav #sp-exam-next{
  background:linear-gradient(135deg,#0b3261,#234ddf) !important;
  box-shadow:0 10px 24px rgba(35,77,223,.22);
}
@media (max-width:760px){
  .sp-exam-header-compact{
    flex-direction:row !important;
    align-items:flex-start !important;
  }
  .sp-exam-header-main #sp-exam-qnum{font-size:14px;}
  .sp-exam-header-compact .sp-badge{font-size:10px;padding:4px 8px;}
  .sp-exam-title{font-size:18px;margin-bottom:10px;}
  .sp-exam-center .sp-progress-bar{height:7px;margin:7px 0 8px !important;}
  .sp-exam-nav{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;}
  .sp-exam-nav .sp-btn{min-width:0;width:100%;height:42px;font-size:14px !important;padding:0 10px !important;}
  .sp-exam-exit{font-size:12px !important;padding:6px 9px !important;}
}


/* ST 5.7 — Exam UI typography + compact spacing final */
.sp-exam-header-compact{margin-bottom:6px !important;}
.sp-exam-header-main #sp-exam-qnum{
  display:block;
  font-size:22px !important;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#071a34;
  margin:0 0 6px !important;
}
.sp-exam-header-compact .sp-exam-badges{gap:8px !important;margin-top:0 !important;}
.sp-exam-header-compact .sp-badge{font-size:13px !important;padding:5px 12px !important;border-radius:999px !important;font-weight:800 !important;}
.sp-exam-progress-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin:6px 0 8px !important;
}
.sp-exam-progress-row .sp-progress-bar{margin:0 !important;height:8px !important;}
.sp-exam-progress-row .sp-progress-meta{
  position:static !important;
  width:auto !important;
  height:auto !important;
  clip:auto !important;
  overflow:visible !important;
  white-space:nowrap !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  text-align:right !important;
  font-size:13px !important;
  font-weight:900 !important;
  color:#475569 !important;
}
.sp-exam-title{
  margin:8px 0 8px !important;
  font-size:24px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
}
.sp-question-box{margin-top:8px !important;}
.sp-question-box .sp-card,
#sp-exam-question.sp-question-box{
  padding-top:22px !important;
}
.sp-question-text{
  font-size:28px !important;
  line-height:1.28 !important;
  font-weight:750 !important;
  margin-bottom:20px !important;
  letter-spacing:-.015em;
}
.sp-choices{gap:12px !important;}
.sp-choice{
  min-height:64px !important;
  padding:13px 18px !important;
  border-radius:14px !important;
  gap:14px !important;
}
.sp-choice > span:last-child{
  font-size:21px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}
.sp-choice-letter{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  font-size:16px !important;
}
.sp-exam-nav{margin-top:14px !important;}
.sp-exam-nav .sp-btn{min-width:220px !important;height:46px !important;font-size:18px !important;}
@media (max-width:760px){
  .sp-exam-header-main #sp-exam-qnum{font-size:17px !important;line-height:1.25;}
  .sp-exam-header-compact .sp-badge{font-size:11px !important;padding:4px 8px !important;}
  .sp-exam-progress-row{grid-template-columns:1fr;gap:5px;margin:6px 0 8px !important;}
  .sp-exam-progress-row .sp-progress-meta{text-align:left !important;font-size:12px !important;}
  .sp-exam-title{font-size:20px !important;margin:7px 0 7px !important;}
  .sp-question-text{font-size:22px !important;line-height:1.32 !important;margin-bottom:14px !important;}
  .sp-choice{min-height:54px !important;padding:11px 13px !important;gap:10px !important;}
  .sp-choice > span:last-child{font-size:17px !important;line-height:1.4 !important;}
  .sp-choice-letter{width:28px !important;height:28px !important;min-width:28px !important;font-size:14px !important;}
  .sp-exam-nav .sp-btn{min-width:0 !important;height:42px !important;font-size:15px !important;}
}


/* ST v5.8 Review Mode: inline check/X on answers, no separate Correct Answer box */
.sp-correct-answer-line{display:none !important;}
.sp-choice{position:relative !important;}
.sp-choice .sp-choice-text{flex:1 1 auto !important;}
.sp-choice-state{
  margin-left:auto !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:900 !important;
}
.sp-choice-check{color:#16a34a !important;background:#dcfce7 !important;}
.sp-choice-x{color:#dc2626 !important;background:#fee2e2 !important;}
.sp-choice.sp-correct{padding-right:18px !important;}
.sp-choice.sp-wrong{padding-right:18px !important;}
@media (max-width:760px){
  .sp-choice-state{width:28px !important;height:28px !important;min-width:28px !important;font-size:20px !important;}
}

/* ST 6.2a — Keyword Learning Tooltip Prototype */
.sp-keyword-row{margin-top:14px;padding-top:12px;border-top:1px solid rgba(15,23,42,.08)}
.sp-keyword-row>b{display:block;margin-bottom:8px;color:#0f172a;font-size:14px}
.sp-glossary-extra{margin-top:14px;padding-top:12px;border-top:1px solid #e5e7eb;color:#334155;font-size:14px;line-height:1.55}
.sp-glossary-extra b{display:block;margin-bottom:4px;color:#0f172a}
.sp-glossary-extra p{margin:0}

/* ST 6.3 — Bilingual Learning Assist */
.sp-translate-wrap{
  margin:10px 0 16px;
}
.sp-translate-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#1e3a8a;
  border-radius:999px;
  padding:8px 13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.sp-translate-btn:hover{
  background:#e0e7ff;
  border-color:#818cf8;
}
.sp-translation-box{
  margin-top:10px;
  margin-bottom:0;
}
.sp-translation-box b{
  display:block;
  margin-bottom:5px;
}
.sp-translation-box p{
  margin:0;
}
.sp-inline-term{
  color:#dc2626;
  font-weight:800;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
  cursor:help;
}
.sp-inline-term:hover{
  color:#991b1b;
  background:#fef2f2;
  border-radius:4px;
}

/* ST 6.3a.2 — UI Polish: shadows, narrower answer cards, stronger review icons */
.sp-exam-header-compact .sp-badge,
.sp-translate-btn,
.sp-exam-nav .sp-btn{
  box-shadow:0 4px 12px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.sp-exam-header-compact .sp-badge:hover,
.sp-translate-btn:hover,
.sp-exam-nav .sp-btn:hover{
  box-shadow:0 6px 16px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.sp-exam-nav #sp-exam-prev{
  box-shadow:0 4px 12px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.sp-exam-nav #sp-exam-next{
  box-shadow:0 8px 18px rgba(37,77,223,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sp-choices{
  width:calc(100% - 64px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.sp-choice{
  min-height:58px !important;
  padding:11px 16px !important;
  box-shadow:0 3px 10px rgba(15,23,42,.06) !important;
}
.sp-choice:hover{
  box-shadow:0 5px 14px rgba(37,99,235,.13) !important;
}
.sp-choice.sp-correct{
  box-shadow:0 5px 14px rgba(34,197,94,.18) !important;
}
.sp-choice.sp-wrong{
  box-shadow:0 5px 14px rgba(239,68,68,.16) !important;
}
.sp-choice-state{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  font-size:38px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  font-family:Arial Black, Arial, Helvetica, sans-serif !important;
  background:transparent !important;
  box-shadow:none !important;
}
.sp-choice-check{
  color:#15803d !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 2px 5px rgba(21,128,61,.20) !important;
}
.sp-choice-x{
  color:#b91c1c !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 2px 5px rgba(185,28,28,.20) !important;
}
.sp-choice.sp-correct,
.sp-choice.sp-wrong{
  padding-right:20px !important;
}
@media (max-width:760px){
  .sp-choices{width:100% !important;}
  .sp-choice{min-height:52px !important;padding:10px 12px !important;}
  .sp-choice-state{width:36px !important;height:36px !important;min-width:36px !important;font-size:30px !important;}
}


/* ST 6.3b — Review UI + Translation Logic final polish */
.sp-choice .sp-choice-text{
  font-weight:500 !important;
}
.sp-choice.sp-correct .sp-choice-text{
  font-weight:800 !important;
  font-size:calc(1em + 1px) !important;
}
.sp-choice{
  box-shadow:0 7px 18px rgba(15,23,42,.09) !important;
}
.sp-choice.sp-correct{
  box-shadow:0 8px 20px rgba(34,197,94,.20) !important;
}
.sp-choice.sp-wrong{
  box-shadow:0 8px 20px rgba(239,68,68,.18) !important;
}
.sp-choice-state{
  font-size:42px !important;
  font-weight:1000 !important;
}
.sp-explanation strong{
  font-weight:800 !important;
}
.sp-translate-wrap{
  display:flex !important;
  justify-content:flex-start !important;
  margin:8px 0 18px !important;
}
@media (max-width:760px){
  .sp-choice.sp-correct .sp-choice-text{font-size:calc(1em + 1px) !important;}
  .sp-choice-state{font-size:32px !important;}
}

/* ST 6.3c — Collapsible Learning Panels */
.sp-learning-panel-collapsible{
  margin-top:16px !important;
  display:grid !important;
  gap:10px !important;
}
.sp-collapse-card{
  border:1px solid #dbe4f0;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 5px 14px rgba(15,23,42,.055);
}
.sp-collapse-toggle{
  width:100%;
  border:0;
  background:#fff;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  font-weight:900;
  font-size:15px;
  text-align:left;
  cursor:pointer;
}
.sp-collapse-toggle:hover{
  background:#f8fafc;
}
.sp-collapse-arrow{
  color:#2563eb;
  font-size:13px;
  width:18px;
  display:inline-flex;
  justify-content:center;
}
.sp-collapse-body{
  border-top:1px solid #e2e8f0;
}
.sp-collapse-card .sp-explanation.sp-show,
.sp-collapse-card .sp-live-example.sp-show{
  border:0 !important;
  border-radius:0 !important;
  background:#f8fafc !important;
  box-shadow:none !important;
  margin:0 !important;
}
.sp-collapse-card .sp-keyword-row{
  border:0 !important;
  border-radius:0 !important;
  border-top:1px solid #e2e8f0 !important;
  background:#fff !important;
  margin:0 !important;
  padding:12px 14px !important;
}
.sp-collapse-card.sp-open .sp-collapse-toggle{
  background:#f8fafc;
}
@media (max-width:760px){
  .sp-collapse-toggle{padding:10px 12px;font-size:14px;}
}

/* ST 6.4 — Exam HUD Cleanup + compact learning toolbar */
.sp-exam-center .sp-exam-header-compact{
  margin-bottom:6px !important;
}
.sp-exam-center .sp-exam-header-main #sp-exam-qnum{
  font-size:20px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  margin-bottom:6px !important;
}
.sp-exam-hud-line{
  display:grid !important;
  grid-template-columns:auto minmax(360px,1fr) !important;
  gap:24px !important;
  align-items:center !important;
  margin:10px 0 10px !important;
}
.sp-exam-hud-line .sp-exam-title{
  margin:0 !important;
  white-space:nowrap !important;
}
.sp-exam-hud-line .sp-exam-progress-row.sp-exam-hud{
  display:grid !important;
  grid-template-columns:auto minmax(220px,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
  margin:0 !important;
}
.sp-exam-timer{
  font-size:24px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#1e1b8f !important;
  min-width:74px !important;
  text-align:right !important;
  font-variant-numeric:tabular-nums !important;
}
.sp-exam-hud .sp-progress-bar{
  height:9px !important;
  margin:0 !important;
}
.sp-exam-hud .sp-progress-meta{
  margin:0 !important;
  text-align:left !important;
  white-space:nowrap !important;
  font-size:13px !important;
  font-weight:900 !important;
}
.sp-question-box{
  margin-top:6px !important;
}
.sp-question-box .sp-card,
#sp-exam-question.sp-question-box{
  padding-top:18px !important;
}
.sp-question-text{
  margin-bottom:10px !important;
}
.sp-translate-wrap{
  margin:4px 0 14px !important;
}
.sp-learning-panel-collapsible{
  margin-top:14px !important;
  display:block !important;
}
.sp-learning-toolbar{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  border:1px solid #dbe4f0 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 4px 12px rgba(15,23,42,.055) !important;
  overflow:hidden !important;
}
.sp-learning-toolbar .sp-collapse-toggle{
  width:auto !important;
  flex:0 0 auto !important;
  border:0 !important;
  border-right:1px solid #e2e8f0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  padding:12px 14px !important;
  font-size:15px !important;
  white-space:nowrap !important;
}
.sp-learning-toolbar .sp-collapse-toggle:last-child{
  border-right:0 !important;
}
.sp-learning-toolbar .sp-collapse-toggle:hover,
.sp-learning-toolbar .sp-collapse-toggle.sp-open{
  background:#f8fafc !important;
}
.sp-learning-bodies{
  margin-top:10px !important;
}
.sp-learning-bodies .sp-collapse-body{
  border:1px solid #dbe4f0 !important;
  border-radius:14px !important;
  box-shadow:0 4px 12px rgba(15,23,42,.045) !important;
  overflow:hidden !important;
  margin:0 0 10px !important;
}
.sp-learning-bodies .sp-explanation.sp-show,
.sp-learning-bodies .sp-live-example.sp-show,
.sp-learning-bodies .sp-keyword-row{
  padding:12px 14px !important;
  background:#f8fafc !important;
}
@media (max-width:760px){
  .sp-exam-center .sp-exam-header-main #sp-exam-qnum{
    font-size:17px !important;
  }
  .sp-exam-hud-line{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:8px 0 !important;
  }
  .sp-exam-hud-line .sp-exam-title{
    white-space:normal !important;
  }
  .sp-exam-hud-line .sp-exam-progress-row.sp-exam-hud{
    grid-template-columns:auto auto !important;
    gap:8px 12px !important;
  }
  .sp-exam-timer{
    text-align:left !important;
    min-width:0 !important;
    font-size:19px !important;
  }
  .sp-exam-hud .sp-progress-meta{
    text-align:right !important;
  }
  .sp-exam-hud .sp-progress-bar{
    grid-column:1 / -1 !important;
  }
  .sp-learning-toolbar{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .sp-learning-toolbar .sp-collapse-toggle{
    padding:10px 12px !important;
    font-size:14px !important;
  }
}

/* ST 6.4a — HUD Translate + Live Sample + zero dead space polish */
.sp-exam-hud-line{
  display:grid !important;
  grid-template-columns:minmax(220px,auto) auto minmax(260px,1fr) auto auto !important;
  gap:14px !important;
  align-items:center !important;
  margin:8px 0 10px !important;
  padding:0 0 8px !important;
  border-bottom:1px solid #e2e8f0 !important;
}
.sp-exam-hud-line .sp-exam-title{
  margin:0 !important;
  white-space:nowrap !important;
}
.sp-exam-hud-line .sp-exam-timer{
  display:block;
  font-size:23px !important;
  font-weight:800 !important;
  min-width:76px !important;
  text-align:center !important;
}
.sp-exam-hud-line .sp-exam-hud-bar,
.sp-exam-hud-line > .sp-progress-bar{
  height:9px !important;
  margin:0 !important;
  min-width:220px !important;
}
.sp-exam-hud-line > .sp-progress-meta{
  white-space:nowrap !important;
  font-size:13px !important;
  font-weight:900 !important;
  margin:0 !important;
}
.sp-hud-translate{
  margin:0 !important;
  justify-self:end !important;
  white-space:nowrap !important;
  box-shadow:0 5px 14px rgba(37,99,235,.14) !important;
}
.sp-translate-inline-box{
  margin:8px 0 12px !important;
}
.sp-translate-inline-box:empty{display:none !important;}
.sp-question-text{margin-bottom:8px !important;}
.sp-choices{margin-top:8px !important;}
.sp-learning-panel-collapsible{margin-top:12px !important;}
.sp-learning-bodies{display:none;margin-top:10px !important;}
.sp-learning-bodies .sp-collapse-body{margin:0 !important;}
.sp-learning-bodies .sp-collapse-body + .sp-collapse-body{margin-top:8px !important;}
.sp-learning-toolbar{min-height:46px !important;}
.sp-learning-toolbar .sp-collapse-toggle{min-height:46px !important;display:flex !important;align-items:center !important;gap:8px !important;}
@media (max-width:900px){
  .sp-exam-hud-line{
    grid-template-columns:1fr auto auto !important;
    gap:8px 10px !important;
  }
  .sp-exam-hud-line .sp-exam-title{grid-column:1 / -1 !important;white-space:normal !important;}
  .sp-exam-hud-line .sp-exam-hud-bar,
  .sp-exam-hud-line > .sp-progress-bar{grid-column:1 / -1 !important;min-width:0 !important;}
  .sp-hud-translate{justify-self:start !important;}
}
@media (max-width:760px){
  .sp-exam-hud-line{grid-template-columns:auto 1fr auto !important;}
  .sp-exam-hud-line .sp-exam-title{grid-column:1 / -1 !important;}
  .sp-exam-hud-line .sp-exam-timer{text-align:left !important;font-size:19px !important;min-width:0 !important;}
  .sp-hud-translate{grid-column:1 / -1 !important;width:max-content !important;}
}

/* ST 6.4b — Stable 2-row Exam HUD: category separate, timer/progress/%/translate fixed */
.sp-exam-hud-line{
  display:grid !important;
  grid-template-columns:auto minmax(280px, 1fr) auto auto !important;
  gap:8px 14px !important;
  align-items:center !important;
  margin:6px 0 10px !important;
  padding:0 0 10px !important;
  border-bottom:1px solid #e2e8f0 !important;
}
.sp-exam-hud-line .sp-exam-title{
  grid-column:1 / -1 !important;
  margin:0 0 2px !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
.sp-exam-hud-line .sp-exam-timer{
  display:block !important;
  font-size:22px !important;
  font-weight:800 !important;
  min-width:72px !important;
  text-align:left !important;
  color:#0f172a !important;
}
.sp-exam-hud-line .sp-exam-hud-bar,
.sp-exam-hud-line > .sp-progress-bar{
  height:9px !important;
  width:100% !important;
  min-width:260px !important;
  max-width:none !important;
  margin:0 !important;
}
.sp-exam-hud-line > .sp-progress-meta{
  white-space:nowrap !important;
  font-size:13px !important;
  font-weight:900 !important;
  margin:0 !important;
}
.sp-hud-translate{
  margin:0 !important;
  justify-self:end !important;
  white-space:nowrap !important;
  padding:8px 13px !important;
  font-size:15px !important;
  line-height:1.1 !important;
  border-radius:18px !important;
  box-shadow:0 4px 12px rgba(37,99,235,.13) !important;
}
@media (max-width:760px){
  .sp-exam-hud-line{
    grid-template-columns:auto 1fr auto !important;
    gap:8px 10px !important;
  }
  .sp-exam-hud-line .sp-exam-title{grid-column:1 / -1 !important;}
  .sp-exam-hud-line .sp-exam-timer{font-size:19px !important;min-width:64px !important;}
  .sp-exam-hud-line > .sp-progress-meta{font-size:12px !important;text-align:right !important;}
  .sp-hud-translate{grid-column:1 / -1 !important;justify-self:start !important;padding:7px 12px !important;font-size:14px !important;}
  .sp-exam-hud-line .sp-exam-hud-bar,
  .sp-exam-hud-line > .sp-progress-bar{grid-column:1 / -1 !important;min-width:0 !important;}
}


/* ST 6.4b.1 — HUD timer artifact fix: no orphan pink badge, timer text only */
.sp-exam-hud-line .sp-exam-timer{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.sp-exam-hud-line .sp-exam-timer:empty{
  display:none !important;
}
.sp-exam-hud-line .sp-exam-timer[style*="display: none"],
.sp-exam-hud-line .sp-exam-timer[style*="display:none"]{
  display:none !important;
}


/* ST 6.4b.2 — Restore stable HUD timer slot without pink artifact */
.sp-exam-hud-line .sp-exam-timer{
  display:block !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#1e1b8f !important;
  font-size:22px !important;
  font-weight:800 !important;
  min-width:72px !important;
  text-align:left !important;
}
.sp-exam-hud-line .sp-exam-timer:empty{display:block !important;}
.sp-exam-hud-line .sp-exam-timer[style*="display: none"],
.sp-exam-hud-line .sp-exam-timer[style*="display:none"]{display:block !important;}


/* ST 6.4b.3 — Timer Logic Lock: Review shows neutral label, Real Test counts down */
.sp-exam-hud-line .sp-exam-timer.sp-timer-review-only{
  color:#94a3b8 !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  min-width:128px !important;
  white-space:nowrap !important;
}
.sp-exam-hud-line .sp-exam-timer.sp-timer-ok{
  color:#1e1b8f !important;
}
.sp-exam-hud-line .sp-exam-timer.sp-timer-danger{
  color:#dc2626 !important;
}


/* ST 6.4c — Remove Learn Key Terms panel + small neutral Review timer note */
.sp-exam-hud-line .sp-exam-timer.sp-timer-review-only{
  color:#94a3b8 !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  min-width:215px !important;
  white-space:nowrap !important;
  opacity:.78 !important;
}
.sp-learning-toolbar .sp-collapse-toggle[data-panel="terms"],
.sp-learning-bodies [data-panel-body="terms"]{
  display:none !important;
}


/* ST 6.4c.1 — Timer label UX hotfix */
.sp-exam-hud-line .sp-exam-timer{
  white-space:nowrap !important;
}
.sp-exam-hud-line .sp-exam-timer.sp-timer-review-only{
  font-size:11px !important;
  color:#9ca3af !important;
  font-weight:500 !important;
  opacity:.78 !important;
}


/* ST 6.4c.2 — Timer UI polish: smaller, lighter, less headline-like */
.sp-exam-hud-line .sp-exam-timer{
  font-size:16px !important;
  font-weight:500 !important;
  color:#334155 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}
.sp-exam-hud-line .sp-exam-timer.sp-timer-ok{
  color:#334155 !important;
  font-size:16px !important;
  font-weight:500 !important;
}
.sp-exam-hud-line .sp-exam-timer.sp-timer-danger{
  color:#dc2626 !important;
  font-size:16px !important;
  font-weight:600 !important;
}
.sp-exam-hud-line .sp-exam-timer.sp-timer-review-only{
  font-size:11px !important;
  font-weight:500 !important;
  color:#9ca3af !important;
  opacity:.78 !important;
}


/* ST 6.6a — Admin Quick Add/Edit Pilot */
.sp-learning-toolbar .sp-admin-quick-edit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:6px;
    padding:5px 9px;
    border:1px solid rgba(37,99,235,.25);
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    background:#eff6ff;
    color:#1d4ed8;
    vertical-align:middle;
}
.sp-learning-toolbar .sp-admin-quick-edit:hover{
    background:#dbeafe;
    color:#1e40af;
    text-decoration:none;
}
.sp-collapse-toggle.sp-collapse-na{
    opacity:.62;
}
.sp-collapse-toggle.sp-collapse-na em{
    font-style:normal;
    font-weight:600;
    opacity:.72;
}
.sp-learning-na{
    opacity:.62;
    font-style:italic;
}
.sp-collapse-body-na{
    color:var(--sp-gray-500,#6b7280);
}

/* ST 7.1 Vietnamese learning layer */
.sp-translation-box,
.sp-choice-vi,
.sp-learning-vi{
    margin-top:8px;
    padding:10px 12px;
    border-radius:10px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155;
    font-size:14px;
    line-height:1.55;
}
.sp-translation-box b,
.sp-learning-vi b{color:#0f172a;}
.sp-choice-vi{margin-left:44px;}
.sp-vi-missing{color:#94a3b8;font-style:italic;margin:4px 0 0;}
.sp-translate-btn.sp-translate-on{font-weight:700;}

/* ST 7.3 Frontend Glossary Quick Add */
.sp-glossary-quick-btn{position:absolute;z-index:999999;background:#1d4ed8;color:#fff;border:0;border-radius:999px;padding:8px 13px;font-weight:800;box-shadow:0 10px 25px rgba(15,23,42,.22);cursor:pointer;font-size:13px}.sp-glossary-quick-btn:hover{background:#1e40af}.sp-gqa-modal{position:fixed;inset:0;z-index:1000000}.sp-gqa-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}.sp-gqa-card{position:relative;width:min(620px,94vw);max-height:88vh;overflow:auto;margin:7vh auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.35);border:1px solid #dbeafe}.sp-gqa-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #e2e8f0}.sp-gqa-head h3{margin:0;font-size:22px}.sp-gqa-close{border:1px solid #cbd5e1;background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer;font-weight:800}.sp-gqa-body{padding:20px 22px;display:grid;gap:14px}.sp-gqa-body label{display:grid;gap:7px;font-weight:800;color:#0f172a}.sp-gqa-body input,.sp-gqa-body textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:12px;padding:11px 12px;font-size:15px}.sp-gqa-foot{display:flex;gap:12px;justify-content:flex-end;padding:16px 22px;border-top:1px solid #e2e8f0;background:#f8fafc}.sp-gqa-status{font-weight:800;color:#15803d}.sp-gqa-error{color:#dc2626!important}


/* ST 8.1 Question Translation Tooltip */
.sp-question-translate-tip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin-left:10px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
    font-size:18px;
    vertical-align:middle;
    cursor:help;
    position:relative;
    box-shadow:0 8px 18px rgba(37,99,235,.12);
}
.sp-question-translate-tip:hover::after,
.sp-question-translate-tip:focus::after{
    content:attr(data-tip);
    position:absolute;
    left:50%;
    top:calc(100% + 10px);
    transform:translateX(-50%);
    width:min(520px,82vw);
    white-space:normal;
    z-index:99999;
    background:#0f172a;
    color:#fff;
    padding:12px 14px;
    border-radius:12px;
    font-size:15px;
    line-height:1.45;
    font-weight:600;
    text-align:left;
    box-shadow:0 18px 40px rgba(15,23,42,.28);
}
.sp-question-translate-tip:hover::before,
.sp-question-translate-tip:focus::before{
    content:'';
    position:absolute;
    left:50%;
    top:calc(100% + 4px);
    transform:translateX(-50%);
    border:7px solid transparent;
    border-bottom-color:#0f172a;
    z-index:100000;
}
/* Choices stay English-first in ST 8.1; no side-by-side VI chips. */
.sp-choice-vi{display:none!important;}


/* ST 8.3a.3 Safe Source panel */
.sp-source-panel-inner{line-height:1.55;}
.sp-source-row{margin:0 0 10px;}
.sp-source-row:last-child{margin-bottom:0;}
.sp-source-panel a{color:#2457d6;font-weight:700;text-decoration:none;}
.sp-source-panel a:hover{text-decoration:underline;}


/* ST 8.3a.5 — Progress Bar Inline Percent Fix
   Desktop: progress bar and percent stay in one row.
   Mobile: wraps cleanly without overlapping. */
.sp-exam-hud-line{
  grid-template-columns:auto minmax(160px, 1fr) auto !important;
  align-items:center !important;
}
.sp-exam-hud-line .sp-exam-title{
  grid-column:1 / -1 !important;
}
.sp-exam-hud-line .sp-exam-timer{
  grid-column:1 !important;
}
.sp-exam-hud-line .sp-exam-hud-bar,
.sp-exam-hud-line > .sp-progress-bar{
  grid-column:2 !important;
  min-width:0 !important;
}
.sp-exam-hud-line > .sp-progress-meta{
  grid-column:3 !important;
  justify-self:start !important;
  align-self:center !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
@media (max-width:760px){
  .sp-exam-hud-line{
    grid-template-columns:minmax(0, 1fr) auto !important;
    gap:7px 10px !important;
  }
  .sp-exam-hud-line .sp-exam-title{grid-column:1 / -1 !important;}
  .sp-exam-hud-line .sp-exam-timer{grid-column:1 / -1 !important;}
  .sp-exam-hud-line .sp-exam-hud-bar,
  .sp-exam-hud-line > .sp-progress-bar{grid-column:1 !important;min-width:0 !important;}
  .sp-exam-hud-line > .sp-progress-meta{grid-column:2 !important;text-align:left !important;font-size:12px !important;}
}
@media (max-width:420px){
  .sp-exam-hud-line .sp-exam-hud-bar,
  .sp-exam-hud-line > .sp-progress-bar{grid-column:1 / -1 !important;}
  .sp-exam-hud-line > .sp-progress-meta{grid-column:1 / -1 !important;justify-self:start !important;}
}