/* General */
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #eef2f3;
  color: #333;
  margin: 0;
  padding: 0;
  text-align: center;
}
a { color: #2b6cb0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navigation / dashboard */
.nav { background: #0b67b3; color: #fff; padding: 14px 10px; }
.nav h2 { margin: 0 0 8px 0; }
.nav ul { list-style: none; padding: 0; margin: 0; }
.nav ul li { display: inline-block; margin-right: 5px; margin-top: 30px; }
.nav ul li a { color: #fff; padding: 8px 12px; background: #1485ff; border-radius: 8px; }

/* Forms and boxes */
.login-body { display:flex; align-items:center; justify-content:center; height:100vh; background: linear-gradient(135deg,#89f7fe 0%, #66a6ff 100%); }
.login-container, .form-box, .quiz-container, .profile-box, .form-container {
  background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin: 20px auto;
}
.login-container { width: 320px; }
.form-box { width: 360px; }

/* Inputs */
input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
  width: 90%; padding: 10px; margin: 8px 0; border-radius: 8px; border: 1px solid #d1d5db;
}

/* Buttons */
button {
  background: #2b6cb0; color: #fff; border: none; padding: 10px 14px; border-radius: 8px; cursor: pointer;
}
button:hover { background: #255a94; }

/* Quiz */
.quiz-container { width: 520px; }
.question-box { text-align: left; padding: 10px; border-left: 4px solid #2b6cb0; background: #f7fbff; border-radius: 6px; }
.form-container { width: 520px; text-align: left; }

/* Back link */
.back-link { display:inline-block; margin-top:12px; }

/* Tables */
.ranking-table, .score-table { width: 90%; margin: 10px auto; border-collapse: collapse; }
.ranking-table th, .ranking-table td, .score-table th, .score-table td { padding: 10px; border: 1px solid #e2e8f0; }
.ranking-table th { background: #2b6cb0; color: #fff; }
.ranking-table tr.highlight { background: #fff7cc; font-weight: bold; }

/* Leaderboard filter */
.leaderboard-filter { margin: 12px auto; width: 90%; text-align: left; }
#filterSelect { padding: 6px 10px; border-radius: 6px; border: 1px solid #cbd5e0; }

/* Profile */
.container { max-width: 820px; margin: 20px auto; padding: 20px; text-align: center; }
.profile-box { width: 700px; text-align: left; }

/* Timer */
.timer { font-size: 22px; font-weight: bold; color: #e53935; margin-bottom: 8px; }
.quiz-container{
    max-width:500px;
    margin:20px auto;
    padding:20px;
    background:#ffffff;
    border-radius:15px;
    box-shadow:0 3px 15px rgba(0,0,0,0.15);
}

.quiz-container h2{
    text-align:center;
    margin-bottom:20px;
    color:#2c3e50;
}

.setup-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-weight:bold;
    margin-bottom:6px;
    color:#333;
}

.setup-form input,
.setup-form select{
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #ccc;
    border-radius:10px;
    font-size:16px;
}

.range-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.range-box input{
    flex:1;
}

.range-box span{
    font-weight:bold;
}

.btn-start{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:#27ae60;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}

.btn-start:hover{
    background:#219150;
}

.btn-back{
    display:block;
    text-align:center;
    text-decoration:none;
    padding:12px;
    border-radius:10px;
    background:#e0e0e0;
    color:#333;
}

.btn-back:hover{
    background:#d0d0d0;
}

/* Khusus HP */
@media (max-width:600px){

    body{
        margin:0;
        padding:10px;
        background:#f5f6fa;
    }

    .quiz-container{
        width:100%;
        margin:0;
        border-radius:12px;
        padding:15px;
    }

    .quiz-container h2{
        font-size:22px;
    }

    .setup-form input,
    .setup-form select{
        font-size:18px;
        min-height:48px;
    }

    .btn-start,
    .btn-back{
        min-height:50px;
        font-size:18px;
    }
}

.info-card{
    background:linear-gradient(135deg,#3498db,#2980b9);
    color:white;
    text-align:center;
    padding:20px;
    border-radius:15px;
    margin-bottom:20px;
    box-shadow:0 4px 15px rgba(0,0,0,0.2);
}

.info-title{
    font-size:28px;
    font-weight:900;
    margin-bottom:10px;
}

.info-range{
    font-size:34px;
    font-weight:900;
    margin:5px 0;
}

.info-symbol{
    font-size:42px;
    font-weight:900;
    margin:5px 0;
}

.info-footer{
    font-size:22px;
    font-weight:700;
    margin-top:10px;
}

.setup-form label{
    font-size:20px;
    font-weight:800;
    margin-bottom:8px;
}

.setup-form input,
.setup-form select{
    font-size:22px;
    font-weight:700;
    padding:14px;
    min-height:55px;
}

.range-box span{
    font-size:22px;
    font-weight:900;
}

.btn-start{
    font-size:24px;
    font-weight:900;
    min-height:60px;
}

.btn-back{
    font-size:22px;
    font-weight:800;
    min-height:55px;
}

@media (max-width:600px){

    .info-title{
        font-size:24px;
    }

    .info-range{
        font-size:30px;
    }

    .info-symbol{
        font-size:40px;
    }

    .info-footer{
        font-size:20px;
    }

    .setup-form label{
        font-size:18px;
    }

    .setup-form input,
    .setup-form select{
        font-size:20px;
    }
}

.top-card{
    background:#3498db;
    color:white;
    border-radius:15px;
    padding:15px;
    margin-bottom:15px;
    text-align:center;
}

.soal-counter{
    font-size:28px;
    font-weight:900;
}

.jenis-soal{
    font-size:22px;
    font-weight:700;
    margin-top:5px;
}

.timer-box{
    font-size:26px;
    font-weight:900;
    margin-top:10px;
}

.progress{
    height:12px;
    background:#dcdcdc;
    border-radius:20px;
    margin-top:15px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:#2ecc71;
}

.question-card{
    background:white;
    border-radius:20px;
    padding:25px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    margin-bottom:15px;
}

.angka-soal{
    font-size:44px;
    font-weight:900;
    color:#2c3e50;
}

.jawaban-input{
    width:100%;
    box-sizing:border-box;
    height:75px;
    font-size:42px;
    font-weight:900;
    text-align:center;
    border:3px solid #3498db;
    border-radius:15px;
}

.btn-kirim{
    width:100%;
    margin-top:15px;
    height:65px;
    font-size:24px;
    font-weight:900;
    border:none;
    border-radius:15px;
    background:#27ae60;
    color:white;
}

.menu-bawah{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.btn-ulang{
    flex:1;
    height:55px;
    font-size:20px;
    font-weight:800;
}

.btn-batal{
    flex:1;
    height:55px;
    line-height:55px;
    text-align:center;
    text-decoration:none;
    background:#e74c3c;
    color:white;
    border-radius:10px;
    font-size:20px;
    font-weight:800;
}

.score-box{
    margin-top:15px;
    text-align:center;
    font-size:24px;
    font-weight:900;
}

@media(max-width:600px){

    .quiz-container{
        padding:10px;
    }

    .angka-soal{
        font-size:72px;
    }

    .jawaban-input{
        font-size:46px;
        height:80px;
    }

    .soal-counter{
        font-size:30px;
    }

    .timer-box{
        font-size:30px;
    }
}