:root{
  --bg:#04060C;
  --field-top:#242B3B;
  --field-bottom:#1C2230;
  --field-line:rgba(255,255,255,.055);
  --placeholder:#8E98AC;
  --blue:#4B7FE3;
  --blue-link:#4E86EA;
  --text:#E9ECF2;
  --muted:#AEB6C6;
  --pill:#151922;
  --danger:#E06A5C;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(130% 58% at 50% -8%, #0A0E17 0%, rgba(10,14,23,0) 66%);
  background-attachment:fixed;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ================= 骨架 ================= */
.page{
  min-height:100dvh;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

/* ================= 顶部栏 ================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 0px) + 26px) 5.1% 0;
}
/* 语言下拉 */
.lang-select{position:relative;z-index:50}
.lang-pill{
  height:32px;
  padding:0 10px 0 11px;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
  background:var(--pill);
  color:#B4BECE;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .18s var(--ease);
}
.lang-pill:hover{color:#DCE3EF;border-color:rgba(255,255,255,.14)}
.lang-pill:active{transform:scale(.95)}
.lang-pill[aria-expanded="true"]{
  color:#EDF2FB;
  border-color:rgba(108,154,232,.5);
  background:rgba(75,127,227,.18);
}
.lang-globe{width:13px;height:13px;flex:0 0 auto;color:#8FAEE6}
.lang-pill[aria-expanded="true"] .lang-globe{color:#9FC0F5}
.lang-caret{
  width:11px;height:11px;flex:0 0 auto;color:#8E98AC;
  transition:transform .24s var(--ease), color .22s var(--ease);
}
.lang-pill[aria-expanded="true"] .lang-caret{transform:rotate(180deg);color:#A8C4F0}
.lang-menu{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:184px;padding:6px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(24,30,44,.99) 0%,rgba(12,16,25,.99) 100%);
  box-shadow:0 28px 56px -20px rgba(0,0,0,.96),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform-origin:top left;
  transform:translateY(-6px) scale(.96);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease), transform .22s var(--ease),
             visibility .2s linear;
}
.lang-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.lang-opt{
  position:relative;
  display:flex;align-items:center;gap:8px;
  width:100%;height:40px;padding:0 10px;
  border:0;border-radius:11px;
  background:transparent;color:#A9B3C6;
  font-family:inherit;font-size:13px;font-weight:500;
  text-align:left;cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lang-opt + .lang-opt{margin-top:2px}
.lang-opt:hover{background:rgba(255,255,255,.06);color:#E7EDF7}
.lang-opt:active{background:rgba(255,255,255,.09)}
.lang-name{flex:1;min-width:0;white-space:nowrap}
.lang-tag{
  flex:0 0 auto;padding:1px 5px;border-radius:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:#8E98AC;background:rgba(255,255,255,.055);
}
.lang-check{
  flex:0 0 auto;width:13px;height:13px;color:#7FB4E8;
  opacity:0;transform:scale(.7);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.lang-opt.is-active{
  color:#EFF4FD;font-weight:600;
  background:linear-gradient(90deg,rgba(75,127,227,.26) 0%,rgba(75,127,227,.06) 100%);
}
.lang-opt.is-active .lang-tag{color:#A8C4F0;background:rgba(108,154,232,.16)}
.lang-opt.is-active .lang-check{opacity:1;transform:none}
.lang-opt[hidden]{display:none}
@media (max-width:360px){
  .lang-pill{padding:0 9px 0 10px}
  .lang-menu{min-width:168px}
}

.support{
  width:36px;height:36px;
  display:grid;place-items:center;
  margin-right:-7px;
  border:0;border-radius:50%;
  background:none;
  color:#E8EBF1;
  cursor:pointer;
  transition:background .2s, transform .18s;
}
.support svg{width:26px;height:26px}
.support:active{transform:scale(.94);background:rgba(255,255,255,.05)}

/* ================= Logo ================= */
.logo-wrap{
  display:flex;
  justify-content:center;
  margin-top:72px;
}
.logo{
  width:88px;
  aspect-ratio:1/1;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.8))
         drop-shadow(0 0 40px rgba(238,106,36,.14));
  animation:logoIn .75s var(--ease) both;
}
.logo svg{display:block;width:100%;height:100%}
.logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:22px}
@keyframes logoIn{
  from{opacity:0;transform:scale(.92) translateY(8px)}
  to{opacity:1;transform:none}
}

/* ================= 表单 ================= */
.form{
  margin-top:50px;
  padding:0 10.7%;
}
.field{
  position:relative;
  height:50px;
  padding:0 23px;
  display:flex;
  align-items:center;
  border:1px solid var(--field-line);
  border-radius:999px;
  background:linear-gradient(180deg, var(--field-top) 0%, var(--field-bottom) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.45);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field + .field{margin-top:16px}
.field:focus-within{
  border-color:rgba(90,140,235,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
             0 0 0 3px rgba(74,125,224,.13),
             0 8px 22px -12px rgba(55,105,215,.7);
}
.field.invalid{
  border-color:rgba(224,110,96,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),
             0 0 0 3px rgba(224,106,92,.13);
  animation:shake .38s var(--ease);
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-6px)}
  62%{transform:translateX(5px)}
}
.field input{
  width:100%;height:100%;
  border:0;background:none;outline:none;
  font-family:inherit;
  font-size:16px;
  letter-spacing:.005em;
  color:var(--text);
  caret-color:#5A8BE8;
}
.field input::placeholder{color:var(--placeholder);opacity:1}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px #202634 inset;
  caret-color:#5A8BE8;
  transition:background-color 99999s ease-out 0s;
}
.field input:disabled{opacity:.55}

/* 图形验证码行 */
.captcha-row{
  display:grid;
  grid-template-columns:1.62fr 1fr;
  gap:8px;
  margin-top:16px;
}
.captcha-row .field{margin-top:0;padding:0 20px}
.captcha-box{
  height:50px;
  border-radius:11px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:#05080F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 2px 4px rgba(0,0,0,.45);
  cursor:pointer;
  position:relative;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.captcha-box:active{
  border-color:rgba(90,140,235,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 3px rgba(74,125,224,.12);
}
.captcha-box img{
  display:block;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s var(--ease);
}
.captcha-box img.loaded{opacity:1}
.captcha-box.loading::after{
  content:"";position:absolute;left:50%;top:50%;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  border:1.6px solid rgba(120,160,230,.25);
  border-top-color:#6C9AE8;
  animation:spin .7s linear infinite;
}
.captcha-box.error::after{
  content:var(--cap-reload,"再読込");position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:11px;color:var(--danger);
  background:rgba(224,106,92,.06);
}

/* ================= 登录按钮 ================= */
.submit{
  margin-top:18px;
  height:52px;
  width:100%;
  border:0;
  border-radius:999px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:.05em;
  text-indent:.05em;
  background:linear-gradient(178deg,#5D93EF 0%,#4880E4 45%,#3565D3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             0 10px 26px -12px rgba(38,82,190,.95),
             0 0 42px rgba(64,120,230,.26);
  transition:transform .18s var(--ease), box-shadow .26s var(--ease), filter .2s, opacity .2s;
}
.submit:active:not(.loading){
  transform:scale(.985);
  filter:brightness(.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 7px 18px -12px rgba(38,82,190,.9),
             0 0 30px rgba(64,120,230,.2);
}
.submit.loading{pointer-events:none}
.submit.loading span{opacity:0}
.submit:disabled{opacity:.6;cursor:not-allowed}
.submit.loading::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= 底部链接 ================= */
.alt{
  margin:30px 0 0;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--muted);
}
.alt + .alt{margin-top:12px}
.alt a{
  color:var(--blue-link);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.alt a:active{opacity:.7}
.alt.single a{font-weight:500}

/* ================= Toast ================= */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 40px);
  transform:translate(-50%,14px);
  opacity:0;
  pointer-events:none;
  max-width:86vw;
  padding:11px 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  border-left:2px solid var(--blue);
  background:rgba(22,28,39,.97);
  color:#E4E9F2;
  font-size:12.5px;
  line-height:1.45;
  letter-spacing:.02em;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.92);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:80;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.is-error{border-left-color:var(--danger)}

/* ================= 模态框 ================= */
.modal-mask{
  position:fixed;inset:0;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(2,4,8,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease);
  z-index:90;
}
.modal-mask.open{opacity:1;pointer-events:auto}
@media (min-width:640px){
  .modal-mask{align-items:center}
}
.modal{
  width:100%;
  max-width:520px;
  max-height:92dvh;
  overflow-y:auto;
  padding:26px 10.7% calc(env(safe-area-inset-bottom, 0px) + 26px);
  border-radius:26px 26px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#121722 0%,#080B12 100%);
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.95);
  transform:translateY(28px);
  transition:transform .34s var(--ease);
}
@media (min-width:640px){
  .modal{border-radius:24px;padding:26px 7%;transform:translateY(10px) scale(.98);}
}
.modal-mask.open .modal{transform:none}
.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:22px;
}
.modal-head h2{
  margin:0 0 6px;
  font-size:19px;font-weight:700;letter-spacing:.02em;
  color:#F1F3F8;
}
.modal-head p{
  margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);
}
.modal-close{
  flex:0 0 auto;
  width:32px;height:32px;margin:-4px -6px 0 0;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.05);
  color:#9AA3B6;cursor:pointer;
  transition:background .2s, color .2s;
}
.modal-close svg{width:15px;height:15px}
.modal-close:active{background:rgba(255,255,255,.1);color:#fff}

/* 模态框内表单 */
.mfield{
  position:relative;
  height:50px;
  padding:0 20px;
  display:flex;align-items:center;
  border:1px solid var(--field-line);
  border-radius:14px;
  background:linear-gradient(180deg, #1E2534 0%, #171D29 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.mgroup + .mgroup{margin-top:13px}
.mfield:focus-within{
  border-color:rgba(90,140,235,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 3px rgba(74,125,224,.12);
}
.mfield.invalid{
  border-color:rgba(224,110,96,.62);
  box-shadow:0 0 0 3px rgba(224,106,92,.11);
  animation:shake .38s var(--ease);
}
.mfield input{
  width:100%;height:100%;
  border:0;background:none;outline:none;
  font-family:inherit;font-size:15px;color:var(--text);
  caret-color:#5A8BE8;
}
.mfield input::placeholder{color:#8E98AC}
.mfield.with-btn{padding-right:112px}
.mfield.with-eye{padding-right:48px}
.mini-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  height:36px;padding:0 13px;
  border:0;border-radius:10px;
  background:rgba(75,127,227,.16);
  color:#7FA9F0;
  font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background .2s, color .2s, opacity .2s;
}
.mini-btn:active{background:rgba(75,127,227,.28)}
.mini-btn:disabled{color:#8C96AA;background:rgba(255,255,255,.04);cursor:default}
.eye-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:50%;background:none;
  color:#8C96AA;cursor:pointer;
}
.eye-btn svg{width:18px;height:18px}
.eye-btn .slash{transition:opacity .2s}
.eye-btn.on{color:#6C9AE8}
.eye-btn.on .slash{opacity:0}
.mhint{
  margin:6px 2px 0;
  font-size:11px;line-height:1.4;color:#8C96AA;
}
.mhint.is-error{color:#E8948A}
.mhint.is-ok{color:#8FD6AE}

/* 强度条 */
.strength{
  display:flex;align-items:center;gap:8px;
  margin:8px 2px 0;height:14px;overflow:hidden;
  opacity:0;transition:opacity .25s var(--ease);
}
.strength.show{opacity:1}
.bars{display:flex;gap:4px;flex:1}
.bars i{height:3px;flex:1;border-radius:2px;background:#2A3141;transition:background .3s}
.strength[data-level="1"] .bars i:nth-child(1){background:#D99A3C}
.strength[data-level="2"] .bars i:nth-child(-n+2){background:#5C8FE8}
.strength[data-level="3"] .bars i:nth-child(-n+3){background:#4B7FE3}
.strength[data-level="4"] .bars i{background:#6BA0F2}
.strength .tip{font-size:10.5px;color:#96A0B3;min-width:44px;text-align:right}

/* 条款 */
.mterms{
  display:flex;align-items:flex-start;gap:9px;
  margin:16px 2px 4px;
  font-size:11.5px;line-height:1.55;color:#8B95AA;
}
.mterms input{position:absolute;opacity:0;width:0;height:0}
.mterms .box{
  flex:0 0 auto;width:16px;height:16px;margin-top:1px;
  border-radius:5px;border:1px solid #3A4356;background:#151A24;
  position:relative;cursor:pointer;
  transition:background .2s, border-color .2s;
}
.mterms input:checked + .box{background:#4B7FE3;border-color:#4B7FE3}
.mterms input:checked + .box::after{
  content:"";position:absolute;left:4.5px;top:1px;
  width:4px;height:8px;
  border:1.6px solid #fff;border-top:0;border-left:0;
  border-radius:1px;transform:rotate(45deg);
}
.mterms a{color:var(--blue-link);text-decoration:none;font-weight:600}
.mterms.shake{animation:shake .4s var(--ease)}

.mbtn{
  margin-top:16px;
  height:48px;width:100%;
  border:0;border-radius:14px;
  cursor:pointer;position:relative;overflow:hidden;
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(178deg,#5D93EF 0%,#4880E4 45%,#3565D3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 10px 24px -14px rgba(38,82,190,.95);
  transition:transform .18s var(--ease), opacity .2s, filter .2s;
}
.mbtn:active:not(.loading){transform:scale(.985);filter:brightness(.96)}
.mbtn.loading{pointer-events:none}
.mbtn.loading span{opacity:0}
.mbtn:disabled{opacity:.6;cursor:not-allowed}
.mbtn.loading::after{
  content:"";position:absolute;left:50%;top:50%;
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.modal-foot{
  margin:16px 0 0;text-align:center;
  font-size:12px;color:var(--muted);
}
.modal-foot a{color:var(--blue-link);font-weight:600;text-decoration:none;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ================= 滚动条美化 ================= */
html{scrollbar-width:thin;scrollbar-color:rgba(108,154,232,.45) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  border-radius:999px;border:2px solid transparent;background-clip:padding-box;
  background-color:rgba(108,154,232,.38);
  transition:background-color .2s var(--ease);
}
::-webkit-scrollbar-thumb:hover{background-color:rgba(108,154,232,.62)}
::-webkit-scrollbar-thumb:active{background-color:rgba(140,180,245,.8)}
::-webkit-scrollbar-corner{background:transparent}

/* ================= 平板 / 桌面适配 ================= */
@media (min-width:640px){
  .page{
    max-width:560px;
    padding:26px 22px 44px;
    justify-content:center;
  }
  .topbar{padding:0}
  .logo-wrap{margin-top:22px}
  .logo{width:92px}
  .form{margin-top:44px;padding:0 8%}
  .alt{font-size:13.5px}

  /* 弹窗：桌面端居中卡片，不再从底部顶上来 */
  .modal-mask{align-items:center;padding:28px}
  .modal{
    max-width:460px;
    max-height:88dvh;
    padding:28px 34px 26px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:24px;
    box-shadow:0 40px 90px -34px rgba(0,0,0,.98),
               inset 0 1px 0 rgba(255,255,255,.05);
  }
}

@media (min-width:900px){
  .page{max-width:600px}
  .logo{width:100px}
  .form{margin-top:50px}
  .field{height:52px}
  .submit{transition:transform .18s var(--ease),filter .2s,box-shadow .2s}
  .submit:hover:not(.loading){filter:brightness(1.06)}
}

@media (min-width:1200px){
  /* 大屏只放宽留白，主体保持居中，避免表单被拉宽 */
  .page{padding-top:40px;padding-bottom:64px}
  .logo-wrap{margin-top:32px}
}