body {
    background-color: #0c0c0c;
    /* negro profundo */
    height          : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-family     : 'Segoe UI', sans-serif;
    color           : #ffd700;
    /* dorado */

    margin          : 0;
    padding         : 0;
    overflow        : hidden;
    background-color: #0c0c0c;

}

canvas {
    display : block;
    position: absolute;
    width   : 100%;
    height  : 100vh;
}

.card {
    background-color: #1a1a1a;
    border-radius   : 1rem;
    box-shadow      : 0 0.5rem 1rem rgba(255, 215, 0, 0.2);
    /* dorado sutil */
    border          : 1px solid #ffd700;
}

.card h2 {
    color: #ffd700;
}

.form-label {
    color: #ffd700;
}

.form-floating {
    color: #ffd700;
}

.input-group-text {
    background-color: #0c0c0c;
    color           : #ffd700;
    border          : 1px solid #ffd700;
}

.form-control {
    background-color: #1a1a1a;
    color           : #ffd700;
    border          : 1px solid #ffd700;
}

.form-control:focus {
    background-color: #1a1a1a;
    color           : #ffd700;
    border-color    : #ffcc00;
    box-shadow      : 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
}

.btn-primary {
    background-color: #ffd700;
    border          : none;
    color           : #0c0c0c;
    font-weight     : bold;
    transition      : background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #ffcc00;
    color           : #000;
}

.form-check-label,
a {
    color: #ffd700;
}

a:hover {
    text-decoration: underline;
    color          : #ffcc00;
}

.form-floating input:focus~label {
    color: #007bff;
}

.form-floating input:focus {
    background-color: #f0f8ff;
    border-color    : #007bff;
}