*,*::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 40px;
  filter:drop-shadow(0 0 8px rgba(0,200,255,.22));
}

.page-title {
  font-size:17px;
  font-weight:700;
  color:#e6edf3;
  margin-bottom:6px;
  width:100%;
}
.page-sub {
  font-size:12.5px;
  color:rgba(255,255,255,.42);
  margin-bottom:30px;
  line-height:1.5;
  width:100%;
}

.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:14px 16px;
  font-size:13px;
  line-height:1.6;
  margin-bottom:22px;
  text-align:center;
}

.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 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;
}

button[type="submit"] {
  width:100%;
  height:46px;
  background:linear-gradient(135deg,#0077cc,#00c8ff);
  border:none;
  border-radius:8px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:opacity .18s, transform .12s;
  margin-top:4px;
}
button[type="submit"]:hover  { opacity:.88; }
button[type="submit"]:active { transform:scale(.98); }
button[type="submit"]:disabled { opacity:.5; cursor:not-allowed; }

.back-link {
  text-align:center;
  margin-top:20px;
  width:100%;
  font-size:12px;
  color:rgba(255,255,255,.38);
}
.back-link a {
  color:#58a6ff;
  text-decoration:none;
  opacity:.85;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 6px;
}
.back-link a:hover { opacity:1; text-decoration:underline; }

#spinner {
  display:none;
  width:100%;
  height:4px;
  background:rgba(0,200,255,.15);
  border-radius:2px;
  overflow:hidden;
  margin-top:12px;
}
#spinner::after {
  content:'';
  display:block;
  height:4px;
  width:40%;
  background:#00c8ff;
  border-radius:2px;
  animation:slide 1s infinite ease-in-out;
}
@keyframes slide {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(350%); }
}

#image-panel {
  flex:1;
  height:100vh;
  overflow:hidden;
  background:#07070f;
  display:flex;
  align-items:center;
  justify-content:center;
}
#product-image {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:860px) {
  #image-panel { display:none; }
  #form-panel  { width:100%; min-width:0; }
  html,body { height:auto; overflow-y:auto; }
  #form-panel { min-height:100dvh; min-height:100vh; }
}
@media(max-width:480px){
  #form-panel { padding:32px 20px; }
}
@media(max-width:380px){
  #form-panel { padding:24px 14px; }
}