@charset "utf-8";
/* ==========================================================================
   WaeoTech UI v1 · 认证页（会员登录 / 注册 / 找回密码 / 管理后台登录）
   依赖 tokens.css。结构：左侧克制的品牌栏 + 右侧表单，窄屏单列。
   本文件替代 addons/member/css/style.css 与后台登录页的内联样式，
   表单内部的 LayUI 结构、name、lay-verify、hook、token 均未改动。
   ========================================================================== */

html,body{height:auto}
body{
  margin:0;
  background:var(--wt-bg);
  color:var(--wt-ink);
  font-family:var(--wt-sans);
  font-size:var(--wt-fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::-webkit-input-placeholder{color:var(--wt-faint)}
img{max-width:100%}

/* --------------------------------------------------------------------------
   舞台
   与部分 LayUI 构建的 content-box 默认值冲突会让 padding 叠加到 1fr 轨道宽度上，
   窄屏出现「舞台 390 / 子列 417」的右缘裁切。此处在认证页作用域内统一 border-box，
   与 LayUI 2.8+ 自带 reset 的行为一致，不改变任何控件的高度与行高。
   -------------------------------------------------------------------------- */
.wt-auth,
.wt-auth *,
.wt-auth *::before,
.wt-auth *::after{box-sizing:border-box}

.wt-auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--wt-s-7) var(--wt-s-5);
}
.wt-auth-stage{
  width:100%;
  max-width:1040px;
  display:grid;
  /* minmax(0,…) 让轨道可以收缩到内容以下，1fr 的最小尺寸默认是 auto，会撑破容器 */
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  background:var(--wt-surface);
  border:1px solid var(--wt-line);
  border-radius:var(--wt-r-stage);
  box-shadow:var(--wt-shadow-float);
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   左：品牌栏。无渐变、无光晕、无装饰点，只有字与一条细线。
   -------------------------------------------------------------------------- */
.wt-auth-brand{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--wt-s-6);
  padding:var(--wt-s-8) var(--wt-s-7);
  background:#f4f3fa;
  border-right:1px solid var(--wt-line);
}
.wt-brand{
  display:inline-flex;
  align-items:center;
  gap:var(--wt-s-3);
  color:var(--wt-ink);
  text-decoration:none;
}
/* 原始符号是 392x172 的横向标识，给高度、宽度自适应，再用 contain 兜底 */
.wt-brand img{display:block;height:28px;width:auto;max-width:132px;object-fit:contain}
.wt-brand b{
  font-size:18px;
  font-weight:600;
  letter-spacing:0;
}
.wt-brand small{
  display:block;
  margin-top:2px;
  font-size:var(--wt-fs-xs);
  font-weight:400;
  color:var(--wt-muted);
  letter-spacing:-.01em;
}
.wt-auth-lede{margin-top:auto}
.wt-auth-lede h1{
  margin:0 0 var(--wt-s-3);
  font-size:var(--wt-fs-display);
  font-weight:600;
  line-height:1.3;
  letter-spacing:0;
  color:var(--wt-ink);
  text-wrap:balance;
  max-width:14ch;
}
.wt-auth-lede p{
  margin:0;
  max-width:28ch;
  color:var(--wt-body);
  line-height:1.8;
}
.wt-auth-meta{
  margin:0;
  padding-top:var(--wt-s-5);
  border-top:1px solid var(--wt-line-strong);
  color:var(--wt-muted);
  font-size:var(--wt-fs-sm);
  line-height:1.8;
}
.wt-auth-meta a{color:var(--wt-violet-deep);text-decoration:none}
.wt-auth-meta a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   右：表单栏。保留 #mydiv / .login-main / .layui-elip 三个原有钩子。
   -------------------------------------------------------------------------- */
.wt-auth-form{min-width:0;padding:var(--wt-s-8) var(--wt-s-7);background:var(--wt-surface)}
.wt-auth-form #mydiv{padding-top:0}
.wt-auth-form .login-main{
  width:auto;
  max-width:400px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
}
/* 表单标题：沿用 layui-elip 类名以兼容插件样式钩子，但撤销省略号行为 */
.wt-auth-form .layui-elip{
  height:auto;
  margin:0 0 var(--wt-s-6);
  padding:0;
  background:none;
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  text-align:left;
  font-size:var(--wt-fs-h1);
  font-weight:600;
  line-height:1.4;
  color:var(--wt-ink);
  transform:none;
}
.wt-auth-form .layui-elip .version{
  display:inline-block;
  margin-left:var(--wt-s-2);
  padding:2px 8px;
  border:1px solid var(--wt-line-strong);
  border-radius:var(--wt-r-pill);
  vertical-align:middle;
  font-size:var(--wt-fs-xs);
  font-weight:400;
  color:var(--wt-muted);
  font-family:var(--wt-mono);
}

/* --------------------------------------------------------------------------
   表单控件：标签在输入框之上，占位符只作提示不当标签
   -------------------------------------------------------------------------- */
.login-main .layui-form-item{margin-bottom:var(--wt-s-5);clear:both}
.login-main .layui-form-item:after{content:"";display:block;clear:both}
.wt-label{
  display:block;
  margin-bottom:var(--wt-s-2);
  font-size:var(--wt-fs-sm);
  font-weight:500;
  color:var(--wt-ink-soft);
  line-height:1.5;
}
.login-main .layui-input-wrap{position:relative}
.login-main .layui-input,
.login-main .layui-input:hover{
  height:44px;
  line-height:44px;
  border:1px solid var(--wt-line-strong);
  border-radius:var(--wt-r-ctl);
  background:var(--wt-surface);
  color:var(--wt-ink);
  font-size:var(--wt-fs-body);
  transition:border-color .16s,box-shadow .16s;
}
.login-main .layui-input:hover{border-color:var(--wt-violet-soft)}
.login-main .layui-input:focus{
  border-color:var(--wt-violet)!important;
  box-shadow:0 0 0 3px var(--wt-violet-tint);
}
.login-main .layui-input::placeholder{color:var(--wt-faint)}
.login-main .layui-input-prefix,
.login-main .layui-input-suffix,
.login-main .layui-input-affix{color:var(--wt-faint);line-height:44px;height:44px}
.login-main .layui-input-prefix .layui-icon,
.login-main .layui-input-prefix label{font-size:16px}

/* 输入框 + 右侧按钮/图形码：flex 承担分配，不用百分比宽度，窄屏不溢出 */
.wt-field-row{display:flex;align-items:stretch;gap:var(--wt-s-2)}
.wt-field-row>.layui-input-wrap{flex:1 1 auto;min-width:0}
.wt-field-row>.btn-captcha{flex:0 0 auto;white-space:nowrap}
.login-main .verify-box{display:flex;align-items:center;gap:var(--wt-s-2)}
/* 图形码行改为 flex 后，前缀图标固定为绝对定位，避免在不同 LayUI 小版本里被算作 flex 项 */
.login-main .verify-box>.layui-input-prefix{position:absolute;left:0;top:0}
.login-main .verify-box .layui-input{flex:1 1 auto;min-width:0;width:auto}
.login-main .verify-box .captcha{
  flex:0 0 112px;
  height:44px;
  width:112px;
  display:block;
  margin:0;
  border:1px solid var(--wt-line-strong);
  border-radius:var(--wt-r-ctl);
  background:var(--wt-surface-3);
  object-fit:cover;
  cursor:pointer;
}

/* 单选（找回密码的方式切换） */
.login-main .layui-form-field-label{display:flex;flex-wrap:wrap;gap:var(--wt-s-4);padding:0}
.login-main .layui-form-radio{margin:0;padding-right:0;line-height:24px}
.login-main .layui-form-radio>i{font-size:20px;color:var(--wt-line-strong)}
.login-main .layui-form-radio>i:hover,
.login-main .layui-form-radioed>i{color:var(--wt-violet)}
.login-main .layui-form-radio>div{font-size:var(--wt-fs-body);color:var(--wt-ink-soft);padding-left:var(--wt-s-1)}

/* 复选（保持会话）
   LayUI 把方框 i 绝对定位在左侧，靠 .layui-form-checkbox 的左内边距给文字让位。
   上一轮把该内边距清零，方框压在文字上。这里不再声明 padding-left，
   直接沿用 LayUI 当前版本的原生值（2.8 为 28px，旧版为 24px），几何最稳；
   文字节点在新版是 div、旧版是 span，两种都覆盖，且不再额外加左内边距。 */
.login-main .layui-form-checkbox[lay-skin=primary]{line-height:22px}
.login-main .layui-form-checkbox[lay-skin=primary]>span,
.login-main .layui-form-checkbox[lay-skin=primary]>div{
  padding-left:0;
  color:var(--wt-body);
  font-size:var(--wt-fs-sm);
  line-height:22px;
}
.login-main .layui-form-checkbox[lay-skin=primary]>i{
  border-color:var(--wt-line-strong);
  background:var(--wt-surface);
  color:#fff;
}
.login-main .layui-form-checkbox[lay-skin=primary]:hover>i{border-color:var(--wt-violet)}
.login-main .layui-form-checked[lay-skin=primary]>i{
  border-color:var(--wt-violet);
  background-color:var(--wt-violet);
  color:#fff;
}

/* 主按钮 */
.login-main .login-btn{display:block;float:none;width:auto;margin:0}
.login-main .login-btn .layui-btn,
.login-main .layui-btn-fluid{
  width:100%;
  height:46px;
  line-height:46px;
  margin:0;
  padding:0 var(--wt-s-5);
  border:1px solid var(--wt-violet);
  border-radius:var(--wt-r-ctl);
  background:var(--wt-violet);
  color:#fff;
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  box-shadow:none;
  transition:background-color .16s,transform .1s;
}
.login-main .login-btn .layui-btn:hover,
.login-main .layui-btn-fluid:hover{background:var(--wt-violet-deep);border-color:var(--wt-violet-deep);color:#fff}
.login-main .login-btn .layui-btn:active,
.login-main .layui-btn-fluid:active{transform:translateY(1px)}

/* 次按钮（获取验证码）。保留 layui-border-green 类名以免影响插件选择器，仅改视觉 */
.login-main .btn-captcha,
.login-main .btn-captcha.layui-btn-primary,
.login-main .btn-captcha.layui-border-green{
  height:44px;
  line-height:42px;
  margin:0;
  padding:0 var(--wt-s-4);
  border:1px solid var(--wt-line-strong)!important;
  border-radius:var(--wt-r-ctl);
  background:var(--wt-surface)!important;
  color:var(--wt-violet-deep)!important;
  font-size:var(--wt-fs-sm);
  font-weight:500;
}
.login-main .btn-captcha:hover{
  border-color:var(--wt-violet)!important;
  background:var(--wt-violet-tint)!important;
}
.login-main .layui-btn-disabled,
.login-main .layui-btn-disabled:hover{
  border-color:var(--wt-line)!important;
  background:var(--wt-surface-3)!important;
  color:var(--wt-faint)!important;
}

/* 辅助链接行 */
.login-main .lay-link,
.login-main .lay-link:hover{color:var(--wt-violet-deep)!important;text-decoration:none;font-size:var(--wt-fs-sm)}
.login-main .lay-link:hover{text-decoration:underline}
.login-main .lay-user-jump-change{float:right}
.wt-auth-alt{
  margin:0;
  padding-top:var(--wt-s-5);
  border-top:1px solid var(--wt-line);
  color:var(--wt-muted);
  font-size:var(--wt-fs-sm);
  line-height:1.8;
}
.login-main .lay-user-login-other,
.login-main .layadmin-user-login-other{font-size:var(--wt-fs-sm);line-height:1.8}
.login-main .lay-user-login-other>*,
.login-main .layadmin-user-login-other>*{display:inline-block;vertical-align:middle;margin-right:var(--wt-s-3)}
.login-main .lay-user-login-other .layui-icon{position:relative;top:2px;font-size:22px}

/* --------------------------------------------------------------------------
   窄屏：单列，品牌栏收成顶部条
   -------------------------------------------------------------------------- */
@media screen and (max-width:900px){
  .wt-auth{padding:0;align-items:stretch}
  .wt-auth-stage{
    max-width:none;
    grid-template-columns:minmax(0,1fr);
    border:0;
    border-radius:0;
    box-shadow:none;
    background:var(--wt-surface);
    min-height:100vh;
  }
  .wt-auth-brand{
    gap:var(--wt-s-4);
    padding:var(--wt-s-6) var(--wt-s-5) var(--wt-s-5);
    border-right:0;
    border-bottom:1px solid var(--wt-line);
  }
  .wt-auth-lede{margin-top:0}
  .wt-auth-lede h1{font-size:24px;max-width:none}
  .wt-auth-lede p{max-width:none}
  .wt-auth-meta{display:none}
  .wt-auth-form{padding:var(--wt-s-6) var(--wt-s-5) var(--wt-s-8)}
  .wt-auth-form .login-main{max-width:none}
  .wt-auth-form .layui-elip{font-size:20px;margin-bottom:var(--wt-s-5)}
}
@media screen and (max-width:420px){
  .login-main .verify-box .captcha{flex-basis:96px;width:96px}
  .wt-field-row>.btn-captcha{padding:0 var(--wt-s-3)}
}

/* 后台登录页沿用的内层容器，去掉原内联样式的内边距 */
.login-main .login-container{padding:0}
.login-main .layui-form-item[lay-tips]{margin-bottom:var(--wt-s-5)}

/* Keep brand background consistent when the legacy style hook injects a daily image. */
body.wt-auth-page{background:var(--wt-bg)!important}
/* Preserve the original captcha image in full, including its original colors. */
.login-main .verify-box .captcha{object-fit:contain}

/* The same white symbol and dark background used in the corporate footer. */
.wt-auth-brand{background:#141829;border-color:rgba(255,255,255,.1)}
.wt-auth-brand .wt-brand,.wt-auth-brand .wt-auth-lede h1{color:#fff}
.wt-auth-brand .wt-brand img{filter:brightness(0) invert(1);opacity:.92}
.wt-auth-brand .wt-brand small,.wt-auth-brand .wt-auth-lede p,.wt-auth-brand .wt-auth-meta{color:#b9bdcf}
.wt-auth-brand .wt-auth-meta{border-color:rgba(255,255,255,.17)}
.wt-auth-brand .wt-auth-meta a{color:#cec8fb}

.login-main .layui-form-checked[lay-skin=primary]>i{border-color:var(--wt-violet)!important}