:root { color-scheme: light; --ink: #202a2c; --muted: #677477; --line: #dde5e5; --accent: #12786d; --accent-soft: #edf7f4; --surface: #f7f9f9; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.6; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #279d8d; outline-offset: 4px; }
[hidden] { display: none !important; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1120px; min-height: 72px; margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 650; }
.brand-symbol { display: grid; place-items: center; width: 30px; height: 30px; background: #203c37; color: white; border-radius: 6px; font-size: 19px; font-weight: 600; }
.brand-divider { display: inline-block; color: #a7b4b5; margin: 0 12px; font-weight: 400; }
.github-link { display: inline-flex; align-items: center; gap: 7px; color: #536365; font-size: 13px; }
.github-link svg { width: 17px; height: 17px; }
.github-link svg:last-child { width: 14px; height: 14px; }
.github-link:hover { color: var(--accent); }
main { max-width: 1120px; margin: 0 auto; padding: 44px 32px 42px; }
.eyebrow, .section-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.page-heading { margin-bottom: 34px; }
h1 { font-size: 32px; line-height: 1.25; font-weight: 650; margin: 8px 0 12px; }
.page-heading p { color: var(--muted); margin: 0; font-size: 14px; }
.support-layout { display: grid; grid-template-columns: minmax(0, 650px) minmax(0, 1fr); gap: 64px; align-items: start; }
.payment-section { min-width: 0; }
.method-tabs { display: flex; border-bottom: 1px solid var(--line); gap: 24px; }
.method-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 4px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font-weight: 600; }
.method-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.method-tabs svg { width: 18px; height: 18px; }
.method-panel { padding-top: 26px; }
.payment-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
h2 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 650; }
.recipient { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.icon-button { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); background: white; border-radius: 6px; color: #536365; position: relative; }
.icon-button svg { width: 17px; height: 17px; }
.icon-button:hover { color: var(--accent); border-color: #8ebeb7; background: var(--accent-soft); }
.icon-button[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: 0; padding: 4px 8px; border-radius: 4px; background: #243434; color: white; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.icon-button:hover::after, .icon-button:focus-visible::after { opacity: 1; }
.wechat-image-area { margin-top: 20px; min-height: 408px; background: var(--surface); display: flex; justify-content: center; align-items: center; padding: 20px; border-radius: 8px; }
.wechat-image { display: block; max-width: 100%; width: auto; height: 368px; object-fit: contain; }
.payment-caption { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.project-section { border-left: 1px solid var(--line); padding-left: 30px; margin-top: 6px; }
.project-section h2 { margin-top: 9px; font-size: 22px; }
.project-intro { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 14px 0 23px; }
.project-list { border-top: 1px solid var(--line); }
.project-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.project-link strong { display: block; font-size: 14px; font-weight: 650; }
.project-link span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.project-link svg { width: 16px; height: 16px; flex: 0 0 auto; color: #8a989a; }
.project-link:hover strong, .project-link:hover svg { color: var(--accent); }
.support-note { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); margin-top: 23px; }
.support-note svg { color: #b65c49; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.support-note p { margin: 0; font-size: 12px; line-height: 1.8; }
.network-reminder { margin-top: 34px; padding-top: 21px; border-top: 1px solid var(--line); }
.network-reminder p { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 8px 0 0; }
.asset-tabs { display: inline-grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: var(--surface); gap: 3px; max-width: 100%; margin-bottom: 24px; }
.asset-tabs button { min-height: 34px; min-width: 64px; padding: 5px 13px; border: 0; background: transparent; border-radius: 3px; font-size: 13px; font-weight: 600; color: var(--muted); }
.asset-tabs button[aria-selected="true"] { background: white; color: var(--ink); box-shadow: 0 1px 3px #1e363618; }
.wallet-heading { display: flex; gap: 13px; align-items: center; }
.asset-mark { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.asset-btc { background: #fff1df; color: #a8620c; }.asset-usdt { background: #e4f4ed; color: #238060; }.asset-bnb { background: #fff5cc; color: #8b6a00; }.asset-eth { background: #eaf0ff; color: #506b9e; }
.wallet-heading h2 { font-size: 19px; }
.network-badge { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.crypto-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 22px; }
.crypto-qr { display: block; width: 240px; height: 240px; max-width: 100%; image-rendering: pixelated; }
.wallet-details { min-width: 0; }
.field-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 9px; }
.address-row { display: flex; align-items: flex-start; gap: 12px; }
.address-row code { min-width: 0; display: block; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; word-break: break-all; color: var(--ink); }
.address-row .icon-button { width: 32px; height: 32px; }
.network-note { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 15px 0 0; }
.transfer-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 17px; color: #946641; }
.transfer-warning svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.transfer-warning p { margin: 0; font-size: 12px; line-height: 1.8; }
.deposit-note { color: var(--muted); font-size: 12px; line-height: 1.8; padding-top: 23px; margin: 25px 0 0; border-top: 1px solid var(--line); }
.copy-status { min-height: 21px; margin: 10px 0 0; color: var(--accent); font-size: 12px; }
footer { max-width: 1056px; margin: auto; padding: 20px 0 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; color: #839092; font-size: 12px; }
@media (max-width: 960px) { .support-layout { gap: 36px; grid-template-columns: minmax(0, 1fr) 260px; }.project-section { padding-left: 24px; }.crypto-body { grid-template-columns: 1fr; gap: 17px; }.crypto-qr { margin: 0 auto; }.wallet-details { max-width: 420px; } }
@media (max-width: 720px) { .header-inner { min-height: 62px; padding: 0 20px; }.github-link span, .github-link svg:last-child { display: none; }.brand { font-size: 14px; }.brand-divider { margin: 0 8px; }main { padding: 29px 20px 27px; }.page-heading { margin-bottom: 24px; }h1 { font-size: 28px; }.page-heading p { font-size: 13px; line-height: 1.8; }.support-layout { grid-template-columns: 1fr; gap: 29px; }.method-panel { padding-top: 22px; }.wechat-image-area { min-height: 0; padding: 16px; }.wechat-image { height: auto; width: 272px; max-height: 380px; }.project-section { margin-top: 0; padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line); }.project-section h2 { font-size: 20px; }.project-intro { margin-bottom: 17px; }.network-reminder { margin-top: 23px; }.crypto-body { grid-template-columns: 1fr; gap: 20px; }.crypto-qr { width: 252px; height: 252px; }.wallet-details { max-width: none; }.asset-tabs { width: 100%; }.asset-tabs button { min-width: 0; }.address-row code { font-size: 13px; }.deposit-note { margin-top: 22px; padding-top: 19px; }footer { margin: 0 20px; padding: 18px 0 23px; }.copy-status { margin-top: 9px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }