/* =========================================================
   SeeYouIOS Bot — Login V3
   ========================================================= */

body:has(> .login){
 position:relative;

 min-height:100vh;

 overflow:hidden;

 display:grid!important;
 place-items:center!important;

 padding:24px;

 background:
  radial-gradient(
   circle at 18% 16%,
   rgba(34,211,238,.12),
   transparent 28%
  ),
  radial-gradient(
   circle at 84% 78%,
   rgba(139,92,246,.13),
   transparent 31%
  ),
  radial-gradient(
   circle at 50% 120%,
   rgba(91,140,255,.08),
   transparent 40%
  ),
  #050711!important;
}


body:has(> .login)::before,
body:has(> .login)::after{
 content:"";

 position:fixed;

 pointer-events:none;

 border-radius:50%;

 filter:blur(70px);

 opacity:.32;
}


body:has(> .login)::before{
 width:300px;
 height:300px;

 left:-100px;
 top:-110px;

 background:#22d3ee;

 animation:
  syLoginGlowA 9s ease-in-out infinite alternate;
}


body:has(> .login)::after{
 width:350px;
 height:350px;

 right:-130px;
 bottom:-150px;

 background:#8b5cf6;

 animation:
  syLoginGlowB 11s ease-in-out infinite alternate;
}


@keyframes syLoginGlowA{
 from{
  transform:translate(0,0) scale(.9);
 }
 to{
  transform:translate(80px,50px) scale(1.08);
 }
}


@keyframes syLoginGlowB{
 from{
  transform:translate(0,0) scale(.92);
 }
 to{
  transform:translate(-70px,-45px) scale(1.07);
 }
}


/* GRID TEXTURE */

body:has(> .login) .login::before{
 content:"";

 position:absolute;
 inset:-120px;

 pointer-events:none;

 background-image:
  linear-gradient(
   rgba(148,163,184,.025) 1px,
   transparent 1px
  ),
  linear-gradient(
   90deg,
   rgba(148,163,184,.025) 1px,
   transparent 1px
  );

 background-size:
  34px 34px;

 mask-image:
  radial-gradient(
   circle,
   black 0%,
   transparent 66%
  );

 opacity:.65;
}


/* LOGIN CARD */

body:has(> .login) > .login{
 position:relative;

 z-index:3;

 width:min(430px,calc(100vw - 32px))!important;

 margin:0!important;

 padding:
  34px 34px 30px!important;

 border:
  1px solid rgba(148,163,184,.13)!important;

 border-radius:
  25px!important;

 background:
  linear-gradient(
   155deg,
   rgba(15,22,38,.88),
   rgba(7,12,23,.93)
  )!important;

 backdrop-filter:
  blur(28px)
  saturate(130%);

 box-shadow:
  0 35px 100px rgba(0,0,0,.42),
  inset 0 1px 0 rgba(255,255,255,.035)!important;

 animation:
  syLoginEnter .45s ease both;
}


@keyframes syLoginEnter{
 from{
  opacity:0;
  transform:
   translateY(14px)
   scale(.985);
 }

 to{
  opacity:1;
  transform:none;
 }
}


/* TOP IDENTITY */

body:has(> .login) .login .logo{
 position:relative;

 width:70px!important;
 height:70px!important;

 margin:0 auto;

 display:grid!important;
 place-items:center;

 padding:5px!important;

 border-radius:
  21px!important;

 background:
  linear-gradient(
   145deg,
   rgba(34,211,238,.065),
   rgba(139,92,246,.065)
  )!important;

 border:
  1px solid rgba(103,232,249,.14)!important;

 box-shadow:
  0 18px 50px rgba(34,211,238,.09)!important;
}


body:has(> .login) .login .logo::after{
 content:"";

 position:absolute;

 inset:-6px;

 z-index:-1;

 border-radius:27px;

 background:
  linear-gradient(
   135deg,
   rgba(34,211,238,.14),
   rgba(139,92,246,.14)
  );

 filter:blur(16px);
}


body:has(> .login) .login .logo img{
 width:100%!important;
 height:100%!important;

 display:block;
}


body:has(> .login) .login h1{
 margin:
  21px 0 6px!important;

 text-align:center;

 color:#f8fafc;

 font-size:
  25px!important;

 font-weight:900;

 letter-spacing:-.035em;
}


body:has(> .login) .login .sub{
 margin:
  0 0 28px!important;

 text-align:center;

 color:#78879c!important;

 font-size:10px!important;

 letter-spacing:.025em;
}


/* FIELD LABELS */

body:has(> .login) .login label{
 display:block;

 margin:
  15px 0 7px!important;

 color:#96a4b8!important;

 font-size:9px!important;

 font-weight:800;

 letter-spacing:.055em;

 text-transform:uppercase;
}


/* INPUTS */

body:has(> .login) .login input{
 width:100%;

 height:46px;

 box-sizing:border-box;

 padding:
  0 13px!important;

 border:
  1px solid rgba(148,163,184,.13)!important;

 border-radius:
  11px!important;

 background:
  rgba(3,7,16,.67)!important;

 color:#e2e8f0!important;

 font-size:12px;

 outline:none;

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


body:has(> .login) .login input:focus{
 border-color:
  rgba(34,211,238,.36)!important;

 background:
  rgba(5,10,21,.91)!important;

 box-shadow:
  0 0 0 4px
  rgba(34,211,238,.05)!important;
}


/* LOGIN BUTTON */

body:has(> .login) .login button[type="submit"]{
 position:relative;

 width:100%;

 min-height:47px;

 margin-top:22px!important;

 overflow:hidden;

 border:0!important;

 border-radius:
  11px!important;

 background:
  linear-gradient(
   120deg,
   #0891b2,
   #4f7df3 52%,
   #7c3aed
  )!important;

 color:#fff!important;

 font-size:11px!important;

 font-weight:900!important;

 letter-spacing:.02em;

 cursor:pointer;

 box-shadow:
  0 14px 35px
  rgba(79,125,243,.16)!important;

 transition:
  transform .14s ease,
  box-shadow .14s ease;
}


body:has(> .login) .login button[type="submit"]:hover{
 transform:translateY(-1px);

 box-shadow:
  0 18px 42px
  rgba(79,125,243,.22)!important;
}


body:has(> .login) .login button[type="submit"]::before{
 content:"";

 position:absolute;

 top:0;
 left:-45%;

 width:35%;
 height:100%;

 transform:skewX(-22deg);

 background:
  linear-gradient(
   90deg,
   transparent,
   rgba(255,255,255,.18),
   transparent
  );

 transition:
  left .45s ease;
}


body:has(> .login)
.login button[type="submit"]:hover::before{
 left:115%;
}


/* ERROR */

body:has(> .login) .login .err{
 margin:
  0 0 15px!important;

 padding:
  10px 12px!important;

 border:
  1px solid rgba(251,113,133,.17)!important;

 border-radius:10px!important;

 background:
  rgba(251,113,133,.055)!important;

 color:#fda4af!important;

 font-size:9px!important;
}


/* SECURITY FOOTER */

body:has(> .login) .login .secure{
 position:relative;

 display:flex;

 align-items:center;
 justify-content:center;

 gap:7px;

 margin-top:
  20px!important;

 padding-top:17px;

 border-top:
  1px solid rgba(148,163,184,.075);

 color:#5f6e83!important;

 font-size:8px!important;

 font-weight:700;
}


body:has(> .login) .login .secure::before{
 content:"";

 width:6px;
 height:6px;

 border-radius:50%;

 background:#34d399;

 box-shadow:
  0 0 10px rgba(52,211,153,.65);
}


/* BRAND CAPTION */

body:has(> .login) .login::after{
 content:"SEEYOUIOS • PRIVATE OPERATIONS";

 position:absolute;

 left:50%;
 bottom:-35px;

 transform:
  translateX(-50%);

 width:max-content;

 color:#3f4c60;

 font-size:7px;

 font-weight:900;

 letter-spacing:.16em;
}


/* MOBILE */

@media(max-width:560px){

 body:has(> .login){
  padding:16px;
 }


 body:has(> .login) > .login{
  padding:
   28px 22px 25px!important;

  border-radius:
   21px!important;
 }


 body:has(> .login) .login .logo{
  width:62px!important;
  height:62px!important;
 }


 body:has(> .login) .login h1{
  font-size:
   22px!important;
 }
}


/* ACCESSIBILITY */

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

 body:has(> .login)::before,
 body:has(> .login)::after,
 body:has(> .login) > .login{
  animation:none!important;
 }


 body:has(> .login) *{
  transition:none!important;
 }
}