*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;}
html,body{width:100%;min-height:100%;}
body{width: 100%;min-height:100vh;overflow-x: hidden;background: #111 center center no-repeat;background-size: cover;position:relative;}
body:before{content:"";position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,var(--login-mask-opacity,.28));pointer-events:none;z-index:0;}
body>.login_bg,body>#mpanel1,body>#mpanel2,body>.layui-m-layer{position:relative;z-index:1;}
img{vertical-align: middle;max-width: 100%;}
a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color: transparent;outline:none;text-decoration: none;
}
/*头像*/
.head .img{width: 1.45rem;height: 1.45rem;background: #FFFFFF;border-radius: 50%;margin: 0 auto;margin-top: 1.25rem;text-align: center;overflow: hidden;}
.head img{    width: 5.62667rem;
  height: 2.21333rem;
  position: absolute;
  float: left;
  top: 0.98667rem;
  left: 1.01rem;
}
.head p{text-align: center;color: #FFFFFF;font-size: .24rem;padding-top: .15rem;}
/*登陆表单*/
.form {width: 100%;height: auto;overflow: hidden;padding: 3.85rem 1.2rem .45rem 1.2rem;background: transparent;}
.form .item{display: flex;align-items: center;height: .85rem;margin-bottom: .35rem;font-size: .30rem;color: #FFFFFF;}
.form .item input{width: 100%;height: 100%;display: inline-block;border: .03rem solid #ebebeb;border-radius: .85rem;box-shadow: 0px 0px 10px rgba(200,200,200,.1);padding-left: 1rem;outline: none;}
.form .item input.name{background: url(../images/icon-phone.png) left .3rem center no-repeat;background-size: .55rem 0.49rem;}
.form .item input.vcode{background: url(../images/icon-verify.png) left .3rem center no-repeat;background-size: .55rem .49rem;}
.form .item input.password{background: url(../images/icon-lock.png) left .3rem center no-repeat;background-size: .55rem 0.49rem;}
.form .item span{flex-shrink: 0;display: inline-block;width: 1.6rem;margin-left: .2rem;height: 100%;line-height: .85rem;border-radius: .85rem;background: #1f6ecf;font-size: .24rem;color: #fff;text-align: center;}
.form .item span.disabled{background: #808080;}
.form .item.nickname-item input{width:auto;min-width:0;flex:1;padding-right:.25rem;}
.nickname-random-btn{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 .92rem;width:.92rem;height:.85rem;margin-left:.16rem;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;overflow:hidden;}
.nickname-random-btn:active{transform:translateY(.02rem);box-shadow:none;}
.form .item .nickname-random-btn .nickname-dice-image{display:block;flex:0 0 .64rem;width:.64rem;height:.64rem;max-width:none;margin:0;object-fit:contain;transform:rotate(0deg) scale(1);transform-origin:50% 50%;}
.nickname-random-btn.is-rolling .nickname-dice-image{animation:qjNicknameDiceImageRollV242 .46s cubic-bezier(.2,.75,.3,1)}
@keyframes qjNicknameDiceImageRollV242{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(190deg) scale(.88)}100%{transform:rotate(360deg) scale(1)}}
/* 20260728-lobby-content-nickname-v240: stable right-side dice control for both registration forms. */
/* 20260729-lobby-dynamic-notice-broadcast-style-v241: dimensional single-die button. */
/* 20260729-register-dice-rich-notice-broadcast-style-v242: isolate the cube from generic form span styles. */
/* 20260729-register-dice-image-v242b: use a fixed 1:1 bitmap so mobile perspective cannot distort the die. */
/* 20260729-register-dice-transparent-button-v242c: keep the hit target but remove its white tile. */
.form p{text-align: center;color: #FFFFFF;font-size: .24rem;padding-top: .2rem;}
.form .submit{padding: .2rem .2rem;}
.form .submit button{height: .85rem;line-height: .85rem;text-align: center;font-size: .34rem;color: #FFFFFF;border-radius: .85rem;outline: none;box-shadow: 0 .15rem .15rem rgba(31,110,207,.2);display: inline-block;width: 100%;background: #03a9f4;}
/* 20260715-phone-register-compact-layout-v85: keep the SMS register form close to its smaller page title. */
/* 20260716-captcha-reset-layout-v93: keep SMS registration and password recovery compact and visually consistent. */
#regDiv2 .head p,
#resetDiv .head p{margin-top:1.05rem!important;padding-top:0;font-size:.46rem!important;line-height:.64rem;font-weight:500;}
#regDiv2 .form,
#resetDiv .form{padding-top:1.55rem;}
@media (max-height:700px){
  #regDiv2 .head p,
  #resetDiv .head p{margin-top:.7rem!important;}
  #regDiv2 .form,
  #resetDiv .form{padding-top:.85rem;}
  #regDiv2 .form .item,
  #resetDiv .form .item{margin-bottom:.25rem;}
}
/*第三方登陆*/
.other-login{display:none!important;}
.other-login p{text-align: center;position: relative;display: flex;align-items: center;justify-content: center;width: 3.7rem;margin: 0 auto;}
.other-login p:after{content: "";height: .01rem;width: 100%;background: #808080;top: 50%;transform: translateY(-50%);position: absolute;}
.other-login p span{display: inline-block;padding: .1rem .3rem;background: #FFFFFF;color: #808080;font-size: .22rem;z-index: 2;}
.other-login .third ul{display: flex;align-items: center;justify-content: center;}
.other-login .third ul li img{width: .66rem;height: .66rem;margin: 0 .25rem;}
/*尾部*/
.footer{text-align: center;padding-top: .3rem;}
.footer img{display: inline-block;width: 1.07rem;height: .35rem;}
.footer p{font-size: .20rem;color: #666666;text-align: center;padding: .1rem 0 .4rem 0;letter-spacing: .01rem;}
.footer p a{color: #078dda;}
.layui-m-layer {
  position: relative;
  z-index: 19891014
}

.layui-m-layer * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box
}

.layui-m-layermain, .layui-m-layershade {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.layui-m-layershade {
  background-color: rgba(0, 0, 0, .7);
  pointer-events: auto
}

.layui-m-layermain {
  display: table;
  font-family: Helvetica, arial, sans-serif;
  pointer-events: none
}

.layui-m-layermain .layui-m-layersection {
  display: table-cell;
  vertical-align: middle;
  text-align: center
}

.layui-m-layerchild {
  position: relative;
  display: inline-block;
  text-align: left;
  background-color: #fff;
  font-size: 14px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: .2s;
  animation-duration: .2s
}

@-webkit-keyframes layui-m-anim-scale {
  0% {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes layui-m-anim-scale {
  0% {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.layui-m-anim-scale {
  animation-name: layui-m-anim-scale;
  -webkit-animation-name: layui-m-anim-scale
}

@-webkit-keyframes layui-m-anim-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(800px);
    transform: translateY(800px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes layui-m-anim-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(800px);
    transform: translateY(800px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.layui-m-anim-up {
  -webkit-animation-name: layui-m-anim-up;
  animation-name: layui-m-anim-up
}

.layui-m-layer0 .layui-m-layerchild {
  width: 90%;
  max-width: 640px
}

.layui-m-layer1 .layui-m-layerchild {
  border: none;
  border-radius: 0
}

.layui-m-layer2 .layui-m-layerchild {
  width: auto;
  max-width: 260px;
  min-width: 40px;
  border: none;
  background: 0 0;
  box-shadow: none;
  color: #fff
}

.layui-m-layerchild h3 {
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 5px 5px 0 0;
  text-align: center
}

.layui-m-layerbtn span, .layui-m-layerchild h3 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.layui-m-layercont {
  padding: 50px 30px;
  line-height: 22px;
  text-align: center
}

.layui-m-layer1 .layui-m-layercont {
  padding: 0;
  text-align: left
}

.layui-m-layer2 .layui-m-layercont {
  text-align: center;
  padding: 0;
  line-height: 0
}

.layui-m-layer2 .layui-m-layercont i {
  width: 25px;
  height: 25px;
  margin-left: 8px;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.layui-m-layerbtn, .layui-m-layerbtn span {
  position: relative;
  text-align: center;
  border-radius: 0 0 5px 5px
}

.layui-m-layer2 .layui-m-layercont p {
  margin-top: 20px
}

@-webkit-keyframes layui-m-anim-loading {
  0%, 100%, 80% {
    transform: scale(0);
    -webkit-transform: scale(0)
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1)
  }
}

@keyframes layui-m-anim-loading {
  0%, 100%, 80% {
    transform: scale(0);
    -webkit-transform: scale(0)
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1)
  }
}

.layui-m-layer2 .layui-m-layercont i:first-child {
  margin-left: 0;
  -webkit-animation-delay: -.32s;
  animation-delay: -.32s
}

.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
  -webkit-animation-delay: -.16s;
  animation-delay: -.16s
}

.layui-m-layer2 .layui-m-layercont > div {
  line-height: 22px;
  padding-top: 7px;
  margin-bottom: 20px;
  font-size: 14px
}

.layui-m-layerbtn {
  display: box;
  display: -moz-box;
  display: -webkit-box;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 0;
  border-top: 1px solid #D0D0D0;
  background-color: #F2F2F2
}

.layui-m-layerbtn span {
  display: block;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-box-flex: 1;
  font-size: 14px;
  cursor: pointer
}

.layui-m-layerbtn span[yes] {
  color: #40AFFE
}

.layui-m-layerbtn span[no] {
  border-right: 1px solid #D0D0D0;
  border-radius: 0 0 0 5px
}

.layui-m-layerbtn span:active {
  background-color: #F6F6F6
}

.layui-m-layerend {
  position: absolute;
  right: 7px;
  top: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  font-weight: 400;
  background: 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 30px
}

.layui-m-layerend::after, .layui-m-layerend::before {
  position: absolute;
  left: 5px;
  top: 15px;
  content: '';
  width: 18px;
  height: 1px;
  background-color: #999;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 3px
}

.layui-m-layerend::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg)
}

body .layui-m-layer .layui-m-layer-footer {
  position: fixed;
  width: 95%;
  max-width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 10px;
  background: 0 0
}

.layui-m-layer-footer .layui-m-layercont {
  padding: 20px;
  border-radius: 5px 5px 0 0;
  background-color: rgba(255, 255, 255, .8)
}

.layui-m-layer-footer .layui-m-layerbtn {
  display: block;
  height: auto;
  background: 0 0;
  border-top: none
}

.layui-m-layer-footer .layui-m-layerbtn span {
  background-color: rgba(255, 255, 255, .8)
}

.layui-m-layer-footer .layui-m-layerbtn span[no] {
  color: #FD482C;
  border-top: 1px solid #c2c2c2;
  border-radius: 0 0 5px 5px
}

.layui-m-layer-footer .layui-m-layerbtn span[yes] {
  margin-top: 10px;
  border-radius: 5px
}

body .layui-m-layer .layui-m-layer-msg {
  width: auto;
  max-width: 90%;
  margin: 0 auto;
  bottom: -150px;
  background-color: rgba(0, 0, 0, .7);
  color: #fff
}

.layui-m-layer-msg .layui-m-layercont {
  padding: 10px 20px
}

/* login-logo-room-config-20260611a: configurable login/register logo */


/* 20260812-front-login-style-v432: screenshot-inspired white login/register layout without changing form behavior. */
body.login-style-clean-white{background:#fff!important;color:#263238;visibility:visible;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:0 .34rem 1rem;}
body.login-style-clean-white:before{display:none!important}
body.login-style-clean-white>.login_bg{width:100%;max-width:7.5rem;min-height:100vh;margin:0 auto;background:#fff;}
body.login-style-clean-white .head{position:relative;height:3.55rem;padding-top:.96rem;text-align:center;}
body.login-style-clean-white .head .login-logo-img{position:static;float:none;display:block;width:1.45rem;height:1.45rem;margin:0 auto;object-fit:contain;border-radius:.04rem;}
body.login-style-clean-white .head .qj-login-brand-name{display:block;min-height:.56rem;margin-top:.26rem;color:#173b68;font-size:.52rem;line-height:.64rem;font-weight:600;text-align:center;}
body.login-style-clean-white .head p{margin:0!important;padding-top:1.1rem!important;color:#173b68!important;font-size:.5rem!important;line-height:.7rem!important;font-weight:600!important;}
body.login-style-clean-white .form{padding:.18rem .62rem .4rem;background:#fff;overflow:visible;}
body.login-style-clean-white .form .item{height:.82rem;margin-bottom:.16rem;color:#4b5563;border-bottom:1px solid #edf0f3;}
body.login-style-clean-white .form .item input{height:.82rem;padding:0 .04rem;border:0;border-radius:0;background:none!important;box-shadow:none;color:#334155;font-size:.3rem;}
body.login-style-clean-white .form .item input::placeholder{color:#9aa1aa;opacity:1;}
body.login-style-clean-white .form .item span{width:1.78rem;height:.62rem;line-height:.62rem;margin-left:.16rem;border-radius:.34rem;background:#1788f5;font-size:.23rem;}
body.login-style-clean-white .form p{padding-top:.22rem;color:#1687ef;font-size:.26rem;line-height:.42rem;}
body.login-style-clean-white #loginDiv .form>p{position:relative;margin-top:-1.03rem;margin-bottom:.52rem;padding:.18rem 0;text-align:right!important;}
body.login-style-clean-white .form .submit{padding:.18rem .05rem;}
body.login-style-clean-white .form .submit button{height:.8rem;line-height:.8rem;border-radius:.44rem;background:linear-gradient(90deg,#1378ff 0%,#35c8e7 100%);box-shadow:0 .14rem .28rem rgba(27,151,238,.20);font-size:.34rem;}
body.login-style-clean-white .form .submit[id^=regEntryWrap] button{color:#1687ef;border:1px solid #1687ef;background:#fff;box-shadow:none;}
body.login-style-clean-white .nickname-random-btn{border:0!important;background:transparent!important;}
body.login-style-clean-white #regDiv2 .head p,body.login-style-clean-white #resetDiv .head p{margin:0!important;padding-top:1.1rem!important;}
body.login-style-clean-white #regDiv2 .form,body.login-style-clean-white #resetDiv .form{padding-top:.18rem;}
@media(max-height:700px){body.login-style-clean-white .head{height:2.65rem;padding-top:.45rem}body.login-style-clean-white .head .login-logo-img{width:1.15rem;height:1.15rem}body.login-style-clean-white .head .qj-login-brand-name{margin-top:.1rem;font-size:.4rem}body.login-style-clean-white .form{padding-top:.05rem}}

/* 20260812-front-login-style-diy-v433: safe DIY variables and screenshot-inspired templates. */
.qj-login-copy,.qj-login-security-text{display:none}
body.login-style-classic .qj-login-injected-brand{display:none!important}
body.login-style-clean-white,body.login-style-black-gold,body.login-style-tech-blue{--qj-page-color:#fff;--qj-panel-color:#fff;--qj-panel-bg:rgba(255,255,255,0);--qj-text-color:#173b68;--qj-muted-color:#7b8794;--qj-input-color:#334155;--qj-border-color:#e6e9ed;--qj-primary-color:#1378ff;--qj-primary-color-2:#35c8e7;--qj-button-text-color:#fff;--qj-link-color:#1687ef;--qj-glow-color:#1b97ee;--qj-glow-shadow:rgba(27,151,238,.28);--qj-mask-opacity:0;--qj-panel-opacity:0;--qj-panel-radius:16px;--qj-input-radius:0;--qj-button-radius:34px;--qj-content-width:390px;--qj-top-spacing:48px;background-color:var(--qj-page-color)!important;color:var(--qj-text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:0 16px 40px;overflow-x:hidden;overflow-y:auto}
body.login-style-clean-white:before,body.login-style-black-gold:before,body.login-style-tech-blue:before{display:block!important;background:rgba(0,0,0,var(--qj-mask-opacity));z-index:0}
body.login-style-clean-white>.login_bg,body.login-style-black-gold>.login_bg,body.login-style-tech-blue>.login_bg{width:min(100%,var(--qj-content-width));max-width:100%;min-height:100vh;margin:0 auto;background:transparent;color:var(--qj-text-color);overflow:visible}
body.login-style-clean-white .head,body.login-style-black-gold .head,body.login-style-tech-blue .head{position:relative;height:auto;min-height:240px;padding:var(--qj-top-spacing) 16px 24px;text-align:center}
body.login-style-clean-white .head>p,body.login-style-black-gold .head>p,body.login-style-tech-blue .head>p{display:none!important}
body.login-style-clean-white .head .login-logo-img,body.login-style-black-gold .head .login-logo-img,body.login-style-tech-blue .head .login-logo-img{position:static;float:none;display:block;width:112px;height:80px;margin:0 auto;object-fit:contain;border-radius:0}
body.login-style-clean-white .head .qj-login-brand-name,body.login-style-black-gold .head .qj-login-brand-name,body.login-style-tech-blue .head .qj-login-brand-name{display:block;min-height:28px;margin-top:10px;color:var(--qj-text-color);font-size:22px;line-height:30px;font-weight:600;text-align:center}
body.login-style-clean-white .qj-login-copy,body.login-style-black-gold .qj-login-copy,body.login-style-tech-blue .qj-login-copy{display:block;margin-top:12px;text-align:center}
.qj-login-page-title{font-size:30px;line-height:40px;font-weight:700;color:var(--qj-text-color)}
.qj-login-page-subtitle{margin-top:4px;font-size:15px;line-height:23px;color:var(--qj-muted-color)}
body.qj-login-hide-subtitle .qj-login-page-subtitle{display:none}
body.login-style-clean-white .form,body.login-style-black-gold .form,body.login-style-tech-blue .form{width:100%;height:auto;padding:24px;background:rgba(255,255,255,0);border:1px solid transparent;border-radius:var(--qj-panel-radius);overflow:visible}
body.qj-login-show-panel.login-style-clean-white .form,body.qj-login-show-panel.login-style-black-gold .form,body.qj-login-show-panel.login-style-tech-blue .form{background:var(--qj-panel-bg);border-color:var(--qj-border-color)}
body.login-style-clean-white .form .item,body.login-style-black-gold .form .item,body.login-style-tech-blue .form .item{display:flex;align-items:center;width:100%;height:54px;margin:0 0 14px;color:var(--qj-input-color);border:1px solid var(--qj-border-color);border-radius:var(--qj-input-radius);background:rgba(0,0,0,.04);overflow:hidden}
body.login-style-clean-white .form .item input,body.login-style-black-gold .form .item input,body.login-style-tech-blue .form .item input{min-width:0;width:100%;height:52px;padding:0 18px;border:0!important;border-radius:var(--qj-input-radius)!important;background:none!important;box-shadow:none!important;color:var(--qj-input-color)!important;font-size:16px;line-height:52px;outline:0}
body.login-style-clean-white .form .item input::placeholder,body.login-style-black-gold .form .item input::placeholder,body.login-style-tech-blue .form .item input::placeholder{color:var(--qj-muted-color);opacity:.9}
body.login-style-clean-white .form .item span,body.login-style-black-gold .form .item span,body.login-style-tech-blue .form .item span{flex:0 0 auto;width:auto;min-width:104px;height:38px;margin:0 8px;line-height:38px;padding:0 12px;border-radius:20px;background:var(--qj-primary-color);color:var(--qj-button-text-color);font-size:13px;text-align:center}
body.login-style-clean-white .form p,body.login-style-black-gold .form p,body.login-style-tech-blue .form p{padding:7px 2px;color:var(--qj-link-color);font-size:14px!important;line-height:24px}
body.login-style-clean-white #loginDiv .form>p,body.login-style-black-gold #loginDiv .form>p,body.login-style-tech-blue #loginDiv .form>p{position:static;margin:-5px 0 7px;padding:2px;text-align:right!important}
body.login-style-clean-white .form .submit,body.login-style-black-gold .form .submit,body.login-style-tech-blue .form .submit{padding:7px 0}
body.login-style-clean-white .form .submit button,body.login-style-black-gold .form .submit button,body.login-style-tech-blue .form .submit button{width:100%;height:54px;line-height:54px;border:1px solid var(--qj-primary-color);border-radius:var(--qj-button-radius);background:linear-gradient(90deg,var(--qj-primary-color),var(--qj-primary-color-2));box-shadow:0 8px 22px var(--qj-glow-shadow);color:var(--qj-button-text-color);font-size:19px;font-weight:600}
body.login-style-clean-white .form .submit[id^=regEntryWrap] button,body.login-style-black-gold .form .submit[id^=regEntryWrap] button,body.login-style-tech-blue .form .submit[id^=regEntryWrap] button{border-color:var(--qj-border-color);background:transparent;box-shadow:none;color:var(--qj-link-color)}
body.login-style-clean-white .nickname-random-btn,body.login-style-black-gold .nickname-random-btn,body.login-style-tech-blue .nickname-random-btn{flex:0 0 48px!important;width:48px!important;height:48px!important;border:0!important;background:transparent!important}
body.login-style-clean-white .qj-login-security-text,body.login-style-black-gold .qj-login-security-text,body.login-style-tech-blue .qj-login-security-text{display:block;margin:38px auto 16px;color:var(--qj-muted-color);font-size:14px;line-height:24px;text-align:center}
body.login-style-clean-white .other-login,body.login-style-black-gold .other-login,body.login-style-tech-blue .other-login{color:var(--qj-muted-color)}
body.login-style-clean-white .other-login p:before,body.login-style-clean-white .other-login p:after,body.login-style-black-gold .other-login p:before,body.login-style-black-gold .other-login p:after,body.login-style-tech-blue .other-login p:before,body.login-style-tech-blue .other-login p:after{background:var(--qj-border-color)}
body.login-style-black-gold{--qj-page-color:#0d0e0f;--qj-panel-color:#161719;--qj-text-color:#f3e2b2;--qj-muted-color:#d8c99d;--qj-input-color:#f8f2df;--qj-border-color:#cdb77b;--qj-primary-color:#26272a;--qj-primary-color-2:#050505;--qj-button-text-color:#f3e2b2;--qj-link-color:#e9d59f;--qj-glow-color:#d1b66f;background-image:url('../images/template-black-gold-rock-v445.png')}
body.login-style-black-gold .form .item{background:rgba(15,16,17,.64);box-shadow:inset 0 0 16px rgba(205,183,123,.08)}
body.login-style-black-gold .form .submit button{text-shadow:0 0 8px rgba(243,226,178,.28)}
body.login-style-tech-blue{--qj-page-color:#020a12;--qj-panel-color:#0b2538;--qj-text-color:#f4fbff;--qj-muted-color:#b6d8e8;--qj-input-color:#eaf9ff;--qj-border-color:#75ddf4;--qj-primary-color:#168cff;--qj-primary-color-2:#2ef2e7;--qj-button-text-color:#fff;--qj-link-color:#a9f6ff;--qj-glow-color:#20d9ff;background-image:url('../images/template-tech-blue-v433.png')}
body.login-style-tech-blue .head .login-logo-img{filter:drop-shadow(0 0 12px var(--qj-glow-color))}
body.login-style-tech-blue .form{box-shadow:0 0 24px var(--qj-glow-shadow),inset 0 0 22px rgba(32,217,255,.08);backdrop-filter:blur(8px)}
body.login-style-tech-blue .form .item{border-width:0 0 1px;border-radius:0;background:transparent;box-shadow:none}
body.login-style-tech-blue .form .submit button{box-shadow:0 0 10px rgba(32,217,255,.9),0 0 24px rgba(22,140,255,.5)}
body.login-style-clean-white{background-color:#fff!important;background-image:none}
body.login-style-clean-white .form .item{border-width:0 0 1px;border-radius:0;background:transparent}
body.login-style-clean-white .head .login-logo-img{width:92px;height:92px}
@media(max-width:380px){body.login-style-clean-white,body.login-style-black-gold,body.login-style-tech-blue{padding-left:10px;padding-right:10px}body.login-style-clean-white .form,body.login-style-black-gold .form,body.login-style-tech-blue .form{padding:18px 14px}.qj-login-page-title{font-size:26px}.qj-login-page-subtitle{font-size:14px}body.login-style-clean-white .form .item input,body.login-style-black-gold .form .item input,body.login-style-tech-blue .form .item input{padding-left:12px;padding-right:12px;font-size:15px}}
@media(max-height:740px){body.login-style-clean-white .head,body.login-style-black-gold .head,body.login-style-tech-blue .head{min-height:190px;padding-top:28px;padding-bottom:12px}body.login-style-clean-white .head .login-logo-img,body.login-style-black-gold .head .login-logo-img,body.login-style-tech-blue .head .login-logo-img{width:82px;height:62px}.qj-login-page-title{font-size:25px;line-height:33px}body.login-style-clean-white .qj-login-copy,body.login-style-black-gold .qj-login-copy,body.login-style-tech-blue .qj-login-copy{margin-top:6px}body.login-style-clean-white .form,body.login-style-black-gold .form,body.login-style-tech-blue .form{padding-top:16px;padding-bottom:16px}body.login-style-clean-white .qj-login-security-text,body.login-style-black-gold .qj-login-security-text,body.login-style-tech-blue .qj-login-security-text{margin-top:18px}}

/* 20260812-front-login-builder-v434: constrained room-scoped component layout. */
body.qj-login-canvas-layout{display:block!important;padding:0 12px 32px!important}
body.qj-login-canvas-layout>.login_bg.qj-login-layout-panel{position:relative!important;width:min(100%,var(--qj-content-width))!important;max-width:100%!important;margin:0 auto!important;overflow:hidden!important;background:transparent!important}
body.qj-login-canvas-layout .qj-login-layout-static{position:static!important;width:auto!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important}
body.qj-login-canvas-layout .qj-login-layout-static.qj-login-copy{display:block!important}
body.qj-login-canvas-layout .head>p{display:none!important}
body.qj-login-canvas-layout .qj-login-layout-component{box-sizing:border-box!important;margin:0!important;transform:none!important}
body.qj-login-canvas-layout .qj-login-layout-panel>.form{overflow:visible!important}
body.qj-login-canvas-layout .qj-login-layout-panel>.other-login{height:auto!important;padding:0!important}
body.qj-login-canvas-layout .qj-login-layout-panel>.other-login p{margin:0 0 10px!important}
@media(max-width:380px){body.qj-login-canvas-layout{padding-left:8px!important;padding-right:8px!important}body.qj-login-canvas-layout .qj-login-layout-panel>.form{padding-left:12px!important;padding-right:12px!important}}

/* 20260812-front-login-free-canvas-v436: per-control layout shared with the admin canvas. */
body.qj-login-canvas-layout{padding:0!important;background-position:center center!important;background-size:cover!important}
body.qj-login-canvas-layout>.login_bg.qj-login-layout-panel{width:min(100%,var(--qj-content-width,390px))!important;min-height:100vh!important;overflow:hidden!important}
body.qj-login-canvas-layout .qj-login-layout-static-form{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
body.qj-login-canvas-layout .qj-login-layout-input{display:flex!important;align-items:center!important;color:var(--qj-input-color,#fff)!important;box-shadow:none!important}
body.qj-login-canvas-layout .qj-login-layout-input input{width:100%!important;height:100%!important;padding:0 18px!important;border:0!important;border-radius:inherit!important;background-color:transparent!important;color:inherit!important;font-size:inherit!important;line-height:normal!important;outline:0!important}
body.qj-login-canvas-layout .qj-login-layout-input input::placeholder{color:inherit!important;opacity:.76}
body.qj-login-canvas-layout .qj-login-layout-button{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;box-shadow:none!important;color:var(--qj-button-text-color,#fff)!important}
body.qj-login-canvas-layout .qj-login-layout-button button{width:100%!important;height:100%!important;padding:0!important;border:0!important;border-radius:inherit!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font-size:inherit!important;line-height:normal!important}
body.qj-login-canvas-layout .qj-login-layout-text{display:flex!important;align-items:center!important;line-height:1.35!important;padding:0!important;color:var(--qj-link-color,#fff)}
body.qj-login-canvas-layout .qj-login-layout-logo{display:block!important;margin:0!important}
body.qj-login-canvas-layout .nickname-random-btn:not(.qj-login-layout-nickname-action){position:absolute!important;right:8px;top:50%;width:34px!important;height:34px!important;margin:0!important;transform:translateY(-50%);z-index:2}
body.qj-login-canvas-layout .nickname-random-btn .nickname-dice-image{width:28px!important;height:28px!important}
body.qj-login-canvas-layout .qj-login-layout-input span[id^=sendSmsId]{position:absolute;right:0;top:0;height:100%!important;margin:0!important;border-radius:inherit!important}
@media(max-width:380px){body.qj-login-canvas-layout .qj-login-layout-input input{padding-left:14px!important;padding-right:14px!important}}

/* 20260812-front-login-real-templates-v441: live pages match the admin canvas and references. */
body.qj-login-canvas-layout[data-login-template=classic]{background-color:#e73618!important;background-image:url('../images/template-red-gold-v441.jpg');background-position:center!important;background-size:cover!important}
body.qj-login-canvas-layout[data-login-template=clean_white]{background:#fff!important}
body.qj-login-canvas-layout[data-login-template=black_gold]{background-color:#101113!important;background-image:url('../images/template-black-gold-rock-v445.png')}
body.qj-login-canvas-layout[data-login-template=tech_blue]{background-color:#020a12!important;background-image:url('../images/template-tech-blue-v433.png')}
body.qj-login-canvas-layout[data-login-template=classic] .qj-login-layout-input{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(2px)}
body.qj-login-canvas-layout[data-login-template=classic] .qj-login-layout-button{box-shadow:none!important}
body.qj-login-canvas-layout[data-login-template=clean_white] .qj-login-layout-input{border-width:0 0 1px!important;border-radius:0!important;background:transparent!important}
body.qj-login-canvas-layout[data-login-template=clean_white] .qj-login-layout-button{box-shadow:none!important}
body.qj-login-canvas-layout[data-login-template=black_gold] .qj-login-layout-input{clip-path:polygon(4% 0,96% 0,100% 22%,100% 78%,96% 100%,4% 100%,0 78%,0 22%);box-shadow:inset 0 0 16px rgba(205,183,123,.09)!important}
body.qj-login-canvas-layout[data-login-template=black_gold] .qj-login-layout-button{text-shadow:0 0 8px rgba(243,226,178,.28)}
body.qj-login-canvas-layout[data-login-template=black_gold] [id^=regEntryWrap].qj-login-layout-button{overflow:visible!important}
body.qj-login-canvas-layout[data-login-template=black_gold] [id^=regEntryWrap].qj-login-layout-button:before,body.qj-login-canvas-layout[data-login-template=black_gold] [id^=regEntryWrap].qj-login-layout-button:after{content:"";position:absolute;top:50%;width:18%;height:1px;background:linear-gradient(90deg,transparent,#cdb77b)}
body.qj-login-canvas-layout[data-login-template=black_gold] [id^=regEntryWrap].qj-login-layout-button:before{left:0}
body.qj-login-canvas-layout[data-login-template=black_gold] [id^=regEntryWrap].qj-login-layout-button:after{right:0;transform:rotate(180deg)}
body.qj-login-canvas-layout[data-login-template=tech_blue]>.qj-login-layout-panel:before{content:"";position:absolute;z-index:2;left:8%;right:8%;top:var(--qj-tech-frame-top,33%);bottom:var(--qj-tech-frame-bottom,16%);border:1px solid rgba(117,221,244,.72);background:rgba(7,28,41,.28);box-shadow:0 0 20px rgba(32,217,255,.35),inset 0 0 18px rgba(32,217,255,.06);pointer-events:none}
body.qj-login-canvas-layout.login-style-tech-blue .qj-login-layout-static-form{box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.qj-login-canvas-layout[data-login-template=tech_blue] .qj-login-layout-input{border-width:0 0 1px!important;border-radius:0!important;background:transparent!important}
body.qj-login-canvas-layout[data-login-template=tech_blue] .qj-login-layout-button{box-shadow:0 0 10px rgba(32,217,255,.75)!important}
body.qj-login-canvas-layout[data-login-template=tech_blue] .qj-login-layout-logo{filter:drop-shadow(0 0 12px #20d9ff)}
body.qj-login-canvas-layout .qj-login-layout-logo{max-width:none!important}
body.qj-login-canvas-layout .qj-login-layout-text{white-space:normal!important}
body.qj-login-canvas-layout .qj-login-layout-icon{display:block!important;padding:0!important;border:0!important;background:transparent!important;object-fit:contain!important;pointer-events:none}
body.qj-login-canvas-layout .qj-login-layout-nickname-action{right:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;transform:none!important;overflow:visible!important;pointer-events:auto}
body.qj-login-canvas-layout .qj-login-layout-nickname-action .nickname-dice-image{width:100%!important;height:100%!important;object-fit:contain!important}
body.qj-login-canvas-layout .qj-login-input-has-icon input{padding-left:52px!important;background-image:none!important}
@media(max-height:650px){body.qj-login-canvas-layout>.login_bg.qj-login-layout-panel{min-height:650px!important}}
/* 20260813-front-login-rich-components-v458 */
.qj-login-custom-component{box-sizing:border-box;text-decoration:none;overflow:hidden}.qj-login-custom-rich{line-height:1.45;overflow:auto}.qj-login-custom-rich p,.qj-login-custom-rich h1,.qj-login-custom-rich h2,.qj-login-custom-rich h3,.qj-login-custom-rich h4,.qj-login-custom-rich h5,.qj-login-custom-rich h6,.qj-login-custom-rich blockquote{margin:0}.qj-login-custom-divider{display:flex!important;align-items:center}.qj-login-custom-divider:before{content:"";display:block;width:100%;height:1px;background:currentColor}.qj-login-custom-spacer{pointer-events:none}.qj-login-custom-marquee{display:block!important;white-space:nowrap;overflow:hidden}.qj-login-custom-marquee>span{display:inline-block;padding-left:100%;animation:qjLoginMarquee var(--qj-marquee-duration,18s) linear infinite}.qj-login-custom-image-link{display:block}.qj-login-custom-image-link>.qj-login-custom-image{display:block;width:100%;height:100%;object-fit:contain}@keyframes qjLoginMarquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}