
:root {
    --bt-red: #e21d34;
    --bt-red-bright: #ff1f3c;
    --bt-red-deep: #671523;
    --bt-navy: #07111f;
    --bt-ink: #101828;
    --bt-muted: #667085;
    --bt-border: #d9e2ec;
    --bt-card: rgba(255,255,255,.96);
    --bt-shadow: 0 32px 72px rgba(15, 23, 42, .12);
}
*{box-sizing:border-box;}
html,body{min-height:100%;}
body.login-body{
    margin:0;
    min-height:100dvh;
    overflow-x:hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color:var(--bt-ink);
    background:
        radial-gradient(circle at top right, rgba(226,29,52,.08), transparent 24rem),
        radial-gradient(circle at bottom left, rgba(7,17,31,.05), transparent 28rem),
        linear-gradient(135deg, #f8fbff 0%, #f1f5f9 50%, #f8fbff 100%);
}
button,input{font:inherit;}
a{text-decoration:none;color:inherit;}
.bt-auth-shell{
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(520px, 1.06fr) minmax(420px, .94fr);
    overflow:hidden;
}
.bt-auth-hero{
    min-height:100dvh;
    background: url('../img/login/belsa-login-hero.png') center center / cover no-repeat;
}
.bt-auth-panel{
    min-width:0;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px clamp(24px, 4vw, 64px);
    position:relative;
}
.bt-auth-panel::before{
    content:'';
    position:absolute;
    width:32rem;height:32rem;
    right:-20rem;top:-14rem;border-radius:50%;
    background:rgba(226,29,52,.07);
}
.bt-auth-card{
    position:relative;z-index:1;
    width:min(100%, 520px);
    padding:clamp(28px, 3.6vw, 50px);
    border-radius:32px;
    background:var(--bt-card);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:var(--bt-shadow);
    backdrop-filter:blur(14px);
}
.bt-auth-logo-area{display:flex;justify-content:center;margin-bottom:20px;}
.bt-auth-logo{width:min(250px,72%);height:auto;object-fit:contain;}
.bt-auth-header{text-align:center;margin-bottom:34px;}
.bt-auth-header h1{margin:0 0 10px;font-size:clamp(30px,2.1vw,46px);line-height:1.08;font-weight:900;letter-spacing:-.04em;color:#111827;}
.bt-auth-header p{margin:0;font-size:17px;line-height:1.5;color:#667085;}
.bt-auth-form{display:grid;gap:22px;}
.bt-field{display:grid;gap:10px;}
.bt-field>span:first-child{font-size:14px;font-weight:800;color:#233247;}
.bt-input-shell{min-height:62px;display:flex;align-items:center;border-radius:16px;border:1px solid var(--bt-border);background:#fff;box-shadow:0 1px 0 rgba(15,23,42,.03);transition:.18s ease;}
.bt-input-shell:focus-within{border-color:rgba(226,29,52,.5);box-shadow:0 0 0 4px rgba(226,29,52,.10),0 12px 28px rgba(15,23,42,.06);transform:translateY(-1px);}
.bt-input-shell>svg{width:22px;height:22px;margin-left:18px;flex:0 0 auto;fill:#7b8798;}
.bt-input-shell input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 16px;
    font-size: 16px;
    color: #152033;
    font-weight: 600;
    height: stretch;
    margin-right: 10px;
}
.bt-input-shell input::placeholder{color:#9aa5b1;font-weight:500;}
.bt-password-toggle{width:44px;height:44px;margin-right:8px;border:0;background:transparent;border-radius:12px;display:grid;place-items:center;color:#64748b;cursor:pointer;}
.bt-password-toggle svg{width:22px;height:22px;fill:currentColor;}
.bt-form-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:-4px;}
.bt-check{display:inline-flex;align-items:center;gap:10px;color:#667085;font-size:15px;}
.bt-check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--bt-red);}
.bt-link{color:#d51f31;font-size:14px;font-weight:800;}
.bt-submit{min-height:62px;border:0;border-radius:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:18px;font-weight:900;color:#fff;background:linear-gradient(100deg,var(--bt-red-bright) 0%,var(--bt-red) 42%,#111827 100%);box-shadow:0 18px 36px rgba(226,29,52,.22);transition:transform .18s ease,box-shadow .18s ease;}
.bt-submit:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(226,29,52,.28);}
.bt-submit svg{width:22px;height:22px;fill:currentColor;}
.bt-help-card{margin-top:28px;padding:18px;border-radius:18px;border:1px solid var(--bt-border);background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;}
.bt-help-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#f3f6fb;color:#122033;}
.bt-help-icon svg{width:24px;height:24px;fill:currentColor;}
.bt-help-card strong{display:block;font-size:14px;font-weight:900;color:#263449;}
.bt-help-card small{display:block;margin-top:2px;font-size:13px;color:#64748b;}
.bt-help-link{color:#d51f31;font-weight:900;font-size:14px;}
.bt-validation-box{padding:12px 14px;border-radius:14px;background:#fff1f2;border:1px solid #fecdd3;color:#be123c;font-size:13px;font-weight:700;}
.bt-validation-list{margin:0;padding-left:18px;}
@media (max-width: 1180px){
    .bt-auth-shell{grid-template-columns:minmax(460px, 1fr) minmax(390px, .92fr);}    
    .bt-auth-card{width:min(100%, 500px);} 
}
@media (max-width: 900px){
    body.login-body{background:#f4f7fb;}
    .bt-auth-shell{display:block;min-height:100dvh;}
    .bt-auth-hero{display:none;}
    .bt-auth-panel{min-height:100dvh;padding:16px;}
    .bt-auth-panel::before{display:none;}
    .bt-auth-card{width:100%;max-width:520px;margin:0 auto;padding:24px 18px 20px;border-radius:24px;}
    .bt-auth-logo{width:min(220px,72%);}
    .bt-auth-header{margin-bottom:24px;}
    .bt-auth-header h1{font-size:22px;}
    .bt-auth-header p{font-size:15px;}
    .bt-help-card{grid-template-columns:auto 1fr;}
    .bt-help-link{grid-column:2;}
}
@media (max-width: 520px){
    .bt-input-shell{min-height:56px;border-radius:14px;}
    .bt-form-row{align-items:flex-start;flex-direction:column;}
    .bt-submit{min-height:58px;font-size:17px;}
}
