:root{
    --bg:#f3f3f1;
    --panel:#ffffff;
    --text:#171717;
    --muted:#6b6b6b;
    --line:#d2d2cf;
    --line-dark:#9b9b97;
    --soft:#f7f7f5;
    --focus:#222222;
    --danger:#8f1f1f;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    min-height:100%;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:var(--bg);
}

.login-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.login-card{
    width:min(1120px,100%);
    min-height:620px;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    background:var(--panel);
    border:1px solid var(--line-dark);
    box-shadow:0 12px 36px rgba(0,0,0,.06);
}

.brand-panel{
    padding:48px 54px;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
}

.brand-mark{
    margin:0;
    font-size:48px;
    line-height:1;
    letter-spacing:-1.5px;
    font-weight:700;
}

.brand-subtitle{
    margin:14px 0 34px;
    max-width:520px;
    color:var(--muted);
    font-size:15px;
    line-height:1.5;
}

.languages-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 26px;
    border-top:1px solid var(--line);
}

.language-line{
    min-height:53px;
    display:grid;
    grid-template-columns:42px 1fr;
    align-items:center;
    gap:10px;
    border-bottom:1px solid var(--line);
    font-size:14px;
    line-height:1.3;
}

.language-code{
    color:var(--muted);
    font-family:Consolas,"Courier New",monospace;
    font-size:12px;
    letter-spacing:.6px;
}

.login-panel{
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.login-panel-inner{
    width:100%;
    max-width:360px;
    margin:0 auto;
}

.login-title{
    margin:0 0 8px;
    font-size:25px;
    font-weight:600;
}

.login-intro{
    margin:0 0 28px;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

.form-row{
    margin-bottom:18px;
}

.form-row label{
    display:block;
    margin-bottom:7px;
    font-size:14px;
    font-weight:600;
}

.form-row input{
    display:block;
    width:100%;
    height:46px;
    padding:0 13px;
    border:1px solid var(--line-dark);
    background:#fff;
    color:var(--text);
    font-size:15px;
    outline:none;
}

.form-row input:focus{
    border-color:var(--focus);
    box-shadow:0 0 0 1px var(--focus);
}

.login-button{
    width:100%;
    height:46px;
    margin-top:4px;
    border:1px solid #171717;
    background:#171717;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.login-button:hover{
    background:#303030;
}

.login-error{
    margin:0 0 20px;
    padding:11px 12px;
    border:1px solid #c9a1a1;
    background:#fbf5f5;
    color:var(--danger);
    font-size:14px;
}

.login-footer{
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:12px;
}

@media(max-width:900px){
    .login-shell{
        align-items:flex-start;
        padding:18px;
    }

    .login-card{
        min-height:0;
        grid-template-columns:1fr;
    }

    .brand-panel{
        padding:32px;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .brand-mark{
        font-size:40px;
    }

    .languages-grid{
        grid-template-columns:1fr;
    }

    .login-panel{
        padding:32px;
    }
}

@media(max-width:520px){
    .login-shell{
        padding:0;
    }

    .login-card{
        border-left:0;
        border-right:0;
    }

    .brand-panel,
    .login-panel{
        padding:24px;
    }

    .brand-mark{
        font-size:36px;
    }
}


.brand-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.brand-tagline{
    margin:24px 0 10px;
    font-size:28px;
    line-height:1.25;
    font-weight:600;
    letter-spacing:-.4px;
}

.brand-rule{
    margin-top:34px;
    border-top:1px solid var(--line);
}

.brand-note{
    margin-top:16px;
    color:var(--muted);
    font-size:13px;
}

.ui-language-form{
    display:flex;
    align-items:center;
    gap:8px;
}

.ui-language-form label{
    font-size:12px;
    color:var(--muted);
}

.ui-language-form select{
    height:34px;
    padding:0 30px 0 10px;
    border:1px solid var(--line-dark);
    background:#fff;
    color:var(--text);
    font-size:13px;
}

@media(max-width:640px){
    .brand-top{
        flex-direction:column;
    }

    .brand-tagline{
        font-size:24px;
    }
}


.anfora-footer {
    margin-top: 14px;
    padding: 8px 10px;
    text-align: center;
    font-size: 12px;
    color: #666;
    border-top: 1px solid #ddd;
}

.anfora-footer a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

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