* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: "DM Sans", sans-serif;
       min-height: 100vh;
       background:
           radial-gradient(circle at 10% 20%, rgba(117, 151, 91, .18), transparent 30%),
           radial-gradient(circle at 90% 80%, rgba(191, 148, 74, .16), transparent 30%),
           #f4f1e8;
       overflow-x: hidden;
       color: #26372a;
   }

   /* Background circles */
   .circle {
       position: fixed;
       border-radius: 50%;
       filter: blur(1px);
       pointer-events: none;
       animation: float 8s ease-in-out infinite;
   }

   .circle.one {
       width: 300px;
       height: 300px;
       background: rgba(93, 125, 73, .12);
       top: -100px;
       left: -80px;
   }

   .circle.two {
       width: 240px;
       height: 240px;
       background: rgba(180, 137, 66, .12);
       bottom: -80px;
       right: -60px;
       animation-delay: 2s;
   }

   .circle.three {
       width: 120px;
       height: 120px;
       background: rgba(82, 111, 67, .10);
       top: 25%;
       right: 15%;
       animation-delay: 4s;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0) translateX(0);
       }

       50% {
           transform: translateY(-25px) translateX(15px);
       }
   }

   /* Main */
   .login-wrapper {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 30px 20px;
       position: relative;
       z-index: 2;
   }

   .login-box {
       width: 100%;
       max-width: 1050px;
       min-height: 620px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       background: rgba(255, 255, 255, .72);
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
       border: 1px solid rgba(255, 255, 255, .8);
       border-radius: 28px;
       overflow: hidden;
       box-shadow:
           0 30px 80px rgba(40, 58, 42, .16),
           0 10px 30px rgba(40, 58, 42, .08);

       animation: boxShow .8s ease forwards;
   }

   @keyframes boxShow {
       from {
           opacity: 0;
           transform: translateY(35px) scale(.97);
       }

       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }

   /* Left section */
   .brand-section {
       position: relative;
       padding: 55px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       overflow: hidden;

       background:
           linear-gradient(145deg,
               rgba(43, 76, 49, .96),
               rgba(72, 105, 65, .94));
       color: white;
   }

   .brand-section::before {
       content: "";
       position: absolute;
       width: 400px;
       height: 400px;
       border-radius: 50%;
       background: rgba(255, 255, 255, .05);
       right: -180px;
       top: -120px;
   }

   .brand-section::after {
       content: "";
       position: absolute;
       width: 300px;
       height: 300px;
       border-radius: 50%;
       border: 1px solid rgba(255, 255, 255, .08);
       left: -140px;
       bottom: -100px;
   }

   .logo {
       position: relative;
       z-index: 2;
       display: flex;
       align-items: center;
       gap: 15px;
       width: 100%;
   }

   .logo-icon {
       width: 75px;
       height: 75px;
       min-width: 75px;
       border-radius: 15px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, .14);
       border: 1px solid rgba(255, 255, 255, .15);
       overflow: hidden;
   }

   .logo-icon img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       display: block;
   }

   .logo-text {
       font-size: 27px;
       font-weight: 700;
       line-height: 1.2;
   }

   .brand-content {
       position: relative;
       z-index: 2;
   }

   .brand-content h1 {
       font-family: "Playfair Display", serif;
       font-size: clamp(38px, 4vw, 58px);
       line-height: 1.05;
       margin-bottom: 22px;
       font-weight: 600;
   }

   .brand-content h1 span {
       color: #d9bd79;
   }

   .brand-content p {
       max-width: 420px;
       line-height: 1.8;
       color: rgba(255, 255, 255, .78);
       font-size: 15px;
   }

   .features {
       position: relative;
       z-index: 2;
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
   }

   .feature {
       padding: 9px 14px;
       border-radius: 30px;
       background: rgba(255, 255, 255, .09);
       border: 1px solid rgba(255, 255, 255, .12);
       font-size: 12px;
       color: rgba(255, 255, 255, .82);
   }

   /* Right section */
   .form-section {
       padding: 55px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, .62);
   }

   .form-container {
       width: 100%;
       max-width: 390px;
   }

   .form-heading {
       margin-bottom: 35px;
   }

   .form-heading h2 {
       font-family: "Playfair Display", serif;
       font-size: 38px;
       color: #26372a;
       margin-bottom: 8px;
   }

   .form-heading p {
       color: #7b857b;
       font-size: 14px;
   }

   .input-group {
       position: relative;
       margin-bottom: 20px;
   }

   .input-group>i {
       position: absolute;
       left: 17px;
       top: 50%;
       transform: translateY(-50%);
       color: #78906e;
       font-size: 17px;
       z-index: 2;
       transition: .3s;
   }

   .input-group input {
       width: 100%;
       height: 58px;
       border: 1px solid #dfe4dc;
       background: #fafbf8;
       border-radius: 14px;
       padding: 0 48px;
       outline: none;
       font-family: inherit;
       font-size: 14px;
       color: #26372a;
       transition: .3s;
   }

   .input-group input::placeholder {
       color: #a2aaa0;
   }

   .input-group input:focus {
       border-color: #68865e;
       background: white;
       box-shadow: 0 0 0 4px rgba(104, 134, 94, .10);
   }

   .input-group:focus-within>i {
       color: #4d713f;
   }

   .password-toggle {
       position: absolute;
       right: 17px;
       top: 50%;
       transform: translateY(-50%);
       border: none;
       background: none;
       cursor: pointer;
       color: #899289;
       font-size: 17px;
       padding: 5px;
   }

   .password-toggle:hover {
       color: #4d713f;
   }

   .form-options {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin: 5px 0 25px;
       font-size: 13px;
   }

   .remember {
       display: flex;
       align-items: center;
       gap: 8px;
       color: #737c73;
       cursor: pointer;
   }

   .remember input {
       accent-color: #547548;
       width: 15px;
       height: 15px;
   }

   .forgot {
       color: #547548;
       text-decoration: none;
       font-weight: 600;
   }

   .forgot:hover {
       text-decoration: underline;
   }

   .login-btn {
       width: 100%;
       height: 58px;
       border: none;
       border-radius: 14px;
       background: linear-gradient(135deg, #456a3d, #6e8f61);
       color: white;
       font-family: inherit;
       font-size: 15px;
       font-weight: 700;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       box-shadow: 0 12px 25px rgba(69, 106, 61, .20);
       transition: .3s ease;
   }

   .login-btn::before {
       content: "";
       position: absolute;
       width: 0;
       height: 0;
       background: rgba(255, 255, 255, .18);
       border-radius: 50%;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       transition: .5s;
   }

   .login-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 16px 30px rgba(69, 106, 61, .28);
   }

   .login-btn:hover::before {
       width: 400px;
       height: 400px;
   }

   .login-btn span {
       position: relative;
       z-index: 2;
   }

   .divider {
       display: flex;
       align-items: center;
       gap: 15px;
       margin: 28px 0;
       color: #a3aaa2;
       font-size: 12px;
   }

   .divider::before,
   .divider::after {
       content: "";
       height: 1px;
       flex: 1;
       background: #e1e5df;
   }

   .signup {
       text-align: center;
       color: #7b857b;
       font-size: 14px;
   }

   .signup a {
       color: #4e713f;
       font-weight: 700;
       text-decoration: none;
   }

   .signup a:hover {
       text-decoration: underline;
   }

   .secure-text {
       text-align: center;
       margin-top: 28px;
       color: #9aa19a;
       font-size: 11px;
   }

   .secure-text i {
       margin-right: 4px;
   }

   /* Responsive */
   @media (max-width: 850px) {
       .login-box {
           grid-template-columns: 1fr;
           max-width: 550px;
       }

       .brand-section {
           min-height: 360px;
           padding: 40px;
       }

       .brand-content h1 {
           font-size: 42px;
       }

       .form-section {
           padding: 45px 35px;
       }
   }

   @media (max-width: 500px) {
       .login-wrapper {
           padding: 15px;
       }

       .login-box {
           border-radius: 22px;
       }

       .brand-section {
           padding: 30px 25px;
           min-height: 330px;
       }

       .logo {
           font-size: 17px;
       }

       .logo-icon {
           width: 42px;
           height: 42px;
       }

       .brand-content h1 {
           font-size: 35px;
       }

       .brand-content p {
           font-size: 13px;
       }

       .features {
           display: none;
       }

       .form-section {
           padding: 35px 25px;
       }

       .form-heading h2 {
           font-size: 32px;
       }
   }