/* ===== Layout ===== */
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;
}

/* ===== Metal Panel ===== */
.login-panel{
  width:360px;
  padding:32px;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #bfa24a 0%,
      #f5f5f5 20%,
      #d4af37 40%,
      #e6e6e6 60%,
      #bfa24a 80%,
      #d4af37 100%
    );
  background-size:300% 300%;
  animation: metalFlow 8s ease-in-out infinite;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -1px 1px rgba(0,0,0,.35),
    0 40px 90px rgba(0,0,0,.65);

  color:#111;
}

/* ===== Metal Animation ===== */
@keyframes metalFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===== Title ===== */
.jp-title{
  text-align:center;
  font-size:28px;
  letter-spacing:4px;
  margin-bottom:6px;

  background:linear-gradient(
    90deg,
    #d4af37,
    #ffffff,
    #bfa24a,
    #ffffff,
    #d4af37
  );
  background-size:200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:textShine 4s linear infinite;
}

@keyframes textShine{
  from{background-position:0%}
  to{background-position:200%}
}

/* ===== Subtitle ===== */
.jp-sub{
  text-align:center;
  font-size:12px;
  opacity:.75;
  margin-bottom:22px;
}

/* ===== Input Row ===== */
.jp-field{
  display:flex;
  gap:8px;
  margin-bottom:20px;
}

.jp-field input{
  flex:1;
  padding:14px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.3);
  border-radius:10px;
  color:#111;
  outline:none;
}

.jp-field button{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(0,0,0,.3);
  border-radius:10px;
  padding:0 12px;
  cursor:pointer;
}

/* ===== Actions ===== */
.jp-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.jp-btn{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.3);
  background:rgba(255,255,255,.45);
  color:#111;
  cursor:pointer;
  transition:.2s ease;
}

.jp-btn:hover{
  background:rgba(255,255,255,.7);
}

/* ===== Primary Button ===== */
.jp-btn.primary{
  background:linear-gradient(135deg,#d4af37,#bfa24a);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5);
}

/* ===== Hint ===== */
.jp-hint{
  margin-top:14px;
  font-size:12px;
  text-align:center;
  opacity:.75;
}