.exam-app{max-width:560px;margin:0 auto;padding:20px 16px 60px;min-height:70vh}
.exam-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line);padding:28px 24px}
.exam-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.exam-brand span{font-family:'Baloo 2';font-weight:800;font-size:1.25rem;color:var(--maroon)}
.exam-intro{color:var(--muted);font-weight:600;margin-bottom:20px}
.exam-fld{margin-bottom:14px}
.exam-fld label{display:block;font-weight:800;font-size:.88rem;color:var(--maroon);margin-bottom:6px}
.exam-fld input{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);font-size:1rem}
.exam-fld input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.15)}
.exam-msg{margin-top:12px}
.exam-err{background:#fdecec;color:#b3261e;border:1px solid #f5c2c0;padding:10px 14px;border-radius:10px;font-weight:700;font-size:.9rem}

/* topbar */
.exam-topbar{margin-bottom:18px}
.exam-prog{height:8px;background:var(--line);border-radius:5px;overflow:hidden}
.exam-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--yellow));width:0;transition:width .3s ease}
.exam-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.exam-meta #ex-count{font-family:'Baloo 2';font-weight:700;color:var(--maroon)}
.exam-timer{display:inline-flex;align-items:center;gap:4px;background:var(--maroon);color:#fff;font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:999px}

/* soal */
.exam-qwrap{margin-bottom:20px}
.exam-q{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);border:1px solid var(--line);padding:24px 22px}
.exam-qnum{display:inline-block;background:var(--yellow-soft);color:var(--orange);font-weight:800;font-size:.75rem;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.exam-qtext{font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:20px}
.exam-opts{display:flex;flex-direction:column;gap:10px}
.exam-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--cream);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.exam-opt:hover{border-color:var(--orange)}
.exam-opt:active{transform:scale(.99)}
.exam-optlabel{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:700;color:var(--blue-deep)}
.exam-opttext{font-weight:700;font-size:1.02rem}
.exam-opt.picked{border-color:var(--orange);background:var(--orange-soft)}
.exam-opt.picked .exam-optlabel{background:var(--orange);color:#fff;border-color:var(--orange)}

/* nav */
.exam-nav{display:flex;gap:10px}
.exam-nav .btn{flex:1;justify-content:center}
.exam-nav .btn-ghost{flex:0 0 auto}

/* hasil */
.exam-result{text-align:center;padding:40px 26px}
.exam-check{width:76px;height:76px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.exam-check svg{width:38px;height:38px;color:#fff}
.exam-result h2{color:var(--maroon);font-size:1.6rem}
.exam-result p{color:var(--muted);font-weight:600;margin:8px 0}
.exam-score{margin:18px 0 6px;font-family:'Baloo 2'}
.exam-score-num{font-size:3.4rem;font-weight:800;color:var(--orange);line-height:1}
.exam-score-of{font-size:1.4rem;font-weight:700;color:var(--muted)}
.exam-score-detail{font-weight:700}
.exam-noscore{background:var(--yellow-soft);color:var(--maroon);font-weight:700;padding:16px 18px;border-radius:14px;margin-top:18px}

@media(max-width:640px){
  .exam-app{padding:14px 12px 50px}
  .exam-card{padding:22px 18px}
  .exam-qtext{font-size:1.1rem}
}