/* ===============================
   ROOT VARIABLES
================================ */
:root{
  --bg0:#070A12;
  --bg1:#0B1020;

  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);

  --text:#E9ECF5;
  --muted:#A6ADC8;

  --accent:#7C7CFF;
  --accent2:#22D3EE;

  --good:#3CC878;
  --warn:#FFB020;
  --danger:#FF6B6B;

  --shadow:0 18px 70px rgba(0,0,0,.55);
  --radius:22px;

  --ease:cubic-bezier(.4,0,.2,1);
}

/* ===============================
   RESET
================================ */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);

  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,124,255,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));

  animation:fadeIn .6s ease forwards;
}

/* ===============================
   LINKS
================================ */
a{
  color:inherit;
  text-decoration:none;
}

/* ===============================
   CARD
================================ */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

  transition:.3s var(--ease);
  animation:scaleUp .45s ease forwards;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 90px rgba(0,0,0,.65);
}

/* ===============================
   BUTTONS
================================ */
.btn{
  border-radius:14px;
  padding:12px 16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  transition:.25s var(--ease);
}

.btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
}

.btn:active{
  transform:translateY(0);
}

/* primary */
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none;
  box-shadow:0 18px 55px rgba(124,124,255,.25);
}

.btn.primary:hover{
  filter:brightness(1.08);
  box-shadow:0 22px 70px rgba(124,124,255,.35);
}

/* ===============================
   INPUTS
================================ */
.input{
  width:100%;
  padding:14px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--stroke);
  color:var(--text);
  outline:none;

  transition:.25s var(--ease);
}

.input::placeholder{
  color:var(--muted);
}

.input:focus{
  border-color:var(--accent);
  background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(124,124,255,.15);
}

/* ===============================
   ALERTS
================================ */
.alert{
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:14px;
  font-size:13px;
  animation:fadeUp .35s ease forwards;
}

.alert.error{
  background:rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.35);
  color:#FFDCDC;
}

.alert.success{
  background:rgba(60,200,120,.14);
  border:1px solid rgba(60,200,120,.35);
  color:#D9FFE9;
}

/* ===============================
   ANIMATIONS
================================ */
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@keyframes scaleUp{
  from{opacity:0;transform:scale(.96) translateY(10px)}
  to{opacity:1;transform:none}
}

/* ===============================
   MOBILE TUNING
================================ */
@media (max-width:600px){
  body{
    background:
      radial-gradient(700px 400px at 50% 0%, rgba(124,124,255,.18), transparent 65%),
      linear-gradient(180deg,var(--bg0),var(--bg1));
  }

  .btn{
    padding:14px 16px;
  }

  .input{
    padding:15px;
  }
}

/* ===============================
   REDUCED MOTION
================================ */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}