:root {
  --page: #fcfbf7;
  --ink: #061d2a;
  --body: #405a5c;
  --muted: #93a1af;
  --green: #00684f;
  --green-deep: #005d47;
  --green-line: #bddbd1;
  --mint: #eef8f4;
  --tab-bg: #eff2ee;
  --yellow: #bd7908;
  --yellow-line: #edbb50;
  --yellow-bg: #fff8e8;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--page); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(0, 104, 79, .22); outline-offset: 2px; }

.site-header { height: 73px; border-bottom: 1px solid #dfe2da; background: rgba(252, 251, 247, .96); }
.header-inner { display: flex; width: min(100% - 48px, 1114px); height: 100%; margin: 0 auto; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--green); text-decoration: none; }
.brand-mark { position: relative; display: block; width: 30px; height: 30px; border-radius: 10px; background: conic-gradient(from 38deg, #ef9d7f 0 20%, #f7e7af 20% 34%, #76b9a6 34% 52%, #86a6df 52% 72%, #8066a4 72% 85%, #ef9d7f 85%); box-shadow: 0 1px 6px rgba(42, 74, 75, .17); }
.brand-mark::after { position: absolute; inset: 7px; border-radius: 7px; background: #fffdfa; content: ""; }
.brand-mark span { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: #fffdfa; }
.brand-mark span:nth-child(1) { top: 3px; left: 12px; }.brand-mark span:nth-child(2) { bottom: 4px; left: 4px; }.brand-mark span:nth-child(3) { right: 4px; bottom: 4px; }
.brand-text { display: grid; gap: 2px; }.brand-text strong { font-family: Georgia, "Times New Roman", serif; font-size: 19px; letter-spacing: .8px; line-height: 1; }.brand-text small { color: #667572; font-size: 12px; line-height: 1; }
.header-notice { display: grid; margin-left: auto; color: #64736f; font-size: 12px; line-height: 1.25; text-align: center; }.header-notice b { color: var(--green); font-weight: 500; }
.outline-button { min-height: 36px; margin-left: 36px; border: 1px solid #bdd2c9; border-radius: 8px; padding: 0 14px; color: var(--green); background: #fffefa; box-shadow: 0 2px 5px rgba(0, 61, 45, .05); font-size: 13px; font-weight: 600; }.outline-button:hover { background: #f2f8f4; }

main { min-height: calc(100vh - 73px); padding: 63px 24px 64px; }
.welcome { margin: 0 auto 34px; text-align: center; }.welcome h1 { margin: 0; color: #061c29; font-size: 36px; font-weight: 800; line-height: 1.35; }.welcome p { margin: 7px 0 0; color: #5a706f; font-size: 16px; line-height: 1.5; }
.service-card { width: min(100%, 672px); margin: 0 auto; border: 1px solid #cbded5; border-radius: 14px; padding: 39px 24px 39px; background: #fffefa; box-shadow: 0 22px 42px rgba(61, 91, 76, .12), 0 3px 8px rgba(61, 91, 76, .06); }
.tab-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; min-height: 42px; border: 1px solid #dce2dc; border-radius: 14px; padding: 4px; background: var(--tab-bg); }
.tab { min-width: 0; border: 1px solid transparent; border-radius: 10px; color: #61706d; background: transparent; font-size: 14px; }.tab:hover { color: var(--green); }.tab.active { border-color: #c6d8d1; color: var(--green); background: #fffefa; box-shadow: 0 2px 5px rgba(17, 64, 49, .12); font-weight: 700; }
.tab-panel { padding-top: 26px; }.panel-heading h2 { margin: 0; color: #061c29; font-size: 21px; line-height: 1.35; }.panel-heading p { margin: 5px 0 0; color: #59706f; font-size: 14px; line-height: 1.65; }
.mint-note { margin-top: 21px; border: 1px solid #8ec3af; border-radius: 18px; padding: 17px 20px; background: #eef8f4; color: #0b5141; font-size: 14px; line-height: 1.75; }.mint-note strong { display: block; color: #006149; font-size: 14px; }.mint-note p { margin: 4px 0 0; }
.redeem-box { margin-top: 20px; border: 1px solid #cddfd7; border-radius: 18px; padding: 22px 20px 21px; background: #f6faf7; }.step-label { display: block; margin-bottom: 5px; color: #006149; font-size: 13px; font-weight: 700; }.redeem-box h3 { margin: 0 0 18px; font-size: 18px; line-height: 1.35; }
label { display: block; margin: 0 0 8px; color: #071e2a; font-size: 14px; font-weight: 500; }input { width: 100%; height: 50px; border: 1px solid #9eaaa8; border-radius: 10px; padding: 0 13px; color: #071e2a; background: #fffefa; font-size: 14px; }input::placeholder { color: #aab4c0; }input:focus { border-color: #22836a; }
.field-help { min-height: 21px; margin: 7px 0 18px; color: #99a2b1; font-size: 13px; line-height: 1.6; }.primary-button { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 8px; color: #fff; background: var(--green); box-shadow: 0 6px 11px rgba(0, 92, 69, .16); font-size: 14px; font-weight: 700; }.primary-button:hover { background: var(--green-deep); }.form-result { margin: 12px 0 0; border: 1px solid #a8d0c1; border-radius: 8px; padding: 9px 11px; color: #075d48; background: #ecf8f3; font-size: 13px; line-height: 1.5; }
.ready-copy { display: grid; gap: 3px; margin-top: 25px; }.ready-copy strong { color: #006c53; font-size: 14px; }.ready-copy span { color: #96a4b4; font-size: 13px; }.method-heading { margin-top: 18px; }.method-heading h3 { margin: 0 0 7px; font-size: 18px; }.method-heading p { margin: 0; color: #536967; font-size: 14px; line-height: 1.6; }
.method-options { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); align-items: center; gap: 11px; margin-top: 21px; }.method-card { display: flex; min-height: 80px; align-items: center; gap: 12px; border: 1px solid #a7d6c5; border-radius: 19px; padding: 12px 15px; color: #4d7170; background: #f4fbf7; text-align: left; }.method-card.active { border-color: #263842; color: #fff; background: #bdbdbd; box-shadow: 0 2px 3px rgba(0, 0, 0, .18); }.method-card span:last-child { display: grid; gap: 3px; }.method-card b { font-size: 15px; }.method-card small { font-size: 12px; }.method-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 14px; font-size: 18px; }.auto-icon { color: #835206; background: #f6cb5a; }.manual-icon { color: #00664d; background: #c5eedb; }.versus { color: #947249; font-size: 30px; font-weight: 800; text-align: center; }
.method-detail { margin-top: 20px; border: 1px solid var(--yellow-line); border-radius: 18px; overflow: hidden; background: var(--yellow-bg); }.detail-intro { display: flex; gap: 13px; padding: 20px 20px 14px; }.detail-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #845609; background: #f6cc61; font-size: 20px; }.detail-icon.mint { color: #00654d; background: #c8eedb; }.recommend { display: inline-block; border-radius: 13px; padding: 3px 9px; color: #855708; background: #ffe29a; font-size: 12px; font-weight: 700; }.recommend.green { color: #006048; background: #d9f2e7; }.detail-intro h3 { margin: 5px 0 4px; color: #111d23; font-size: 18px; }.detail-intro p { margin: 0; color: #6f512a; font-size: 14px; line-height: 1.65; }.usage-alert { margin: 0 20px 19px; border: 1px solid #efd5a7; border-radius: 14px; padding: 13px 15px; color: #75562e; background: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.7; }.usage-alert span { margin-right: 8px; }
.step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid #f0c467; padding: 20px; }.step-grid article { position: relative; min-height: 185px; border: 1px solid #eab442; border-radius: 18px; padding: 18px 16px 15px 72px; background: #fffefb; }.step-grid .wide-step { grid-column: 1 / -1; min-height: 119px; }.number { position: absolute; top: 16px; left: 16px; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 15px; color: #fff; background: #b77300; font-size: 14px; font-weight: 800; }.step-grid article > div { display: grid; gap: 3px; }.step-grid b { color: #a36b09; font-size: 13px; }.step-grid h4 { margin: 0; color: #122025; font-size: 14px; }.step-grid p { margin: 16px 0 0 -56px; color: #62461f; font-size: 14px; line-height: 1.65; }.copy-prompt { min-height: 35px; margin: 12px 0 0 -56px; border: 0; border-radius: 9px; padding: 0 11px; color: #fff; background: #a86a06; font-size: 13px; font-weight: 700; }.copy-prompt:hover { background: #8f5903; }.device-note { margin: 20px 0 0; color: #758593; font-size: 13px; }
.manual-detail { border-color: #9dd2c0; background: #f0faf5; }.manual-detail .detail-intro p { color: #487069; }.manual-steps { display: grid; gap: 9px; border-top: 1px solid #b9dccd; padding: 17px 20px; }.manual-steps p { margin: 0; color: #39635a; font-size: 14px; line-height: 1.6; }.manual-steps b { color: var(--green); }.download-button { width: calc(100% - 40px); min-height: 40px; margin: 0 20px 20px; border: 1px solid #148267; border-radius: 8px; color: var(--green); background: #fffefa; font-size: 14px; font-weight: 700; }
.compact-panel { min-height: 326px; }.simple-form { margin-top: 23px; }.online-recharge { display: flex; align-items: center; gap: 20px; margin-top: 21px; border: 1px solid #9ac9b9; border-radius: 16px; padding: 17px; background: #eef8f4; }.online-recharge div { flex: 1; }.online-recharge strong { color: #00664d; font-size: 14px; }.online-recharge p { margin: 5px 0 0; color: #5c706c; font-size: 14px; line-height: 1.6; }.small-button { width: auto; flex: 0 0 auto; min-height: 40px; padding: 0 15px; white-space: nowrap; }.divider-label { display: flex; align-items: center; gap: 13px; margin: 25px 0 20px; color: #4d6462; font-size: 14px; font-weight: 700; }.divider-label::after { height: 1px; flex: 1; background: #d5dfda; content: ""; }.centered-help { text-align: center; }.text-button { border: 0; border-bottom: 1px solid #6ca597; padding: 0; color: #00664d; background: transparent; font-size: inherit; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 5; max-width: min(360px, calc(100vw - 44px)); border: 1px solid #9fcfbf; border-radius: 9px; padding: 12px 14px; color: #075e49; background: #ecf8f3; box-shadow: 0 8px 24px rgba(32, 79, 65, .14); font-size: 14px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) { .site-header { height: 65px; }.header-inner { width: min(100% - 28px, 1114px); }.header-notice { display: none; }.outline-button { margin-left: auto; font-size: 12px; }.brand-text strong { font-size: 17px; }.brand-text small { font-size: 11px; } main { padding: 45px 15px; }.welcome { margin-bottom: 26px; }.welcome h1 { font-size: 28px; }.welcome p { font-size: 14px; }.service-card { padding: 20px 14px 25px; border-radius: 12px; }.tab-list { border-radius: 11px; }.tab { font-size: 13px; }.tab-panel { padding-top: 23px; }.method-options { grid-template-columns: 1fr; gap: 8px; }.versus { display: none; }.method-card { min-height: 67px; }.step-grid { grid-template-columns: 1fr; padding: 14px; }.step-grid .wide-step { grid-column: auto; }.online-recharge { align-items: stretch; flex-direction: column; }.small-button { width: 100%; }.detail-intro { padding: 16px 14px 12px; }.usage-alert { margin: 0 14px 14px; }.device-note { font-size: 12px; } }