/*
  SZLN Test 2.0 - Frontend Quiz UI
  Uses TW-Lite utilities plus these component styles.
*/

.szln-quiz{max-width:860px;margin:22px auto;padding:22px;border-radius:22px;position:relative;color:var(--szln-primary,#0f172a)}
.szln-quiz *{box-sizing:border-box}

/* Themes */
.szln-theme-aurora{background:linear-gradient(135deg,#f4d4ff 0%,#c6f7e2 100%)}
.szln-theme-minimal{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid rgba(226,232,240,.9)}
.szln-theme-dark{background:linear-gradient(135deg,#0b1220 0%,#111827 100%);color:#e5e7eb}

.szln-theme-aurora.szln-glow::before,
.szln-quiz.szln-theme-aurora::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:2px;
  background:linear-gradient(120deg,#ff00cc,#4f46e5,#00ffcc);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.9;
}

/* Header pills */
.szln-quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.szln-quiz-progress{font-weight:800;letter-spacing:.02em}
.szln-quiz-timer{font-variant-numeric:tabular-nums;font-weight:900;padding:10px 16px;border-radius:9999px;background:#0f172a;color:#fff}
.szln-theme-dark .szln-quiz-timer{background:#0b1220}

/* Intro */
.szln-quiz-intro{border-radius:18px;padding:34px 22px;text-align:left}
.szln-theme-aurora .szln-quiz-intro{background:rgba(255,255,255,.64);backdrop-filter:blur(14px);border:1px solid rgba(226,232,240,.9)}
.szln-theme-minimal .szln-quiz-intro{background:#fff;border:1px solid rgba(226,232,240,.9)}
.szln-theme-dark .szln-quiz-intro{background:rgba(17,24,39,.55);border:1px solid rgba(148,163,184,.25)}
.szln-quiz-intro h2{margin:0 0 6px;font-size:28px;font-weight:900}
.szln-quiz-intro p{margin:6px 0;color:rgba(15,23,42,.72)}
.szln-theme-dark .szln-quiz-intro p{color:rgba(226,232,240,.78)}

.szln-btn-start{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:14px;border:0;background:var(--szln-accent,#6366F1);color:#fff;font-weight:900;cursor:pointer;transition:transform .15s, filter .15s}
.szln-btn-start:hover{transform:translateY(-1px);filter:brightness(1.02)}

/* Question card */
.szln-quiz-question{border-radius:18px;padding:22px;margin-top:12px}
.szln-theme-aurora .szln-quiz-question{background:rgba(255,255,255,.66);backdrop-filter:blur(14px);border:1px solid rgba(226,232,240,.9)}
.szln-theme-minimal .szln-quiz-question{background:#fff;border:1px solid rgba(226,232,240,.9)}
.szln-theme-dark .szln-quiz-question{background:rgba(17,24,39,.55);border:1px solid rgba(148,163,184,.25)}

.szln-quiz-question h3{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-weight:900}
.szln-theme-dark .szln-quiz-question h3{color:#94a3b8}
.szln-q-text{margin:0 0 14px;font-size:18px;line-height:1.55;font-weight:900}

/* Choices */
.szln-quiz-choices label{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(226,232,240,.95);background:rgba(255,255,255,.80);cursor:pointer;transition:transform .12s,border-color .12s, background .12s}
.szln-quiz-choices label + label{margin-top:10px}
.szln-quiz-choices label:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.55)}
.szln-theme-dark .szln-quiz-choices label{background:rgba(2,6,23,.35);border-color:rgba(148,163,184,.25);color:#e5e7eb}

.szln-quiz-choices input[type=radio]{position:relative !important;appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:6px;border:2px solid rgba(15,23,42,.22);display:inline-block;position:relative}
.szln-theme-dark .szln-quiz-choices input[type=radio]{border-color:rgba(226,232,240,.35)}
.szln-quiz-choices input[type=radio]:checked{border-color:var(--szln-accent,#6366F1)} 
.szln-quiz-choices input[type=radio]:checked::after{content:"";position:absolute;inset:3px;border-radius:4px;background:var(--szln-accent,#6366F1)}

/* Input */
.szln-quiz-input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(226,232,240,.95);font-size:16px;outline:none}
.szln-quiz-input:focus{border-color:rgba(99,102,241,.55);box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.szln-theme-dark .szln-quiz-input{background:rgba(2,6,23,.35);border-color:rgba(148,163,184,.25);color:#e5e7eb}
.szln-match-row > * {
    visibility: unset !important;
}
/* Progress bar */
.szln-progressbar{height:10px;border-radius:9999px;background:rgba(15,23,42,.08);overflow:hidden}
.szln-theme-dark .szln-progressbar{background:rgba(226,232,240,.12)}
.szln-progressbar > i{display:block;height:100%;width:0;background:var(--szln-accent,#6366F1);border-radius:9999px;transition:width .2s}

/* Nav */
.szln-quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.szln-quiz-nav button{border:0;border-radius:14px;padding:10px 16px;font-weight:900;cursor:pointer;transition:transform .12s, filter .12s}
.szln-btn-prev{background:rgba(15,23,42,.08);color:inherit}
.szln-btn-next,.szln-btn-submit{background:var(--szln-accent,#6366F1);color:#fff}
.szln-quiz-nav button:hover{transform:translateY(-1px);filter:brightness(1.02)}
.szln-quiz-nav button:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Results */
.szln-quiz-result{border-radius:18px;padding:26px;text-align:left}
.szln-quiz-result h2{margin:0 0 6px;font-size:26px;font-weight:950}
.szln-quiz-result .szln-score{font-size:54px;font-weight:950;display:block;margin:10px 0}
.szln-quiz-result.passed{background:linear-gradient(135deg,#16a34a 0%,#22c55e 100%);color:#fff}
.szln-quiz-result.failed{background:linear-gradient(135deg,#dc2626 0%,#f97316 100%);color:#fff}

.szln-quiz-details{margin-top:14px}
.szln-detail-item{border-radius:14px;padding:12px 14px;margin:10px 0;background:rgba(255,255,255,.80);border:1px solid rgba(226,232,240,.95)}
.szln-theme-dark .szln-detail-item{background:rgba(2,6,23,.35);border-color:rgba(148,163,184,.25)}
.szln-detail-item.correct{border-left:6px solid #22c55e}
.szln-detail-item.wrong{border-left:6px solid #ef4444}
.szln-d-q{font-weight:900;margin-bottom:6px}
.szln-d-info{font-size:14px;opacity:.9}

/* Matching / Ordering */
.szln-match-row{display:flex;gap:12px;align-items:center;margin:10px 0}
.szln-match-left{flex:1;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.06);font-weight:900}
.szln-theme-dark .szln-match-left{background:rgba(226,232,240,.10)}
.szln-match-row select{flex:1;padding:10px 12px;border-radius:14px;border:1px solid rgba(226,232,240,.95);background:rgba(255,255,255,.80)}
.szln-theme-dark .szln-match-row select{background:rgba(2,6,23,.35);border-color:rgba(148,163,184,.25);color:#e5e7eb}

.szln-order-list{list-style:none;padding:0;margin:0}
.szln-order-list li{padding:12px 14px;margin:10px 0;border-radius:14px;border:1px solid rgba(226,232,240,.95);background:rgba(255,255,255,.80);cursor:grab;display:flex;align-items:center;gap:10px;font-weight:900}
.szln-theme-dark .szln-order-list li{background:rgba(2,6,23,.35);border-color:rgba(148,163,184,.25);color:#e5e7eb}
.szln-order-list li:active{cursor:grabbing}
.szln-drag-handle{opacity:.6}