/* ============================================================
 * assets/style.css — Telegram 风格（与你现有 HTML/JS 完全兼容）
 * - 保留现有样式，仅在文末追加「单输入框验证码」覆盖
 * - 确保验证码输入框可见且美观；错误提示不遮挡
 * ============================================================ */

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#2a9df4;           /* Telegram 蓝 */
  --accent-weak:#e6f2fe;
  --danger:#ef4444;
  --ok:#16a34a;
  --warn:#f59e0b;

  --input-bg:#fff;
  --input-b:#dbe2ef;
  --input-b-focus:#2a9df4;
  --shadow:0 8px 22px rgba(16,24,40,.08);
}

/* 页面居中 */
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,PingFang SC,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
.page{min-height:80vh;display:grid;place-items:center;padding:24px}
.container{width:min(760px,100%);}

/* 卡片 */
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:20px;margin:14px 0}

/* 登录风格标题 */
.login-like{padding:28px 22px}
.login-title{margin:0 0 6px 0;text-align:center;font-size:22px;font-weight:700}
.login-sub{margin:0 0 18px 0;text-align:center;color:var(--muted)}

/* 表单通用 */
.tg-field{position:relative;margin:10px 0}
.tg-input-wrap{position:relative}
.tg-input{
  width:100%; background:var(--input-bg); border:1px solid var(--input-b); border-radius:12px;
  padding:14px 14px; font-size:16px; outline:0; transition:border-color .15s, box-shadow .15s;
}
.tg-input:focus{border-color:var(--input-b-focus); box-shadow:0 0 0 3px rgba(42,157,244,.15)}
.tg-float{
  position:absolute; left:12px; top:-8px; background:var(--card); padding:0 6px; font-size:12px; color:var(--muted);
}
.tg-float.inside{ top:10px; left:12px; background:transparent; pointer-events:none; transition:all .15s }
.pwd-field input:focus + .inside,
.pwd-field input:not(:placeholder-shown) + .inside{ top:-8px; background:var(--card); font-size:12px; color:var(--muted) }

/* 错误与提示 */
.err{margin:8px 0 0 2px;color:var(--danger);min-height:1.2em}
.tips{color:var(--muted);font-size:14px}
.tips.center{text-align:center}

.center{text-align:center}
.mt12{margin-top:12px}

/* 按钮 */
.button{
  width:100%; padding:14px 18px; border:0; border-radius:12px;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
}
.button:hover{filter:brightness(1.04)}
.button:disabled{opacity:.6; cursor:not-allowed}
.button.link{background:#fff;border:1px solid var(--input-b);color:var(--text)}
.button.wide{width:100%}

/* 国家选择器 */
.cc-btn{display:flex;align-items:center;gap:10px;cursor:pointer}
.cc-flag{width:24px;height:24px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center}
.cc-flag-img{width:24px;height:24px;border-radius:50%}
.cc-flag-emoji{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-weak)}
.cc-dial{font-weight:700}
.cc-dropdown{
  position:absolute; z-index:20; margin-top:8px; inset-inline:0;
  background:#fff; border:1px solid var(--input-b); border-radius:12px; box-shadow:var(--shadow); padding:10px;
}
.cc-search-wrap{padding:4px 0}
.cc-search{width:100%;border:1px solid var(--input-b);border-radius:10px;padding:10px 12px;font-size:14px}
.cc-list{max-height:280px;overflow:auto;margin-top:6px}
.cc-item{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-radius:8px;cursor:pointer}
.cc-item:hover{background:var(--accent-weak)}
.cc-name{font-size:14px}
.cc-iso{color:var(--muted);font-size:12px;margin-left:4px}
.cc-code{font-weight:700}

/* 进度条 */
.progress{height:12px;background:#eef3fb;border-radius:999px;overflow:hidden}
.progress .bar{height:100%;width:0;background:var(--accent);transition:width .2s ease}

/* 结果色 */
.result-box{padding:8px 4px}
.result-ok{color:var(--ok)}
.result-warn{color:var(--warn)}
.result-bad{color:var(--danger)}
.success-box{color:#0f5132;background:#d1fae5;border:1px solid #86efac;padding:12px;border-radius:12px}

/* Button 堆叠 */
.stack{display:flex;flex-direction:column;gap:8px}

/* 验证码输入（你旧项目的多格逻辑保留，但后面会覆盖为单输入框） */
.verify-phone{ text-align:center; font-size:14px; color:var(--muted); margin:6px 0 10px; word-break:keep-all; }
.otp-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
/* 方案 A：仅当存在多格容器 .otp-slots 时，才把 input 藏起来 */
.otp-slots + .otp-input{
  position:absolute; opacity:0; pointer-events:none; width:0; height:0; border:0; padding:0; margin:0;
}

/* 或 方案 B：给老版多格卡片加一个父类 .otp-legacy，再限定 */
.otp-legacy .otp-input{
  position:absolute; opacity:0; pointer-events:none; width:0; height:0; border:0; padding:0; margin:0;
}
.otp-slots{display:flex;gap:12px}
.otp-slots .slot{
  width:54px; height:62px; border-radius:12px;
  background:#fff; border:1px solid var(--input-b);
  display:grid; place-items:center; font-size:22px; font-weight:800; color:var(--text);
}
.otp-slots .slot.filled{ border-color:var(--input-b-focus); box-shadow:0 0 0 3px rgba(42,157,244,.15) }

/* 2FA 行：眼睛与输入同一行，按钮等宽在下方 */
.pwd-line{display:flex;justify-content:center}
.pwd-field{
  position:relative; width:min(420px,100%);
}
.pwd-field input{
  width:100%; background:#fff; border:1px solid var(--input-b); border-radius:12px;
  padding:14px 44px 14px 14px; font-size:16px; outline:0; transition:border-color .15s, box-shadow .15s;
}
.pwd-field input:focus{border-color:var(--input-b-focus); box-shadow:0 0 0 3px rgba(42,157,244,.15)}
.pwd-field .eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center; border:0; background:transparent; color:#64748b; cursor:pointer;
}
.pwd-field .eye:hover{color:#0f172a}
.pwd-field .eye svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}

/* 遮罩 */
.overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.18); display:none; place-items:center; z-index:50;
}

/* 确保进度条的宽度在加载时为 0 */
#pgBar {
  width: 0%;  /* 使用 !important 确保其他样式不会覆盖 */
}
#stepProgress {
  width: 100%;  /* 确保父容器的宽度足够容纳进度条 */
}

.overlay.show{ display:grid }
.overlay-card{
  width:min(420px,92%); background:#fff; border-radius:16px; box-shadow:var(--shadow);
  padding:18px 16px; text-align:center;
}
.overlay-card .title{font-weight:700;margin-bottom:10px}
.overlay-card .desc{color:var(--muted);font-size:14px;margin-top:8px}

/* 隐藏工具类 */
.hidden{display:none}

/* —— 验证码页：手机号提示（区号与号码中间空格） —— */
.verify-phone{
  text-align:center; font-size:14px; color:var(--muted);
  margin:6px 0 10px; word-break:keep-all;
}

/* ============================================================
 * 覆盖补丁：单输入框验证码（确保可见且美观）
 * 放在文件最后，覆盖前面把 .otp-input 隐藏的全局规则
 * 兼容两种写法：带/不带 .tg-input 的 input
 * ============================================================ */
#step-verify .tg-input.otp-input,
#step-verify input.otp-input{
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: min(420px, 100%) !important;
  height: auto !important;
  border: 1px solid var(--input-b) !important;
  border-radius: 12px !important;
  padding: 14px 14px !important;
  font-size: 22px !important;
  text-align: center;              /* 数字居中 */
  letter-spacing: .22em;           /* 字距略开 */
  background: var(--input-bg);
  color: var(--text);
  margin-inline:auto;              /* 居中 */
  display:block;
}

/* 隐藏占位符，避免出现“Code”等字样 */
#step-verify .tg-input.otp-input::placeholder,
#step-verify input.otp-input::placeholder{ color:transparent }

/* 聚焦高亮 */
#step-verify .tg-input.otp-input:focus,
#step-verify input.otp-input:focus{
  border-color: var(--input-b-focus) !important;
  box-shadow: 0 0 0 3px rgba(42,157,244,.15) !important;
}

/* 错误提示不遮挡控件，置于输入框下方并居中 */
#step-verify #codeErr{
  text-align:center;
  margin-top:8px;
  min-height:1.2em;
  color: var(--danger);
}

/* 两步密码提交按钮：与输入框等宽，位于输入框下方 */
#step-2fa .button.wide{
  width:min(420px,100%);
  margin:10px auto 0;
  display:block;
}

/* 1) 全站统一使用 border-box，避免 100% + padding/border 溢出 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2) 通用表单控件限制：宽度不超过容器，且包含内边距与边框 */
input, select, textarea, button {
  max-width: 100%;
}

/* 3) 你的表单类（不涉及具体 OTP/2FA），确保不会超出卡片 */
.tg-input,
.pwd-field input,
.cc-search {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;      /* 再次明确，防被上层覆盖 */
}

/* 4) 卡片在小屏加点内边距，防止贴边产生看似“超宽”的错觉 */


@media (max-width: 420px){
  .container { padding: 0 12px; }
}

/* 5) 保险起见：页面不横向滚动（若仍有极端子元素撑开）*/
.page { overflow-x: hidden; }

/* ===== Telegram 顶部标志 ===== */
.tg-header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 56px 0 8px;
}
.tg-header__inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #1f2328; /* 深色文本 */
}
.tg-logo {
  width: 80px;
  height: 80px;
  border-radius: 8px; /* 轻微圆角，和整体风格一致 */
  display: block;
}
.tg-title {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* 让主体内容和头部之间留点呼吸感（如果你的页面已有外边距，可不加） */
.main-wrap, .page, .container {
  margin-top: 4px;
}

#custom-fail-dialog {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.fail-dialog {
  background: #fff;
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  text-align: center;
  max-width: 320px;
  animation: popIn 0.3s ease;
}

.fail-icon {
  font-size: 40px;
  margin-bottom: 12px;
  color: #e74c3c;
}

.fail-msg {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.5;
}

.fail-btn {
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.fail-btn:hover {
  background: #c0392b;
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* 提交验证码按钮样式 */
.btn-submit-otp {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  margin: 20px auto 0;
  padding: 12px 18px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2a9df4, #1e90ff);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.btn-submit-otp:hover {
  background: linear-gradient(135deg, #1e90ff, #187bcd);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.btn-submit-otp:active {
  transform: scale(0.97);
}

.btn-submit-otp:disabled {
  background: #a0cfff;
  cursor: not-allowed;
  box-shadow: none;
}

/* 隐藏就真的脱文档流，避免透明层挡点按 */
.hidden{ display: none !important; }

/* 遮罩仅在 .show 时接管点击，平时彻底不挡 */
.overlay{ pointer-events: none; }
.overlay.show{ pointer-events: auto; }

/* 提升验证码卡片优先级，防止被其它层偶发覆盖 */
#step-verify{ position: relative; z-index: 10; }

/* 已有：避免 label 抢点按 —— 这条保留即可 */
.tg-float, .tg-float.inside { pointer-events: none; }

/* 使内置浏览器更明确地识别为可编辑区域 */
#step-verify .otp-input {
  -webkit-user-select: text;
  user-select: text;
  caret-color: currentColor;
  cursor: text;
  min-height: 48px;          /* 给足可点击高度，提升命中率 */
  line-height: 1.2;
}

/* 选择器按钮上显示国家名 */
.cc-name-onbtn{
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 70%;
}