:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172238;
  background: #f5f7fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input { font: inherit; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 46%) 1fr; }
.product-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 46px clamp(42px, 6vw, 92px); color: white;
  background:
    radial-gradient(circle at 82% 22%, rgba(83, 137, 240, .3), transparent 34%),
    linear-gradient(145deg, #0b1d39 0%, #102c54 53%, #173e6c 100%);
}
.product-panel::before, .product-panel::after {
  content: ""; position: absolute; border: 1px solid rgba(136, 177, 239, .11); border-radius: 50%;
}
.product-panel::before { width: 520px; height: 520px; right: -260px; top: 12%; }
.product-panel::after { width: 340px; height: 340px; right: -80px; bottom: -170px; }
.brand, .mobile-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.brand strong, .mobile-brand strong { font-size: 17px; letter-spacing: -.01em; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(145deg, #6a94ee, #396bc9); color: white; font-size: 13px; font-weight: 800;
  box-shadow: 0 10px 28px rgba(34, 83, 173, .32);
}
.product-copy { position: relative; z-index: 1; margin: auto 0; max-width: 570px; }
.eyebrow { display: block; margin-bottom: 20px; color: #8fb2f1; font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.product-copy h1 { margin: 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.product-copy p { max-width: 510px; margin: 25px 0 0; color: #b9c9df; font-size: 16px; line-height: 1.65; }
.product-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #b9c9df; font-size: 12px; }
.product-status i { width: 8px; height: 8px; border-radius: 50%; background: #4cdb98; box-shadow: 0 0 0 5px rgba(76, 219, 152, .1); }

.form-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px; background: #f7f9fc; }
.login-card { width: min(100%, 440px); padding: 38px 39px 32px; border: 1px solid #e3e8f1; border-radius: 20px; background: white; box-shadow: 0 22px 65px rgba(24, 46, 86, .1); }
.mobile-brand { display: none; margin-bottom: 30px; }
.card-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 29px; }
.lock-mark { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; color: #396bc9; background: #edf3ff; }
.card-heading h2 { margin: 0; color: #12203a; font-size: 25px; letter-spacing: -.025em; }
.card-heading p { margin: 6px 0 0; color: #748197; font-size: 13px; }
form label { display: block; margin: 18px 0 8px; color: #344158; font-size: 12px; font-weight: 700; }
.field { height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #d8deea; border-radius: 11px; color: #8490a4; background: #fbfcfe; transition: .16s ease; }
.field:focus-within { border-color: #5b83d7; background: white; box-shadow: 0 0 0 3px rgba(68, 112, 204, .1); }
.field input { min-width: 0; flex: 1; border: 0; outline: 0; color: #172238; background: transparent; font-size: 14px; }
.field input::placeholder { color: #a3adbd; }
.password-toggle { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; color: #8995a8; background: transparent; cursor: pointer; }
.password-toggle:hover { color: #396bc9; background: #eef3fb; }
.submit-button { width: 100%; height: 51px; display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 26px; border: 0; border-radius: 11px; color: white; background: linear-gradient(135deg, #3c6fce, #2f5eb6); font-weight: 750; cursor: pointer; box-shadow: 0 11px 25px rgba(47, 94, 182, .24); transition: .16s ease; }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(47, 94, 182, .3); }
.submit-button:active { transform: translateY(0); }
.submit-button:focus-visible, .password-toggle:focus-visible { outline: 3px solid rgba(64, 111, 207, .28); outline-offset: 2px; }
.help-text { margin: 24px 0 0; color: #8995a8; text-align: center; font-size: 12px; }
.message { margin: -9px 0 18px; padding: 11px 13px; border-radius: 9px; font-size: 12px; line-height: 1.45; }
.message.error { color: #9e2d38; border: 1px solid #f2ccd1; background: #fff2f3; }
.message.success { color: #17663f; border: 1px solid #bfe8d2; background: #edfbf3; }
.message.info { color: #28579d; border: 1px solid #c9daf6; background: #f0f5ff; }
.hidden { display: none; }
.footer-note { margin: 24px 0 0; color: #929caf; font-size: 11px; }

@media (max-width: 850px) {
  .login-layout { display: block; min-height: 100vh; }
  .product-panel { display: none; }
  .form-panel { min-height: 100vh; padding: 24px; }
  .mobile-brand { display: flex; }
}
@media (max-width: 460px) {
  .form-panel { padding: 14px; }
  .login-card { padding: 28px 22px 25px; border-radius: 16px; }
  .card-heading h2 { font-size: 22px; }
  .footer-note { text-align: center; }
}