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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    background:
    radial-gradient(circle at top center,
        #243340 0%,
        #1c2a34 40%,
        #16232d 100%);
    color:#c8d3da;
}

.login-wrapper{
    width:360px;
    margin-top:100px;
    text-align:center;
}

.logo{
    font-size:28px;
    font-weight:600;
    color:#3d76c7;
    letter-spacing:-0.5px;
    margin-bottom:25px;
    line-height:1.2;
    word-wrap:break-word;
    overflow-wrap:break-word;
    max-width:100%;
    padding:0 10px;
}

.input-group{
    display:flex;
    height:48px;
    margin-bottom:10px;
    border:1px solid rgba(200,220,230,.45);
    border-radius:4px;
    overflow:hidden;
    background:rgba(0,0,0,.08);
}

.icon-box{
    width:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(200,220,230,.35);
    color:#d7d7d7;
    background:rgba(255,255,255,.02);
}

.input-group input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    color:#d5e2e8;
    font-size:16px;
    padding:0 15px;
}

.input-group input::placeholder{
    color:#a9bbc5;
}

.btn{
    width:100%;
    height:48px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    background:#0076b8;
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    margin-top:2px;
    transition:.2s;
    border:1px solid #18a4ea;
}

.btn:hover{
    background:#0088d1;
}

.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.footer{
    margin-top:20px;
    font-size:13px;
    color:#93a5af;
    line-height:1.6;
}

.footer a{
    color:#00a4ff;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

.footer .imprint,
.footer .privacy{
    color:#8b99a2;
    cursor:default;
}

.separator{
    color:#7c8d97;
    padding:0 4px;
}

#errorMessage {
    background: #f8d7da;
    color: #721c24;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 10px;
    animation: fadeIn 0.3s ease;
}

#errorMessage.success {
    background: #d4edda;
    color: #155724;
    border-left: 3px solid #28a745;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive for long domain names */
@media (max-width: 480px) {
    .login-wrapper {
        width: 320px;
        margin-top: 80px;
    }
    .logo {
        font-size: 24px;
    }
    .footer {
        font-size: 11px;
    }
}