*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#07070f;
  display:flex;
}

#form-panel {
  width:400px;
  min-width:320px;
  flex-shrink:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#0d1420;
  padding:48px 32px;

  animation:panelIn .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes panelIn {
  from { opacity:0; transform:translateX(-22px); }
  to   { opacity:1; transform:translateX(0); }
}

#brand-logo {
  width:100%;
  max-width:336px;
  display:block;
  margin:0 auto 46px;
  filter:drop-shadow(0 0 8px rgba(0,200,255,.22));
}

.error-msg {
  width:100%;
  background:rgba(248,81,73,.12);
  border:1px solid #f85149;
  color:#f85149;
  border-radius:6px;
  padding:11px 14px;
  font-size:12.5px;
  margin-bottom:22px;
}

.success-msg {
  width:100%;
  background:rgba(63,185,80,.10);
  border:1px solid rgba(63,185,80,.40);
  color:#3fb950;
  border-radius:6px;
  padding:11px 14px;
  font-size:12.5px;
  margin-bottom:22px;
}

.field {
  position:relative;
  width:100%;
  margin-bottom:30px;
}
.field input {
  width:100%;
  height:48px;
  background:rgba(255,255,255,.05);
  border:none;
  border-bottom:1.5px solid rgba(255,255,255,.20);
  color:#ffffff;
  font-size:14px;
  outline:none;
  padding:0 38px 0 4px;
  transition:border-color .2s, background .2s;
}
.field input:focus {
  background:rgba(0,200,255,.06);
  border-bottom:2px solid #00c8ff;
}
.field label {
  position:absolute;
  top:14px; left:4px;
  font-size:13px;
  color:rgba(255,255,255,.38);
  pointer-events:none;
  transition:top .17s, font-size .17s, color .17s, letter-spacing .17s;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label {
  top:-13px;
  font-size:10px;
  color:#00c8ff;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.eye-btn {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:rgba(255,255,255,.35);
  padding:4px 8px;

  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .15s;
}
.eye-btn:hover { color:rgba(255,255,255,.80); }
.eye-btn .icon-eye-off { display:none; }
.eye-btn.showing .icon-eye     { display:none; }
.eye-btn.showing .icon-eye-off { display:block; }

#sign-in-btn {
  width:100%;
  height:48px;
  margin-top:6px;
  background:linear-gradient(135deg, #0090c8, #00c8ff);
  color:#000;
  border:none;
  border-radius:5px;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:box-shadow .2s, transform .15s;
  position:relative;
  overflow:hidden;
}
#sign-in-btn::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent);
  pointer-events:none;
}
#sign-in-btn:hover {
  box-shadow:0 0 28px rgba(0,200,255,.55), 0 0 60px rgba(0,200,255,.20);
  transform:translateY(-1px);
}
#sign-in-btn:active { transform:translateY(0); }

#spinner {
  display:none;
  width:62px; height:62px;
  border-radius:50%;
  border:3px solid rgba(0,200,255,.15);
  border-top:3px solid #00c8ff;
  animation:spinRot .9s linear infinite;
  margin:28px auto 0;
}
@keyframes spinRot { to { transform:rotate(360deg); } }

#image-panel {
  flex:1;
  height:100vh;
  overflow:hidden;

}
#product-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;

}

@media (min-width:861px) and (max-width:1199px) {
  #form-panel {
    width: 420px;
    padding: 40px 28px;
  }
}

@media (max-width:860px) {

  html, body { overflow-y: auto; height: auto; }

  #image-panel { display: none; }

  #form-panel {
    width: 100%;
    min-width: 0;

    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 40px;

    justify-content: center;
  }

  #brand-logo {
    max-width: 300px;
    margin-bottom: 36px;
  }
}

@media (max-width:767px) {
  #form-panel { padding: 40px 32px; }
  #brand-logo { max-width: 280px; margin-bottom: 30px; }
}

@media (max-width:540px) {
  #form-panel  { padding: 36px 22px; }
  #brand-logo  { max-width: 240px; margin-bottom: 24px; }
  .field       { margin-bottom: 24px; }
  #sign-in-btn { height: 46px; font-size: 12.5px; }

  #ps-modal { padding: 24px 18px !important; }

  #lp-bug-modal  { border-radius: 10px !important; }
  #lp-bug-head   { padding: 14px 16px 10px !important; }
  #lp-bug-body   { padding: 14px 16px !important; }
  #lp-bug-foot   { padding: 10px 16px !important; flex-wrap: wrap; }
  .lp-bug-sev-grid { grid-template-columns: 1fr 1fr; }

  #lp-feat-modal { padding: 20px 18px !important; }
}

@media (max-width:380px) {
  #form-panel  { padding: 28px 16px; }
  #brand-logo  { max-width: 200px; margin-bottom: 20px; }
  .field       { margin-bottom: 20px; }
  .lp-bug-sev-grid { grid-template-columns: 1fr; }
}

a[href="/forgot-password"] {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 10px 6px;
}

a[onclick*="openPreSubmit"] {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 10px 6px;
}