body{margin:0;padding:0}
.register{background:url("../temp/registerbj.png");background-size:cover;background-position:center;background-attachment:fixed; width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 15px;box-sizing:border-box}
.register .box{width:100%;max-width:480px;background:#ffffff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.08);padding:40px 35px;box-sizing:border-box}
.register .box .tophead{text-align:center;margin-bottom:30px}
.register .box .tophead img{height:100px;object-fit:contain}
.register .box{width:100%}
.register .box .phone{display:flex;gap:12px}
.register .box .phone input{flex:1}
.register .box .phone .code{flex: 0.3;height:48px;background:#fff;border:1px solid #0F73FFFF;color:#0F73FFFF;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;cursor:pointer;transition:background 0.3s ease}
.register .box .phone .code:hover{background:#3385ff;color:#fff}
.register .box .phone,.register .box .code,.register .box .recommended,.register .box .password,.register .box .confirm{margin-bottom:16px;width:100%;display: flex;}
.register .box input[type="text"],.register .box input[type="password"]{flex: 1;height:50px;padding:0 18px;border:1px solid #E0E0E0FF;border-radius:12px;font-size:16px;color:#212121;box-sizing:border-box;transition:border-color 0.3s ease,box-shadow 0.3s ease;outline:none;background:#F5F5F7FF}
.register .box input[type="text"]:focus,.register .box input[type="password"]:focus{border-color:#4096ff;box-shadow:0 0 0 3px rgba(64,150,255,0.1)}
.register .box input::placeholder{color:#999999;font-size:14px}
.register .box .foot{margin-top:50px}
.register .box .prompt{color: #f00;text-align: center;}
.register .box .success{color: #5ac725;text-align: center;}
.register .box .login-href a{color: #4096ff;}
.register .box .register-href a{color: #4096ff;}
.register .box .register-href,.register .box .login-href{text-align: right;}
.register .box .foot .checkbox{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:12px;color:#999;position:relative;justify-content:center}
.register .box .foot .checkbox input[type="checkbox"]{width:16px;height:16px;appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;margin:0;position:relative;background:#ffffff;border:1px solid #e5e6eb;border-radius:4px;transition:all 0.3s ease}
.register .box .foot .checkbox input[type="checkbox"]:checked{background:#4096ff;border-color:#4096ff}
.register .box .foot .checkbox input[type="checkbox"]:checked::after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffff;font-size:12px;font-weight:bold}
.register .box .foot .checkbox input[type="checkbox"]:focus{box-shadow:0 0 0 3px rgba(64,150,255,0.1)}
.register .box .foot .checkbox a{color:#4096ff;text-decoration:none;transition:color 0.3s ease}
.register .box .foot .checkbox a:hover{color:#3385ff;text-decoration:underline}
.register .box .foot .submit input{width:100%;height:48px;background:#4096ff;color:#ffffff;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:background 0.3s ease,transform 0.2s ease}
.register .box .foot .submit input:hover{background:#3385ff;transform:translateY(-2px)}
.register .box .foot .submit input:active{transform:translateY(0)}
@media (max-width:1200px){.register .box{max-width:450px;padding:35px 30px}
    .register .box .tophead img{height:80px}
    .register .box .foot{margin-top:40px}
}@media (max-width:992px){.register .box{max-width:420px;padding:30px 25px;box-shadow:0 6px 20px rgba(0,0,0,0.06)}
    .register .box .tophead img{height:70px}
    .register .box .phone .code{width:90px;font-size:15px}
    .register .box input[type="text"],.register .box input[type="password"]{height:48px;font-size:15px}
    .register .box .foot{margin-top:35px}
}@media (max-width:768px){.register{padding:20px 15px;background-attachment:scroll}
    .register .box{max-width:380px;padding:25px 20px;border-radius:10px}
    .register .box .tophead{margin-bottom:25px}
    .register .box .tophead img{height:60px}
    .register .box .phone{gap:10px;}
    .register .box .phone .code{height:46px;font-size:14px;border-radius:10px}
    .register .box .code,.register .box .recommended,.register .box .password,.register .box .confirm{margin-bottom:14px}
    .register .box input[type="text"],.register .box input[type="password"]{height:46px;padding:0 15px;font-size:14px;border-radius:10px}
    .register .box .foot{margin-top:30px}
    .register .box .foot .submit input{height:46px;font-size:15px;border-radius:10px}
}@media (max-width:375px){.register{padding:15px 10px}
    .register .box{max-width:100%;padding:20px 15px}
    .register .box .tophead img{height:50px}
    .register .box .phone{gap:8px}
    .register .box .phone .code{height:44px;font-size:13px}
    .register .box input[type="text"],.register .box input[type="password"]{height:44px;font-size:13px}
    .register .box .foot{margin-top:25px}
    .register .box .foot .checkbox{font-size:11px;gap:6px}
    .register .box .foot .submit input{height:44px;font-size:14px}
}@media (max-width:320px){.register .box .phone .code{font-size:12px}
    .register .box .foot .checkbox{flex-wrap:wrap;justify-content:flex-start;padding:0 2px}
}