/* --- Modern login UI --- */

:root{

  --bg1:#0b1220;

  --bg2:#111827;

  --card: rgba(255,255,255,0.06);

  --card2: rgba(255,255,255,0.10);

  --text:#e5e7eb;

  --muted:#94a3b8;

  --accent:#60a5fa;

  --accent2:#22c55e;

  --danger:#fb7185;

  --shadow: 0 20px 60px rgba(0,0,0,.55);

  --radius: 18px;

}



body{

  margin:0;

  min-height:100vh;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  color: var(--text);

  background:

    radial-gradient(1200px 600px at 15% 15%, rgba(96,165,250,.25), transparent 60%),

    radial-gradient(900px 500px at 80% 25%, rgba(34,197,94,.18), transparent 60%),

    linear-gradient(180deg, var(--bg1), var(--bg2));

}



.background{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding: 28px 14px;

}



.content{

  width: min(440px, 96vw);

  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.03));

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow: var(--shadow);

  border-radius: var(--radius);

  padding: 26px 22px;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



.logoWrap{

  display:flex;

  justify-content:center;

  margin-bottom: 10px;

}



.logoWrap img{

  max-width: 220px;

  height:auto;

  opacity: .95;

  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));

}



h1, h2{

  margin: 10px 0 12px;

  font-size: 18px;

  font-weight: 700;

  letter-spacing:.2px;

  text-align:center;

}



.sub{

  text-align:center;

  color: var(--muted);

  margin: 0 0 16px;

  font-size: 13px;

  line-height: 1.35;

}



.loginForm{

  display:flex;

  flex-direction:column;

  gap: 12px;

  margin-top: 14px;

}



.style-1{

  width:100%;

  box-sizing:border-box;

  padding: 13px 14px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(2,6,23,0.55);

  color: var(--text);

  outline:none;

  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;

}



.style-1::placeholder{

  color: rgba(229,231,235,.55);

}



.style-1:focus{

  border-color: rgba(96,165,250,.55);

  box-shadow: 0 0 0 4px rgba(96,165,250,.18);

}



.btnPrimary{

  border: none;

  border-radius: 14px;

  padding: 12px 14px;

  font-weight: 700;

  cursor:pointer;

  color: #07101f;

  background: linear-gradient(135deg, var(--accent), #93c5fd);

  box-shadow: 0 10px 25px rgba(96,165,250,.25);

  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;

}



.btnPrimary:hover{

  filter: brightness(1.05);

  box-shadow: 0 14px 34px rgba(96,165,250,.30);

}



.btnPrimary:active{

  transform: translateY(1px);

}



.rowBetween{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top: 6px;

  font-size: 13px;

  color: var(--muted);

}



.rowBetween a, .content a{

  color: rgba(147,197,253,.95);

  text-decoration:none;

}

.rowBetween a:hover, .content a:hover{

  text-decoration: underline;

}



.notice{

  margin-top: 14px;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.10);

  background: rgba(2,6,23,0.35);

  color: var(--text);

  font-size: 13px;

  line-height: 1.4;

}



.notice.warn{

  border-color: rgba(251,113,133,.35);

  background: rgba(251,113,133,.08);

}



.small{

  font-size: 12px;

  color: var(--muted);

  text-align:center;

  margin-top: 14px;

}



/* Mobile spacing */

@media (max-width: 420px){

  .content{ padding: 22px 16px; }

}



/* ===== Animated fixed background (does not scroll) ===== */

body{

  margin:0;

  min-height:100vh;

  overflow-x:hidden;

}



/* Put the animated background on a fixed layer */

.bg-animated{

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;



  /* Base gradient */

  background:

    radial-gradient(1200px 600px at 15% 15%, rgba(96,165,250,.22), transparent 60%),

    radial-gradient(900px 500px at 80% 25%, rgba(34,197,94,.16), transparent 60%),

    linear-gradient(180deg, #0b1220, #111827);

}



/* Animated “blobs” */

.bg-animated::before,

.bg-animated::after{

  content:"";

  position:absolute;

  width: 800px;

  height: 800px;

  border-radius: 999px;

  filter: blur(55px);

  opacity: .55;

  transform: translate3d(0,0,0);

  will-change: transform;

}



.bg-animated::before{

  left: -220px;

  top: -240px;

  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.75), transparent 60%);

  animation: blobFloat1 14s ease-in-out infinite;

}



.bg-animated::after{

  right: -240px;

  bottom: -300px;

  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.60), transparent 60%);

  animation: blobFloat2 18s ease-in-out infinite;

}



@keyframes blobFloat1{

  0%   { transform: translate(-10px, 0px) scale(1); }

  35%  { transform: translate(120px, 90px) scale(1.08); }

  70%  { transform: translate(60px, 160px) scale(0.96); }

  100% { transform: translate(-10px, 0px) scale(1); }

}



@keyframes blobFloat2{

  0%   { transform: translate(0px, 0px) scale(1); }

  35%  { transform: translate(-130px, -80px) scale(1.06); }

  70%  { transform: translate(-70px, -160px) scale(0.95); }

  100% { transform: translate(0px, 0px) scale(1); }

}



/* Make sure your card sits above the background */

.background, .content{

  position: relative;

  z-index: 2;

}



/* ===== Password input with icon button ===== */

.inputWrap{

  position: relative;

}



.inputWrap input{

  padding-right: 44px; /* space for icon */

}



.togglePass{

  position: absolute;

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  width: 36px;

  height: 36px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(2,6,23,0.35);

  color: rgba(229,231,235,.85);

  border-radius: 12px;

  cursor: pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  transition: filter .15s ease, box-shadow .15s ease, border-color .15s ease;

}



.togglePass:hover{

  filter: brightness(1.05);

  border-color: rgba(96,165,250,.45);

  box-shadow: 0 0 0 4px rgba(96,165,250,.12);

}



.togglePass:active{

  transform: translateY(-50%) translateY(1px);

}



/* Reduced motion support */

@media (prefers-reduced-motion: reduce){

  .bg-animated::before,

  .bg-animated::after{

    animation: none !important;

  }

}