*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:#f8f9fb;}
body{font:14px/1.6 "Microsoft YaHei","Segoe UI",sans-serif;color:#283548;}
a{color:var(--site-primary,#ff5000);text-decoration:none;}
button,input{font:inherit;}
.auth-page{position:relative;min-height:100vh;min-height:100svh;padding:144px 32px 64px;}
.auth-top{position:absolute;top:32px;left:50%;transform:translateX(-50%);width:calc(100% - 64px);max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.auth-logo{display:block;line-height:0;}
.auth-logo .brand-designed-wordmark{display:inline-block;width:auto;height:auto;padding:2px 3px;color:var(--site-primary,#ff5000);font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:41px;font-weight:400;line-height:1.15;letter-spacing:0;white-space:nowrap;overflow:visible;}
.auth-back{display:inline-flex;align-items:center;gap:7px;color:#7b8796;font-size:14px;white-space:nowrap;}
.auth-back>img{width:13px;height:13px;opacity:.55;}
.auth-back:hover{color:var(--site-primary,#ff5000);}
.auth-shell{display:grid;grid-template-columns:44% minmax(0,1fr);width:100%;max-width:960px;min-height:520px;margin:0 auto;border:1px solid #eceef2;border-radius:16px;background:#fff;box-shadow:0 12px 40px #20354d05;}
.auth-aside{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;margin:40px 0;padding:0 36px;border-right:1px solid #f0f1f4;text-align:center;}
.auth-aside-copy{margin:0 0 10px;}
.auth-aside-kicker{margin:0 0 9px;color:#a4aab3;font-size:11px;letter-spacing:2px;}
.auth-aside-copy h1{margin:0;color:#263448;font-size:24px;font-weight:500;line-height:1.5;letter-spacing:1px;}
.auth-aside-copy>p:last-child{margin:8px 0 0;color:#97a0ad;font-size:12px;line-height:1.8;}
.auth-feature-link{display:block;width:min(260px,100%);aspect-ratio:1;border-radius:14px;overflow:hidden;margin-top:10px;}
.auth-feature-link img{display:block;width:100%;height:100%;object-fit:cover;}
.auth-explore-link{margin-top:6px;color:#8d97a4;font-size:11px;line-height:22px;}
.auth-explore-link:hover{color:var(--site-primary,#ff5000);}
.auth-panel{display:flex;align-items:flex-start;justify-content:center;min-width:0;padding:44px 48px 38px;}
.auth-content{width:100%;max-width:340px;}
.auth-mode-tabs{display:flex;align-items:center;gap:28px;margin:0;border-bottom:1px solid #f0f1f4;}
.auth-mode-tabs a{position:relative;display:block;padding:0 0 14px;color:#9aa2ad;font-size:19px;font-weight:500;line-height:30px;white-space:nowrap;}
.auth-mode-tabs a:hover{color:#4c5869;}
.auth-mode-tabs a[aria-current="page"]{color:var(--site-primary,#ff5000);}
.auth-mode-tabs a[aria-current="page"]::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--site-primary,#ff5000);}
.auth-form-intro{margin:15px 0 25px;color:#9aa3af;font-size:14px;line-height:1.8;}
.auth-form{display:grid;gap:16px;}
.auth-field{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px;min-width:0;}
.auth-form label{display:flex;align-items:center;align-self:start;min-height:42px;margin:0;color:#7c8797;font-size:14px;line-height:1.5;white-space:nowrap;}
.auth-input{position:relative;min-width:0;}
.auth-form input{display:block;width:100%;height:42px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:#f6f7f9;color:#344155;outline:none;box-shadow:none;font-size:14px;transition:border-color .15s,background-color .15s;}
.auth-form input::placeholder{color:#a2aab7;}
.auth-form input:hover{background:#f2f4f7;}
.auth-form input:focus{border-color:#ffcfb8;background:#fff;}
.auth-password input{padding-right:39px;}
.auth-reveal{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:38px;height:42px;padding:0;border:0;border-radius:5px;background:none;color:#a0aab7;cursor:pointer;}
.auth-reveal:hover{color:var(--site-primary,#ff5000);}
.auth-eye{display:block;width:16px;height:16px;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;}
.auth-eye-closed{-webkit-mask-image:url('../vendor/lucide/eye-closed.svg');mask-image:url('../vendor/lucide/eye-closed.svg');}
.auth-eye-open{-webkit-mask-image:url('../vendor/lucide/eye.svg');mask-image:url('../vendor/lucide/eye.svg');}
.auth-reveal .auth-eye-open,.auth-reveal[aria-pressed="true"] .auth-eye-closed{display:none;}
.auth-reveal[aria-pressed="true"] .auth-eye-open{display:block;}
.auth-field-error{position:absolute;top:100%;left:40px;right:0;margin:1px 0 0;color:#d35a32;font-size:11px;line-height:14px;pointer-events:none;}
.auth-form input[aria-invalid="true"]{border-color:#ed9476;background:#fffaf7;}
.auth-submit{display:flex;align-items:center;justify-content:center;width:100%;height:42px;margin:7px 0 0;padding:0;border:0;border-radius:6px;background:var(--site-primary,#ff5000);color:#fff;font-size:14px;font-weight:400;cursor:pointer;transition:background-color .15s;}
.auth-submit:hover{background:#eb4900;color:#fff;}
.auth-submit:disabled{opacity:.6;cursor:wait;}
.auth-feedback{margin:0;color:#cb5541;font-size:12px;line-height:1.7;}
.auth-feedback:empty{display:none;}
.auth-switch{margin:23px 0 0;color:#a1a9b4;font-size:12px;text-align:center;}
.auth-switch a{margin-left:7px;color:#717e90;}
.auth-switch a:hover{color:var(--site-primary,#ff5000);}
.auth-page [hidden]{display:none!important;}
.auth-page a:focus-visible,.auth-page button:focus-visible{outline:2px solid #ffb28e;outline-offset:4px;}
.auth-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;}
.auth-content h2:not(.auth-sr-only){margin:0;font-size:23px;font-weight:500;}
.auth-subtitle{margin:12px 0 28px;color:#929eae;}
.auth-logout{display:block;margin:18px auto;padding:5px 15px;border:0;background:none;color:#929eae;cursor:pointer;}
@media(max-width:1000px){.auth-shell{max-width:860px;grid-template-columns:43% minmax(0,1fr);}.auth-aside{padding:0 25px;}.auth-panel{padding:40px 34px;}.auth-aside-copy h1{font-size:23px;}}
@media(max-width:700px){.auth-page{padding:112px 20px 40px;}.auth-top{top:24px;width:calc(100% - 40px);}.auth-logo .brand-designed-wordmark{font-size:38px;}.auth-shell{display:block;max-width:420px;min-height:0;border-radius:12px;}.auth-aside{display:none;}.auth-panel{padding:30px 26px 32px;}.auth-content{max-width:none;}.auth-mode-tabs a{font-size:18px;}.auth-form-intro{margin-bottom:24px;}.auth-back{gap:5px;font-size:14px;}}
@media(max-height:760px) and (min-width:701px){.auth-page{padding-top:116px;padding-bottom:36px;}.auth-top{top:26px;}}
@media(prefers-reduced-motion:reduce){.auth-form input,.auth-submit{transition:none;}}

/* Phone authentication: smaller logo and illustration above the form. */
@media (max-width: 700px) {
  .auth-logo .brand-designed-wordmark { font-size: 33px; }
  .auth-aside { display: none; }
  .auth-aside-copy { margin-bottom: 0; }
  .auth-aside-copy h1 { font-size: 19px; }
  .auth-aside-copy > p:last-child { margin-top: 5px; }
  .auth-feature-link { width: 176px; margin-top: 12px; border-radius: 10px; }
  .auth-panel { padding-top: 24px; }
}

.auth-logo .site-brand-logo{display:block;width:210px;max-width:100%;height:auto;}
@media(max-width:700px){.auth-logo .site-brand-logo{width:160px;}}

/* Orange wordmark in a lighter, readable typeface; keep the supplied symbol. */
.auth-logo{display:inline-flex;position:relative;align-items:center;gap:12px;line-height:1;text-decoration:none;}
.auth-logo .brand-logo-symbol{position:relative;display:block;flex:0 0 56px;width:56px;height:63px;overflow:hidden;}
.auth-logo .brand-logo-symbol img.site-brand-logo{position:absolute;top:0;left:0;display:block;width:210px;max-width:none;height:auto!important;}
.auth-logo .brand-logo-name{color:#ff5000;font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:42px;font-weight:400;white-space:nowrap;}
@media(max-width:768px){.auth-logo{gap:9px;}.auth-logo .brand-logo-symbol{flex-basis:43px;width:43px;height:48px;}.auth-logo .brand-logo-symbol img.site-brand-logo{width:160px;}.auth-logo .brand-logo-name{font-size:32px;}}

/* Keep the independent symbol left of the wordmark on all screens. */
.auth-logo{flex-direction:row;flex-wrap:nowrap;align-items:center;}

/* Match only orange strokes; retain the original blue and other details. */
.auth-logo .brand-logo-symbol img.site-brand-logo{visibility:hidden;}
.auth-logo .brand-logo-symbol::after{content:"";position:absolute;inset:0;background:url("../images/pokewang-symbol-orange-20261020.svg") left top / 56px auto no-repeat;}
@media(max-width:768px){.auth-logo .brand-logo-symbol::after{background-size:43px auto;}}