#loginBox {
    width: 420px;

    margin: 80px auto;
    padding: 40px;

    background: rgba(8,8,15,0.92);

    border: 1px solid rgba(255,140,0,0.25);
    border-radius: 14px;

    backdrop-filter: blur(6px);

    box-shadow:
        0 0 25px rgba(255,140,0,0.12);

    text-align: center;
}

.loginTitle {
    font-size: 36px;
    font-weight: bold;

    color: #ff8c00;

    margin-bottom: 10px;

    text-transform: uppercase;
    letter-spacing: 2px;
}

.loginSubTitle {
    color: #d0b08a;
    font-size: 15px;

    margin-bottom: 35px;
}

.loginInput {
    margin-bottom: 18px;
}

.loginInput input {
    width: 100%;
    padding: 14px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,140,0,0.15);
    border-radius: 8px;

    color: #ffffff;
    font-size: 15px;

    box-sizing: border-box;

    transition: 0.2s;
}

.loginInput input::placeholder {
    color: rgba(255,255,255,0.35);
}

.loginInput input:focus {
    outline: none;

    border-color: #ff8c00;

    background: rgba(255,140,0,0.08);

    box-shadow:
        0 0 12px rgba(255,140,0,0.25);
}

.loginButton {
    margin-top: 10px;
}

.loginButton input {
    width: 100%;
    padding: 14px;

    border: none;
    border-radius: 8px;

    background: linear-gradient(
        90deg,
        #ff7b00,
        #ff9d00
    );

    color: #111;
    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.loginButton input:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 18px rgba(255,140,0,0.35);
}