/* ++++ Log in ++++ */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
        body, html { height: 100%; width: 100%; overflow: hidden; }
        .LG-wrapper { display: flex; width: 100vw; height: 100vh; }
        .LG-form-side { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; background: #fff; align-items: center;}
        .LG-role-tabs { display: flex; background: #f0f0f0; border-radius: 8px; margin-bottom: 25px; width: fit-content; padding: 5px;}
        .LG-tab-btn { padding: 10px 20px; border: none; cursor: pointer; background: transparent; font-weight: bold; color: #666; transition: 0.3s; }
        .LG-tab-btn.LG-active { background: #28a745; color: white; border-radius: 6px; }
        .LG-input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; outline: none; }
        .LG-button { width: 100%; padding: 14px; background: #28a745; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 15px; }
                .LG-side-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; 
    background:
linear-gradient(rgba(23, 201, 23, 0.874), rgba(8,163,8,.66), rgba(0,68,0,.71)),
url("../images/USLSschool.jpg");
  background-size: cover;
  background-position: center;}
        .LG-logo-display { width: 30%; height: 30%; }
        .LG-usls-img { width: 70%; height: 25%; }
        .LG-usls-name { 
    font-size: 50px;        
    color: #1956a7;              
    font-weight: 900;            
    text-shadow: 
        1px 1px 0 #0c3b70,
        2px 2px 0 #0c3b70,
        3px 3px 0 #0c3b70,
        4px 4px 0 rgba(0,0,0,0.2);
    transition: all 0.3s ease; }
        #LG-error-container { color: #d93025; background: #f8d7da; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-size: 14px; border: 1px solid #f5c6cb; }


        /* ++++ Sign up ++++ */
        .SU-wrapper { display: flex; width: 100vw; height: 100vh; }
        .SU-form-side { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; align-items: center;}
        .SU-role-selector { display: flex; background: #f0f0f0; border-radius: 8px; margin-bottom: 20px; width: fit-content; padding: 5px; }
        .SU-role-btn { padding: 10px 20px; border: none; cursor: pointer; background: none; font-weight: bold; color: #777; transition: 0.3s; }
        .SU-role-btn.SU-active { background: #28a745; color: white; border-radius: 6px; }
        .SU-input, .SU-select { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 6px; outline: none; }
        .SU-btn { width: 100%; padding: 14px; background: #28a745; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 15px; }
        .SU-side-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; 
    background:
linear-gradient(rgba(23,201,23,.66), rgba(8,163,8,.66), rgba(0,68,0,.71)),
url("../images/USLSschool.jpg");

  background-size: cover;
  background-position: center;}
        .SU-logo-display { width: 45%; height: 45%; }
        .SU-usls-img { width: 70%; height: 20%; }
        .SU-usls-name { color: #2089ba; font-size: 50px; }
        #SU-error-container { background: #f8d7da; color: #721c24; padding: 10px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #f5c6cb; font-size: 14px; }



/* =========================
   LAPTOP (≤1200px)
========================= */
@media (max-width:1200px){

  .LG-form-side,
  .SU-form-side{
    padding:0 5%;
  }

  .LG-usls-name,
  .SU-usls-name{
    font-size:40px;
  }

  .LG-logo-display{ width:40%; height:40%; }
  .SU-logo-display{ width:50%; height:50%; }
}
.LG-usls-img{
    height: 20%;
    width: 70%;
  }
  .LG-logo-display{
    width: 30%;
    height: 30%;
  }


/* =========================
   TABLET (≤992px)
========================= */
@media (max-width:992px){

  .LG-wrapper,
  .SU-wrapper{
    flex-direction:row;
  }

  .LG-side-panel,
  .SU-side-panel{
    height:100%;
  }

  .LG-form-side,
  .SU-form-side{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
  }
  .LG-usls-img{
    height: 20%;
    width: 70%;
  }
  .LG-logo-display{
    width: 40%;
    height: 25%;
  }

  .LG-usls-name,
  .SU-usls-name{
    font-size:44px;
    text-align:center;
  }

  .LG-input,
  .SU-input,
  .SU-select{
    padding:10px;
  }

  .LG-button,
  .SU-btn{
    padding:12px;
  }
}


/* =========================
   PHONE (≤600px)
========================= */
@media (max-width:430px){

  body,html{
    overflow:auto;
  }

  .LG-side-panel,
  .SU-side-panel{
    height:35vh;
    padding:15px;
  }

  .LG-form-side,
  .SU-form-side{
    height:auto;
    padding:20px;
    width:100%;
  }
  .LG-usls-img{
    height: 20%;
    width: 70%;
  }
  .LG-logo-display{
    width: 20%;
    height: 15%;
  }

  .LG-role-tabs,
  .SU-role-selector{
    flex-direction:column;
    width:100%;
  }

  .LG-tab-btn,
  .SU-role-btn{
    width:100%;
    text-align:center;
  }

  .LG-usls-name,
  .SU-usls-name{
    font-size:24px;
  }

  .LG-logo-display,
  .SU-logo-display{
    width:60%;
    height:auto;
  }

  .LG-usls-img,
  .SU-usls-img{
    width:90%;
    height:auto;
  }

  .LG-button,
  .SU-btn{
    font-size:14px;
    padding:10px;
  }
}