/* 新手引导:选语言 → 绑邀请人 → 绑设备 → 支付密码 → 起名字
 * 黑金柠檬(design/dark-neon/screens/60、62、63):纯黑底,一个柠檬黄点缀色,
 * 每一步上面一条分段进度条,中间一只熊猫,下面白字加灰说明。
 */
.onboarding {
  min-height: 100dvh; background: var(--bg, #0a0a0a); color: var(--ink, #fff);
  font-family: var(--sans, system-ui, -apple-system, "PingFang SC", sans-serif);
}
.ob-wrap { max-width: 440px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(20px + var(--safe-t, 0px)) 16px calc(20px + var(--safe-b, 0px)); }
.ob-center { align-items: center; text-align: center; }

/* 分段进度条 + 第几步 */
.ob-progress { display: flex; gap: 6px; width: 100%; margin-bottom: 14px; }
.ob-progress i { flex: 1; height: 4px; border-radius: 2px; background: #2e2e2e; }
.ob-progress i.on { background: var(--neon, #e5ff3d); }
.ob-step { font-size: 12px; letter-spacing: .18em; color: var(--ink-2, #8a8a8a); font-weight: 600; margin-bottom: 10px; }

.ob-title { font-size: 28px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; }
.ob-sub { color: var(--ink-2, #8a8a8a); font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 340px; }

/* 熊猫:不是圆头像,是设计稿里那个立在黑底上的角色 */
.ob-mascot {
  width: 172px; height: 229px; margin: 2px auto 10px; flex: none;
  background: url('/img/dk/ob-phone.webp?v=1') center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ob-mascot.cheer { background-image: url('/img/dk/ob-cheer.webp?v=1'); animation: ob-bounce .9s ease-in-out infinite; }
.ob-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; margin: 6px 0 18px; }
.ob-row .ob-mascot { width: 84px; height: 112px; margin: 0; }
.ob-bubble { background: var(--surface, #151515); box-shadow: inset 0 0 0 1px var(--line, #242424); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--ink, #fff); text-align: left; }

.ob-field { display: block; text-align: left; width: 100%; }
.ob-field > span { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-2, #8a8a8a); margin-bottom: 8px; }
.ob-field small { display: block; margin-top: 8px; color: var(--ink-2, #8a8a8a); font-size: 12px; }
/* 绑定收款账户:输入框和下拉跟其他步骤一样全宽深色,不要浏览器预设的白框 */
.ob-field + .ob-field { margin-top: 16px; }
.ob-field > input, .ob-field > select {
  display: block; box-sizing: border-box; width: 100%; padding: 15px 16px; border-radius: 14px; background: var(--surface, #151515); border: 0;
  font: inherit; font-size: 17px; color: var(--ink, #fff); outline: none; -webkit-appearance: none; appearance: none;
}
.ob-field > select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.ob-field > select:invalid, .ob-field > select option[value=""] { color: var(--ink-2, #8a8a8a); }
.ob-field > input:focus, .ob-field > select:focus { box-shadow: inset 0 0 0 1px var(--neon, #e5ff3d); }
.ob-input-wrap { position: relative; }
.ob-input-wrap input, .ob-name input {
  width: 100%; padding: 15px 44px 15px 16px; border-radius: 14px; background: var(--surface, #151515); border: 0;
  font: inherit; font-size: 18px; color: var(--ink, #fff); outline: none;
}
.ob-input-wrap input:focus, .ob-name input:focus { box-shadow: inset 0 0 0 1px var(--neon, #e5ff3d); }
.ob-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #2a2a2a; color: var(--ink-2, #8a8a8a); font-size: 18px; line-height: 1; }
.ob-link { color: var(--neon, #e5ff3d); font-size: 13px; font-weight: 700; }
.ob-skip { display: block; margin: 12px auto 0; color: var(--ink-2, #8a8a8a); }
.ob-foot { margin-top: auto; padding-top: 22px; width: 100%; }
.ob-note { font-size: 12px; color: var(--ink-2, #8a8a8a); background: var(--surface, #151515); box-shadow: inset 0 0 0 1px var(--line, #242424); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; text-align: left; }
.ob-primary { width: 100%; min-height: 52px; border-radius: 999px; background: var(--neon, #e5ff3d); color: var(--neon-ink, #0a0a0a); font-size: 16px; font-weight: 700; border: 0; }
.ob-primary:disabled { opacity: .35; }
.ob-legal { font-size: 11px; color: var(--ink-3, #5c5c5c); margin: 12px 0 0; line-height: 1.6; }
.ob-card { width: 100%; background: var(--surface, #151515); box-shadow: inset 0 0 0 1px var(--line, #242424); border-radius: 20px; padding: 4px 16px; }
.ob-left { text-align: left; }
.ob-li { display: flex; gap: 10px; align-items: center; padding: 13px 0; font-size: 14px; line-height: 1.55; }
.ob-li + .ob-li { box-shadow: inset 0 1px 0 var(--line, #242424); }
.ob-li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #242424; color: var(--ink, #fff); font-size: 13px; font-weight: 700; }

/* 语言 */
.ob-langs { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ob-lang { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface, #151515); box-shadow: inset 0 0 0 1px var(--line, #242424); color: var(--ink, #fff); font-size: 16px; text-align: left; border: 0; }
.ob-lang .flag { font-size: 22px; }
.ob-lang:active, .ob-lang.is-on { box-shadow: inset 0 0 0 1px var(--neon, #e5ff3d); }

/* 确认弹层 */
.ob-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, .66); display: flex; align-items: flex-end; z-index: 30; }
.ob-sheet-card { width: 100%; max-width: 520px; margin: 0 auto; background: var(--surface, #151515); border-radius: 24px 24px 0 0; padding: 12px 16px calc(20px + var(--safe-b, 0px)); }
.ob-handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: #2e2e2e; margin: 0 auto 14px; }
.ob-sheet-card h3 { font-size: 20px; margin: 0 0 12px; color: var(--ink, #fff); }
.ob-person { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: #1c1c1c; box-shadow: inset 0 0 0 1px var(--neon, #e5ff3d); }
.ob-person b { display: block; font-size: 16px; color: var(--ink, #fff); }
.ob-person small { color: var(--ink-2, #8a8a8a); }
.ob-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #242424; color: var(--ink, #fff); font-weight: 800; }
.ob-check { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--neon, #e5ff3d); color: var(--neon-ink, #0a0a0a); display: grid; place-items: center; font-weight: 800; }
.ob-actions { display: flex; gap: 10px; margin-top: 14px; }
.ob-actions .btn { flex: 1; }

/* 支付密码 */
.ob-dots { display: flex; gap: 14px; justify-content: center; margin: 10px 0 26px; }
.ob-dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #3a3a3a; background: transparent; transition: background .15s; }
.ob-dots i.on { background: var(--neon, #e5ff3d); box-shadow: none; }
.ob-dots.shake { animation: ob-shake .35s; }
.ob-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; justify-content: center; margin-bottom: 18px; }
.ob-pad button { width: 72px; height: 72px; border-radius: 50%; background: var(--surface, #151515); box-shadow: inset 0 0 0 1px var(--line, #242424); border: 0; font-size: 26px; font-weight: 600; color: var(--ink, #fff); font-variant-numeric: tabular-nums; }
.ob-pad button:active { background: #242424; }
.ob-pad .ob-pad-alt { background: transparent; box-shadow: none; font-size: 22px; color: var(--ink-2, #8a8a8a); }
.ob-badge { margin: 14px auto; padding: 12px 20px; border-radius: 999px; background: var(--neon, #e5ff3d); color: var(--neon-ink, #0a0a0a); font-weight: 700; }

/* 起名 */
.ob-name { width: 100%; margin: 6px 0 12px; }
.ob-name input { text-align: center; font-size: 24px; font-weight: 700; border: 0; border-bottom: 2px solid #2e2e2e; border-radius: 0; background: transparent; padding: 10px; }
.ob-name input:focus { box-shadow: none; border-bottom-color: var(--neon, #e5ff3d); }
.ob-name small { display: block; margin-top: 8px; color: var(--ink-2, #8a8a8a); font-size: 12px; }
.ob-done { justify-content: center; }
.ob-done-name { font-size: 28px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px; background: var(--neon, #e5ff3d); color: var(--neon-ink, #0a0a0a); margin-bottom: 12px; }
.ob-done-check { width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 10, 10, .18); color: var(--neon-ink, #0a0a0a); font-size: 15px; display: grid; place-items: center; }

@keyframes ob-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ob-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .ob-mascot.cheer, .ob-dots.shake { animation: none; } }

/* 欢迎回来 */
.welcome-splash { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--bg, #0a0a0a); animation: ws-out .5s ease 1.3s forwards; }
.welcome-splash .ob-mascot { width: 190px; height: 253px; margin-bottom: 10px; }
.welcome-splash h2 { font-size: 24px; margin: 0; color: var(--ink, #fff); }
.welcome-splash p { color: var(--ink-2, #8a8a8a); margin: 4px 0 0; }
@keyframes ws-out { to { opacity: 0; visibility: hidden; } }

/* 全站维护画面(2026-10-31):跟引导同一套黑底、熊猫、白字灰说明;超管填的那段话放在气泡里,换行照原样 */
.ob-maint { justify-content: center; }
.ob-maint .ob-bubble { white-space: pre-wrap; text-align: center; border-radius: 16px; margin: 4px 0 14px; max-width: 360px; }
.ob-maint-safe { font-size: 12px; }