/* ==================================================
   THEME MUBAH v1.0
   Sistem Ujian Online MUBAH
================================================== */

:root{
  --primary:#11482E;
  --primary-dark:#0B3924;
  --primary-light:#1D6A46;
  --gold:#D7B45A;
  --gold-light:#F2D88E;
  --bg:#F7F8F6;
  --card:#FFFFFF;
  --text:#24332A;
  --muted:#6B7280;
  --border:#E7E7E7;
  --danger:#D32F2F;
  --success:#2E7D32;
  --radius:22px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

body.theme-mubah{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins','Segoe UI',sans-serif;
  background-image:
  radial-gradient(circle at 90% 15%,rgba(215,180,90,.08),transparent 18%),
  radial-gradient(circle at 10% 90%,rgba(17,72,46,.05),transparent 20%);
}

.app-container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.ui-card{
  width:100%;
  max-width:460px;
  background:var(--card);
  border:2px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px;
}

.ui-logo{
  width:110px;
  display:block;
  margin:0 auto 14px;
}

.ui-bismillah{
  text-align:center;
  color:var(--primary);
  font-size:24px;
  margin-bottom:10px;
}

.ui-title{
  text-align:center;
  color:var(--primary);
  font-size:30px;
  font-weight:700;
  margin-bottom:6px;
}

.ui-subtitle{
  text-align:center;
  color:var(--muted);
  font-size:15px;
  margin-bottom:24px;
}

.form-group{
  margin-bottom:18px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:var(--primary);
}

.ui-input{
  width:100%;
  padding:14px 16px;
  border:1px solid #D9D9D9;
  border-radius:14px;
  font-size:16px;
  background:#fff;
  transition:.2s;
  box-sizing:border-box;
}

.ui-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(215,180,90,.18);
}

.password-wrap{
  position:relative;
}

.toggle-pass{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:13px;
  color:var(--primary);
  font-weight:600;
}

.ui-button,
.btn-primary{
  width:100%;
  border:none;
  cursor:pointer;
  padding:15px;
  border-radius:16px;
  background:var(--primary);
  color:#fff;
  font-size:17px;
  font-weight:700;
  transition:.2s;
}

.ui-button:hover,
.btn-primary:hover{
  background:var(--primary-light);
  transform:translateY(-2px);
}

.alert{
  padding:14px;
  border-radius:14px;
  margin-bottom:18px;
  font-weight:600;
  text-align:center;
}

.alert.error{
  background:#FDECEC;
  color:var(--danger);
}

.alert.success{
  background:#EDF8EF;
  color:var(--success);
}

.note{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.game-question{
  background:#fff9eb;
  border:2px solid var(--gold);
  border-radius:18px;
  padding:18px;
  margin-bottom:20px;
  font-weight:600;
}

.game-option{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
  cursor:pointer;
  transition:.2s;
}

.game-option:hover{
  border-color:var(--gold);
  transform:translateY(-1px);
}

.game-option.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.progress-modern{
  height:10px;
  background:#EAEAEA;
  border-radius:20px;
  overflow:hidden;
}

.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--primary));
}

.game-timer{
  display:inline-block;
  background:#FFF4E5;
  color:#A15C00;
  padding:8px 14px;
  border-radius:12px;
  font-weight:700;
}

.result-card,
.leaderboard-card{
  background:#fff;
  border:2px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

.result-title,
.leaderboard-title{
  color:var(--primary);
  text-align:center;
  font-weight:700;
}

.result-score{
  text-align:center;
  color:var(--gold);
  font-size:72px;
  font-weight:800;
}

.leaderboard-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:10px;
}

.leaderboard-item.gold{
  background:#FFF5D8;
}

.leaderboard-item.silver{
  background:#F2F4F7;
}

.leaderboard-item.bronze{
  background:#FBE7D8;
}

.leaderboard-item.me{
  border:2px solid var(--primary);
}

.lb-rank{
  width:28px;
  text-align:center;
  font-weight:700;
}

.lb-content{
  flex:1;
}

.lb-nama{
  font-weight:700;
}

.lb-detail{
  font-size:14px;
  color:var(--muted);
}

footer{
  text-align:center;
  color:var(--muted);
  padding:20px;
}

@media(max-width:600px){

  .ui-card{
    padding:24px;
  }

  .ui-title{
    font-size:26px;
  }

  .ui-subtitle,
  .note,
  .lb-detail,
  .item p{
    font-size:16px;
  }

  .ui-input,
  .ui-button{
    font-size:17px;
  }

  .result-score{
    font-size:60px;
  }

}