*{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:Segoe UI, sans-serif;
    }

    body{
        background:#f1f3f6;
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#1f2937;
    }

    .auth-card{
        width:360px;
        background:white;
        padding:32px;
        border-radius:14px;
        box-shadow:
            0 4px 12px rgba(0,0,0,.08),
            0 1px 2px rgba(0,0,0,.06);
    }

    .auth-title{
        font-size:28px;
        margin-bottom:24px;
        font-weight:600;
        color:#111827;
    }

    .form-group{
        margin-bottom:18px;
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    label{
        font-size:18px;
        font-weight:600;
        color:#4b4b4b;
    }

    select,
    input{
        width:100%;
        height:42px;
        border:1px solid #d1d5db;
        border-radius:8px;
        padding:0 12px;
        font-size:14px;
        background:white;
        transition:.15s;
    }

    select:focus,
    input:focus{
        outline:none;
        border-color:#2563eb;
        box-shadow:0 0 0 3px rgba(37,99,235,.15);
    }

    #btnGate{
        width:100%;
        height:44px;
        border:none;
        border-radius:8px;
        background:#2563eb;
        color:white;
        font-size:15px;
        font-weight:600;
        cursor:pointer;
        transition:.15s;
        margin-top:8px;
    }

    #btnGate:hover{
        background:#1d4ed8;
    }

    #btnGate:active{
        transform:scale(.99);
    }