:root { color-scheme: light; --ink: #24262b; --muted: #616773; --line: #dce0e6; --silver: #f5f6f8; --focus: #737780; --error: #ac303b; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #fff; color: var(--ink); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
h1, h2, p { margin: 0; }
.site-header { max-width: 1280px; margin: auto; padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: 17px; font-weight: 600; }
.brand img { object-fit: contain; }
.build-label { font-size: 13px; color: var(--muted); }
.account-layout { max-width: 1120px; margin: 56px auto 64px; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 100px; align-items: start; }
.intro h1 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; line-height: 1.4; letter-spacing: -.7px; }
.intro-copy { margin: 18px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.creation-sheet { max-width: 370px; padding: 23px 25px 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, #fff 20%, #f3f4f6 100%); box-shadow: 0 12px 30px #22293608; }
.sheet-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-weight: 600; }
.sheet-caption, .sheet-footnote { font-size: 12px; font-weight: 400; color: var(--muted); }
.workflow { list-style: none; padding: 0; margin: 24px 0; }
.workflow li { display: flex; align-items: start; gap: 14px; position: relative; }
.workflow li + li { margin-top: 22px; }
.workflow li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 33px; width: 1px; height: 34px; background: var(--line); }
.step-dot { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid #c6ccd5; border-radius: 50%; font-size: 12px; color: #484e59; background: #fff; }
.workflow strong { font-weight: 500; }
.workflow p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sheet-footnote { padding-top: 13px; border-top: 1px solid var(--line); }
.account-panel { padding-top: 8px; min-width: 0; }
.login-switches,.login-options { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.login-switches { justify-content:center; color:var(--muted); font-size:12px; }
.password-label { display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; }
.password-label label { margin:0; }
.password-label button { border:0; padding:2px 0; background:none; color:var(--muted); font-size:12px; }
.password-label button:hover { text-decoration:underline; }
.login-switches button,.login-options button { border:0; padding:2px 0; background:none; color:var(--muted); font-size:12px; }
.login-switches button:hover,.login-options button:hover { color:var(--ink); text-decoration:underline; }
form .remember-label { display:flex; gap:6px; align-items:center; margin:0; font-size:12px; font-weight:400; color:var(--muted); }
.remember-label input { width:14px; height:14px; padding:0; accent-color:var(--ink); }
.login-methods { display:flex; gap:22px; margin:22px 0 24px; border-bottom:1px solid var(--line); }
.login-methods button { padding:0 0 10px; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font-size:14px; }
.login-methods button[aria-pressed="true"] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
h2 { font-size: 22px; line-height: 1.5; font-weight: 600; }
.panel-subtitle { color: var(--muted); margin-top: 8px; margin-bottom: 28px; overflow-wrap: anywhere; }
form label { display: block; font-weight: 500; margin: 18px 0 8px; }
input { min-width: 0; width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: #fff; color: var(--ink); transition: border-color .15s; }
input::placeholder { color: #747b85; }
input:focus { border-color: var(--focus); }
input[aria-invalid="true"] { border-color: var(--error); }
input:disabled { background: var(--silver); }
.phone-field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; }
.phone-field:focus-within { border-color: var(--focus); }
.phone-field input:focus-visible { outline: none; }
.phone-field > span { padding: 0 14px; border-right: 1px solid var(--line); color: var(--muted); }
.phone-field input { border: 0; }
.code-field { display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: 10px; }
.primary, .secondary { min-height: 46px; border-radius: 9px; padding: 10px 15px; font-weight: 500; transition: background .15s, transform .12s; }
.primary { display: block; width: 100%; border: 1px solid var(--ink); color: #fff; background: var(--ink); margin-top: 24px; }
.secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.primary:hover:not(:disabled) { background: #3d424b; }
.secondary:hover:not(:disabled) { background: var(--silver); }
button:active:not(:disabled) { transform: translateY(1px); }
.field-hint { margin-top: 7px; color: var(--muted); font-size: 13px; min-height: 21px; }
.error-message { color: var(--error); padding: 10px 12px; border-left: 3px solid #bd5660; background: #fff6f6; margin-top: 14px; font-size: 13px; overflow-wrap: anywhere; }
.account-note { color: var(--muted); font-size: 13px; line-height: 1.8; margin-top: 18px; }
.availability { border-top: 1px solid var(--line); margin-top: 27px; padding-top: 18px; font-size: 13px; color: var(--muted); }
.availability strong { font-weight: 500; color: var(--ink); }
.availability p { margin-top: 5px; }
.balance { background: var(--silver); padding: 20px; border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.balance dt { font-size: 13px; color: var(--muted); }
.balance dd { font-size: 26px; font-variant-numeric: tabular-nums; margin: 7px 0 0; overflow-wrap: anywhere; }
.wide { width: 100%; margin-top: 28px; }
footer { max-width: 1200px; margin: auto; padding: 22px 40px; border-top: 1px solid #edf0f3; color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.icp-filing { text-decoration: none; white-space: nowrap; }
.icp-filing:hover { text-decoration: underline; }
.skip-link { position: fixed; top: -100px; left: 16px; background: #fff; z-index: 2; padding: 10px 16px; }
.skip-link:focus { top: 8px; }
@media (max-width: 850px) { .account-layout { gap: 45px; margin-top: 35px; } .intro h1 { font-size: 30px; } .creation-sheet { padding: 18px; } }
@media (max-width: 680px) { .site-header { padding: 20px 24px; } .account-layout { display: flex; flex-direction: column; padding: 0 24px; margin: 22px auto 40px; max-width: 440px; gap: 34px; } .account-panel { order: -1; width: 100%; } .intro { width: 100%; border-top: 1px solid var(--line); padding-top: 28px; } .intro h1 { font-size: 24px; } .intro h1 br { display: none; } .intro-copy { margin: 10px 0 20px; font-size: 14px; } .creation-sheet { max-width: none; } input { font-size: 16px; } h2 { font-size: 20px; } footer { padding: 20px 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.profile-identity { display:flex; align-items:center; gap:14px; }
.profile-enrollment { margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--silver); }
.profile-enrollment h2 { font-size:16px; }
.profile-enrollment p { margin:8px 0 14px; color:var(--muted); font-size:13px; }
.profile-enrollment > div { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.profile-avatar { width:48px; height:48px; flex:none; display:grid; place-items:center; background:#24262b; color:white; border-radius:50%; font-size:18px; }
.profile-identity h2 { font-size:18px; }
.profile-identity p,.profile-uid { color:var(--muted); font-size:12px; }
.profile-uid { margin-top:12px; overflow-wrap:anywhere; }
.profile-tag { background:#f0f1f3; border-radius:6px; padding:2px 7px; font-size:12px; font-weight:400; margin-left:6px; }
#account-view { border:1px solid var(--line); border-radius:20px; padding:24px; }
.profile-links { border-block:1px solid var(--line); padding:12px 0; margin:20px 0 8px; }
.profile-links a { display:flex; justify-content:space-between; padding:12px 0; text-decoration:none; }
.profile-links a:hover { background:var(--silver); }
.profile-details { padding:12px 0; }
.profile-details summary { cursor:pointer; }
.nickname-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
#nickname-feedback { overflow-wrap:anywhere; }
#account-display-name { font-weight:600; overflow-wrap:anywhere; }
.profile-details p { margin-top:10px; color:var(--muted); font-size:12px; }
.profile-signout { display:block; width:100%; margin-top:18px; text-align:left; padding:12px 0; color:#bd3434; background:none; border:0; border-top:1px solid var(--line); }