/* ---------- 账号：注册 / 登录（从下往上弹出） ----------
   层级 360：在珠宝详情(350)之上、提示条(400)之下 —— 登录提示不该被别的弹层压住，
   但 toast 仍要能看见。外壳沿用 .sheet-mask / .sheet，只补自己的皮。 */
#authMask{z-index:360;}

.au-sheet{padding:24px 22px 30px;}

/* 头部：标题 + 右上角「跳过」 */
.au-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.au-title{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.1em;}
.au-sub{margin-top:8px;font-size:12px;color:var(--muted);letter-spacing:.04em;line-height:1.6;}
.au-skip{
  flex:0 0 auto;margin-top:-2px;padding:7px 14px;border-radius:999px;
  font-size:12px;color:var(--muted);letter-spacing:.06em;
  border:1px solid var(--line);background:#fff;transition:.18s;
}
.au-skip:active{transform:scale(.95);}

/* 登录 / 注册 页签（下划线滑到右边） */
.au-tabs{
  position:relative;display:flex;margin:22px 0 4px;
  border-bottom:1px solid var(--line-2);
}
.au-tabs button{
  flex:1;padding:12px 0;font-size:14px;color:var(--muted);letter-spacing:.1em;transition:.2s;
}
.au-tabs button.on{color:var(--ink);font-weight:600;}
.au-tabs .au-ink{
  position:absolute;left:0;bottom:-1px;width:50%;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,#d7b878,#b08d4a);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.au-tabs.reg .au-ink{transform:translateX(100%);}

/* 「登录后将自动继续：下单」 */
.au-resume{
  display:flex;align-items:center;gap:8px;margin-top:18px;
  padding:11px 14px;border-radius:14px;font-size:12px;color:var(--gold-dark);
  background:rgba(252,248,238,.9);border:1px dashed rgba(196,161,90,.55);
}
.au-resume[hidden]{display:none;}
.au-resume svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.7;fill:none;}
.au-resume b{font-weight:600;}

/* 输入区 */
.au-field{margin-top:18px;}
.au-lab{display:block;margin-bottom:8px;font-size:12px;color:var(--muted);letter-spacing:.06em;}
.au-lab em{font-style:normal;color:var(--muted-2);font-size:11px;}
.au-inp{
  display:flex;align-items:center;gap:8px;height:50px;padding:0 15px;
  border-radius:15px;background:var(--bg-2);border:1px solid transparent;transition:.2s;
}
.au-inp:focus-within{background:#fff;border-color:rgba(196,161,90,.6);box-shadow:0 8px 20px -16px rgba(160,130,70,.9);}
.au-inp input{
  flex:1;min-width:0;height:100%;font-family:inherit;font-size:15px;letter-spacing:.06em;
  color:var(--ink);background:none;border:none;outline:none;
}
.au-inp input::placeholder{color:var(--muted-2);font-size:13px;letter-spacing:.02em;}
.au-eye{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);
}
.au-eye svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;}
.au-eye .eye-off{display:none;}
.au-eye.on{color:var(--gold-dark);}
.au-eye.on .eye-on{display:none;}
.au-eye.on .eye-off{display:block;}

/* 出错提示 */
.au-err{
  margin-top:14px;font-size:12px;color:#cf6a44;letter-spacing:.03em;
  min-height:0;opacity:0;transition:opacity .2s;
}
.au-err.on{opacity:1;min-height:16px;}

/* 主按钮 + 小字 */
.au-ft{margin-top:22px;}
.au-btn{
  width:100%;padding:15px 0;border-radius:15px;
  font-size:15px;font-weight:600;letter-spacing:.14em;color:#fff;
  background:linear-gradient(180deg,#d7b878,#b08d4a);
  box-shadow:0 12px 26px -12px rgba(160,130,70,.95);
  transition:transform .18s,opacity .2s;
}
.au-btn:active{transform:translateY(1px);}
.au-btn.busy,.au-btn[disabled]{opacity:.7;}
.au-tip{margin-top:14px;text-align:center;font-size:11.5px;color:var(--muted-2);letter-spacing:.04em;}

/* 「我的」页头部：昵称占满，右上角登录/退出 */
.me-head .me-id{flex:1;min-width:0;}
.me-auth{
  flex:0 0 auto;align-self:flex-start;margin-top:4px;
  padding:8px 14px;border-radius:999px;font-size:12px;letter-spacing:.06em;
  color:var(--gold-dark);background:rgba(252,248,238,.9);
  border:1px solid rgba(196,161,90,.5);transition:.18s;white-space:nowrap;
}
.me-auth:active{transform:scale(.95);}

/* ---------- 账号层新增：蜜罐 / 密码强度 / 滑块人机验证（2026-10-04） ---------- */

/* 蜜罐字段：视觉上彻底看不见，但不能用 display:none —— 有些机器人会跳过隐藏元素，
   故意留在排版里、挪到屏幕外，机器照着 HTML 填才会上钩。 */
.au-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}

/* 密码强度：四条小格 + 一句提示；只做「即时提醒」，能不能过还是后端说了算 */
.au-strength{display:flex;align-items:center;gap:5px;margin-top:10px;}
.au-strength[hidden]{display:none;}
.au-strength i{flex:1;height:4px;border-radius:2px;background:var(--line-2);transition:background .2s;}
.au-strength-tx{margin-left:6px;font-size:11px;color:var(--muted-2);letter-spacing:.04em;white-space:nowrap;}
.au-strength.s1 i:nth-child(1){background:#d98b6a;}
.au-strength.s2 i:nth-child(-n+2){background:#dcb96c;}
.au-strength.s3 i:nth-child(-n+3){background:#b3b45f;}
.au-strength.s4 i{background:#7fae74;}
.au-strength.s4 .au-strength-tx{color:#6d9c62;}

/* 滑块人机验证：背景图 + 拼图块 + 底部拖动条，都是整块宽度，保证拖动比例与图片一致。
   站长反馈「感觉就像个输入框」——所以刻意用虚线框 + 米黄底，跟上面的输入框
   （.au-inp 是实心浅灰 #f7f7f8）明显区分开：一眼看出这是「要拖的验证」而不是「要打字的地方」。 */
.au-cap{
  position:relative;margin-top:2px;padding:10px;border-radius:15px;
  background:#f2ece0;border:1px dashed rgba(196,161,90,.6);overflow:hidden;
}
.au-cap-stage{
  position:relative;width:100%;max-width:300px;margin:0 auto;line-height:0;
  border-radius:12px;overflow:hidden;
  min-height:112px;                 /* 图没出来也占住一块位置，不会塌成一条线 */
  background-color:#e7dfcf;         /* 底纹：图片透明/没加载时也看得出这里是一块「画布」，不是空输入框 */
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 8px,rgba(0,0,0,0) 8px 16px);
}
.au-cap-stage[hidden]{display:none;}
.au-cap-bg{display:block;width:100%;height:auto;border-radius:12px;-webkit-user-drag:none;}
.au-cap-piece{position:absolute;top:0;left:0;pointer-events:none;}
.au-cap-bar{
  position:relative;display:flex;align-items:center;height:46px;max-width:300px;
  margin:10px auto 0;border-radius:23px;background:#fff;border:1px solid var(--line-2);
  overflow:hidden;user-select:none;touch-action:none;
}
.au-cap-bar[hidden]{display:none;}
.au-cap-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(215,184,120,.26),rgba(176,141,74,.34));
}
.au-cap-knob{
  position:relative;z-index:2;flex:0 0 auto;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#fff;border:1px solid rgba(176,141,74,.55);overflow:hidden;
  box-shadow:0 5px 13px -7px rgba(160,130,70,.95);cursor:grab;touch-action:none;
}
.au-cap-knob:active{cursor:grabbing;}
/* 圆钮里的品牌圆形标：铺满整个圆、居中裁切；pointer-events 关掉，免得图片抢走拖动事件
   （拖动监听在整条 .au-cap-bar 上，见 65-captcha.js） */
.au-cap-knob img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;}
.au-cap-tx{position:absolute;left:0;right:0;text-align:center;font-size:12px;color:var(--muted-2);letter-spacing:.06em;pointer-events:none;}
.au-cap-load{padding:16px 0;text-align:center;font-size:12px;color:var(--muted-2);letter-spacing:.05em;}
.au-cap-load[hidden]{display:none;}
.au-cap-reload{
  display:flex;align-items:center;gap:5px;margin:10px auto 0;padding:6px 12px;
  font-size:11.5px;color:var(--muted);letter-spacing:.05em;
  border:1px solid var(--line);border-radius:999px;background:#fff;transition:.18s;
}
.au-cap-reload[hidden]{display:none;}
.au-cap-reload:active{transform:scale(.96);}
.au-cap-reload svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none;}

/* 松手后的即时反馈行（2026-10-04 站长反馈「滑到位不显示通过、滑错了也不换题」后加）。
   通过=绿、没对上=橙红，跟站内其它提示同一套色系；hidden 时不占位、不撑高弹层。 */
.au-cap-state{margin-top:10px;text-align:center;font-size:12px;letter-spacing:.05em;min-height:0;color:var(--muted);}
.au-cap-state[hidden]{display:none;}
.au-cap-state.ok{color:#6d9c62;}
.au-cap-state.bad{color:#cf6a44;}
.au-cap-state.wait{color:var(--muted-2);}

/* 整块跟着变色：通过描边转绿、没对上转橙红，扫一眼就知道结果 */
.au-cap.ok{border-color:rgba(127,174,116,.75);}
.au-cap.bad{border-color:rgba(207,106,68,.7);}
.au-cap.ok .au-cap-bar{border-color:#7fae74;}
.au-cap.bad .au-cap-bar{border-color:#cf6a44;}
.au-cap.ok .au-cap-tx{color:#6d9c62;}
.au-cap.bad .au-cap-tx{color:#cf6a44;}