/* -------- base look -------- */
body {
    font-family: Arial, Helvetica, sans-serif;
    background:#060b18;
    color:#eaeff7;
    margin:0;
}

h1 { text-align:center; margin-top:25px; }

.container { max-width:700px; margin:30px auto; }

.card {
    background:#0d1326;
    padding:22px;
    border-radius:14px;
    box-shadow:0 0 18px rgba(0,0,0,.45);
    margin-top:15px;
}

input {
    width:100%;
    padding:10px;
    border-radius:6px;
    border:1px solid #2c3e50;
    background:#0b1020;
    color:#eaeff7;
}

/* -------- tables -------- */
table { width:100%; margin-top:20px; border-collapse: collapse; }
th, td { border-bottom:1px solid #2c3e50; padding:10px; text-align:center; }

/* -------- new button layout -------- */
.button-row {
    display:flex;
    gap:12px;
    margin-top:14px;
}

.button-row button {
    flex:1;
    padding:12px;
    font-size:16px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    transition:0.15s;
}

/* blue — Answer */
button.primary { background:#2f6efc; color:white; }
button.primary:hover { background:#2759d6; }

/* green — Finish */
button.success { background:#39c16c; color:white; }
button.success:hover { background:#2da55a; }
/* ------- select (Mode) ------- */
select {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: 1px solid #2c3e50;
    background: #0b1020;
    color: #eaeff7;
}

select:focus {
    outline: none;
    border-color: #2f6efc;
}
.back-btn {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 600px;

    padding: 12px 14px;
    border-radius: 10px;
    border: none;

    background: #444a6a;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;
    transition: .15s;
}

.back-btn:hover {
    background: #383d57;
}