/* 登录、注册、找回密码：简洁框架卡片内的排布。只用基础.css 的变量。 */
.auth-area {
  display: grid;
  gap: var(--距-3);
}

.auth-area > .alert {
  padding: var(--距-2) var(--距-3);
  overflow-wrap: anywhere;
}

/* 「忘记密码」靠右，紧贴密码框下方 */
.auth-row {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--距-2));
  font-size: var(--字号-小);
}

/* 标题旁的「?」说明 */
.auth-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--距-2);
}

.auth-head .hint-body {
  max-width: 100%;
}

/* 注册页字段较多，卡片内间距收紧一档 */
.bare-card .form-stack {
  gap: var(--距-3);
}

/* 显示 / 隐藏密码：小岛 显示密码.js 插入的按钮，浮在密码框右侧 */
.field:has(> .pw-toggle) {
  position: relative;
}

.field:has(> .pw-toggle) > .input {
  padding-right: 3.25rem;
}

.pw-toggle {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  min-height: calc(var(--高-控件) - 0.5rem);
  padding: 0 var(--距-2);
  border: 0;
  border-radius: var(--角-小);
  background: transparent;
  color: var(--色-品牌-文字);
  font-size: var(--字号-小);
  font-weight: var(--字重-中);
}

.pw-toggle:hover {
  background: var(--色-表面-悬停);
}