/* Extra component styles for auth pages and misc util */

/* Shared image/audio demo styles (legacy) */
.resized-image{
  width:auto;height:auto;margin-bottom:20px;
}
audio{width:10%;margin-top:20px}

/* blink util */
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.blink{animation:blink 1s linear infinite;color:black;font-size:50px}

/* Auth container to center card */
.auth-container{display:flex;justify-content:center;align-items:center;min-height:60vh}

/* Card look & feel */
.auth-container .card{
  width:100%;max-width:460px;padding:32px 28px 36px;
  background:linear-gradient(145deg,rgba(79,140,255,.15) 0%,rgba(34,197,94,.12) 100%),rgba(15,26,46,.70);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.auth-container .card h2{font-size:24px;margin-bottom:22px;text-align:center}

/* Form fields */
.auth-container .form .field{margin:12px 0}
.auth-container .form input{
  width:100%;height:42px;padding:0 12px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);outline:none;backdrop-filter:blur(4px);
}
.auth-container .form input:focus{border-color:rgba(79,140,255,.9);box-shadow:0 0 0 3px rgba(79,140,255,.35)}

/* Buttons */
.btn.primary{background:linear-gradient(135deg,#4f8cff 0%,#6fa4ff 100%);border:none;color:var(--text);cursor:pointer}
.btn.primary:hover{filter:brightness(1.1)}

/* Footer fixed only on auth pages */
.auth-page .footer{
  position:fixed;
  left:8px;
  bottom:8px;
  margin:0;
  padding:0;
  color:rgba(231,238,255,.55);
  text-align:left;
  font-size:14px;
  z-index:5;
}