body{
    display:flex;
    margin:0px;
    padding:0px;
    min-height:100vh;
    color:var(--background);
    box-sizing:border-box;
}
.error{
    border: 1px solid var(--red) !important;
    animation: shake 0.2s;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
.error::placeholder{
    color:var(--red) !important;
}

/* LEFT */
.logo-icon-xl{
    box-shadow: 3px 3px 0 black;
}
.login_left-panel{
    flex-grow:1;
    background-color:var(--primary-700);
    padding:48px;
    border-right: 2px solid var(--black);
    position: relative;
    overflow: hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.login_left-panel .copyright, .login_left-panel .copyright > a{
    color:rgb(255,255,255,0.3);
}
.login_left-panel .copyright > a{
    color:rgb(255,255,255,0.3);
    border-color: rgb(255,255,255,0.3);
}

/* background nba fm */
.login_left-panel::before {
  content: 'NBA FM';
  position: absolute;
  bottom: -40px; 
  left: -20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 200px;
  font-weight: 900;
  color: rgba(0,0,0,0.12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -4px;
}

/* logo */
.login_left-logo{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: auto;
}
.logo-name{
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px; 
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.login_left-content{
    position:relative;
    margin-bottom:0;
}

/* feature */
.login_features{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.login_feature{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background-color:rgb(255,255,255, 0.07);
    border-radius:8px;
    border: 1px solid rgb(255,255,255, 0.1);
}
.login_feature-icon{
    font-size: 16px; 
    flex-shrink: 0;
}
.login_feature-text{
    font-size: 12px; 
    font-weight: 600; 
    color: rgba(255,255,255,0.75);
}

/* extra */
.login_pill{
    font-size: 10px; 
    font-weight: 700;
    letter-spacing: 0.18em; 
    text-transform: uppercase;
    color:var(--accent);
    border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding: 4px 12px;
    border-radius:12px;
    width:fit-content;
    margin-bottom: 20px;
}
.login_title{
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 56px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}
.login_title > span{
    color:var(--accent);
}
.login_desc{
    font-size: 14px;
    color: var(--gray-light);
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 36px;
}


/* RIGHT */
.btn-black{
    padding: 13px;
    font-size: 14px;
    margin-bottom: 20px;
}
.btn-white{
    padding: 12px;
    font-size: 13px;
}
.login_right-panel{
    flex-grow:1;
    padding:48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
}
.login_right-panel .copyright, .login_right-panel .copyright > a, .login_form-desc, .login_label-title{
    color:var(--gray-mid);
}
.login_right-panel .copyright{
    text-align:center;
}
.login_right-panel .copyright > a{
    border-color:var(--gray-mid);
}

/* extra */
.login_data{
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.login_form-title{
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    color:var(--black);
}
.login_form-desc{
    font-size: 13px;
    margin-bottom: 36px;
    font-weight: 400;
}
.login_form-credentials{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.login_credential-container{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom: 16px;
}
.login_label-title{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:var(--gray-mid);
}
.login_credential{
    font-size: 14px;
    padding:11px 14px;
    border-radius: 8px;
    border:2px solid var(--black);
    background-color: var(--background-card);
    outline:none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login_credential:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.login_credential::placeholder{
    color:var(--gray-light);
}
.btn-white{
    color:var(--black);
}
#form-submit:disabled, #btn-change-action:disabled{
    opacity: 0.8;
    pointer-events: none;
    background-color:var(--gray-dark);
    box-shadow:none;
}
#form-submit:disabled:hover, #btn-change-action:disabled:hover{
    box-shadow:unset;
    transform:none;
    background-color:var(--gray-dark);
}