:root { color-scheme: light; --ink:#17221f; --muted:#66736f; --paper:#f5f4ef; --card:#fffefa; --green:#0c6b5d; --lime:#b9e69a; --line:#dde3dc; --red:#a3392d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 10% 0%,#dcebdc 0,transparent 35%),var(--paper); color:var(--ink); font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.shell { width:min(100% - 32px,980px); margin:0 auto; padding:70px 0 34px; }
.hero { max-width:650px; margin-bottom:34px; }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.18em; }
h1,h2 { letter-spacing:-.04em; line-height:1.08; margin:12px 0 16px; }
h1 { font-size:clamp(38px,7vw,72px); max-width:630px; }
h2 { font-size:34px; }
.hero p { color:var(--muted); font-size:17px; max-width:560px; }
.route { display:flex; align-items:center; gap:9px; color:var(--green); font-weight:700; margin-top:24px; }
.dot { width:9px; height:9px; border-radius:50%; background:#58b87b; box-shadow:0 0 0 6px #58b87b22; }
.card,.user-card { background:var(--card); border:1px solid #e6e8df; border-radius:24px; box-shadow:0 20px 65px #253d2b12; padding:27px; }
.card { max-width:530px; margin-left:auto; }
.tabs { border-bottom:1px solid var(--line); display:flex; gap:24px; margin-bottom:25px; }
.tab { border:0; background:none; color:var(--muted); cursor:pointer; font:inherit; padding:0 0 13px; position:relative; }
.tab.active { color:var(--ink); font-weight:800; }
.tab.active:after { background:var(--green); border-radius:5px; bottom:-1px; content:""; height:3px; left:0; position:absolute; right:0; }
.panel label { color:#33433e; display:block; font-size:13px; font-weight:700; margin:14px 0; }
input { background:#fbfcf8; border:1px solid var(--line); border-radius:11px; color:var(--ink); display:block; font:inherit; font-weight:400; margin-top:7px; outline:none; padding:12px 13px; width:100%; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px #0c6b5d18; }
button { cursor:pointer; font:inherit; }
.primary-actions { display:grid; gap:10px; }
.aliyun-button,.passkey-button,.submit { border:0; border-radius:12px; padding:14px 16px; text-align:left; }
.aliyun-button { background:var(--green); color:#fff; font-weight:800; }
.passkey-button { background:var(--lime); color:#15342a; font-weight:800; }
.aliyun-button span,.passkey-button span { float:right; font-size:11px; font-weight:500; opacity:.72; padding-top:3px; }
.submit { background:var(--ink); color:white; font-weight:800; margin-top:14px; text-align:center; width:100%; }
.secondary { background:#f3f5ef; border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:11px 13px; white-space:nowrap; }
.link-button { background:none; border:0; color:var(--green); font-size:13px; padding:12px 0; }
.divider { align-items:center; color:#8b9690; display:flex; font-size:12px; gap:12px; margin:23px 0 14px; }
.divider:before,.divider:after { background:var(--line); content:""; flex:1; height:1px; }
.code-row { align-items:end; display:flex; gap:9px; }
.code-row input { flex:1; }
.challenge-row { align-items:end; display:flex; gap:10px; margin-top:9px; }
.challenge-row span { background:#eef5eb; border-radius:10px; color:var(--green); flex:1; font-weight:800; padding:12px 11px; }
.challenge-row input { margin:0; max-width:100px; }
.notice { background:#eff8eb; border-radius:11px; color:#27654f; margin-bottom:15px; padding:11px 13px; }
.notice.error { background:#fff0ed; color:var(--red); }
.small,.one-tap-help { color:var(--muted); font-size:12px; }
.one-tap-help { background:#f5f8f2; border-left:3px solid var(--lime); margin-top:18px; padding:10px 12px; }
.user-card { align-items:center; display:flex; justify-content:space-between; margin-top:18px; }
.user-card h2 { margin-bottom:4px; }
.user-card p { color:var(--muted); margin:0; }
.user-actions { align-items:end; display:flex; flex-direction:column; gap:4px; }
footer { color:#8b9690; font-size:12px; margin-top:25px; text-align:center; }
@media (max-width:700px) { .shell { padding-top:38px; } .card { margin:0; padding:20px; } .user-card { align-items:flex-start; flex-direction:column; gap:18px; } .user-actions { align-items:flex-start; } }