:root { color: #4c403d; font-family: Arial, "Microsoft YaHei", sans-serif; background: #d6d6d6; }
* { box-sizing: border-box; }
body { margin: 0; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
button, input { font: inherit; }
button { cursor: pointer; }
[v-cloak] { display: none; }
.h5-shell { min-height: 100vh; display: flex; justify-content: center; background: #d6d6d6; }
.landing-page { position: relative; width: 390px; min-height: 844px; overflow: hidden; background: #fff; }
.landing-page.code-page { min-height: 1080px; }
.banner { display: block; width: 100%; height: auto; }
.claim-card { position: absolute; z-index: 1; top: 317px; left: 8px; width: calc(100% - 16px); min-height: 319px; padding: 37px 17px 13px; border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 0 3px 14px rgba(220,164,108,.16);}
.form-hint { position: absolute; top: 37px; left: 50%; width: 307px; transform: translate(-50%, -50%); }
.phone-field { height: 62px; margin-top: 48px; padding: 0 14px; border: 2px solid #f7bd57; border-radius: 8px; font-size: 18px; color: #4b4745; transition: height .35s ease; }
.phone-field.has-error { border-color: #f05c4d; }
.field-row { display: flex; align-items: center; height: 100%; }
.phone-field span { flex: 0 0 81px; }
.phone-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #4b4745; }
.phone-field input::placeholder { color: #bc8a42; }
.verification-field { height: 132px; padding-top: 0; padding-bottom: 0; }
.verification-field .field-row { height: 64px; }
.verification-field .code-row { border-top: 1px solid #ebbd69; }
.readonly-row strong { font-weight: 400; letter-spacing: .4px; }
.code-row button { border: 0; padding: 0; background: transparent; color: #bfbfbf; font-size: 15px; white-space: nowrap; }
.hand { position: absolute; width: 80px; right: 9px; top: 113px; pointer-events: none; animation: hand-float 1.45s ease-in-out infinite; }
.hand.point-code { top: 173px; animation: hand-switch .45s ease-out both, hand-float 1.45s .45s ease-in-out infinite; }
.phone-message { position: absolute; top: 143px; left: 18px; margin: 0; color: #b6813e; font-size: 12px; }
.phone-message.error { color: #e54b3f; }
.phone-message.valid { color: #4c9c5b; }
.claim-button { display: block; width: 100%; padding: 0; margin: 18px 0 14px; border: 0; background: transparent; }
.claim-button img { display: block; width: 100%; }
.claim-button.ready { animation: none; }
.consent-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 3px; color: #626262; font-size: 12px; line-height: 18px; }
.consent-row input { position: absolute; opacity: 0; }
.fake-checkbox { flex: 0 0 20px; width: 20px; height: 20px; margin: -1px 8px 0 0; border: 1px solid #d0d0d0; border-radius: 50%; color: transparent; text-align: center; font-size: 12px; line-height: 18px; }
.consent-row input:checked + .fake-checkbox { border-color: #fa7144; background: #fa7144; color: #fff; }
.consent-row button { padding: 0; border: 0; background: transparent; color: #4d4d4d; text-decoration: underline; }
.consent-row i { padding: 0 1px; font-style: normal; }
.marketing-note { margin: 2px 0 0 28px; color: #777; font-size: 12px; line-height: 17px; }
.footer { position: absolute; z-index: 2; top: 657px; left: 14px; right: 14px; padding-bottom: 20px; color: #c6c6c6; text-align: center; font-size: 12px; line-height: 19px; }
.footer.code-footer { top: 760px; }
.footer.flow-footer { top: 900px; }
.flow-card { position:absolute; z-index:2; top:330px; left:10px; width:calc(100% - 20px); padding:24px 18px; border-radius:20px; background:#fff; box-shadow:0 4px 18px rgba(220,164,108,.18); animation:none; }
.flow-card h1 { margin:0 0 8px; color:#703b21; font-size:21px; text-align:center; }.flow-card h2 { font-size:19px; }.flow-card p { color:#999; font-size:12px; text-align:center; }.flow-card h2 button { float:right; border:0; background:transparent; color:#e85c35; }
.readonly-line,.flow-input { display:flex; align-items:center; min-height:50px; border-bottom:1px solid #efcf9e; color:#555; }.flow-input span,.readonly-line span { flex:0 0 88px; }.flow-input input { width:100%; border:0; outline:0; background:transparent; box-shadow:none; font-size:16px; transition:none; appearance:none; -webkit-appearance:none; }.flow-input input:focus { background:transparent; box-shadow:none; }.flow-input input::-webkit-contacts-auto-fill-button,.flow-input input::-webkit-credentials-auto-fill-button { visibility:hidden; display:none !important; pointer-events:none; }.primary-action { width:100%; margin:22px 0 12px; padding:14px; border:0; border-radius:26px; background:linear-gradient(90deg,#ff7820,#f53159); color:#fff; font-size:20px; font-weight:700; box-shadow:0 7px 12px rgba(232,71,49,.24); transition:none; }.primary-action:hover { filter:none; }.primary-action:active { transform:none; box-shadow:0 7px 12px rgba(232,71,49,.24); }.primary-action small { display:block; margin-top:3px; font-size:12px; font-weight:400; }
.relation-tabs { display:flex; gap:8px; margin:14px 0; }.relation-tabs button { flex:1; padding:8px 0; border:1px solid #f1ba72; border-radius:16px; background:#fff6e9; color:#8b5a36; transition:none; }.relation-tabs button:active { transform:none; }.relation-tabs button.active { background:#f15638; color:#fff; border-color:#f15638; box-shadow:0 4px 8px rgba(241,86,56,.28); animation:none; }.verified-person { display:grid; grid-template-columns:70px 1fr 45px; gap:10px 6px; padding:12px 0; font-size:14px; animation:none; }.verified-person em { color:#45a05c; font-size:12px; font-style:normal; }.guardian-tip { padding:8px; background:#fff4df; color:#d47531 !important; text-align:left !important; animation:none; }.plan-box { display:grid; grid-template-columns:1fr auto; gap:8px; padding:16px; border-radius:12px; background:#fff7e9; animation:none; }.plan-box strong { color:#f14a37; font-size:24px; animation:none; }.plan-box span { grid-column:1/-1; font-size:12px; color:#85634d; }.success-card { text-align:center; }.success-badge { width:74px; height:74px; margin:20px auto; border-radius:50%; background:#40b96e; color:#fff; font-size:44px; line-height:74px; animation:none; }
.footer p { margin: 0; }
.footer .disclosure { display: -webkit-box; margin-top: 27px; overflow: hidden; color: #d6d6d6; text-align: left; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.footer .disclosure.expanded { display: block; }
.expand-button { border: 0; padding: 0; margin-top: 8px; background: transparent; color: #bdbdbd; font-size: 13px; }
.dialog-mask { position: fixed; z-index: 10; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.5); }
.toast-message { position: fixed; z-index: 12; left: 50%; top: 46%; transform: translate(-50%, -50%); padding: 11px 18px; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 14px; animation:none; }
.dialog-panel { position: relative; width: min(330px, 100%); border-radius: 16px; padding: 28px 25px 22px; background: #fff; color: #493e39; text-align: center; }
.dialog-panel h2 { margin: 0 0 14px; font-size: 20px; }
.dialog-panel p { margin: 0; color: #777; font-size: 14px; line-height: 22px; text-align: left; }
.code-input { width: 100%; margin-top: 16px; padding: 12px 14px; border: 1px solid #f3bd65; border-radius: 8px; outline: 0; text-align: center; letter-spacing: 6px; }
.code-input:focus { border-color: #ff762a; box-shadow: 0 0 0 3px rgba(255,118,42,.12); }
.code-error { margin-top: 6px !important; color: #e54b3f !important; font-size: 12px !important; }
.dialog-close { position: absolute; top: 8px; right: 13px; border: 0; background: transparent; color: #9c9c9c; font-size: 26px; }
.dialog-confirm { width: 100%; margin-top: 22px; border: 0; border-radius: 22px; padding: 11px; background: linear-gradient(90deg, #ff7820, #f53159); color: #fff; font-weight: 700; }
.dialog-cancel { margin-top: 14px; border: 0; background: transparent; color: #777; font-size: 14px; }
.protocol-inline { border: 0; padding: 0; background: transparent; color: #4b4b4b; text-decoration: underline; }
@media (max-width: 767px) { .h5-shell { width: 100vw; min-width: 100vw; background: #fff; } .landing-page { width: 100vw; min-width: 100vw; min-height: 100vh; flex-shrink: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hand-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translate(-4px, 8px) rotate(3deg); } }
@keyframes hand-switch { from { top: 113px; opacity: .3; } to { top: 173px; opacity: 1; } }
@keyframes ready-pulse { 50% { transform: scale(1.018); filter: brightness(1.04); } }
@keyframes message-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes flow-card-in { from { opacity:0; transform:translateY(28px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes content-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes tab-pop { 50% { transform:scale(1.08); } }
@keyframes number-pop { from { opacity:0; transform:scale(.65); } 70% { transform:scale(1.13); } to { opacity:1; transform:scale(1); } }
@keyframes attention { 25%,75% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }
@keyframes success-pop { from { opacity:0; transform:scale(.25) rotate(-18deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media (max-width: 767px) {
  .landing-page { min-height: calc(216.41vw); }
  .landing-page.code-page { min-height: calc(260.5vw); }
  .claim-card { top: 81.282vw; left: 2.051vw; width: calc(100% - 4.102vw); min-height: 81.795vw; padding: 9.487vw 4.359vw 3.333vw; border-radius: 5.641vw; }
  .form-hint { top: 9.487vw; width: 78.718vw; }
  .phone-field { height: 15.897vw; margin-top: 12.308vw; padding: 0 3.59vw; border-width: .513vw; border-radius: 2.051vw; font-size: 4.615vw; }
  .phone-field span { flex-basis: 20.769vw; }
  .hand { width: 20.513vw; right: 2.308vw; top: 28.974vw; }
  .hand.point-code { top: 44.359vw; }
  .verification-field { height: 33.846vw; }
  .verification-field .field-row { height: 16.41vw; }
  .code-row button { font-size: 3.846vw; }
  .phone-message { top: 36.667vw; left: 4.615vw; font-size: 3.077vw; }
  .claim-button { margin: 4.615vw 0 3.59vw; }
  .consent-row { font-size: 3.077vw; line-height: 4.615vw; }
  .fake-checkbox { flex-basis: 5.128vw; width: 5.128vw; height: 5.128vw; margin: -.256vw 2.051vw 0 0; font-size: 3.077vw; line-height: 4.615vw; }
  .marketing-note { margin: .513vw 0 0 7.179vw; font-size: 3.077vw; line-height: 4.359vw; }
  .footer { top: 168.462vw; left: 3.59vw; right: 3.59vw; padding-bottom: 5.128vw; font-size: 3.077vw; line-height: 4.872vw; }
  .footer.code-footer { top: 194.872vw; }
  .footer .disclosure { margin-top: 6.923vw; }
  .expand-button { margin-top: 2.051vw; font-size: 3.333vw; }
}