:root {
   color-scheme: light;
   --page-gradient-start: #e3e7f6;
   --page-gradient-end: #cdd5eb;
   --card-bg: #f4ead7;
   --card-border: rgba(255, 255, 255, 0.6);
   --card-shadow: 0 32px 60px rgba(120, 132, 186, 0.18);
   --brand-dark: #1f2433;
   --brand-accent: #38634a;
   --brand-highlight: #f57f42;
   --input-bg: #fff;
   --input-border: #ced4da;
   --input-focus-border: #38634a;
   --input-focus-shadow: 0 0 0 0.2rem rgba(56, 99, 74, 0.25);
   --input-placeholder: #6c757d;
   --button-bg: #2f3e31;
   --button-hover: #263326;
   --muted-text: #6f6b5d;
   --social-bg: #f6efe2;
   --social-text: #353628;
   --error-color: #dc3545;
   --success-color: #28a745;
   font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }

 /* Custom Scrollbar Styles */
 ::-webkit-scrollbar {
   width: 12px;
 }

 ::-webkit-scrollbar-track {
   background: var(--page-gradient-end);
   /* #f4ead7 */
   border-radius: 6px;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--page-gradient-end);
   /* #f6efe2 */
   border-radius: 6px;
   border: 2px solid var(--card-bg);
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #e8dfd0;
   /* Slightly darker shade for hover effect */
 }

 ::-webkit-scrollbar-corner {
   background: var(--page-gradient-end);
 }

 /* Firefox Scrollbar */
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--brand-accent) var(--page-gradient-end);
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   height: 100%;
   margin: 0;
 }

 .page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   color: var(--brand-dark);
   background-size: cover;
   padding: 60px 30px;
   background: linear-gradient(145deg, var(--page-gradient-start), var(--page-gradient-end));
 }

 .card {
   width: 80%;
   max-width: 1250px;
   background: var(--card-bg);
   border-radius: 24px;
   box-shadow: var(--card-shadow);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   margin: 0px auto;
 }

 .card__nav {
   display: flex;
   justify-content: space-between;
   background: var(--card-bg);
   margin-left: -1px;
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 4px;
   font-weight: 600;
   font-size: 29px;
   flex-direction: column;
 }

 .brand__mark {
   width: 220px;
   height: 76px;
 }

 .brand__name {
   color: var(--brand-dark);
   letter-spacing: 0.02em;
 }

 .brand__name span {
   color: var(--brand-highlight);
   margin-left: 4px;
 }

 .card__body {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
   gap: 40px;
   padding: 60px 30px;
 }

 .login {
   width: 50%;
   display: flex;
   flex-direction: column;
   gap: 12px;
       max-height: 100%;
       justify-content: center;
 }

 .welcm_text h2 {
   font-size: 22px;
   font-weight: 700;
   color: var(--brand-dark);
   margin: 10px 0px;
 }
  .welcm_text p {
   font-size: 14px;
   color: var(--brand-dark);
   margin-bottom: 10px;
 }

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

 .field {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 10px;
 }

 label {
   font-size: 15px;
   font-weight: 600;
   color: var(--brand-dark);
   margin-bottom: 4px;
 }

 .input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
 }

 input[type="text"],
 input[type="password"] {
   width: 100%;
   height: 50px;
   padding: 12px 45px 12px 16px;
   border-radius: 8px;
   border: 1px solid var(--input-border);
   background-color: var(--social-bg);
   color: var(--brand-dark);
   font-size: 16px;
   font-family: inherit;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 input::placeholder {
   color: var(--input-placeholder);
   opacity: 1;
 }

 input:focus {
   outline: none;
   border-color: var(--input-focus-border);
   box-shadow: var(--input-focus-shadow);
 }

 .toggle-password {
   position: absolute;
   right: 16px;
   cursor: pointer;
   font-size: 18px;
   user-select: none;
   color: var(--input-placeholder);
   background: none;
   border: none;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
 }

 .toggle-password:hover {
   color: var(--brand-dark);
 }

 .button {
   border: none;
   border-radius: 8px;
   background-color: var(--button-bg);
   color: #f5f1ea;
   font-size: 16px;
   font-weight: 600;
   padding: 14px;
   cursor: pointer;
   transition: background-color 0.15s ease;
   height: 50px;
   margin-top: 15px;
 }

 .button:hover,
 .button:focus {
   background-color: var(--button-hover);
 }

 .form__links {
   display: flex;
   justify-content: flex-end;
   margin-top: 20px;
 }

 .form__link {
   color: var(--brand-accent);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
 }

 .form__link:hover,
 .form__link:focus {
   text-decoration: underline;
 }

 .visual {
   display: flex;
   justify-content: center;
   max-width: fit-content;
   width: 48%;
       max-height: 100%;
 }

 .visual__frame {
   margin: 0;
   width: 100%;
 }

 .visual__image {
   width: 100%; 
   height: 100%;
   display: block;
   border-radius: 28px;
   box-shadow: 0 24px 50px rgba(130, 120, 100, 0.18);
 }

 .error-message {
   color: var(--error-color);
   font-size: 0.85rem;
   margin-top: 4px;
   display: block;
 }

 input.invalid {
   border-color: var(--error-color);
 }

 input.valid {
   border-color: var(--success-color);
 }

 @media (max-width: 1440px) {
   .page {
     padding: 30px;
   }
   .card {
   width: 90%;
  }
   .card__body {
     padding: 30px 30px 60px 30px;
   }
 }
  @media (max-width: 1100px) {
 
   .card {
   width: 95%;
  }
   
 }

 @media (max-width: 1024px) {
   .login {
     width: 50%;
   }

   .visual {
     width: 48%;
   }
 }

 @media (max-width: 992px) {
   .card__body {
     flex-direction: column;
     text-align: center;
   }
.card {
   width: 80%;
  }
   .login {
     align-items: center;
     width: 100%;
   }

   .form,
   .form__links {
     width: min(400px, 100%);
   }

   label {
     text-align: left;
   }

   .form__links {
     justify-content: center;
   }

   .visual {
     width: min(400px, 100%);
     margin: 0px auto;
   }
 }

 @media (max-width: 600px) {
   .card {
     width: 100%;
   }

   .card__nav {
     flex-direction: column;
     gap: 18px;
   }

   .card__body {
     padding: 30px 20px 40px 20px;
     gap: 48px;
   }


   .form,
   .form__links {
     width: 100%;
   }

   .field {
     margin-bottom: 10px;
   }

   .login {
     gap: 18px;
   }
 }

 @media (max-width: 490px) {
   .page {
     padding: 30px 20px;
   }
   
   .card__body {
     gap: 35px;
     padding: 20px 20px 40px 20px;}
   .welcm_text p{
    margin-bottom: 20px;
   }

   .login {
     gap: 8px;
   }

   .card {
     width: 100%;
   }

 }