.login-page {
   margin: 0;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px 18px;
   color: #1f2a44;
   background:
      radial-gradient(
         circle at top left,
         rgba(255, 214, 153, 0.9),
         transparent 34%
      ),
      radial-gradient(
         circle at bottom right,
         rgba(95, 166, 255, 0.2),
         transparent 28%
      ),
      linear-gradient(135deg, #fff9ef 0%, #fffefb 48%, #eef4ff 100%);
   position: relative;
   overflow: hidden;
}

.login-page::before,
.login-page::after {
   content: "";
   position: fixed;
   border-radius: 999px;
   pointer-events: none;
   filter: blur(12px);
}

.login-page::before {
   top: -120px;
   left: -60px;
   width: 280px;
   height: 280px;
   background: rgba(255, 184, 107, 0.3);
}

.login-page::after {
   right: -80px;
   bottom: -120px;
   width: 340px;
   height: 340px;
   background: rgba(36, 38, 93, 0.14);
}

.login-page .container {
   width: min(1120px, 100%);
   margin-top: 0;
   padding: 0;
   background: rgba(255, 255, 255, 0.72);
   border: 1px solid rgba(255, 255, 255, 0.78);
   border-radius: 32px;
   box-shadow: 0 24px 80px rgba(31, 42, 68, 0.16);
   backdrop-filter: blur(12px);
   overflow: hidden;
   display: grid;
   grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 0.9fr);
   position: relative;
   z-index: 1;
}

.brand-panel {
   position: relative;
   padding: 20px 20px;
   background:
      linear-gradient(
         160deg,
         rgba(255, 255, 255, 0.9),
         rgba(255, 244, 227, 0.78)
      ),
      url("/assets/image/_0017.svg") no-repeat right -40px bottom -20px / 60%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 36px;
   overflow: hidden;
   isolation: isolate;
}

.brand-visual {
   position: absolute;
   top: 105px;
   right: 34px;
   bottom: 34px;
   width: min(40%, 320px);
   border-radius: 34px;
   z-index: 0;
   box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 -40px 60px rgba(255, 248, 236, 0.5);
}

.brand-visual::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background:
      linear-gradient(
         180deg,
         rgba(255, 255, 255, 0.28),
         rgba(255, 255, 255, 0.08)
      ),
      repeating-linear-gradient(
         0deg,
         rgba(181, 131, 71, 0.08) 0 2px,
         transparent 2px 22px
      ),
      repeating-linear-gradient(
         90deg,
         rgba(181, 131, 71, 0.07) 0 2px,
         transparent 2px 46px
      ),
      repeating-linear-gradient(
         90deg,
         transparent 0 23px,
         rgba(181, 131, 71, 0.07) 23px 25px,
         transparent 25px 46px
      );
   opacity: 0.5;
}

.brand-panel::after {
   content: "";
   position: absolute;
   inset: 24px 24px auto auto;
   width: 110px;
   height: 110px;
   border-radius: 28px;
   background: linear-gradient(
      145deg,
      rgba(255, 187, 87, 0.18),
      rgba(255, 255, 255, 0)
   );
}

.brand-copy {
   max-width: min(430px, 80%);
   position: relative;
   z-index: 1;
}

.brand-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.72);
   color: #ad6a14;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   box-shadow: 0 8px 24px rgba(173, 106, 20, 0.12);
}

.brand-mark {
   display: block;
   width: min(280px, 100%);
   margin: 26px 0 22px;
}

.brand-copy h1 {
   margin: 0;
   font-size: clamp(2.2rem, 4vw, 3rem);
   line-height: 1.05;
   color: #1f2a44;
}

.brand-copy p {
   margin: 18px 0 0;
   max-width: 430px;
   font-size: 1.02rem;
   line-height: 1.8;
   color: #55627d;
}

.brand-highlights {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   position: relative;
   z-index: 1;
}

.highlight-card {
   min-height: 120px;
   padding: 22px 20px;
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.78);
   border: 1px solid rgba(255, 255, 255, 0.92);
   box-shadow: 0 12px 36px rgba(31, 42, 68, 0.1);
}

.highlight-card strong {
   display: block;
   margin-bottom: 10px;
   font-size: 1rem;
   color: #263252;
}

.highlight-card span {
   display: block;
   font-size: 0.94rem;
   line-height: 1.6;
   color: #60708d;
}

.login-panel {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 36px;
   background: linear-gradient(
      180deg,
      rgba(244, 248, 255, 0.82),
      rgba(255, 255, 255, 0.96)
   );
}

.login-container {
   width: min(430px, 100%);
   padding: 34px;
   border-radius: 28px;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(226, 233, 245, 0.92);
   box-shadow: 0 18px 48px rgba(36, 38, 93, 0.12);
}

.login-badge {
   width: 76px;
   height: 76px;
   margin-bottom: 22px;
   border-radius: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(145deg, #ffffff, #fef1d7);
   box-shadow: 0 14px 32px rgba(255, 184, 107, 0.22);
}

.login-badge img {
   width: 44px;
   height: auto;
}

.login-header {
   margin-bottom: 24px;
}

.eyebrow {
   display: inline-block;
   margin-bottom: 12px;
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #7381a3;
}

.login-container h2 {
   margin: 0;
   font-size: 2.15rem;
   line-height: 1.1;
   color: #20264f;
}

.login-header p {
   margin: 12px 0 0;
   font-size: 0.98rem;
   line-height: 1.7;
   color: #667592;
}

.login-alert {
   margin-bottom: 18px;
   padding: 12px 14px;
   border-radius: 16px;
   background: #fff1f2;
   border: 1px solid #fecdd3;
   color: #be123c;
   font-size: 0.94rem;
   line-height: 1.5;
}

.login-container form {
   width: 100%;
}

.field-group + .field-group {
   margin-top: 18px;
}

.field-group label {
   display: block;
   margin-bottom: 8px;
   font-size: 0.92rem;
   font-weight: 600;
   color: #394664;
}

.login-container .input {
   width: 100%;
   padding: 15px 16px;
   border: 1px solid #dce5f2;
   border-radius: 16px;
   background: #f9fbff;
   font-size: 0.98rem;
   color: #24314f;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.login-container .input::placeholder {
   color: #9aa7bf;
}

.login-container .input:focus {
   border-color: #9eb7ef;
   box-shadow: 0 0 0 4px rgba(125, 151, 214, 0.14);
   background: #ffffff;
}

.inputSubmit {
   width: 100%;
   margin-top: 24px;
   padding: 16px 20px;
   border: 0;
   border-radius: 18px;
   background: linear-gradient(135deg, #24265d 0%, #384a8f 100%);
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.01em;
   box-shadow: 0 16px 28px rgba(36, 38, 93, 0.24);
   transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      filter 0.2s ease;
}

.inputSubmit:hover {
   transform: translateY(-1px);
   filter: brightness(1.03);
   box-shadow: 0 20px 34px rgba(36, 38, 93, 0.26);
}

.inputSubmit:active {
   transform: translateY(0);
}

.login-note {
   margin: 18px 0 0;
   text-align: center;
   font-size: 0.9rem;
   color: #7c8aa6;
}

@media (max-width: 980px) {
   .login-page .container {
      grid-template-columns: 1fr;
   }

   .brand-panel {
      padding: 44px 30px 24px;
      background:
         linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.9),
            rgba(255, 244, 227, 0.78)
         ),
         url("/assets/image/_0017.svg") no-repeat right -10px center / 42%;
   }

   .brand-visual {
      top: 92px;
      right: 24px;
      bottom: 24px;
      width: 220px;
   }

   .brand-copy {
      max-width: calc(100% - 250px);
   }

   .brand-highlights {
      grid-template-columns: 1fr 1fr;
   }

   .login-panel {
      padding-top: 0;
   }
}

@media (max-width: 640px) {
   .login-page {
      padding: 16px;
   }

   .login-page .container {
      border-radius: 24px;
   }

   .brand-panel {
      display: none;
   }

   .login-panel {
      padding: 20px;
   }

   .login-container {
      padding: 26px 20px;
      border-radius: 22px;
      width: 100%;
      box-shadow: none;
   }

   .login-badge {
      width: 68px;
      height: 68px;
      border-radius: 22px;
   }

   .login-container h2 {
      font-size: 1.85rem;
   }
}