/* signon.css — v9: stronger input fields + eye positioning */
.password-field{
  position: relative;
  display: block;
  width: 100%;
}
.pw-eye{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(17,24,39,0.75);
  color: #fff;
  cursor: pointer;
  z-index: 5;
}
.pw-eye:hover{ background: rgba(17,24,39,0.92); }
.pw-eye.active{ background: rgba(59,130,246,0.35); border-color: #60a5fa; }

/* --- Make the Username/Password inputs obvious (Second Life-style) --- */
.input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid rgba(148,163,184,0.65);            /* stronger, visible edge */
  background: #0f1b2d;                                 /* lighter than panel for contrast */
  color: #e9eef5;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),              /* soft inner ridge */
    0 0 0 0 rgba(0,0,0,0);                             /* focus ring placeholder */
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input::placeholder{
  color: #a6b4c7;
  opacity: .95;
}
.input:hover{
  border-color: rgba(148,163,184,0.85);
}
.input:focus{
  border-color: #60a5fa;
  background: #10223a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 4px rgba(96,165,250,0.35);                   /* visible focus ring */
}

/* Keep room for the eye button on password */
.password-field .input{ padding-right: 52px; }

/* Slightly stronger focus ring for fallback selectors (theme-safe) */
input[type="text"]:focus, input[type="password"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(96,165,250,.45);
}


/* ===== Desktop scale for larger, easier-to-read sign-on (matches "bigger" look) ===== */
@media (min-width: 960px){
  .wrap{ zoom: 1.12; }  /* Edge/Chromium-supported; scales fonts and spacing */
}