/* ============================================================
   tem_question 会员登录弹窗样式（移植自 tem_film_community）
   ============================================================ */

/* 遮罩层 */
.hl-pops-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999995;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.6);opacity:0;}
.hl-pops-bg.hl-pops-bg-active{display:block;opacity:1;}

/* ============== 居中登录弹窗 ============== */
.hl-login-modal{
    width:380px;max-width:92vw;max-height:92vh;overflow:auto;
    padding:0 !important;border-radius:16px !important;
    background:#fff;color:#2c3e50;
    box-sizing:border-box;
    box-shadow:0 30px 80px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.15);
    -webkit-transform:translate(-50%,-50%) scale(.92);
    -moz-transform:translate(-50%,-50%) scale(.92);
    transform:translate(-50%,-50%) scale(.92);
    opacity:0;-webkit-transition:all .28s cubic-bezier(.22,.61,.36,1);
    -moz-transition:all .28s cubic-bezier(.22,.61,.36,1);
    transition:all .28s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
}
.hl-login-modal.hl-login-show{
    -webkit-transform:translate(-50%,-50%) scale(1);
    -moz-transform:translate(-50%,-50%) scale(1);
    transform:translate(-50%,-50%) scale(1);
    opacity:1;pointer-events:auto;
}
.hl-login-modal-box{position:relative;padding:32px 28px 24px;}
/* 关闭按钮 */
.hl-login-modal .hl-login-close{
    position:absolute;top:14px;right:14px;width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:rgba(0,0,0,.05);color:#9aa3ac;
    -webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;
}
.hl-login-modal .hl-login-close:hover{background:#ff6b35;color:#fff;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg);}
/* 品牌头部 */
.hl-login-modal .hl-login-header{text-align:center;margin-bottom:24px;}
.hl-login-modal .hl-login-brand{display:inline-flex;align-items:center;margin-bottom:18px;}
.hl-login-modal .hl-login-brand-icon{
    width:46px;height:46px;border-radius:12px;
    background:linear-gradient(135deg,#ff9a56,#ff6b35);
    display:flex;align-items:center;justify-content:center;font-size:24px;
    box-shadow:0 6px 16px rgba(255,107,53,.35);margin-right:10px;
}
.hl-login-modal .hl-login-brand-name{font-size:18px;font-weight:600;color:#2c3e50;}
.hl-login-modal .hl-login-brand-slogan{font-size:12px;color:#9aa3ac;margin-top:2px;}
.hl-login-modal .hl-login-title{font-size:22px;font-weight:600;color:#2c3e50;margin:0 0 6px;}
.hl-login-modal .hl-login-subtitle{font-size:13px;color:#9aa3ac;margin:0;line-height:1.5;}
/* 表单 */
.hl-login-modal .hl-login-form{margin:0;}
.hl-login-modal .hl-login-field{
    position:relative;display:flex;align-items:center;
    border:1px solid #e1e6ed;border-radius:10px;
    margin-bottom:14px;background:#f8f9fb;
    -webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;
}
.hl-login-modal .hl-login-field:hover{border-color:#cbd2d9;}
.hl-login-modal .hl-login-field.hl-focus{border-color:#ff6b35;background:#fff;box-shadow:0 0 0 3px rgba(255,107,53,.12);}
.hl-login-modal .hl-login-field-icon{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:46px;color:#9aa3ac;flex-shrink:0;
}
.hl-login-modal .hl-login-field.hl-focus .hl-login-field-icon{color:#ff6b35;}
.hl-login-modal .hl-login-field input{
    flex:1;border:none;background:transparent;
    height:46px;font-size:14px;color:#2c3e50;outline:none;padding-right:12px;
}
.hl-login-modal .hl-login-field input::placeholder{color:#b3bcc6;}
.hl-login-modal .hl-login-pwd-toggle{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:46px;color:#9aa3ac;flex-shrink:0;
}
.hl-login-modal .hl-login-pwd-toggle:hover{color:#5b646d;}
/* 选项行 */
.hl-login-modal .hl-login-options{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:18px;font-size:13px;
}
.hl-login-modal .hl-login-remember{display:inline-flex;align-items:center;color:#5b646d;cursor:pointer;}
.hl-login-modal .hl-login-remember input{margin-right:6px;}
.hl-login-modal .hl-login-forgot{color:#ff6b35;}
.hl-login-modal .hl-login-forgot:hover{text-decoration:underline;}
/* 提交按钮 */
.hl-login-modal .hl-login-submit{
    width:100%;height:46px;border:none;border-radius:10px;
    background:linear-gradient(135deg,#ff9a56,#ff6b35);color:#fff;
    font-size:15px;font-weight:500;letter-spacing:1px;cursor:pointer;
    -webkit-transition:all .25s;-moz-transition:all .25s;transition:all .25s;
    box-shadow:0 8px 22px rgba(255,107,53,.32);
}
.hl-login-modal .hl-login-submit:hover{-webkit-transform:translateY(-1px);-moz-transform:translateY(-1px);transform:translateY(-1px);box-shadow:0 12px 28px rgba(255,107,53,.42);}
.hl-login-modal .hl-login-submit:active{-webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0);}
.hl-login-modal .hl-login-submit:disabled{opacity:.75;cursor:not-allowed;}
/* 分隔线 */
.hl-login-modal .hl-login-divider{
    display:flex;align-items:center;margin:20px 0 16px;
    color:#9aa3ac;font-size:12px;
}
.hl-login-modal .hl-login-divider::before,
.hl-login-modal .hl-login-divider::after{
    content:"";flex:1;height:1px;background:#e1e6ed;
}
.hl-login-modal .hl-login-divider span{padding:0 14px;}
/* 第三方登录 */
.hl-login-modal .hl-login-oauth{display:flex;justify-content:center;gap:14px;}
.hl-login-modal .hl-login-oauth-btn{
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#f8f9fb;color:#5b646d;border:1px solid #e1e6ed;
    -webkit-transition:all .25s;-moz-transition:all .25s;transition:all .25s;
}
.hl-login-modal .hl-login-oauth-btn:hover{border-color:transparent;color:#fff;}
.hl-login-modal .hl-login-wx:hover{background:#1aad19;}
.hl-login-modal .hl-login-qq:hover{background:#12b7f5;}
/* 底部 */
.hl-login-modal .hl-login-footer{
    text-align:center;margin-top:22px;font-size:13px;color:#9aa3ac;
}
.hl-login-modal .hl-login-footer a{color:#ff6b35;font-weight:500;}
.hl-login-modal .hl-login-footer a:hover{text-decoration:underline;}
/* 移动端响应式 */
@media (max-width:480px){
    .hl-login-modal{width:94vw !important;}
    .hl-login-modal-box{padding:26px 18px 18px;}
    .hl-login-modal .hl-login-title{font-size:20px;}
    .hl-login-modal .hl-login-brand-name{font-size:16px;}
}

/* ============== 错误/成功提示 + 抖动动画 ============== */
.hl-login-modal .hl-login-tip{
    margin-bottom:14px;padding:10px 14px;border-radius:8px;
    font-size:13px;line-height:1.5;text-align:center;
    -webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;
}
.hl-login-modal .hl-login-tip-error{
    background:rgba(255,107,53,.1);color:#ff6b35;border:1px solid rgba(255,107,53,.3);
}
.hl-login-modal .hl-login-tip-success{
    background:rgba(42,169,82,.1);color:#2aa952;border:1px solid rgba(42,169,82,.3);
}
.hl-login-modal-box.hl-login-shake{
    -webkit-animation:hlLoginShake .5s cubic-bezier(.36,.07,.19,.97);
    -moz-animation:hlLoginShake .5s cubic-bezier(.36,.07,.19,.97);
    animation:hlLoginShake .5s cubic-bezier(.36,.07,.19,.97);
    -webkit-transform-origin:center top;
    -moz-transform-origin:center top;
    transform-origin:center top;
}
@-webkit-keyframes hlLoginShake{
    0%,100%{-webkit-transform:translateX(0);}
    15%,45%,75%{-webkit-transform:translateX(-6px);}
    30%,60%,90%{-webkit-transform:translateX(6px);}
}
@-moz-keyframes hlLoginShake{
    0%,100%{-moz-transform:translateX(0);}
    15%,45%,75%{-moz-transform:translateX(-6px);}
    30%,60%,90%{-moz-transform:translateX(6px);}
}
@keyframes hlLoginShake{
    0%,100%{transform:translateX(0);}
    15%,45%,75%{transform:translateX(-6px);}
    30%,60%,90%{transform:translateX(6px);}
}

/* ============== 顶部登录/头像入口按钮 ============== */
.hl-user-entry{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:inherit;}
.hl-user-entry .hl-user-avatar{
    width:28px;height:28px;border-radius:50%;
    background:linear-gradient(135deg,#ff9a56,#ff6b35);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:600;
}
.hl-user-entry .hl-user-name{font-size:13px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-user-entry .hl-login-btn{
    padding:4px 14px;border-radius:16px;
    background:linear-gradient(135deg,#ff9a56,#ff6b35);color:#fff;
    font-size:13px;cursor:pointer;border:none;
}
.hl-user-entry .hl-login-btn:hover{box-shadow:0 4px 12px rgba(255,107,53,.4);}