:root {
    color-scheme:light;
    --orange:#ff641c;
    --ink:#24211f;
    --muted:#827c77;
    --line:#efe9e3;
    --green:#07a658}


* {
    box-sizing:border-box}

body {
    margin:0;
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    background:linear-gradient(160deg,#fff5e9 0%,#fffaf6 35%,#f8f7f5 72%);
    min-height:100vh}

a {
    color:inherit;
    text-decoration:none}

button,input {
    font:inherit}

.page {
    width:min(100%,460px);
    margin:auto;
    padding:26px 24px max(24px,env(safe-area-inset-bottom))}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    font-weight:750;
    letter-spacing:1px}

.brand-logo {
    display:grid;
    place-items:center;
    color:white;
    background:var(--orange);
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:27px;
    box-shadow:0 5px 12px #ff641c21}

.brand small {
    display:block;
    font-size:8px;
    letter-spacing:2px;
    font-weight:500;
    margin-top:3px}

.badge {
    margin-left:auto;
    padding:7px 10px;
    background:#fff2e4;
    border:1px solid #f5ddc6;
    border-radius:20px;
    font-size:11px;
    font-weight:500;
    letter-spacing:0;
    color:#bd641e}

.badge.verified {
    color:#168551;
    background:#eaf7ef;
    border-color:#d7eee0}

.hero {
    padding:39px 0 23px}

.eyebrow {
    font-size:12px;
    color:#a27451;
    letter-spacing:1px}

h1 {
    font-size:34px;
    line-height:1.42;
    letter-spacing:-1px;
    margin:14px 0 14px;
    font-weight:780}

h1 span {
    color:var(--orange)}

p {
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    margin:0}

.card {
    background:#fff;
    border:1px solid #f4ece4;
    border-radius:20px;
    box-shadow:0 8px 25px #5d3a1205}

.invitation {
    padding:20px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap}

.inviter-icon {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    background:#fff0e6;
    color:var(--orange);
    font-size:19px;
    border-radius:50%;
    flex-shrink:0}

.invitation strong {
    font-size:15px}

.invitation p {
    font-size:12px}

.invitation-mark {
    margin-left:auto;
    font-size:10px;
    color:#bda58f;
    border:1px solid #eadfd4;
    border-radius:5px;
    padding:3px 6px}

.invite-code {
    width:100%;
    border-top:1px dashed var(--line);
    padding-top:15px;
    margin-top:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:var(--muted)}

.invite-code strong {
    letter-spacing:2px;
    color:var(--orange);
    font-size:16px;
    font-variant-numeric:tabular-nums}

.project-card {
    margin-top:14px;
    padding:19px 20px}

.project-card h2 {
    font-size:19px;
    margin:9px 0}

.project-card p {
    font-size:13px}

.reward {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:13px}

.reward strong {
    font-size:18px;
    color:var(--orange);
    margin-left:7px}

.steps {
    list-style:none;
    padding:0;
    margin:24px 0;
    display:flex;
    justify-content:space-between;
    gap:4px;
    font-size:11px;
    color:#93877d}

.steps li {
    display:flex;
    align-items:center;
    gap:7px}

.steps b {
    border-radius:50%;
    background:#eee6dd;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    font-size:10px;
    font-weight:500}

.steps .active {
    color:var(--green)}

.steps .active b {
    background:#dff3e6;
    color:var(--green)}

.button {
    border:0;
    border-radius:13px;
    min-height:51px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    font-size:16px;
    font-weight:600;
    gap:10px;
    cursor:pointer;
    padding:13px 16px;
    line-height:1.5;
    transition:opacity .2s}

.button:focus-visible,a:focus-visible {
    outline:3px solid #7144bd;
    outline-offset:4px}

.button:disabled {
    opacity:.6;
    cursor:wait}

.wechat-button {
    background:#09a557;
    color:white;
    box-shadow:0 5px 12px #098a5420}

.wechat-dot {
    display:block;
    background:white;
    width:18px;
    height:15px;
    border-radius:50%;
    position:relative}

.wechat-dot:after {
    content:"";
    position:absolute;
    bottom:-3px;
    left:3px;
    border-top:5px solid white;
    border-right:5px solid transparent}

.primary-button {
    background:var(--orange);
    color:white;
    box-shadow:0 5px 12px #ff641c16}

.secondary-button {
    background:white;
    color:var(--orange);
    border:1px solid #ffd1b9}

.disabled-button {
    background:#eeebe7;
    color:#a29990;
    cursor:default;
    font-size:14px}

.fineprint {
    font-size:11px;
    text-align:center;
    line-height:1.7;
    margin-top:14px;
    color:#9b938b}

.fineprint.left {
    text-align:left;
    margin:0 0 20px}

.open-wechat {
    background:#eaf5ed;
    padding:17px;
    text-align:center;
    border-radius:14px}

.open-wechat strong {
    color:#218653;
    font-size:15px}

.open-wechat p {
    font-size:12px;
    margin-top:7px;
    color:#668371}

footer {
    text-align:center;
    color:#aaa099;
    font-size:10px;
    line-height:1.7;
    margin-top:30px}

.hero.compact {
    padding-top:30px}

.compact h1 {
    font-size:29px}

.registration-card {
    padding:20px}

.wechat-profile {
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:22px}

.wechat-profile img {
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover}

.wechat-profile strong {
    font-size:14px}

.wechat-profile p {
    font-size:11px}

.checkmark {
    margin-left:auto;
    width:23px;
    height:23px;
    background:#e7f6ec;
    color:#07a658;
    display:grid;
    place-items:center;
    border-radius:50%}

.mode-tabs {
    display:flex;
    background:#f5f3f0;
    border-radius:10px;
    padding:4px;
    margin-bottom:22px}

.mode-tabs label {
    position:relative;
    flex:1;
    text-align:center;
    cursor:pointer}

.mode-tabs input {
    position:absolute;
    opacity:0}

.mode-tabs span {
    display:block;
    padding:10px 1px;
    color:#89817b;
    font-size:12px;
    border-radius:7px}

.mode-tabs input:checked+span {
    color:var(--orange);
    background:white;
    box-shadow:0 2px 7px #49341709;
    font-weight:600}

.mode-tabs input:focus-visible+span {
    outline:2px solid #7144bd}

.field {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:17px}

.field input {
    display:block;
    border:1px solid #eee7df;
    border-radius:10px;
    background:#fffdfa;
    padding:14px 13px;
    width:100%;
    font-size:14px;
    margin-top:8px;
    outline:none;
    color:var(--ink);
    font-weight:400}

.field input::placeholder {
    color:#bab0a6}

.field input:focus {
    border-color:var(--orange);
    box-shadow:0 0 0 3px #ff641c0b}

.invite-note {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted);
    padding-top:3px;
    margin-bottom:10px}

.invite-note strong {
    color:#6c625a;
    font-weight:500;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis}

.invite-note small {
    margin-left:auto;
    color:#b1937c;
    letter-spacing:1px}

.form-error {
    padding:10px 12px;
    margin-bottom:14px;
    border-radius:8px;
    background:#fff0ed;
    color:#b53827;
    font-size:12px}

.message-card,.success-card {
    text-align:center;
    padding:35px 23px;
    margin-top:45px}

.message-card h1,.success-card h1 {
    font-size:27px}

.message-card .button {
    margin-top:28px}

.status-icon {
    display:grid;
    place-items:center;
    margin:0 auto 23px;
    width:65px;
    height:65px;
    font-size:30px;
    font-weight:500;
    background:#fff0df;
    color:var(--orange);
    border-radius:50%}

.success-icon {
    color:#0b9c52;
    background:#e7f6ed;
    font-size:35px}

.success-card p {
    font-size:13px}

.account-id {
    margin-top:24px;
    padding-top:20px;
    border-top:1px dashed var(--line);
    font-size:12px;
    color:var(--muted)}

.account-id strong {
    margin-left:10px;
    color:var(--ink);
    font-size:15px}

.download-section {
    text-align:center;
    padding:25px 5px}

.download-section h2 {
    font-size:18px;
    margin:0 0 9px}

.download-section p {
    font-size:12px;
    margin-bottom:20px}

.download-section .button+.button {
    margin-top:12px}

[hidden] {
    display:none!important}

@media(min-width:600px) {
    .page {
    margin:25px auto;
    background:#fffaf7;
    border-radius:30px;
    box-shadow:0 15px 70px #b9946b13;
    padding:28px 30px}

}

@media(max-width:350px) {
    .page {
    padding-left:18px;
    padding-right:18px}

h1 {
    font-size:30px}

.compact h1 {
    font-size:26px}

.invitation,.registration-card {
    padding:17px}

.steps {
    font-size:10px;
    gap:2px}

.steps li {
    gap:4px}

}

/* 微信授权后的注册页：按 750×1624 设计稿以 2x 密度还原。 */
body.registration-body {
    min-width:320px;
    min-height:100vh;
    min-height:100svh;
    background:#f9f9f9;
    color:#000;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision}

.registration-page {
    width:100%;
    max-width:375px;
    min-height:812px;
    margin:0 auto;
    padding-top:170px;
    overflow:hidden}

.registration-hero {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    width:311px;
    height:131px;
    margin-left:28px}

.registration-hero h1 {
    margin:-4px 0 0;
    color:#000;
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:25px;
    font-weight:700;
    line-height:1.45;
    letter-spacing:0}

.registration-hero h1 span {
    display:block;
    color:inherit}

.registration-hero img {
    display:block;
    width:65px;
    height:65px;
    flex:0 0 65px;
    border-radius:15px}

.registration-form {
    width:300px;
    margin:0 auto}

.registration-control {
    display:block;
    width:100%;
    height:56px;
    margin:0 0 14px}

.registration-control input {
    display:block;
    width:100%;
    height:56px;
    margin:0;
    padding:0 22px;
    border:0;
    border-radius:6px;
    outline:0;
    background:#fff;
    color:#20242d;
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:56px;
    box-shadow:none;
    caret-color:#000}

.registration-control input::placeholder {
    color:#797f8f;
    opacity:1}

.registration-control input:focus {
    box-shadow:0 0 0 2px rgba(0,0,0,.12)}

.registration-submit {
    display:block;
    width:300px;
    height:50px;
    margin:49px 0 0;
    padding:0;
    border:0;
    border-radius:25px;
    background:#000;
    color:#fff;
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    box-shadow:none}

.registration-submit:focus-visible {
    outline:3px solid #777;
    outline-offset:3px}

.registration-submit:disabled {
    cursor:wait;
    opacity:.65}

.registration-error {
    position:fixed;
    z-index:1000;
    top:max(18px,calc(env(safe-area-inset-top) + 12px));
    left:50%;
    display:flex;
    align-items:center;
    width:max-content;
    max-width:calc(100vw - 40px);
    min-height:46px;
    margin:0;
    padding:10px 16px 10px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(32,35,42,.96);
    box-shadow:0 10px 30px rgba(20,24,32,.2);
    color:#fff;
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-10px);
    transition:opacity .18s ease,transform .18s ease;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px)}

.registration-error::before {
    content:"!";
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    margin-right:9px;
    flex:0 0 22px;
    border-radius:50%;
    background:#ff5a52;
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1}

.registration-error.is-visible {
    opacity:1;
    transform:translate(-50%,0)}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0}

@media(max-width:374px) {
    .registration-page {
        padding-top:45.3333vw}

    .registration-hero {
        width:82.9333vw;
        height:34.9333vw;
        margin-left:7.4667vw}

    .registration-form,
    .registration-submit {
        width:80vw}
}

/* 微信下载前置状态：直接使用产品给定的提示图，避免重绘导致视觉偏差。 */
body.guide-body {
    min-width:320px;
    min-height:100vh;
    min-height:100svh;
    margin:0;
    overflow:hidden}

.guide-page {
    width:100%;
    min-height:100vh;
    min-height:100svh}

.guide-page img {
    display:block;
    width:100%;
    height:auto;
    margin:0 auto}

body.authorization-required-body,
.authorization-required-page {
    background:#000}

.authorization-required-page img {
    max-width:672px}

/* 独立 App 下载页：设计稿正文区域为 750×1446，按 2x 密度还原。 */
body.download-body {
    min-width:320px;
    min-height:100vh;
    min-height:100svh;
    background:#f9f9f9;
    color:#000;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision}

.download-page {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:375px;
    min-height:723px;
    margin:0 auto;
    padding-top:50px;
    overflow:hidden}

.download-logo {
    display:block;
    width:65px;
    height:65px;
    border-radius:15px}

.download-name {
    margin:24px 0 0;
    color:#000;
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:25px;
    font-weight:700;
    line-height:37px;
    letter-spacing:0}

.download-button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:300px;
    height:50px;
    margin-top:79px;
    padding:0;
    border:0;
    border-radius:25px;
    background:#000;
    color:#fff;
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:50px;
    text-align:center;
    box-shadow:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent}

.download-button:focus-visible {
    outline:3px solid #777;
    outline-offset:3px}

.download-button.is-disabled {
    cursor:not-allowed;
    opacity:.55}

/* 微信内仍渲染下载页，只在上方覆盖半透明的“浏览器打开”引导。 */
.download-wechat-overlay {
    display: block;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            filter: alpha(opacity=80);
            height: 100%;
            width: 100%;
            z-index: 300;
}
.wechat-overlay-image {
    max-width: 100%;
            height: auto;
}
@media(max-width:374px) {
    .download-page {
        padding-top:13.3333vw}

    .download-button {
        width:80vw}
}