body{
    background-color:#fff
}
#auth{
    height:100vh;
    overflow-x:hidden
}
#auth #auth-right{
    /* Identidade DRDiM: navy petroleo */
    background:url(/assets/images/img123.jpg),linear-gradient(100deg,#0d1929,#132243);
    background-size: cover;
    background-position: center;
    height: 100%;
    height:100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
}
#auth #auth-right::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(13,25,41,.55) 0%, rgba(13,25,41,.82) 100%);
    z-index:0;
}

/* ---- Painel de marca (DRDiM) ---- */
#auth #auth-right .auth-panel{
    position:relative; z-index:1;
    width:100%; max-width:460px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--ds-radius-lg, 16px);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    padding:34px 32px;
    color:#fff;
    box-shadow:0 24px 60px rgba(2,6,23,.35);
}
#auth #auth-right .auth-panel-brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:.4px; font-size:1.05rem;
}
#auth #auth-right .auth-panel-brand img{ width:34px; height:34px; }
#auth #auth-right .auth-panel-title{
    margin:20px 0 14px;
    font-size:1.5rem; line-height:1.3; font-weight:700; letter-spacing:-.01em;
    color:#fff;
}
#auth #auth-right .auth-panel-rotate{
    display:flex; align-items:center; gap:9px;
    min-height:24px; margin:0 0 22px;
    font-size:.92rem; color:var(--ds-brand-400, #00ff88);
}
#auth #auth-right .auth-panel-rotate i{ font-size:18px; flex:0 0 auto; }
#auth #auth-right .auth-panel-rotate #authRotate{
    transition:opacity .25s ease, transform .25s ease;
}
#auth #auth-right .auth-panel-rotate #authRotate.is-out{
    opacity:0; transform:translateY(4px);
}
#auth #auth-right .auth-panel-list{
    list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px;
}
#auth #auth-right .auth-panel-list li{
    display:flex; align-items:flex-start; gap:10px;
    font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.9);
}
#auth #auth-right .auth-panel-list li i{
    color:var(--ds-brand-400, #00ff88); font-size:18px; flex:0 0 auto; margin-top:1px;
}
#auth #auth-right .auth-panel-cta{ display:flex; flex-wrap:wrap; gap:10px; }
#auth #auth-right .auth-btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 16px; border-radius:var(--ds-radius-pill, 999px);
    font-size:.86rem; font-weight:600; text-decoration:none;
    color:#fff; border:1px solid rgba(255,255,255,.28);
    transition:transform .15s ease, background .15s ease, filter .15s ease;
}
#auth #auth-right .auth-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.10); }
#auth #auth-right .auth-btn-solid{
    background:var(--ds-gradient, linear-gradient(135deg,#00ff88,#00d4ff));
    color:#04231a; border-color:transparent;
}
#auth #auth-right .auth-btn-solid:hover{ filter:brightness(1.05); background:var(--ds-gradient, linear-gradient(135deg,#00ff88,#00d4ff)); }
#auth #auth-right .auth-panel-foot{
    display:block; margin-top:22px;
    font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.45);
}
@media (prefers-reduced-motion: reduce){
    #auth #auth-right .auth-panel-rotate #authRotate{ transition:none; }
}
@media screen and (max-height: 720px){
    #auth #auth-right .auth-panel{ padding:26px 26px; }
    #auth #auth-right .auth-panel-title{ font-size:1.3rem; margin:16px 0 12px; }
    #auth #auth-right .auth-panel-list{ gap:8px; margin-bottom:20px; }
}
#auth #auth-left{
    padding:5rem 8rem;
    height: 100%;
}
#auth #auth-left .auth-title{
    font-size:2rem;    
    margin-bottom: 0;
}
#auth #auth-left .auth-subtitle{
    color:#a8aebb;
    font-size:1.2rem;
    line-height:2.5rem
}
#auth #auth-left .auth-logo{
    margin-bottom:4rem;
    text-align: center;
    position: relative;
}
#auth #auth-left .auth-logo img{
   height: 100px;
   border-radius: 50px;
   width: 100px;
   box-shadow: #0f3178 0px 0px 20px 0px;
}
@media screen and (max-width:767px){
    #auth #auth-left{
        padding:5rem
    }
}
@media screen and (max-width:576px){
    #auth #auth-left{
        padding:5rem 3rem
    }
}
body.theme-dark #auth-right{
    background:linear-gradient(90deg,#0d1929,#132243)
}