/* =========================================================================
   QRVeo 管理后台 —— 认证页（登录/注册/忘记密码/重置密码）视觉皮肤
   -------------------------------------------------------------------------
   目标：把 30081 admin 的 #/login 等页面改造成参考登录页（login-redesign.html）
         的视觉；不改 Vue 组件、不改主包 JS 逻辑。

   做法：
     - 所有规则以 html.vqr-skin 前缀提权，压过组件内的 [data-v-*] scoped 规则
       （.c-login__main[data-v-499cbdfa] 权重 0,2,0 → html.vqr-skin .c-login__main 0,2,1）
     - 选择器只命中认证页类名（.c-login* / .c-header* / .c-footer / .plv-toast 等），
       并在 html.vqr-skin 门控下生效，后台 #/secure/* 页面完全不受影响
     - 品牌栏 .vqr-brand 由 skin.js 注入到 body（#app 之外），此处只负责外观

   设计令牌沿用参考页：深绿 #08352A / 主色 #0B6B4F / 描边 #E3E8E5 / 圆角 10px
   ========================================================================= */

html.vqr-skin{
  --vqr-green-900:#08352A;
  --vqr-green-800:#0A4A38;
  --vqr-green-700:#0B6B4F;
  --vqr-green-600:#12805F;
  --vqr-green-50:#EEF5F1;
  --vqr-red:#BF3320;
  --vqr-ink:#131A17;
  --vqr-ink-2:#43504B;
  --vqr-muted:#66716C;
  --vqr-muted-2:#6B7671;
  --vqr-line:#E3E8E5;
  --vqr-line-strong:#CBD4CF;
  --vqr-radius:10px;
  /* 左侧品牌栏宽度：46%，最宽 640px；右侧表单区据此左推 */
  --vqr-brand-w:min(46%,640px);
}

/* ---------- 基础排版 ---------- */
html.vqr-skin,
html.vqr-skin body{
  background:#fff;
}
html.vqr-skin body{
  margin:0;
  color:var(--vqr-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* 键盘焦点：输入框自绘光环，其余元素统一 outline */
html.vqr-skin :focus-visible{
  outline:2px solid var(--vqr-green-700);
  outline-offset:2px;
}
html.vqr-skin .el-input__inner:focus-visible,
html.vqr-skin .captcha-input:focus-visible{
  outline:none;
}

/* 页面容器：由「100vh 固定 + 绝对定位卡片」改为「自然流布局 + 可滚动」
   （内容高于视口时走页面滚动，卡片不会被裁切） */
html.vqr-skin .g-layout{
  height:auto;
  min-height:100vh;
  overflow-x:hidden;
  background:#fff;
}

/* ---------- 左：品牌栏 ---------- */
html.vqr-skin .vqr-brand{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--vqr-brand-w);
  box-sizing:border-box;
  padding:48px 56px;
  background:var(--vqr-green-900);
  color:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:2;
}
html.vqr-skin .vqr-brand::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-140px;
  width:420px;
  height:420px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
}
html.vqr-skin .vqr-brand::before{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-60px;
  width:240px;
  height:240px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
}
html.vqr-skin .vqr-brand__copy{
  position:relative;
  z-index:1;
  margin:auto 0;
}
html.vqr-skin .vqr-brand__copy h1{
  margin:0 0 18px;
  /* 品牌栏内容宽 = 640 - 112 = 528px；29px 是不断出孤字的上限 */
  font-size:clamp(22px,2.2vw,29px);
  line-height:1.34;
  font-weight:600;
  letter-spacing:.5px;
  color:#fff;
}
html.vqr-skin .vqr-brand__copy h1 span{
  display:block;
}
html.vqr-skin .vqr-brand__copy p{
  margin:0;
  max-width:360px;
  font-size:15px;
  line-height:1.85;
  color:rgba(255,255,255,.72);
}
html.vqr-skin .vqr-brand__points{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  position:relative;
  z-index:1;
}
html.vqr-skin .vqr-brand__points li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.86);
}
html.vqr-skin .vqr-brand__points li:last-child{
  margin-bottom:0;
}
html.vqr-skin .vqr-brand__points .dot{
  flex:none;
  width:20px;
  height:20px;
  margin-top:1px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
html.vqr-skin .vqr-brand__points .dot span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5FD3A6;
}
html.vqr-skin .vqr-brand__foot{
  position:relative;
  z-index:1;
  margin-top:40px;
  font-size:12px;
  letter-spacing:.3px;
  color:rgba(255,255,255,.52);
}

/* ---------- 顶栏：logo 白块 + 语言胶囊 ---------- */
html.vqr-skin .c-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:auto;
  background:none;
  pointer-events:none;
  z-index:10;
}
/* logo 位置：落在深绿品牌栏左侧留白上 */
html.vqr-skin .c-header__logo{
  position:fixed;
  left:56px;
  top:44px;
  pointer-events:auto;
}
/* logo 与官网统一：QRveo 官方 logo 图（绿 #006847 / 红 #CE1126 斜切方块）
   + 官方字形字标（2026-10-27 品牌统一，替代此前的 CSS 画法）
   —— 不再使用镜像里的 /images/image.png（1692×929 的位图，可见内容只占
      x286–1473 / y332–596，四周全是透明边距，等比缩到 22px 高时字标只剩 4px）。
      资产由 qrveo-mexico-site/logo.png 加工：logo-mark.png（抠底）/
      logo-word.png（深色字标，宽高比 3.625），全部由伪元素挂背景图，
      不往 Vue 管理的 <a> 里插节点。 */
html.vqr-skin .c-header__logo a{
  display:flex;
  width:-moz-fit-content;
  width:fit-content;
  align-items:center;
  gap:10px;
  height:auto;
  padding:10px 14px;
  background:#fff;
  border-radius:var(--vqr-radius);
  box-shadow:0 1px 2px rgba(16,52,38,.18);
  text-decoration:none;
}
html.vqr-skin .c-header__logo img{
  display:none;
}
html.vqr-skin .c-header__logo a::before{
  content:"";
  flex:none;
  width:30px;
  height:30px;
  background:url('/__vqr/logo-mark.png') center/contain no-repeat;
}
html.vqr-skin .c-header__logo a::after{
  content:"";
  width:62px;   /* 17px × 字标宽高比 3.625 */
  height:17px;
  background:url('/__vqr/logo-word.png') left center/contain no-repeat;
}
/* 语言选择：白底描边胶囊 + 地球图标 + 下箭头 */
html.vqr-skin .c-header__nav{
  position:fixed;
  right:32px;
  top:24px;
  transform:none;
  pointer-events:auto;
  font-size:13px;
}
html.vqr-skin .c-header__nav li{
  height:auto;
  padding:0;
  color:var(--vqr-ink-2);
}
html.vqr-skin .c-header__nav li:nth-child(n+2):before{
  display:none;
}
html.vqr-skin .c-header__nav-lang-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  box-sizing:border-box;
  height:34px;
  padding:0 10px 0 12px;
  font-size:13px;
  line-height:1;
  color:var(--vqr-ink-2);
  background:#fff;
  border:1px solid var(--vqr-line);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s,color .15s;
}
html.vqr-skin .c-header__nav-lang-trigger::before{
  content:"";
  flex:none;
  width:14px;
  height:14px;
  opacity:.8;
  background:center/14px 14px no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2343504B' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M1.8 8h12.4M8 1.8c1.9 2 1.9 10.4 0 12.4M8 1.8c-1.9 2-1.9 10.4 0 12.4'/%3E%3C/svg%3E");
}
html.vqr-skin .c-header__nav-lang-trigger::after{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  margin-top:-3px;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);
  opacity:.65;
}
html.vqr-skin .c-header__nav-lang-trigger:hover{
  color:var(--vqr-ink);
  border-color:var(--vqr-line-strong);
}

/* 语言下拉（teleport 到 body，不在 #app 内）
   原厂是按下拉触发器左边缘定位并左对齐，会顶到视口右边；
   这里改为与按钮右边缘对齐（顶栏是 fixed 的，水平位置确定），
   纵向 top 仍用组件算出来的行内值，不动。 */
html.vqr-skin .plv-dropdown__popper{
  left:auto !important;
  right:32px !important;
}
html.vqr-skin .plv-dropdown-menu{
  min-width:150px;
  padding:6px;
  background:#fff;
  border:1px solid var(--vqr-line);
  border-radius:var(--vqr-radius);
  box-shadow:0 8px 24px rgba(16,32,26,.10);
}
html.vqr-skin .plv-dropdown-item{
  padding:0;
  border-radius:6px;
  text-align:left;
}
html.vqr-skin .plv-dropdown-item:hover{
  background:var(--vqr-green-50);
}
html.vqr-skin .c-header__nav-lang-option{
  display:block;
  padding:8px 10px;
  font-size:13px;
  color:var(--vqr-ink-2);
  border-radius:6px;
}
html.vqr-skin .c-header__nav-lang-option--current{
  background:var(--vqr-green-50);
  color:var(--vqr-green-700);
  font-weight:600;
}

/* ---------- 右：表单区 ---------- */
html.vqr-skin .c-main-container{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  margin-left:var(--vqr-brand-w);
  width:calc(100% - var(--vqr-brand-w));
  max-width:none;
  min-width:0;
  min-height:100vh;
  height:auto;
  box-sizing:border-box;
  padding:104px 32px 88px;
  background:#fff;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}
html.vqr-skin .c-main{
  display:flex;
  width:100%;
  height:auto;
}
html.vqr-skin .c-main__right{
  width:100%;
  height:auto;
}
html.vqr-skin .c-login{
  width:100%;
  max-width:400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
html.vqr-skin .c-login__main{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  transform:none;
  position:relative;
}

/* 标题 + 副标题（副标题由 skin.js 写入 data-vqr-sub） */
html.vqr-skin .c-login__title{
  margin:0 0 28px;
  font-size:26px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.3px;
  color:var(--vqr-ink);
}
html.vqr-skin .c-login__title::after{
  content:attr(data-vqr-sub);
  display:block;
  margin-top:8px;
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.6;
  color:var(--vqr-muted);
}
html.vqr-skin .c-login__title:not([data-vqr-sub])::after{
  display:none;
}
/* 忘记密码页自带的说明段（原本无字号，会继承 .p-pc-page 的 40px） */
html.vqr-skin .c-login__desc{
  margin:0 0 24px;
  font-size:14px;
  line-height:1.7;
  color:var(--vqr-muted);
}

/* 表单与字段标签（标签由 skin.js 写入 data-vqr-label，避免插入 Vue 管理节点） */
html.vqr-skin .el-form{
  margin-bottom:0;
}
html.vqr-skin .el-form-item{
  display:block;
  margin-bottom:16px;
}
html.vqr-skin .el-form-item__content{
  margin-left:0;
  line-height:normal;
}
html.vqr-skin .el-form-item::before{
  content:attr(data-vqr-label);
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:var(--vqr-ink-2);
}
html.vqr-skin .el-form-item:not([data-vqr-label])::before{
  display:none;
}

/* 输入框 */
html.vqr-skin .el-input__inner,
html.vqr-skin .captcha-input,
html.vqr-skin .email-code-input{
  box-sizing:border-box;
  width:100%;
  height:44px;
  padding:0 12px;
  font-size:14px;
  font-family:inherit;
  color:var(--vqr-ink);
  background:#fff;
  border:1px solid var(--vqr-line);
  border-radius:var(--vqr-radius);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
html.vqr-skin .el-input__inner::placeholder,
html.vqr-skin .captcha-input::placeholder,
html.vqr-skin .email-code-input::placeholder{
  color:var(--vqr-muted-2);
  opacity:1;
}
html.vqr-skin .el-input__inner:hover,
html.vqr-skin .captcha-input:hover{
  border-color:var(--vqr-line-strong);
}
html.vqr-skin .el-input__inner:focus,
html.vqr-skin .captcha-input:focus{
  border-color:var(--vqr-green-700);
  box-shadow:0 0 0 3px rgba(11,107,79,.12);
}
html.vqr-skin .el-form-item.is-error .el-input__inner{
  border-color:var(--vqr-red);
  background:#FFFBFA;
}

/* 密码可见性切换 */
html.vqr-skin .el-input__suffix{
  right:6px;
}
html.vqr-skin .el-input--suffix .el-input__inner{
  padding-right:42px;
}
html.vqr-skin .el-input__password-toggle{
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--vqr-muted);
}
html.vqr-skin .el-input__password-toggle:hover{
  color:var(--vqr-ink);
  background:var(--vqr-green-50);
}
html.vqr-skin .el-icon-view{
  font-size:16px;
}
html.vqr-skin .el-icon-view.is-visible{
  color:var(--vqr-green-700);
}

/* 图形验证码：输入框 + 图片同一行 */
html.vqr-skin .captcha-container,
html.vqr-skin .email-code-container{
  display:flex;
  align-items:center;
  gap:10px;
}
html.vqr-skin .captcha-input,
html.vqr-skin .email-code-input{
  flex:1;
  min-width:0;
  width:auto;
}
html.vqr-skin .captcha-image{
  flex:none;
  width:104px;
  height:44px;
  padding:0;
  background:var(--vqr-green-50);
  border:1px solid var(--vqr-line);
  border-radius:var(--vqr-radius);
  object-fit:fill;
  cursor:pointer;
}
html.vqr-skin .captcha-image:hover{
  border-color:var(--vqr-line-strong);
}
html.vqr-skin .email-code-button{
  height:44px;
  border-radius:var(--vqr-radius);
  border-color:var(--vqr-green-700);
  color:var(--vqr-green-700);
  font-size:13px;
}

/* 记住账号 + 忘记密码 */
html.vqr-skin .c-login__main__login-assist{
  margin:4px 0 24px;
  gap:12px;
  font-size:13px;
  color:var(--vqr-ink-2);
}
html.vqr-skin .el-checkbox__label{
  font-size:13px;
  color:var(--vqr-ink-2);
}
html.vqr-skin .el-checkbox{
  cursor:pointer;
}
html.vqr-skin .plv-checkbox__inner{
  display:inline-block;
  box-sizing:border-box;
  width:15px;
  height:15px;
  background:#fff;
  border:1px solid var(--vqr-line-strong);
  border-radius:4px;
  transition:background .15s,border-color .15s;
}
/* 选中态：原厂是 .plv-checkbox.plv-checkbox--checked .plv-checkbox__inner{background:#3f76fc}
   （权重 0,3,0），这里必须带同样的类链才压得住 */
html.vqr-skin .plv-checkbox.plv-checkbox--checked .plv-checkbox__inner{
  background:var(--vqr-green-700);
  border-color:var(--vqr-green-700);
  color:#fff;
}
html.vqr-skin .plv-checkbox__inner [class^="plv-admin-icon-"]{
  color:#fff;
  font-size:11px;
}
html.vqr-skin .c-login__main__login-assist__forget,
html.vqr-skin .c-login__main__login-assist__forget a{
  font-size:13px;
  color:var(--vqr-green-700);
  white-space:nowrap;
}
html.vqr-skin .c-login__main__login-assist__forget:hover,
html.vqr-skin .c-login__main__login-assist__forget a:hover{
  color:var(--vqr-green-600);
  text-decoration:underline;
}

/* 主按钮 */
html.vqr-skin .c-login__main__submit{
  width:100%;
  height:46px;
  margin-top:0;
  border:0;
  border-radius:var(--vqr-radius);
  background:var(--vqr-green-700);
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:.5px;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s;
}
html.vqr-skin .c-login__main__submit:hover:not(:disabled){
  background:#0A5B43;
}
html.vqr-skin .c-login__main__submit:active:not(:disabled){
  background:#084C38;
}
html.vqr-skin .c-login__main__submit:disabled{
  background:var(--vqr-green-700);
  opacity:.7;
  cursor:default;
}

/* 分隔线（"o" 由 skin.js 写入 data-vqr-or）+ 注册 / 返回行 */
html.vqr-skin .c-login__footer{
  position:relative;
  height:auto;
  margin-top:26px;
  padding:0;
  border-top:0;
  display:block;
  text-align:center;
  background:none;
}
html.vqr-skin .c-login__footer::before{
  content:"";
  display:block;
  height:1px;
  margin:0 0 18px;
  background:var(--vqr-line);
}
html.vqr-skin .c-login__footer::after{
  content:attr(data-vqr-or);
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  padding:0 12px;
  background:#fff;
  font-size:12px;
  line-height:1;
  color:var(--vqr-muted-2);
}
html.vqr-skin .c-login__footer:not([data-vqr-or])::after{
  display:none;
}
html.vqr-skin .c-login__footer__go-register{
  font-size:13px;
  color:var(--vqr-muted);
}
html.vqr-skin .c-login__footer__go-register__link{
  margin-left:4px;
  font-size:13px;
  font-weight:600;
  color:var(--vqr-green-700);
}
html.vqr-skin .c-login__footer__go-register__link:hover{
  color:var(--vqr-green-600);
}
html.vqr-skin .c-login__footer__link a{
  font-size:13px;
  color:var(--vqr-green-700);
  text-decoration:none;
}
html.vqr-skin .c-login__footer__link a:hover{
  text-decoration:underline;
}

/* 重置密码结果条 */
html.vqr-skin .c-reset-status{
  margin:0 0 20px;
  padding:11px 13px;
  font-size:13px;
  line-height:1.6;
  color:var(--vqr-ink-2);
  background:var(--vqr-green-50);
  border:1px solid #DCE8E2;
  border-radius:8px;
  text-align:left;
}
html.vqr-skin .c-reset-status--error{
  color:var(--vqr-red);
  background:#FDF1EF;
  border-color:#F7D9D4;
}

/* ---------- 页脚 ---------- */
html.vqr-skin .c-footer{
  position:fixed;
  left:var(--vqr-brand-w);
  right:0;
  bottom:0;
  width:auto;
  padding:14px 32px 16px;
  text-align:center;
  background:#fff;
  pointer-events:none;
  z-index:5;
}
html.vqr-skin .c-footer__info{
  margin:0;
  font-size:12px;
  line-height:1.8;
  color:var(--vqr-muted-2);
  opacity:1;
}
html.vqr-skin .c-footer__info a{
  margin:0 4px;
  color:var(--vqr-muted-2);
}

/* ---------- 提示条（错误 / 成功） ----------
   原厂 .plv-toast 是 position:fixed + left:50% + translate(-50%)，居中于整个视口；
   有了左侧品牌栏后要居中于右侧表单区，所以只改 left，transform 保持原厂不动。 */
html.vqr-skin .plv-toast{
  left:calc(var(--vqr-brand-w) + (100% - var(--vqr-brand-w)) / 2);
  max-width:440px;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(16,32,26,.10);
}
html.vqr-skin .plv-toast .plv-toast__text{
  padding-left:8px;
  font-size:13px;
}
html.vqr-skin .plv-toast--error{
  background:#FDF1EF;
  border:1px solid #F7D9D4;
  color:var(--vqr-red);
}
html.vqr-skin .plv-toast--error .plv-toast__text,
html.vqr-skin .plv-toast--error .plv-admin-icon-error-circle-fill{
  color:var(--vqr-red);
}
html.vqr-skin .plv-toast--success{
  background:var(--vqr-green-50);
  border:1px solid #DCE8E2;
  color:var(--vqr-green-700);
}

/* ---------- only-card 变体：不显示品牌栏，卡片居中 ---------- */
html.vqr-skin .g-layout.only-card-page{
  background:#fff;
}
html.vqr-skin .g-layout.only-card-page .vqr-brand{
  display:none;
}
html.vqr-skin .g-layout.only-card-page .c-main-container{
  margin-left:0;
  width:100%;
  padding:80px 20px 64px;
}
html.vqr-skin .g-layout.only-card-page .c-footer{
  left:0;
}

/* ---------- 矮视口（笔记本 660~740px）：页脚改为随文档流，避免白底页脚压住卡片 ---------- */
@media (max-height:740px){
  html.vqr-skin .c-main-container{
    min-height:0;
    padding:92px 32px 28px;
    align-items:flex-start;
  }
  html.vqr-skin .c-footer{
    position:static;
    left:auto;
    right:auto;
    width:auto;
    margin-left:var(--vqr-brand-w);
    padding:6px 32px 18px;
    background:transparent;
  }
}
@media (max-height:740px) and (max-width:920px){
  html.vqr-skin .c-footer{
    margin-left:0;
  }
}

/* ---------- 响应式：<=920px 隐藏品牌栏，logo 回到左上角 ---------- */
@media (max-width:920px){
  html.vqr-skin .vqr-brand{
    display:none;
  }
  html.vqr-skin .c-main-container{
    margin-left:0;
    width:100%;
    min-height:100vh;
    padding:84px 20px 76px;
    align-items:flex-start;
  }
  html.vqr-skin .c-header__logo{
    left:20px;
    top:18px;
  }
  html.vqr-skin .c-header__logo a{
    /* 移动端白底上不再需要白色底板；尺寸与官网保持一致（30px 方块 / 17px 字标），不缩放 */
    padding:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
  }
  html.vqr-skin .c-header__nav{
    right:16px;
    top:16px;
  }
  html.vqr-skin .plv-dropdown__popper{
    right:16px !important;
  }
  /* 品牌栏隐藏后，提示条回到视口居中 */
  html.vqr-skin .plv-toast{
    left:50%;
  }
  html.vqr-skin .c-footer{
    left:0;
    padding:12px 20px 14px;
  }
  html.vqr-skin .c-login{
    max-width:400px;
  }
  html.vqr-skin .c-login__title{
    margin-bottom:22px;
    font-size:23px;
  }
}

@media (max-width:420px){
  html.vqr-skin .c-main-container{
    padding:78px 16px 72px;
  }
  html.vqr-skin .c-login__title{
    font-size:21px;
  }
}