@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Sora:wght@300;400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;font-family:'Outfit',sans-serif}

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px 0;
  background:#050508 url("/IMG/loguin.webp") center/cover no-repeat fixed;
  background-size:120% 120%;
  animation:bgMove 25s ease-in-out infinite;
  overflow-x:hidden;
  overflow-y:auto;
}

@keyframes bgMove{
  0%{background-position:30% 40%}
  25%{background-position:55% 45%}
  50%{background-position:65% 55%}
  75%{background-position:45% 50%}
  100%{background-position:30% 40%}
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:0;
}

#particles{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}

@keyframes fadeSlideUp{
  0%{opacity:0;transform:translateY(30px) scale(.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.main-wrapper{
  position:relative;
  z-index:2;
  width:90%;
  max-width:400px;
}

.glass-card{
  position:relative;
  padding:38px 34px;
  border-radius:20px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
  animation:fadeSlideUp .7s cubic-bezier(.22,1,.36,1) both;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-bottom:8px;
}

.logo-glow{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-glow::before{
  content:'';
  position:absolute;
  width:100px;
  height:100px;
  background:radial-gradient(circle,rgba(229,57,53,.3) 0%,transparent 70%);
  border-radius:50%;
  animation:logoBreath 3s ease-in-out infinite;
}

@keyframes logoBreath{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.15);opacity:.8}
}

.brand-logo{
  width:80px;
  height:80px;
  object-fit:contain;
  position:relative;
  z-index:1;
  border-radius:16px;
  filter:drop-shadow(0 2px 12px rgba(229,57,53,.4));
}

.brand-name{
  font-family:'Sora',sans-serif;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.3px;
  margin-top:4px;
}

.brand-name .mega{color:#fff}
.brand-name .stream{color:#e53935}
.brand-name .rd{color:#e53935;font-weight:800}

.brand-tag{
  font-size:10px;
  font-weight:400;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

.divider{
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  margin:14px 0 20px;
}

.section{
  display:none;
  opacity:0;
  transform:translateY(12px);
}

.section.active{
  display:block;
  animation:sectionIn .45s cubic-bezier(.22,1,.36,1) forwards;
}

.section.leaving{
  display:block;
  animation:sectionOut .25s ease forwards;
}

@keyframes sectionIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes sectionOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-10px)}
}

.section-title{
  font-family:'Sora',sans-serif;
  color:#fff;
  font-size:22px;
  font-weight:600;
  text-align:center;
  letter-spacing:.3px;
  margin-bottom:22px;
}

.section-desc{
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.6;
  text-align:center;
  margin:-8px 0 20px;
  padding:0 8px;
}

.input-group{
  position:relative;
  margin-bottom:22px;
}

.input-group input{
  width:100%;
  padding:14px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  outline:none;
  border-radius:12px;
  font-family:'Outfit',sans-serif;
  font-size:14px;
  color:#fff;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.input-group input:focus{
  background:rgba(255,255,255,.08);
  border-color:rgba(229,57,53,.5);
  box-shadow:0 0 0 3px rgba(229,57,53,.1);
}

.input-group label{
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%);
  color:rgba(255,255,255,.4);
  font-size:13px;
  pointer-events:none;
  transition:all .25s ease;
}

.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label{
  top:-1px;
  left:14px;
  font-size:10px;
  font-weight:600;
  background:rgba(229,57,53,.2);
  padding:2px 8px;
  border-radius:6px;
  color:#ef9a9a;
  border:1px solid rgba(229,57,53,.25);
}

.options-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:20px;
  font-size:12px;
  color:rgba(255,255,255,.7);
}

.options-row label{
  display:flex;
  align-items:center;
  cursor:pointer;
}

.options-row input[type="checkbox"]{
  margin-right:6px;
  accent-color:#e53935;
  cursor:pointer;
}

.options-row a,
.nav-link a{
  color:#ef9a9a;
  text-decoration:none;
  font-weight:600;
  transition:color .2s ease;
}

.options-row a:hover,
.nav-link a:hover{
  color:#ffcdd2;
}

.btn-primary{
  width:100%;
  padding:13px;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  border:none;
  border-radius:12px;
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(229,57,53,.25);
  transition:transform .25s ease,box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}

.btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-18deg);
  transition:left .5s ease;
  pointer-events:none;
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(229,57,53,.4);
}

.btn-primary:hover::before{left:150%}

.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(229,57,53,.2);
}

.btn-primary:focus-visible{
  outline:2px solid rgba(229,57,53,.6);
  outline-offset:3px;
}

.nav-link{
  text-align:center;
  margin-top:18px;
  color:rgba(255,255,255,.6);
  font-size:12px;
  font-weight:500;
}

.password-toggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:rgba(255,255,255,.35);
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  transition:color .25s ease;
}

.password-toggle:hover{color:#e53935}
.password-toggle svg{width:17px;height:17px}

.form-message{
  display:none;
  margin-bottom:14px;
  padding:10px 14px;
  border-radius:10px;
  font-size:12px;
  text-align:center;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:all .25s ease;
}

.form-message.error{
  display:block;
  background:rgba(255,77,77,.1);
  border-color:rgba(255,77,77,.35);
}

.form-message.success{
  display:block;
  background:rgba(112,255,180,.08);
  border-color:rgba(112,255,180,.25);
}

.field-error,
.input-error,
.error-text{
  margin-top:5px;
  padding-left:10px;
  font-size:11px;
  color:#ff7a7a;
}

.is-invalid,
input.is-invalid{
  border-color:rgba(255,100,100,.8) !important;
  box-shadow:0 0 0 3px rgba(255,77,77,.15) !important;
}

.is-valid,
input.is-valid{
  border-color:rgba(100,220,160,.8) !important;
  box-shadow:0 0 0 3px rgba(100,220,160,.15) !important;
}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);z-index:99999;max-width:min(90vw,400px);padding:14px 20px;border-radius:12px;background:rgba(255,255,255,.95);color:#1a1a1a;font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;display:flex;align-items:center;gap:8px}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.toast[data-type="success"]{background:rgba(16,185,129,.95);color:#fff}
.toast[data-type="error"]{background:rgba(239,68,68,.95);color:#fff}
.toast-icon{font-size:16px}
.toast-text{flex:1}

@media(max-width:768px){
  body{
    background-size:cover;
    animation:none;
  }
  #particles{display:none}
  .glass-card{padding:30px 22px}
  .brand-logo{width:65px;height:65px}
  .logo-glow::before{width:80px;height:80px}
  .brand-name{font-size:18px}
  .section-title{font-size:19px}
}