/* EveGroupBuy – Responsive Login Styles
   Ultra-responsive, phone-first with safe-area handling and cleaner spacing. */

/* Theme tokens */
:root{
  --al-bg: #0a0a10;
  --al-card: rgba(17,17,26,0.7);
  --al-text: #f6f6fb;
  --al-subtle: #b8b8d4;
  --al-accent: #7c3aed;
  --al-accent-2: #06b6d4;
  --al-error: #ff3b6b;
  --al-success: #22c55e;
  --al-shadow: 0 20px 60px rgba(0,0,0,0.45);

  /* fluid type & rhythm */
  --step-0: clamp(14px, 1.3vw, 16px);
  --step-1: clamp(18px, 2.2vw, 22px);
  --step-2: clamp(22px, 3vw, 28px);
  --radius: 28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--al-bg);
  color:var(--al-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--step-0);
  line-height: 1.5;
}

/* Page canvas */
.al-page{
  position:relative;
  min-height:100dvh; /* mobile address bar aware */
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* Backdrop gradients */
.al-gradient{
  position:absolute; inset:-10%;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(1000px 500px at 80% 70%, rgba(6,182,212,0.3), transparent 60%);
  filter:blur(40px);
  animation:shift 15s ease-in-out infinite alternate
}
@keyframes shift{0%{transform:translateY(-2%) scale(1)}100%{transform:translateY(2%) scale(1.05)}}

.al-noise{position:absolute;inset:0;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 10 10"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.045"/></svg>');mix-blend-mode:overlay;}
#al-particles{position:absolute;inset:0;z-index:0;opacity:.8}

/* Card */
.al-card{
  position:relative; z-index:1;
  width: min(92vw, 520px);
  max-width: 100%;
  padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 30px) clamp(18px, 3.5vw, 28px);
  border-radius: var(--radius);
  background:linear-gradient(180deg, rgba(25,25,40,0.9), rgba(15,15,25,0.85));
  box-shadow: var(--al-shadow);
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,0.06);
  transform:translateY(10px);
  animation:cardIn .9s cubic-bezier(.22,.9,.28,1) forwards
}
@keyframes cardIn{to{transform:translateY(0)}}

/* Header */
.al-logo-wrap{display:grid;place-items:center;margin-bottom:8px}
.al-logo{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(124,58,237,.35));animation:float 6s ease-in-out infinite}
.al-logo-fallback{font-weight:800;font-size:var(--step-1);background:linear-gradient(45deg,var(--al-accent),var(--al-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 2.5s linear infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes shine{0%{filter:brightness(1)}50%{filter:brightness(1.25)}100%{filter:brightness(1)}}

.al-title{margin:6px 0 2px;font-size:var(--step-2);letter-spacing:.2px}
.al-subtitle{margin:0 0 18px;color:var(--al-subtle)}

/* Error toast in card */
.al-error{
  position:relative;display:flex;gap:10px;align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,59,107,.12), rgba(255,59,107,.06));
  border:1px solid rgba(255,59,107,.45);color:#ffd8e1;
  padding:12px 14px;border-radius:14px;margin-bottom:18px;
  opacity:0;transform:translateY(-8px);animation:errorIn .6s ease forwards
}
.al-error-icon{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--al-error);color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(255,59,107,.35)}
.al-error-close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:#ffd8e1;font-size:18px;cursor:pointer;opacity:.8}
.al-error-close:hover{opacity:1}
@keyframes errorIn{to{opacity:1;transform:translateY(0)}}

/* Fields */
.al-field{position:relative;margin:16px 0}
.al-field label{display:block;margin:0 0 6px;color:var(--al-subtle);font-size:13px}
.al-field input{
  width:100%;border:0;outline:0;border-radius:12px;
  padding:14px 14px;background:rgba(255,255,255,.06);color:var(--al-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition:box-shadow .25s, transform .2s
}
.al-field input::placeholder{color:#c6c6d6;opacity:.65}
.al-field input:focus{box-shadow: 0 0 0 2px rgba(124,58,237,.45), 0 10px 30px rgba(124,58,237,.18);transform: translateY(-1px)}
.al-field-underline{position:absolute;left:14px;right:14px;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--al-accent),var(--al-accent-2));border-radius:2px;opacity:0;transition:opacity .2s}
.al-field input:focus + .al-field-underline{opacity:1}

/* Button */
.al-btn{
  position:relative;display:inline-grid;place-items:center;width:100%;
  margin-top:10px;height:48px;border-radius:14px;border:0;color:white;
  background:linear-gradient(90deg, var(--al-accent), var(--al-accent-2));
  cursor:pointer;font-weight:700;letter-spacing:.3px;box-shadow:0 18px 40px rgba(124,58,237,.35);
  overflow:hidden;transform:translateZ(0)
}
.al-btn:hover{filter:brightness(1.05)}
.al-btn:active{transform:scale(.995)}
.al-btn-text{position:relative;z-index:2}
.al-btn-ripple{position:absolute;inset:auto;width:0;height:0;border-radius:999px;opacity:.25;background:#fff;transform:translate(-50%,-50%)}
.al-btn-spinner{position:absolute;width:22px;height:22px;border:3px solid rgba(255,255,255,.35);border-top-color:white;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .2s, transform .2s}

/* Footer links */
.al-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
.al-links a{color:#c7b8ff;text-decoration:none}
.al-links a:hover{text-decoration:underline}

/* Decorative flakes */
.al-flakes{position:absolute;inset:0;pointer-events:none}
.al-flakes span{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.15));box-shadow:0 4px 20px rgba(255,255,255,.2);animation:fall 14s linear infinite}
.al-flakes span:nth-child(1){left:10%;animation-duration:11s;animation-delay:0s}
.al-flakes span:nth-child(2){left:30%;animation-duration:15s;animation-delay:1s}
.al-flakes span:nth-child(3){left:55%;animation-duration:12s;animation-delay:2s}
.al-flakes span:nth-child(4){left:75%;animation-duration:18s;animation-delay:0s}
.al-flakes span:nth-child(5){left:90%;animation-duration:16s;animation-delay:1.5s}
@keyframes fall{0%{transform:translateY(-10vh) translateX(0)}100%{transform:translateY(110vh) translateX(30px)}}

/* Small phones: tighten spacing a bit to fit well */
@media (max-width: 380px){
  .al-card{padding:20px 16px 18px}
  .al-links{gap:6px}
}

/* Tablets / small laptops: give the card a bit more room */
@media (min-width: 768px){
  .al-card{width:min(88vw, 560px)}
}

/* Very large screens: center better and prevent the card from feeling tiny */
@media (min-width: 1400px){
  .al-card{width: 600px}
}