 <style>* {
     box-sizing: border-box;
     font-family: 'Prompt', sans-serif;
 }

 body {
     margin: auto;
     background-color: #f7f7f7;
     min-height: 100vh;
 }

 .image-section {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 24px;
 }

 .image-section img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 .form-section {
     background: #fff;
     padding: 40px 32px;
     max-width: 420px;
     width: 100%;
     border-radius: 12px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     margin: auto;
 }

 .role-buttons {
     display: flex;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 24px;
 }
 .role-btn {
     flex: 1;
     background-color: #fff;
     border: 2px solid #88080B;
     color: #88080B;
     padding: 10px;
     font-weight: bold;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .role-btn:hover,
 .role-btn.active {
     background-color: #88080B;
     color: #fff;
 }

 .login-form {
     display: flex;
     flex-direction: column;
 }

 .form-title {
     font-size: 20px;
     color: #88080B;
     text-align: center;
     margin-bottom: 24px;
 }

 input[type="email"] {
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 6px;
     font-size: 14px;
     margin-bottom: 16px;
     width: 100%;
 }
   .password-wrapper {
       display: flex;
       align-items: stretch;
       width: 100%;
       margin-bottom: 16px;
   }

   .password-wrapper input {
       flex: 1;
       border-radius: 6px 0 0 6px;
       border: 1px solid #ccc;
       padding: 12px;
       font-size: 14px;
   }

   .toggle-btn {
       border-radius: 0 6px 6px 0;
       border: 1px solid #ccc;
       border-left: none;
       background: #f0f0f0;
       padding: 0 16px;
       font-size: 14px;
       cursor: pointer;
       white-space: nowrap;
   }

   .actions {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
   }

   .actions a {
       font-size: 14px;
       color: #88080B;
       text-decoration: none;
   }
        .login-btn {
            background-color: #88080B;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
        }
    
        .bottom-text {
            text-align: center;
            font-size: 14px;
            margin-top: 12px;
        }
    
        .bottom-text a {
            color: #88080B;
            text-decoration: none;
            font-weight: bold;
        }
    
        .msg {
            font-size: 14px;
            margin-top: 10px;
        }
    
        .hidden {
            display: none;
        }
    
@media screen and (max-width: 480px) {
            .form-section {
                padding: 32px 20px;
            }
    
            .role-buttons {
                flex-direction: column;
            }

          .image-section {
              display: none;
          }
          }
    
          </style>