<style>

body{
    background:#f4f6fa;
    font-family:Arial,Helvetica,sans-serif;
}


.login-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-box{
    width:420px;
    background:#ffffff;
    border-radius:10px;
    box-shadow:0 0 30px rgba(0,0,0,.08);
    padding:35px;
}

.logo{
    text-align:center;
    margin-bottom:25px;
}

.logo h1{
    margin:0;
    font-size:30px;
    font-weight:700;
}

.logo p{
    color:#6c757d;
    margin-top:5px;
}

.form-group{
    margin-bottom:15px;
}

.form-control{
    width:100%;
    padding:10px;
}

.btn-login{
    width:100%;
    padding:12px;
}

.forgot{
    text-align:right;
    margin-top:10px;
}

.forgot a{
    text-decoration:none;
}

.footer-text{
    text-align:center;
    margin-top:20px;
    color:#777;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-gradient {
  to { --angle: 360deg; }
}
@keyframes fog-wave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.glow-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(var(--angle), #4285f4, #9b59b6, #ea4335, #fbbc05, #34a853, #4285f4);
  animation: spin-gradient 3s linear infinite;
}
.glow-wrapper::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  background: linear-gradient(var(--angle), #4285f4, #9b59b6, #ea4335, #fbbc05, #34a853, #4285f4);
  filter: blur(8px);
  opacity: 0.7;
  z-index: -1;
  animation: spin-gradient 3s linear infinite;
}

.glow-btn {
  position: relative;
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
/* fog layer 1 — Gemini colors drifting */
.glow-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(255,255,255,0.92) 0%,
    rgba(66,133,244,0.15) 20%,
    rgba(155,89,182,0.12) 40%,
    rgba(234,67,53,0.1) 55%,
    rgba(251,188,5,0.12) 70%,
    rgba(52,168,83,0.1) 85%,
    rgba(255,255,255,0.92) 100%);
  background-size: 300% 300%;
  animation: fog-wave 4s ease infinite;
  z-index: 1;
}
/* fog layer 2 — reversed for depth */
.glow-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(220deg,
    rgba(255,255,255,0) 0%,
    rgba(155,89,182,0.1) 30%,
    rgba(66,133,244,0.12) 60%,
    rgba(255,255,255,0) 100%);
  background-size: 300% 300%;
  animation: fog-wave 6s ease infinite reverse;
  z-index: 2;
}
/* text above fog */
.glow-btn span {
  position: relative;
  z-index: 3;
}
.glow-btn, .glow-btn:hover, .glow-btn:visited {
  text-decoration: none;
}
.glow-btn:hover { background: #f9f9f9; }

</style>