.public-registration {
  --public-ink: #1c2927;
  --public-muted: #687975;
  --public-accent: #2f7867;
  --public-accent-strong: #225f52;
  --public-accent-soft: #e5f0ec;
  --public-bg: #f3f6f5;
  --public-surface: #ffffff;
  --public-line: #dce4e1;
  min-height: 100dvh;
  color: var(--public-ink);
  background: var(--public-bg);
  font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 40; padding: 10px 14px; border-radius: 8px; color: #fff; background: var(--public-accent-strong); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.registration-hero { position: relative; min-height: 330px; padding: 20px max(24px,calc((100vw - 1160px)/2)) 52px; overflow: hidden; background: radial-gradient(circle at 82% 20%,rgba(47,120,103,.09),transparent 28%),#f3f6f5; }
.registration-hero::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(49,84,76,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(49,84,76,.05) 1px,transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to right,#000,transparent 72%); pointer-events: none; }
.registration-nav,.registration-hero-grid { width: min(100%,1160px); margin-inline: auto; position: relative; z-index: 1; }
.registration-nav { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.registration-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--public-ink); text-decoration: none; }
.registration-brand .brand-mark { border: 0; border-radius: 10px; color: #fff; background: var(--public-accent); box-shadow: none; }
.registration-brand > span:last-child { display: grid; gap: 1px; }
.registration-brand strong { font-size: 14px; font-weight: 760; }
.registration-brand small { color: #7a8b87; font-size: 10px; font-weight: 550; }
.channel-status { display: inline-flex; align-items: center; gap: 7px; color: #5e746e; font-size: 11px; font-weight: 650; }
.channel-status i { width: 7px; height: 7px; border-radius: 50%; background: #5c9a78; box-shadow: 0 0 0 4px rgba(92,154,120,.12); }

.registration-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: clamp(48px,7vw,90px); align-items: center; margin-top: 42px; }
.registration-intro .brand-kicker { margin: 0 0 10px; color: var(--public-accent); font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.registration-intro h1 { margin: 0; color: #172523; font-size: clamp(38px,4.4vw,54px); line-height: 1.08; letter-spacing: -.05em; text-wrap: balance; }
.registration-intro > p:not(.brand-kicker) { max-width: 590px; margin: 15px 0 0; color: var(--public-muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.registration-facts { display: flex; gap: 34px; margin-top: 22px; }
.registration-facts span { display: grid; gap: 3px; }
.registration-facts small { color: #879690; font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.registration-facts b { color: #42524f; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }

.journey-panel { padding: 20px 22px; border: 1px solid #d9e4e0; border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 12px 34px rgba(39,76,68,.055); backdrop-filter: blur(10px); }
.journey-panel > p { margin: 0 0 13px; color: #768782; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.registration-journey { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.registration-journey li { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 10px; position: relative; }
.registration-journey li:not(:last-child)::after { content: ""; width: 1px; height: 12px; position: absolute; left: 12px; top: 27px; background: #cbd9d4; }
.registration-journey li > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--public-accent-strong); background: var(--public-accent-soft); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 750; }
.registration-journey li div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.registration-journey b { color: #344743; font-size: 11px; font-weight: 700; }
.registration-journey small { color: #8a9894; font-size: 9px; }

.registration-main { width: min(100% - 30px,1160px); margin: -24px auto 44px; position: relative; z-index: 2; }
.registration-card { display: grid; grid-template-columns: minmax(0,1fr) 270px; border: 1px solid rgba(62,89,83,.10); border-radius: 18px; background: var(--public-surface); box-shadow: 0 18px 52px rgba(42,70,64,.09); overflow: clip; }
.registration-content { min-width: 0; }
.registration-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 34px 24px; border-bottom: 1px solid var(--public-line); }
.registration-heading .section-label { margin: 0 0 6px; color: var(--public-accent); font-size: 9px; letter-spacing: .14em; }
.registration-heading h2 { margin: 0; font-size: clamp(25px,2.6vw,31px); line-height: 1.15; letter-spacing: -.04em; }
.registration-heading p:last-child { max-width: 520px; margin: 8px 0 0; color: var(--public-muted); font-size: 12px; line-height: 1.6; }
.duration-badge { flex: 0 0 auto; margin-top: 4px; padding: 6px 9px; border: 1px solid #d7e4df; border-radius: 7px; color: #426c61; background: #f2f8f6; font-size: 10px; font-weight: 650; }

#public-registration-form { display: grid; }
#public-registration-form fieldset { margin: 0; padding: 28px 34px 32px; border: 0; border-bottom: 1px solid var(--public-line); }
#public-registration-form legend { width: 100%; display: flex; align-items: center; gap: 11px; padding: 0; }
.legend-index { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--public-accent-strong); background: var(--public-accent-soft); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 750; }
#public-registration-form legend > span:last-child { display: grid; gap: 2px; }
#public-registration-form legend strong { color: var(--public-ink); font-size: 15px; font-weight: 750; }
#public-registration-form legend small { color: #82908c; font-size: 10px; font-weight: 520; }
.registration-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; margin-top: 21px; }
.registration-grid .field-wide { grid-column: 1/-1; }
.registration-grid label,.region-field { color: #495a56; font-size: 12px; font-weight: 650; }
.field-label { display: flex; align-items: baseline; gap: 5px; }
.field-label b { color: #b24f57; }
.field-label small { color: #7c8b87; font-size: 10px; font-weight: 520; }
.field-hint { display: block; margin-top: 0; color: #7e8d89; font-size: 9px; font-weight: 520; }
.public-registration input,.public-registration select { min-height: 48px; border: 1px solid #d5dfdc; border-radius: 9px; color: var(--public-ink); background: #fff; padding: 11px 13px; box-shadow: none; transition: border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.public-registration input:hover,.public-registration select:hover { border-color: #b8c9c4; }
.public-registration input:focus,.public-registration select:focus { border-color: #438473; box-shadow: 0 0 0 3px rgba(47,120,103,.13); background: #fff; }
.public-registration input::placeholder { color: #98a4a1; }
.region-field { display: grid; gap: 8px; }
.region-selects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.region-selects label { display: grid; gap: 5px; }
.region-selects label > span { color: #7c8b87; font-size: 9px; font-weight: 680; }
.region-selects select:disabled { color: #98a29f; background: #f1f4f3; cursor: not-allowed; }

.deposit-amount-field { display: grid; gap: 8px; }
.deposit-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.deposit-options label { position: relative; display: block; cursor: pointer; }
.deposit-options input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.deposit-options label > span { min-height: 68px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid #d6e0dd; border-radius: 10px; color: #4b5b57; background: #fff; transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.deposit-options label:hover > span { border-color: #94b3aa; transform: translateY(-1px); }
.deposit-options input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47,120,103,.14); }
.deposit-options input:checked + span { border-color: #4c8a7a; color: var(--public-accent-strong); background: #eef7f4; box-shadow: inset 0 0 0 1px rgba(47,120,103,.14); }
.deposit-options input:checked + span::before { content: ""; position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--public-accent); box-shadow: 0 0 0 3px rgba(47,120,103,.12); }
.deposit-options b { font-size: 19px; font-weight: 770; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.deposit-options small { color: #7f8d89; font-size: 9px; font-weight: 560; }
.required-mark { color: #b63f45; font: inherit; }

.proof-upload { min-height: 100px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 18px; border: 1px dashed #aebfba; border-radius: 11px; background: #fafcfb; cursor: pointer; transition: border-color .18s ease,background .18s ease,transform .18s ease; }
.proof-upload:hover,.proof-upload:focus-within { border-color: #5a9585; background: #f2f8f6; transform: translateY(-1px); }
.proof-upload.has-file { border-style: solid; border-color: #6f9d83; background: #f0f7f2; }
.proof-upload input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.upload-symbol { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--public-accent); background: var(--public-accent-soft); }
.upload-symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.proof-copy { min-width: 0; display: grid; gap: 4px; }
.proof-copy b { color: #43534f; font-size: 12px; }
.proof-copy small { color: #7d8c88; font-size: 9px; font-weight: 520; overflow-wrap: anywhere; }
.proof-action { display: inline-flex; min-height: 34px; align-items: center; padding: 7px 11px; border: 1px solid #cbd8d4; border-radius: 7px; color: #3c675c; background: #fff; font-size: 10px; font-weight: 700; }

.public-form-error { display: block; margin: 18px 34px 0; padding: 11px 13px; border-left: 3px solid #b64f58; border-radius: 0 7px 7px 0; color: #913740; background: #fff1f2; font-size: 11px; font-weight: 650; }
.public-form-error:empty { display: none; }
.registration-submit-panel { padding: 24px 34px 30px; }
.registration-submit { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 13px; border-radius: 9px; background: var(--public-accent); box-shadow: 0 10px 24px rgba(47,120,103,.17); font-size: 13px; letter-spacing: .02em; }
.registration-submit:hover { background: var(--public-accent-strong); transform: translateY(-1px); }
.registration-submit:active { transform: translateY(1px) scale(.995); }
.registration-submit:focus-visible { outline: 3px solid rgba(47,120,103,.25); outline-offset: 3px; }
.registration-submit i { font-size: 17px; font-style: normal; transition: transform .18s ease; }
.registration-submit:hover i { transform: translateX(3px); }
.registration-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.privacy-note { max-width: 640px; margin: 11px auto 0; color: #7e8d89; font-size: 9px; line-height: 1.6; text-align: center; }

.registration-aside { border-left: 1px solid var(--public-line); background: #f6f9f8; }
.aside-sticky { position: sticky; top: 0; display: grid; padding: 30px 23px; }
.aside-eyebrow { margin: 0 0 15px; color: #53756c; font-size: 9px; font-weight: 760; letter-spacing: .13em; }
.registration-summary { display: grid; gap: 12px; margin: 0; }
.registration-summary div { display: flex; justify-content: space-between; gap: 12px; }
.registration-summary dt { color: #7d8c88; font-size: 9px; }
.registration-summary dd { margin: 0; color: #3f524d; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.registration-summary div:first-child dd { color: var(--public-accent-strong); font-size: 15px; }
.aside-divider { height: 1px; margin: 25px 0; background: #dce5e2; }
.assurance-list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.assurance-list li { display: flex; gap: 9px; }
.assurance-list li > i { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #3f745e; background: #dfece4; font-size: 8px; font-style: normal; font-weight: 800; }
.assurance-list li span { display: grid; gap: 2px; }
.assurance-list b { color: #4b5c58; font-size: 10px; }
.assurance-list small { color: #84918e; font-size: 8px; line-height: 1.4; }

.success-card { max-width: 780px; display: block; margin-inline: auto; padding: 54px; text-align: center; }
.success-symbol { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto; border-radius: 16px; color: var(--public-accent-strong); background: var(--public-accent-soft); font-weight: 800; }
.success-card .section-label { margin: 21px 0 7px; color: var(--public-accent); }
.success-card h2 { margin: 0; font-size: 31px; letter-spacing: -.04em; }
.success-card > p:not(.section-label) { max-width: 540px; margin: 14px auto; color: var(--public-muted); line-height: 1.7; }
.success-card dl { max-width: 500px; margin: 26px auto; border-top: 1px solid var(--public-line); border-bottom: 1px solid var(--public-line); }
.success-card dl div { display: flex; justify-content: space-between; padding: 14px 3px; border-bottom: 1px solid var(--public-line); }
.success-card dl div:last-child { border-bottom: 0; }
.success-card dt { color: var(--public-muted); }
.success-card dd { margin: 0; font-weight: 760; font-variant-numeric: tabular-nums; }
.success-card .button { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }

.registration-footer { width: min(100% - 36px,1160px); display: flex; justify-content: space-between; gap: 18px; margin: 0 auto; padding: 0 0 28px; color: #7f8e8a; font-size: 9px; }
.registration-footer small { color: #9aa6a3; }

.page-ready .registration-intro > *,.page-ready .journey-panel,.page-ready .registration-card { animation: registration-enter .45s cubic-bezier(.2,.8,.2,1) both; }
.page-ready .registration-intro > *:nth-child(2) { animation-delay: .03s; }
.page-ready .registration-intro > *:nth-child(3) { animation-delay: .06s; }
.page-ready .registration-intro > *:nth-child(4) { animation-delay: .09s; }
.page-ready .journey-panel { animation-delay: .08s; }
.page-ready .registration-card { animation-delay: .12s; }
@keyframes registration-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .registration-hero-grid { grid-template-columns: minmax(0,1fr) 310px; gap: 34px; }
  .registration-card { grid-template-columns: 1fr; }
  .registration-aside { display: none; }
}

@media (max-width: 700px) {
  .registration-hero { min-height: 410px; padding: 17px 17px 44px; }
  .registration-brand small { display: none; }
  .channel-status { font-size: 9px; }
  .registration-hero-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 35px; }
  .registration-intro h1 { font-size: clamp(34px,10vw,43px); }
  .registration-intro > p:not(.brand-kicker) { margin-top: 12px; font-size: 12px; }
  .registration-facts { gap: 25px; margin-top: 17px; }
  .journey-panel { padding: 13px 14px; }
  .journey-panel > p { margin-bottom: 10px; }
  .registration-journey { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .registration-journey li { grid-template-columns: 23px minmax(0,1fr); gap: 6px; }
  .registration-journey li:not(:last-child)::after,.registration-journey small { display: none; }
  .registration-journey li > span { width: 23px; height: 23px; }
  .registration-journey li div { display: block; }
  .registration-journey b { font-size: 9px; }
  .registration-main { width: calc(100% - 16px); margin-top: -18px; }
  .registration-card { border-radius: 15px; }
  .registration-heading { display: grid; gap: 11px; padding: 24px 20px 21px; }
  .duration-badge { width: max-content; margin: 0; }
  #public-registration-form fieldset { padding: 25px 20px 28px; }
  .registration-grid { grid-template-columns: 1fr; gap: 16px; }
  .registration-grid .field-wide { grid-column: auto; }
  .region-selects { grid-template-columns: 1fr 1fr; }
  .region-selects label:last-child { grid-column: 1/-1; }
  .deposit-options { gap: 6px; }
  .deposit-options label > span { min-height: 64px; }
  .deposit-options b { font-size: 16px; }
  .proof-upload { grid-template-columns: auto minmax(0,1fr); min-height: 96px; padding: 15px; }
  .proof-action { display: none; }
  .registration-submit-panel { padding: 21px 20px 27px; }
  .registration-submit { min-height: 50px; }
  .success-card { padding: 42px 20px; }
  .registration-footer { display: grid; justify-items: center; gap: 4px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
