/* ── Variables ── */
:root { --bg: #EEF2F7; --card: #fff; --navy: #0C1E3A; --blue: #1C5FD1; --blue-h: #1650B8; --blue-lt: #EBF2FF; --accent: #0EA5E9; --ok: #10B981; --warn: #F59E0B; --err: #EF4444; --tx: #0D1B2A; --tx2: #64748B; --tx3: #94A3B8; --bd: #DDE3EC; --bd-f: #1C5FD1; --sh: 0 20px 60px rgba(12,30,58,.12),0 8px 24px rgba(12,30,58,.08); --r: 14px; --r2: 8px; --r3: 6px; --t: .22s cubic-bezier(.4,0,.2,1); --f: 'DM Sans','Noto Sans SC',-apple-system,sans-serif; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px }
body { font-family: var(--f); background: var(--bg); color: var(--tx); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; overflow-x: hidden; position: relative }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 20% 0%,rgba(28,95,209,.07) 0%,transparent 60%), radial-gradient(ellipse 60% 40% at 85% 100%,rgba(14,165,233,.06) 0%,transparent 55%), linear-gradient(160deg,#EEF2F7 0%,#E4EBF5 100%) }

/* ── In-card language switcher ── */
.card-lang-wrap { position: relative }
.card-lang-btn { display: flex; align-items: center; gap: 5px; font: 500 12px var(--f); color: var(--tx3); background: none; border: none; padding: 2px 4px; border-radius: var(--r3); cursor: pointer; transition: color var(--t); line-height: 1 }
.card-lang-btn:hover { color: var(--blue) }
.card-lang-dd { position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--card); border: 1px solid var(--bd); border-radius: var(--r2); box-shadow: 0 -4px 20px rgba(12,30,58,.08); display: none; min-width: 140px; z-index: 200 }
.card-lang-dd.open { display: block }
.lang-opt { padding: 9px 14px; font-size: 13px; cursor: pointer; transition: background var(--t); display: flex; align-items: center; gap: 8px; color: var(--tx) }
.lang-opt:hover { background: var(--bg) }
.lang-opt.active { color: var(--blue); font-weight: 500 }

/* ── Card ── */
.wrap { position: relative; z-index: 1; width: 100%; max-width: 420px }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); border: 1px solid rgba(221,227,236,.5); overflow: hidden; position: relative }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--blue),var(--accent)) }
.card-body { padding: 36px 36px 28px }
.card-foot { padding: 12px 20px 14px; border-top: 1px solid rgba(221,227,236,.5); display: flex; align-items: center; justify-content: space-between }

/* Footer register button — pill outline style */
.reg-foot-btn { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--f); color: var(--blue); border: 1.5px solid var(--blue); border-radius: 20px; padding: 5px 12px 5px 10px; text-decoration: none; transition: all var(--t); line-height: 1 }
.reg-foot-btn:hover { background: var(--blue-lt); }

/* Inline register CTA shown below the "account not found" error */
.reg-cta { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--r2); border: 1.5px solid var(--blue); background: var(--blue-lt); color: var(--blue); font: 600 13px var(--f); text-decoration: none; transition: all var(--t); margin-bottom: 14px; animation: slideIn .2s ease }
.reg-cta:hover { background: rgba(28,95,209,.12) }

/* ── Step dots ── */
.steps { display: flex; gap: 6px; margin-bottom: 24px }
.dot { width: 24px; height: 4px; border-radius: 2px; background: var(--bd); transition: background .4s,width .3s }
.dot.active { background: var(--blue); width: 32px }
.dot.done { background: var(--ok) }

/* ── Title row (with logo) ── */
.title-row { display: flex; align-items: center; gap: 11px; margin-bottom: 6px }
.card-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--bd); background: var(--bg); flex-shrink: 0 }
.card-logo-fb { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: none; background: linear-gradient(135deg,var(--blue),var(--accent)); align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800 }
h1.title { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1.2 }
.subtitle { font-size: 13px; color: var(--tx2); line-height: 1.5; margin-bottom: 28px }

/* ── Account row (step2) ── */
.acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #F8FAFD; border: 1px solid var(--bd); border-radius: var(--r2); margin-bottom: 20px; cursor: pointer; transition: all var(--t) }
.acct-row:hover { border-color: var(--blue); background: var(--blue-lt) }
.acct-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,var(--blue),var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700 }
.acct-info { flex: 1; min-width: 0 }
.acct-name { font-size: 13.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.acct-hint { font-size: 11.5px; color: var(--tx2); margin-top: 1px }
.acct-back { color: var(--blue); flex-shrink: 0 }

/* ── Fields ── */
.fgroup { margin-bottom: 16px }
.flabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx); margin-bottom: 7px; letter-spacing: .01em }
.frow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px }
.frow .flabel { margin-bottom: 0 }
.fwrap { position: relative }
.finput { width: 100%; height: 48px; padding: 0 14px 0 44px; border: 1.5px solid var(--bd); border-radius: var(--r2); font: 14.5px var(--f); color: var(--tx); background: #FAFBFD; outline: none; transition: all var(--t); -webkit-appearance: none }
.finput::placeholder { color: var(--tx3) }
.finput:focus { border-color: var(--bd-f); background: #fff; box-shadow: 0 0 0 3.5px rgba(28,95,209,.12) }
.finput.err { border-color: var(--err); background: #FFF5F5 }
.finput.err:focus { box-shadow: 0 0 0 3.5px rgba(239,68,68,.1) }
.ficon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tx3); pointer-events: none; transition: color var(--t); display: flex }
.fwrap:focus-within .ficon { color: var(--blue) }
.fsuffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex }
.pw-eye { background: none; border: none; cursor: pointer; padding: 4px; color: var(--tx3); border-radius: 4px; transition: color var(--t); display: flex }
.pw-eye:hover { color: var(--blue) }
.link { color: var(--blue); text-decoration: none; font-size: 12.5px; font-weight: 500 }
.link:hover { text-decoration: underline }

/* ── Honeypot ── */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none }

/* ── Message box ── */
.msg { display: none; align-items: flex-start; gap: 8px; padding: 11px 13px; border-radius: var(--r2); margin-bottom: 14px; font-size: 12.5px; line-height: 1.5; animation: slideIn .2s ease }
.msg.show { display: flex }
.msg.err-t { background: #FFF1F1; border: 1px solid rgba(239,68,68,.25); color: #B91C1C }
.msg.warn-t { background: #FFFBEB; border: 1px solid rgba(245,158,11,.25); color: #92400E }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-6px) }
    to { opacity: 1; transform: translateY(0) }
}

/* ── Buttons ── */
.btn { width: 100%; height: 48px; background: var(--blue); color: #fff; border: none; border-radius: var(--r2); font: 600 15px var(--f); cursor: pointer; letter-spacing: .01em; transition: all var(--t); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,.1),transparent); pointer-events: none }
.btn:hover:not(:disabled) { background: var(--blue-h); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(28,95,209,.3) }
.btn:active:not(:disabled) { transform: none; box-shadow: none }
.btn:disabled { opacity: .65; cursor: not-allowed; transform: none }
.btn.loading .btn-t { opacity: 0 }
.btn.loading .btn-sp { display: block }
.btn-sp { display: none }

@keyframes spin {
    to { transform: rotate(360deg) }
}

.ring { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite }
.btn2 { width: 100%; height: 44px; background: transparent; color: var(--blue); border: 1.5px solid var(--blue); border-radius: var(--r2); font: 500 13.5px var(--f); cursor: pointer; transition: all var(--t); display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px }
.btn2:hover { background: var(--blue-lt) }

/* ── Divider ── */
.div { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px }
.div-line { flex: 1; height: 1px; background: var(--bd) }
.div-t { font-size: 11.5px; color: var(--tx3); font-weight: 500; letter-spacing: .05em }

/* ── Social ── */
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.soc { height: 44px; border-radius: var(--r2); border: 1.5px solid var(--bd); background: var(--card); display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 13px var(--f); cursor: pointer; transition: all var(--t); text-decoration: none; color: var(--tx) }
.soc:hover { border-color: transparent; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(12,30,58,.08) }
.soc.line { color: #06C755 }
.soc.line:hover { background: #F0FFF4; border-color: #06C755 }
.soc.wechat { color: #07C160 }
.soc.wechat:hover { background: #F0FFF4; border-color: #07C160 }

/* ── Terms ── */
.terms { font-size: 11px; color: var(--tx3); text-align: center; line-height: 1.6; margin-top: 18px }
.terms a { color: var(--tx2); text-decoration: underline; text-decoration-color: var(--bd) }
.terms a:hover { color: var(--blue) }

/* ── Step panels ── */
.panel { display: none; animation: stepIn .3s cubic-bezier(.4,0,.2,1) }
.panel.active { display: block }
.panel.back { animation: stepBk .3s cubic-bezier(.4,0,.2,1) }

@keyframes stepIn {
    from { opacity: 0; transform: translateX(18px) }
    to { opacity: 1; transform: none }
}

@keyframes stepBk {
    from { opacity: 0; transform: translateX(-18px) }
    to { opacity: 1; transform: none }
}

/* ── OTP ── */
.otp-info { padding: 12px 14px; border-radius: var(--r2); margin-bottom: 16px; background: linear-gradient(135deg,rgba(28,95,209,.04),rgba(14,165,233,.04)); border: 1px solid rgba(28,95,209,.15); display: flex; align-items: flex-start; gap: 10px }
.otp-info-ic { color: var(--blue); flex-shrink: 0; margin-top: 1px }
.otp-info-tx { font-size: 12.5px; color: var(--tx2); line-height: 1.55 }
.otp-info-em { font-weight: 600; color: var(--tx) }
.otp-grid { display: flex; gap: 8px; justify-content: center; margin: 20px 0 8px }
.otp-d { width: 48px; height: 56px; border: 1.5px solid var(--bd); border-radius: var(--r2); text-align: center; font-size: 22px; font-weight: 700; color: var(--navy); background: #FAFBFD; outline: none; transition: all var(--t); caret-color: var(--blue) }
.otp-d:focus { border-color: var(--bd-f); background: #fff; box-shadow: 0 0 0 3.5px rgba(28,95,209,.12) }
.otp-d.filled { border-color: var(--blue); background: var(--blue-lt) }
.otp-d.err { border-color: var(--err) }
.otp-resend { text-align: center; font-size: 12.5px; color: var(--tx2); margin-top: 12px }
.resend-btn { background: none; border: none; color: var(--blue); font: 500 12.5px var(--f); cursor: pointer }
.resend-btn:disabled { color: var(--tx3); cursor: not-allowed }
.otp-timer { font-weight: 600; color: var(--warn); font-variant-numeric: tabular-nums }

/* ── Security strip ── */
.sec-strip { background: linear-gradient(90deg,rgba(28,95,209,.04),rgba(14,165,233,.04)); border-top: 1px solid rgba(28,95,209,.08); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: var(--tx2) }
.sec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 2px rgba(16,185,129,.2) }
.sec-dot.chk { background: var(--warn); box-shadow: 0 0 0 2px rgba(245,158,11,.2) }

@keyframes pulse {
    0%,100% { opacity: 1 }
    50% { opacity: .5 }
}

.chk-tx { animation: pulse 1.5s ease-in-out infinite }

/* ── Modal ── */
.modal-ov { display: none; position: fixed; inset: 0; background: rgba(10,22,40,.55); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; padding: 20px }
.modal-ov.open { display: flex }
.modal-card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 32px; width: 100%; max-width: 320px; text-align: center; animation: mIn .28s cubic-bezier(.34,1.56,.64,1) }

@keyframes mIn {
    from { opacity: 0; transform: scale(.9) }
    to { opacity: 1; transform: scale(1) }
}

.modal-t { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px }
.modal-s { font-size: 12.5px; color: var(--tx2); margin-bottom: 20px }
.qr-wrap { width: 180px; height: 180px; border: 2px solid var(--bd); border-radius: var(--r2); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: #FAFBFD }
.modal-cls { background: none; border: 1.5px solid var(--bd); border-radius: var(--r3); padding: 8px 20px; font: 13px var(--f); color: var(--tx2); cursor: pointer; transition: all var(--t); margin-top: 8px }
.modal-cls:hover { border-color: var(--blue); color: var(--blue) }

/* ── Responsive ── */
@media(max-width:480px) {
    .card-body { padding: 28px 24px 22px }
    .card-foot { padding: 12px 16px 14px }
    .socials { grid-template-columns: 1fr }
    .otp-d { width: 42px; height: 50px; font-size: 20px }
}