:root{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:#1f2329;background:#f2f4f7}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:#f2f4f7;color:#1f2329}
.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}
.login-head{width:100%;height:64px;display:flex;justify-content:space-between;align-items:center;background:#fff}
.login-logo img{display:block;width:102px;margin-left:28px}
.login-head-actions{display:flex;align-items:center;padding-right:28px}
.official-link{padding-right:12px;border-right:1px solid #e8eaed;font-size:14px;font-weight:500;color:#646a73;text-decoration:none}
.official-link:hover{color:#4c78fc}
.language-select{position:relative;display:flex;align-items:center;height:40px;padding:0 10px;color:#646a73;cursor:pointer}
.language-select>img{width:18px;height:18px;margin-right:10px}
.language-select>span{font-size:14px;user-select:none}
.language-arrow{margin-left:6px;font-size:20px;line-height:1;transform:rotate(90deg)}
.language-list{position:absolute;top:36px;right:5px;width:90px;height:0;margin:0;padding:0;overflow:hidden;opacity:0;list-style:none;border:1px solid transparent;border-radius:5px;background:#fff;box-shadow:0 0 10px 2px #d8d7d7;transition:all .3s ease-out;z-index:20}
.language-select:hover .language-list,.language-list.open{height:120px;opacity:1;border-color:#f2f2f2}
.language-list li{display:flex;justify-content:center;align-items:center;width:90px;height:40px;border-left:3px solid transparent;font-size:14px;cursor:pointer}
.language-list li:hover{background:#f2f2f2;border-left-color:#658bfc}
.login-bg{height:calc(100vh - 64px);min-height:700px;padding:24px;display:flex;align-items:center;justify-content:space-evenly;gap:40px;background:#f2f4f7 url("https://www-cdn.baiteda.com/official-website/images/login/login_bg_D.png") center/contain no-repeat}
.login-video{width:min(677px,50vw);min-width:500px;border-radius:10px;box-shadow:1px 10px 10px 10px #bac5e34d;cursor:pointer;background:#fff}
.login-video-bar{height:38px;display:flex;align-items:center;border-radius:10px 10px 0 0;background:#fff}
.login-video-bar img{width:10px;height:10px;margin-left:13px}
.login-video-image{padding:24px}.login-video-image img{display:block;width:100%;height:auto;border-radius:4px}
.login-card{width:400px;padding:60px 55px;background:#fff;border-radius:8px;box-shadow:0 10px 10px #bac5e34d}
.login-tabs{display:flex;justify-content:center;gap:40px}.login-tabs button{position:relative;padding:0 0 18px;border:0;background:transparent;color:#646a73;font:400 22px/18px inherit;cursor:pointer}.login-tabs button.active{font-weight:500;color:#1f2329}.login-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:10px;background:#4c78fc}
.login-input{display:flex;margin-top:24px}.login-input:first-of-type{margin-top:50px}.login-input .input-icon{display:grid;place-items:center;width:44px;min-width:44px;height:46px;border:1px solid #dee0e3;border-right:0;border-radius:4px 0 0 4px;color:#8f959e;font-size:18px}.login-input input{width:100%;height:46px;border:1px solid #dee0e3;border-radius:0 4px 4px 0;outline:0;padding:0 10px;font:500 16px/18px inherit;color:#1f2329;caret-color:#658bfc}.login-input input:focus{border-color:#658bfc}.login-input:focus-within .input-icon{border-color:#658bfc;color:#658bfc}.login-input input::placeholder{color:#bbbfc4;font-size:14px;font-weight:400}
.password-wrap{position:relative}.password-wrap .toggle-password{position:absolute;right:12px;top:50%;border:0;background:transparent;color:#8f959e;font-size:16px;cursor:pointer;transform:translateY(-50%)}.password-wrap input{padding-right:42px}
.code-wrap{position:relative}.code-wrap input{padding-right:104px}.get-code{position:absolute;right:0;top:0;width:102px;height:45px;border:0;border-radius:0 4px 4px 0;background:#658bfc;color:#fff;font:500 14px inherit;cursor:pointer}.get-code:hover{background:#4c78fc}.get-code:disabled{background:transparent;color:#8f959e;cursor:not-allowed}
.login-options{display:flex;justify-content:space-between;align-items:center;margin-top:24px;color:#646a73;font-size:14px}.login-options label{display:flex;align-items:center;gap:8px;cursor:pointer}.login-options input{width:16px;height:16px;margin:0;accent-color:#4c78fc}.login-options button{padding:0;border:0;background:transparent;color:#646a73;font:400 14px inherit;cursor:pointer}.login-options button:hover{color:#4c78fc}
.login-button{width:100%;height:48px;margin-top:24px;border:0;border-radius:4px;background:#4c78fc;color:#fff;font:500 18px inherit;cursor:pointer}.login-button:hover{background:#658bfc}.login-button:active{background:#466feb}.login-button:disabled{background:#a5bbfd;cursor:not-allowed}
.toast{position:fixed;left:50%;top:40px;z-index:1000;display:flex;align-items:center;max-width:calc(100vw - 32px);padding:17px 24px;border-radius:4px;background:#fff0ef;color:#ff6459;font-size:14px;line-height:14px;box-shadow:0 4px 14px #bac5e34d;opacity:0;pointer-events:none;transform:translate(-50%,-10px);transition:all .2s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.success{background:#eef9f1;color:#16835b}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(94,108,157,.5);cursor:not-allowed}.modal[hidden],.puzzle-mask[hidden]{display:none}.video-modal{width:min(55vw,980px);min-width:640px;border:1px solid #fff;border-radius:10px;background:rgba(255,255,255,.2);cursor:default}.video-modal-head{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-radius:10px 10px 0 0;background:#fff}.video-modal-points{display:flex}.video-modal-points span{width:10px;height:10px;margin-right:10px;border-radius:50%;background:#dee0e3}.video-modal-points span:nth-child(2){opacity:.5}.video-modal-close{padding:0;border:0;background:transparent;color:#8f959e;font-size:20px;cursor:pointer}.video-modal-body{padding:20px}.video-modal video{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;background:#000}
.puzzle-mask{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3)}.puzzle-box{width:350px;max-width:calc(100vw - 24px);padding:20px;overflow-x:auto;border-radius:3px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);user-select:none}.puzzle-stage{position:relative;width:310px;height:160px;overflow:hidden;border-radius:3px;background:#eef1f8}.puzzle-stage canvas{position:absolute;left:0;top:0;width:310px;height:160px}.puzzle-piece{width:56px!important;height:56px!important;z-index:2;pointer-events:none}.puzzle-reset{position:absolute;right:2px;top:2px;z-index:4;width:35px;height:35px;padding:0;border:0;background:transparent;color:#fff;font-size:25px;line-height:35px;text-shadow:0 1px 3px #333;cursor:pointer}.puzzle-info{position:absolute;left:0;right:0;bottom:0;z-index:3;height:24px;line-height:24px;text-align:center;background:#83ce3f;color:#fff;font-size:13px;opacity:0;transform:translateY(24px);transition:all .2s}.puzzle-info.show{opacity:.95;transform:translateY(0)}.puzzle-info.fail{background:#ce594b}.puzzle-track{position:relative;width:310px;height:50px;margin-top:20px;border-radius:3px;background:#eef1f8;box-shadow:0 0 8px rgba(240,240,240,.6) inset}.puzzle-track>span{position:absolute;inset:0;display:grid;place-items:center;color:#b7bcd1;font-size:14px}.puzzle-progress{position:absolute;left:0;top:0;height:50px;border-radius:3px;background:rgba(106,160,255,.8)}.puzzle-handle{position:absolute;top:0;width:50px;height:50px;border:0;border-radius:3px;background:#fff;box-shadow:0 0 4px #ccc;cursor:grab}.puzzle-handle:active{cursor:grabbing}.puzzle-handle i{display:inline-block;width:0;height:40%;margin:0 3px;border-left:1px solid #6aa0ff}.puzzle-handle:hover i:nth-child(1),.puzzle-handle:active i:nth-child(1){height:0;border:4px solid transparent;border-right-color:#6aa0ff}.puzzle-handle:hover i:nth-child(2),.puzzle-handle:active i:nth-child(2){height:0;border:3px solid transparent;border-right-color:#6aa0ff}.puzzle-handle:hover i:nth-child(3),.puzzle-handle:active i:nth-child(3){height:0;border:4px solid transparent;border-left-color:#6aa0ff}
@media(max-width:1050px){.login-bg{justify-content:center}.login-video{display:none}}@media(max-width:520px){.login-head{height:60px}.login-logo img{margin-left:20px}.login-head-actions{padding-right:10px}.login-bg{height:calc(100vh - 60px);min-height:620px;padding:20px 16px}.login-card{width:100%;max-width:400px;padding:42px 24px}.login-tabs button{font-size:18px}.puzzle-box{padding:12px}.video-modal{width:calc(100vw - 24px);min-width:0}}