@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Orbitron:wght@500;700;800&display=swap');
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#02070b;color:#fff}body{min-height:100vh;background:linear-gradient(rgba(0,7,12,.60),rgba(0,7,12,.72)),url("xeno-servers-tools-bg.png") center center/cover fixed no-repeat}a{color:inherit;text-decoration:none}.site-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding-left:max(18px,calc((100vw - 920px)/2));padding-right:28px;background:rgba(1,5,8,.98);border-bottom:1px solid rgba(0,190,255,.13)}.brand{display:flex;align-items:center;font-family:Orbitron,sans-serif;font-size:27px;font-weight:800;letter-spacing:1.5px}.brand .x{font-size:36px;color:#19c4ff;filter:drop-shadow(0 0 8px #00a8ff);transform:skew(-7deg)}.page-wrap{flex:1 0 auto;display:flex;justify-content:center;align-items:flex-start;padding:70px 12px 28px}.login-card{width:430px;max-width:calc(100vw - 24px);padding:24px 28px 26px;border-radius:11px;border:1px solid rgba(0,190,255,.24);background:linear-gradient(180deg,rgba(5,18,27,.96),rgba(3,11,17,.98));box-shadow:0 18px 44px rgba(0,0,0,.38)}.login-head{text-align:center;margin-bottom:22px}.mini-logo{font-family:Orbitron,sans-serif;font-size:11px;font-weight:800;letter-spacing:3.5px;color:#19c7ff}.login-head h1{margin:6px 0 3px;font-family:Orbitron,sans-serif;font-size:20px;line-height:1.1}.login-head p{margin:0;color:#83949f;font-size:9px}.field{display:flex;flex-direction:column;gap:5px;color:#dceef7;font-size:8.5px;font-weight:800;letter-spacing:.45px;margin-bottom:14px}.field input{width:100%;height:38px;padding:0 11px;border-radius:5px;border:1px solid rgba(73,151,195,.30);background:#02080c;color:#fff;font-size:11px;outline:none;transition:border-color .12s ease,box-shadow .12s ease}.field input:focus{border-color:#14c2ff;box-shadow:0 0 0 2px rgba(0,185,255,.08)}.password-wrap{position:relative}.password-wrap input{padding-right:58px}.show-password{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#18c5ff;font-size:7px;font-weight:800;letter-spacing:.6px;cursor:pointer;padding:5px}.login-links{display:flex;justify-content:flex-end;margin-top:-4px;margin-bottom:7px}.muted-link{font-size:7.5px;font-weight:700;color:#6f8795;letter-spacing:.5px;transition:color .12s ease}.muted-link:hover{color:#19c7ff}.create-account-row{margin-top:18px;text-align:center;color:#6f8795;font-size:7.5px;font-weight:700;letter-spacing:.35px}.create-account-row a{margin-left:5px;color:#19c7ff}.alert{margin-bottom:14px;padding:8px 10px;border-radius:6px;font-size:8.5px}.error{background:rgba(200,35,35,.12);border:1px solid rgba(255,65,65,.35);color:#ffb0b0}.titan-btn{--titan-cut:10px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:160px;height:44px;padding:2px;border:0;outline:0;background:transparent;cursor:pointer;isolation:isolate;overflow:hidden;clip-path:polygon(var(--titan-cut) 0,100% 0,100% calc(100% - var(--titan-cut)),calc(100% - var(--titan-cut)) 100%,0 100%,0 var(--titan-cut));transform:translateZ(0) scale(1);transition:transform .16s cubic-bezier(.2,.8,.2,1),filter .16s ease}.titan-btn::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#00eaff,#5b5cff,#ff00b8,#ff5a00,#fff200,#00ff9d,#00eaff);background-size:400% 100%;animation:titan-line 4s linear infinite;clip-path:inherit}.titan-btn::after{content:"";position:absolute;inset:2px;z-index:-1;background:linear-gradient(180deg,#111923 0%,#070b10 52%,#030507 100%);clip-path:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.9)}.titan-btn>span{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 16px;font-family:Orbitron,Inter,Arial,sans-serif;font-size:9px;font-weight:800;line-height:1;letter-spacing:1.1px;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.42);white-space:nowrap}.titan-btn>span::before{content:"";position:absolute;left:9px;top:7px;width:18px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.75),transparent);opacity:.75}.titan-btn:hover{transform:scale(1.055) translateY(-1px);filter:drop-shadow(0 0 7px rgba(0,225,255,.55)) drop-shadow(0 0 12px rgba(255,0,184,.28))}.titan-btn:active,.titan-btn.pressed{transform:scale(.965) translateY(1px);filter:drop-shadow(0 0 4px rgba(0,225,255,.35));transition-duration:.05s}.titan-btn:focus-visible{filter:drop-shadow(0 0 9px rgba(255,255,255,.72)) drop-shadow(0 0 14px rgba(0,225,255,.58))}.nav-btn{--titan-cut:8px;width:118px;height:34px}.nav-btn>span{font-size:8px;letter-spacing:.9px}.submit-btn{--titan-cut:9px;width:175px;height:38px;display:flex;margin:18px auto 0}.submit-btn>span{font-size:8.5px;letter-spacing:1px}.show-password{--mini-cut:5px;position:absolute;right:7px;top:50%;transform:translateY(-50%);min-width:48px;height:24px;padding:1px 7px;border:0;outline:0;background:linear-gradient(90deg,#00d9ff,#7a5cff,#ff00aa,#ff7a00,#00e7ff);background-size:300% 100%;animation:titan-line 3s linear infinite;clip-path:polygon(var(--mini-cut) 0,100% 0,100% calc(100% - var(--mini-cut)),calc(100% - var(--mini-cut)) 100%,0 100%,0 var(--mini-cut));color:#fff;font-family:Orbitron,Inter,Arial,sans-serif;font-size:6.5px;font-weight:800;letter-spacing:.55px;cursor:pointer}.show-password::before{content:"";position:absolute;inset:1px;z-index:-1;background:#05090d;clip-path:inherit}.show-password:hover{filter:drop-shadow(0 0 6px rgba(0,220,255,.65));transform:translateY(-50%) scale(1.05)}.show-password:active{transform:translateY(-50%) scale(.95)}@keyframes titan-line{0%{background-position:0 0}100%{background-position:300% 0}}.xeno-footer{width:100%;margin-top:auto;border-top:1px solid rgba(0,190,255,.18);background:rgba(1,5,8,.94);backdrop-filter:blur(8px);flex-shrink:0}.footer-inner{min-height:58px;max-width:920px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.footer-brand{display:flex;align-items:center;font-family:Orbitron,sans-serif;font-size:15px;font-weight:800;letter-spacing:1px}.footer-x{color:#19c4ff;font-size:22px;margin-right:1px;filter:drop-shadow(0 0 6px #00a8ff)}.footer-sub{margin-left:8px;color:#6f8795;font-family:Inter,Arial,sans-serif;font-size:7px;letter-spacing:1.6px}.footer-copy{color:#71818c;font-size:8px}.dashboard-wrap{padding-top:70px}.dashboard-card{width:520px}.account-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.account-info div{padding:12px;border:1px solid rgba(0,174,255,.16);border-radius:7px;background:rgba(3,10,15,.82)}.account-info span{display:block;color:#17c6ff;font-size:7px;font-weight:800;letter-spacing:.6px;margin-bottom:6px}.account-info strong{font-size:10px}.dashboard-note{margin:18px 0 0;text-align:center;color:#71818c;font-size:8px;line-height:1.5}@media(max-width:560px){.topbar{padding-left:14px;padding-right:14px}.page-wrap{padding-top:28px}.login-card{width:calc(100vw - 20px);padding:20px 16px 22px}.footer-inner{flex-direction:column;justify-content:center;text-align:center;gap:4px}.account-info{grid-template-columns:1fr}}

/* XENO LOGIN - MOBILE READY */
@media (max-width: 768px){
  html,body{width:100%;overflow-x:hidden}
  body{background-attachment:scroll;background-position:center top}
  .site-shell{min-height:100svh}
  .topbar{
    height:auto;
    min-height:56px;
    padding:8px 14px;
    gap:12px;
  }
  .brand{font-size:22px;letter-spacing:1px;flex-shrink:0}
  .brand .x{font-size:30px}
  .nav-btn{width:108px;height:32px;flex-shrink:0}
  .nav-btn>span{font-size:7.5px;padding:0 10px}
  .page-wrap{
    flex:1;
    align-items:center;
    padding:24px 12px;
  }
  .login-card{
    width:min(430px,100%);
    max-width:100%;
    padding:22px 18px 24px;
    border-radius:10px;
  }
  .login-head{margin-bottom:20px}
  .login-head h1{font-size:18px}
  .login-head p{font-size:10px}
  .field{font-size:9px;margin-bottom:15px}
  .field input{height:42px;font-size:16px}
  .password-wrap input{padding-right:68px}
  .show-password{right:8px;min-width:54px;height:26px;font-size:7px}
  .login-links{margin-bottom:10px}
  .muted-link,.create-account-row{font-size:8px}
  .submit-btn{width:min(190px,72vw);height:40px}
  .submit-btn>span{font-size:8.5px}
  .xeno-footer{margin-top:0}
  .footer-inner{
    min-height:52px;
    padding:9px 14px;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:4px;
  }
  .footer-copy{font-size:7px;line-height:1.35}
}

@media (max-width: 420px){
  .topbar{padding:7px 10px}
  .brand{font-size:19px}
  .brand .x{font-size:27px}
  .nav-btn{width:96px;height:30px;--titan-cut:7px}
  .nav-btn>span{font-size:7px;letter-spacing:.65px;padding:0 8px}
  .page-wrap{padding:18px 10px}
  .login-card{padding:20px 14px 22px}
  .mini-logo{font-size:10px;letter-spacing:3px}
  .login-head h1{font-size:16px;line-height:1.2}
  .login-head p{font-size:9px}
  .field input{height:44px}
  .submit-btn{width:100%;max-width:220px}
  .create-account-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;line-height:1.4}
  .create-account-row a{margin-left:0}
  .footer-sub{display:none}
}

@media (max-width: 340px){
  .topbar{gap:8px}
  .brand{font-size:17px}
  .brand .x{font-size:24px}
  .nav-btn{width:88px}
  .nav-btn>span{font-size:6.5px}
}

@media (hover:none) and (pointer:coarse){
  .titan-btn:hover{transform:none;filter:none}
  .show-password:hover{transform:translateY(-50%);filter:none}
  .muted-link:hover{color:#6f8795}
}
