.puzzle-form,
.puzzle-dashboard,
.leaderboard {
    background: #1e1e2f;
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: 350px;
    margin: 20px auto;
    text-align: center;
}

/* Login form inputs */
.puzzle-form input,
.puzzle-form button {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    border: none;
}

.puzzle-form button {
    background: #6c63ff;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

.puzzle-form button:hover { background: #574fd6; }

/* FIX: error message was unstyled */
.puzzle-error {
    color: #ff6b6b;
    margin: 5px 0 10px;
    font-size: 14px;
}

/* Personal stats block */
.puzzle-stats {
    background: #2a2a3d;
    border-radius: 8px;
    padding: 10px 15px;
    margin: 10px 0 15px;
    text-align: left;
}

.puzzle-stats p { margin: 6px 0; font-size: 14px; }

/* Tables — shared */
.leaderboard table,
.puzzle-dashboard table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.leaderboard th,  .leaderboard td,
.puzzle-dashboard th, .puzzle-dashboard td {
    padding: 8px 10px;
    border-bottom: 1px solid #444;
    font-size: 14px;
}

.leaderboard th,
.puzzle-dashboard th {
    background: #2a2a3d;
    font-weight: 600;
}

/* FIX: logout link was unstyled — looked broken */
.puzzle-logout {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    background: #444;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}

.puzzle-logout:hover { background: #666; }

/* wp_login_form() styling — match plugin theme */
#puzzle-login-form p { margin: 10px 0; text-align: left; }

#puzzle-login-form label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #ccc;
}

#puzzle-login-form input[type="text"],
#puzzle-login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    box-sizing: border-box;
    font-size: 14px;
}

#puzzle-login-form input[type="submit"] {
    width: 100%;
    padding: 10px;
    background: #6c63ff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    margin-top: 8px;
}

#puzzle-login-form input[type="submit"]:hover { background: #574fd6; }

#puzzle-login-form .forgetmenot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #aaa;
}
