* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', sans-serif;
 }

 body {
     background: #f7f7f7;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }

 .register-container {
     background: white;
     width: 100%;
     max-width: 360px;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .register-container h2 {
     text-align: center;
     margin-bottom: 24px;
     color: #ee4d2d;
 }

 .input-group {
     margin-bottom: 16px;
 }

 .input-group label {
     font-size: 14px;
     color: #555;
 }

 .input-group input {
     width: 100%;
     padding: 12px;
     margin-top: 6px;
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 16px;
 }

 .register-btn {
     width: 100%;
     background: #ee4d2d;
     color: white;
     padding: 14px;
     font-size: 16px;
     font-weight: bold;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: 0.3s ease;
 }

 .register-btn:hover {
     background: #d64322;
 }

 .error-msg,
 .success-msg {
     font-size: 14px;
     margin-bottom: 16px;
     text-align: center;
 }

 .error-msg {
     color: red;
 }

 .success-msg {
     color: green;
 }

 .login-link {
     margin-top: 16px;
     text-align: center;
     font-size: 14px;
 }

 .login-link a {
     color: #ee4d2d;
     text-decoration: none;
 }

 /*  register*/
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', sans-serif;
 }

 body {
     background: #f7f7f7;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }

 .login-container {
     background: white;
     width: 100%;
     max-width: 360px;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .login-container h2 {
     text-align: center;
     margin-bottom: 24px;
     color: #ee4d2d;
 }

 .input-group {
     margin-bottom: 16px;
 }

 .input-group label {
     font-size: 14px;
     color: #555;
 }

 .input-group input {
     width: 100%;
     padding: 12px;
     margin-top: 6px;
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 16px;
 }

 .login-btn {
     width: 100%;
     background: #ee4d2d;
     color: white;
     padding: 14px;
     font-size: 16px;
     font-weight: bold;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: 0.3s ease;
 }

 .login-btn:hover {
     background: #d64322;
 }

 .error-msg {
     color: red;
     font-size: 14px;
     margin-bottom: 16px;
     text-align: center;
 }

 .register-link {
     margin-top: 16px;
     text-align: center;
     font-size: 14px;
 }

 .register-link a {
     color: #ee4d2d;
     text-decoration: none;
 }