/* 统一跨境创作场景；认证只保留一个独立卡片。 */
.auth-experience { --auth-cyan: #80eade; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100dvh; background: #071827; color: #eaf5fb; }
.auth-experience::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 26% 35%, #103f5770, transparent 52%), radial-gradient(ellipse at 88% 72%, #28356355, transparent 48%), linear-gradient(135deg, #061523, #0b2436 55%, #0a172c); }
.auth-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.auth-scene::after { content: ''; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(#89c4dd66 .7px, transparent .7px); background-size: 28px 28px; mask-image: radial-gradient(ellipse, transparent 24%, #000 100%); }
.auth-world { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: translate(var(--scene-x, 0px), var(--scene-y, 0px)) scale(1.025); transition: transform .35s ease-out; }
.auth-world-routes { stroke-dasharray: 6 16; opacity: .7; animation: auth-route-travel 32s linear infinite; }
.auth-aura { position: absolute; border-radius: 50%; filter: blur(65px); opacity: .17; transform: translate(var(--scene-x, 0px), var(--scene-y, 0px)); transition: opacity .6s ease, transform .4s ease-out, background .6s ease; }
.auth-aura-cyan { left: 11%; top: 16%; width: 32vw; height: 32vw; background: #21cdd6; }
.auth-aura-blue { right: 8%; bottom: 3%; width: 31vw; height: 31vw; background: #5979e3; opacity: .13; }
.auth-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 44px 0; }
.auth-header .brand { display: flex; gap: 13px; padding: 0; align-items: center; }
.auth-header .logo-mark { width: 56px; height: 56px; flex: none; overflow: visible; }
.auth-header .brand b { color: #f0f9ff; font-size: 30px; line-height: 1.35; letter-spacing: .04em; }
.auth-header .brand span { display: block; color: #c1dce8; font-size: 18px; margin-top: 5px; letter-spacing: .04em; }
.auth-global-caption { display: grid; gap: 8px; text-align: right; color: #ecf7ff; }
.auth-global-caption b { font-size: 26px; line-height: 1.4; font-weight: 550; letter-spacing: .02em; }
.auth-global-caption > span { display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: #bcdde9; font-size: 18px; }
.auth-global-caption .i { width: 21px; height: 21px; color: var(--auth-cyan); }
.auth-center { position: relative; flex: 1; display: grid; place-items: center; padding: 30px 28px; pointer-events: none; }
.auth-experience .auth-form { position: relative; display: block; width: 100%; max-width: 456px; min-width: 0; padding: 36px 38px 32px; border: 1px solid #d8e6ed; border-radius: 20px; background: #fcfefef7; box-shadow: 0 24px 70px -30px #000b, 0 1px 3px #0002; color: #102b3d; backdrop-filter: blur(24px); overflow: visible; pointer-events: auto; transition: box-shadow .25s ease, border-color .25s ease; }
.auth-experience .auth-form::before { content: ''; position: absolute; top: -1px; left: 17%; right: 17%; height: 2px; background: linear-gradient(90deg, transparent, #6af0db, #82aaff, transparent); border-radius: 50%; }
.auth-experience .auth-form .box { width: 100%; max-width: none; margin: 0; }
.auth-experience .auth-kicker { display: flex; align-items: center; gap: 8px; color: #08748a; font-size: 16px; line-height: 1.6; font-weight: 600; margin: 0 0 12px; }
.auth-experience .auth-kicker .i { width: 18px; height: 18px; }
.auth-experience .auth-form h1 { color: #102b3d; font-size: 32px; line-height: 1.3; letter-spacing: -.03em; }
.auth-experience .auth-form .sub { color: #536979; font-size: 16px; line-height: 1.7; margin: 10px 0 22px; }
.auth-form-link { display: flex; align-items: center; gap: 9px; min-height: 48px; margin-bottom: 24px; padding: 11px 12px; border: 0; border-radius: 8px; background: #edf6f8; color: #345968; font-size: 16px; line-height: 1.7; }
.auth-form-link .i { color: #087f91; width: 18px; height: 18px; flex: none; }
.auth-experience .auth-form .form { gap: 21px; }
.auth-experience .auth-form .field > span { color: #16394c; font-size: 16px; line-height: 1.6; font-weight: 550; }
.auth-experience .auth-form .field .hint { color: #526b7d; font-size: 16px; line-height: 1.7; font-weight: 400; }
.auth-experience .auth-form input { width: 100%; height: 54px; min-height: 54px; padding: 12px 14px; font-size: 16px; line-height: 1.6; background: #fff; border-color: #c4d5df; color: #15384d; caret-color: #087f91; color-scheme: light; }
.auth-experience .auth-form input::placeholder { color: #61798a; opacity: 1; }
.auth-experience .auth-form input:focus { border-color: #168e9c; box-shadow: 0 0 0 3px #188f9a16; }
.auth-experience .auth-form .password-wrap { display: block; font-size: 16px; }
.auth-experience .password-wrap input { padding-right: 70px; }
.auth-experience .password-toggle { top: 7px; bottom: 7px; right: 7px; width: 52px; font-size: 16px; color: #526b7d; }
.auth-experience .password-toggle:hover { background: #edf6f8; color: #087f91; }
.auth-experience .auth-form .btn { width: 100%; min-height: 54px; padding: 13px 18px; font-size: 16px; font-weight: 600; border-radius: 11px; margin-top: 2px; background: linear-gradient(110deg, #087d8c, #096f8a); color: #fff; border-color: #0c7f90; box-shadow: 0 6px 16px -9px #087f9170; }
.auth-experience .auth-form .btn:hover:not(:disabled) { background: #066d7e; border-color: #066d7e; }
.auth-experience .auth-form .btn:focus-visible, .auth-experience .password-toggle:focus-visible { outline: 3px solid #1291a1; outline-offset: 3px; }
.auth-experience .auth-form .btn .i { width: 20px; height: 20px; }
.auth-experience .auth-form-foot { color: #526b7d; font-size: 16px; line-height: 1.7; gap: 9px; margin-top: 23px; }
.auth-experience .auth-form-foot .i { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.auth-experience .auth-error { color: #a52b3c; border-color: #e8c5cc; background: #fff0f2; font-size: 16px; line-height: 1.8; padding: 12px 14px; margin: 0; }
.auth-experience[data-form-focus="true"] .auth-form { border-color: #82c6d0; box-shadow: 0 24px 70px -30px #000b, 0 0 0 3px #74dde224; }
.auth-experience[data-form-focus="true"] .auth-aura-cyan { opacity: .24; }
.auth-experience[data-submitting="true"] .auth-form-link .i { animation: auth-status-breathe 1.4s ease-in-out infinite; }
.auth-footer { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; color: #c1dce8; padding: 0 44px 30px; line-height: 1.65; }
.auth-manifesto { display: grid; gap: 3px; }
.auth-manifesto b { color: #f0f9ff; font-size: 28px; font-weight: 550; letter-spacing: .035em; }
.auth-manifesto > span { display: flex; align-items: center; gap: 16px; color: #9ae9e3; font-size: 22px; }
.auth-footer-meta { display: grid; justify-items: end; gap: 9px; font-size: 18px; }
.auth-footer-meta > span { display: flex; align-items: center; gap: 9px; }
.auth-footer-meta > span:first-child { color: #e2f2fa; }
.auth-footer .i { color: var(--auth-cyan); width: 22px; height: 22px; flex: none; }
.auth-creative { position: absolute; border: 1px solid #8dc3d13d; background: linear-gradient(145deg, #416c7f33, #12304855); box-shadow: 0 24px 70px -40px #000d, inset 0 1px #b7e9f011; border-radius: 19px; backdrop-filter: blur(8px); animation: auth-creative-drift 12s ease-in-out infinite; }
.auth-playground { position: absolute; inset: 0; pointer-events: none; }
.auth-play { position: absolute; width: 210px; border: 0; padding: 0; border-radius: 20px; background: transparent; color: #e4f6fc; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; -webkit-appearance: none; }
.auth-play-print { top: 29%; left: max(5%, calc(50% - 565px)); }
.auth-play-product { right: max(5%, calc(50% - 565px)); bottom: 24%; }
.auth-play-visual { display: block; padding: 16px; border: 1px solid #81c9dc66; border-radius: 20px; background: linear-gradient(145deg, #416c7f55, #12304877); box-shadow: 0 24px 70px -40px #000d, inset 0 1px #b7e9f020; backdrop-filter: blur(8px); transform: rotate(-8deg); transition: border-color .25s ease, box-shadow .25s ease; }
.auth-play-product .auth-play-visual { transform: rotate(8deg); }
.auth-play:hover .auth-play-visual, .auth-play:focus-visible .auth-play-visual { border-color: #8af3e9; box-shadow: 0 0 45px -10px #43dfdf66, inset 0 1px #d1faff55; }
.auth-play:focus-visible { outline: 3px solid #a2f5eb; outline-offset: 10px; }
.auth-play-caption { display: grid; gap: 5px; padding: 24px 9px 0; }
.auth-play-caption b { display: flex; align-items: center; gap: 14px; font-size: 21px; line-height: 1.5; font-weight: 550; color: #edfbff; }
.auth-play-caption .i { width: 21px; height: 21px; color: #8debe0; transition: transform .2s ease; }
.auth-play:hover .auth-play-caption .i { transform: translateX(5px); }
.auth-play-caption > span { font-size: 18px; color: #b3d7e4; line-height: 1.5; }
.auth-preview-note { position: absolute; left: max(5%, calc(50% - 565px)); top: calc(29% - 47px); font-size: 17px; color: #a4d4df; letter-spacing: .08em; }
.auth-scene-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auth-mini-top { display: flex; gap: 5px; padding: 2px 0 12px; }
.auth-mini-top i { width: 4px; height: 4px; border-radius: 50%; background: #88c6d1; }
.auth-print-art { position: relative; display: block; height: 172px; border-radius: 11px; overflow: hidden; background: linear-gradient(145deg, #344779, #1c556c 60%, #3b8b8b); transition: background .5s ease; }
.auth-print-art span { position: absolute; display: block; width: 84px; height: 132px; border-radius: 50%; border: 1.5px solid #a3ffe4; transform: rotate(40deg); left: calc(50% - 42px); top: 20px; transition: border-radius .4s ease, transform .4s ease; }
.auth-print-art span:nth-child(2) { transform: rotate(-40deg); border-color: #bd9bebab; }
.auth-print-art span:nth-child(3) { transform: rotate(90deg); border-color: #b4e1e9a3; }
.auth-print-art b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 400; color: #c5f5e9; text-shadow: 0 0 25px #a7f4e5aa; }
.auth-play-print[data-print="1"] .auth-print-art { background: linear-gradient(145deg, #644e87, #824968 65%, #b57d72); }
.auth-play-print[data-print="1"] .auth-print-art span { border-radius: 18% 70%; transform: rotate(30deg); }
.auth-play-print[data-print="1"] .auth-print-art span:nth-child(2) { transform: rotate(90deg); }
.auth-play-print[data-print="1"] .auth-print-art span:nth-child(3) { transform: rotate(150deg); }
.auth-play-print[data-print="2"] .auth-print-art { background: linear-gradient(145deg, #244c8a, #554a87 60%, #7b6cbd); }
.auth-play-print[data-print="2"] .auth-print-art span { border-radius: 15%; transform: rotate(45deg) scale(.8); }
.auth-play-print[data-print="2"] .auth-print-art span:nth-child(2) { transform: rotate(75deg) scale(.8); }
.auth-play-print[data-print="2"] .auth-print-art span:nth-child(3) { transform: rotate(105deg) scale(.8); }
.auth-experience[data-art="1"] .auth-aura-cyan { background: #cd7cbe; opacity: .23; }
.auth-experience[data-art="2"] .auth-aura-cyan { background: #8b8dff; opacity: .25; }
.auth-product-art { --shirt-color: #88ddce; display: grid; place-items: center; height: 166px; border-radius: 11px; background: linear-gradient(150deg, #1e3a55, #244553); position: relative; }
.auth-product-art > .i { width: 128px; height: 128px; color: #c6e8ed; stroke-width: .8; fill: var(--shirt-color); filter: drop-shadow(0 8px 10px #06182766); transition: fill .4s ease; }
.auth-product-art > span { position: absolute; font-size: 32px; top: 53px; color: #153b50; }
.auth-play-product[data-color="1"] .auth-product-art { --shirt-color: #f0a38d; }
.auth-play-product[data-color="2"] .auth-product-art { --shirt-color: #baa5e7; }
.auth-color-dots { display: flex; gap: 7px; margin-top: 14px; }
.auth-color-dots i { width: 16px; height: 16px; border-radius: 50%; background: #88ddce; }
.auth-color-dots i:nth-child(2) { background: #f0a38d; }.auth-color-dots i:nth-child(3) { background: #baa5e7; }
.auth-play-product[data-color="0"] .auth-color-dots i:nth-child(1), .auth-play-product[data-color="1"] .auth-color-dots i:nth-child(2), .auth-play-product[data-color="2"] .auth-color-dots i:nth-child(3) { outline: 1px solid #e7fcff; outline-offset: 3px; }
.auth-creative-core { right: 13%; top: 21%; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 29px; transform: rotate(10deg); --scene-angle: 10deg; animation-delay: -8s; box-shadow: 0 0 55px #24c6d51c, inset 0 1px #b7e9f020; }
.auth-creative-core .logo-mark { width: 76px; height: 76px; }
.auth-creative-core > span { position: absolute; inset: -18px; border: 1px solid #5bbad02e; border-radius: 40px; transform: rotate(-20deg); }
@keyframes auth-route-travel { to { stroke-dashoffset: -220; } }
@keyframes auth-creative-drift { 50% { transform: translateY(-13px) rotate(var(--scene-angle)); } }
@keyframes auth-status-breathe { 50% { opacity: .45; } }
@media (max-height: 820px) {
  .auth-header { padding-top: 24px; }
  .auth-center { padding-top: 16px; padding-bottom: 16px; }
  .auth-experience .auth-form { padding: 28px 34px; }
  .auth-experience .auth-form .sub { margin: 8px 0 17px; }
  .auth-form-link { margin-bottom: 18px; }
  .auth-experience .auth-form .form { gap: 18px; }
  .auth-experience .auth-form-foot { margin-top: 20px; }
  .auth-footer { padding-bottom: 22px; }
}
@media (max-width: 1200px) {
  .auth-play-print { left: 4%; width: 180px; }
  .auth-play-product { right: 4%; width: 180px; }
  .auth-print-art { height: 135px; }
  .auth-product-art { height: 120px; }
  .auth-product-art > .i { width: 104px; height: 104px; }
  .auth-product-art > span { top: 30px; }
  .auth-preview-note { left: 4%; }
  .auth-creative-core { right: 10%; top: 20%; }
}
@media (max-width: 760px) {
  .auth-header { padding: 24px 24px 0; }
  .auth-global-caption { display: none; }
  .auth-center { padding: 28px 20px; }
  .auth-experience .auth-form { padding: 30px 26px; }
  .auth-playground { display: none; }
  .auth-creative-core { display: none; }
  .auth-footer { padding: 0 24px 24px; flex-wrap: wrap; gap: 18px; }
  .auth-footer-meta { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-experience *, .auth-experience *::before, .auth-experience *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .auth-world { transform: none; }
  .auth-aura { transform: none; }
}