body{margin:0;padding:0;background-color:#f5f5f5;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bind-container{max-width:500px;margin:0 auto;padding:2rem;box-sizing:border-box}@media (max-width:768px){.bind-container{padding:1rem;max-width:100%}}@media (max-width:375px){.bind-container{padding:.5rem}}h1{margin-bottom:30px}h1,h2{text-align:center;color:#2c3e50}h2{margin-bottom:20px}.character-select-container,.qrcode-container{background:#f8f9fa;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);text-align:center}.qrcode-wrapper{display:flex;flex-direction:column;align-items:center}.qrcode-image{max-width:200px;margin:20px 0}.refresh-button,.secondary-button{background-color:#6c757d;color:#fff;border:none;border-radius:4px;padding:8px 16px;margin-top:20px;cursor:pointer;font-size:14px}.refresh-button:hover,.secondary-button:hover{background-color:#5a6268}.primary-button{background-color:#42b983;color:#fff;border:none;border-radius:4px;padding:8px 16px;margin-top:20px;cursor:pointer;font-size:14px;margin-left:10px}.primary-button:hover{background-color:#3aa876}.success-container{background:#f8f9fa;padding:30px 20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);text-align:center}.success-icon{width:80px;height:80px;line-height:80px;border-radius:50%;background-color:#42b983;color:#fff;font-size:40px;margin:0 auto 20px}.game-id-tip{margin-top:20px;padding:10px;background-color:#f0f0f0;border-radius:4px}.game-id-tip a{color:#42b983;text-decoration:none;font-weight:700}.loading{text-align:center;padding:40px 0}.loading-spinner{display:inline-block;width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#42b983;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.status-message{margin-top:15px}.message,.status-message{padding:10px;border-radius:4px}.message{margin-top:20px;text-align:center}.info{background-color:#cce5ff;color:#004085}.success{background-color:#d4edda;color:#155724}.error{background-color:#f8d7da;color:#721c24}.character-list{max-height:400px;overflow-y:auto;margin:20px 0;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.05)}.character-row{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #eee}.character-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.character-card{width:48%;margin:1%;padding:.8rem;box-sizing:border-box;background-color:#f0f8ff;border-radius:6px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px rgba(0,0,0,.05)}.character-card:hover{background-color:#e0f0ff}.character-card.selected,.character-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.character-card.selected{background-color:#d4edda;border:2px solid #42b983}.server-name{font-weight:700;color:#2c3e50;margin-bottom:5px;font-size:14px}.character-name{color:#42b983;font-size:13px;word-break:break-all}.action-buttons{margin-top:20px}.action-buttons,.confirm-dialog{display:flex;justify-content:center}.confirm-dialog{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);align-items:center;z-index:1000}.confirm-dialog-content{background-color:#fff;padding:20px;border-radius:8px;max-width:400px;width:90%;box-shadow:0 4px 20px rgba(0,0,0,.15)}.phone-login-container{background:#f8f9fa;padding:30px 20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);max-width:400px;margin:20px auto}.input-group{margin-bottom:20px}.form-input,.form-input-hex{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:10px}.form-input-hex{height:60px}.input-error{border-color:#f44}.error-message{color:#f44;font-size:12px;margin-top:5px}.verification-code{display:flex;gap:10px}.login-select-container{background:#f8f9fa;padding:30px 20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);text-align:center}.login-select-container button{margin:15px 0;width:80%;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-input,.form-input-hex{border-color:#ced4da}.character-card{transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform}@media (max-width:375px){.bind-container{padding:10px}.character-card{width:100%;margin:0 0 10px}}.error-message{color:#dc3545}.message.error{background-color:#f8d7da;border:1px solid #f5c6cb}.confirm-dialog h3{margin-top:0;color:#2c3e50}.confirm-character-info{background-color:#f8f9fa;padding:15px;border-radius:4px;margin:15px 0;text-align:left}.confirm-dialog-buttons{display:flex;justify-content:flex-end}.phone-login-container{width:80%;margin:0 auto}.phone-code-group{display:flex;gap:10px;width:100%}.phone-code-group input{flex:1;margin:0;width:auto}.phone-code-group button{width:120px;margin:0}@media (max-width:480px){.phone-code-group button{width:100px}}.get-code-button{white-space:nowrap;padding:12px 20px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.get-code-button:disabled{background-color:#ccc;cursor:not-allowed}@media (max-width:480px){.character-card{width:100%;margin:0 0 1rem;padding:1rem}}@media (max-width:375px){.character-select-container,.qrcode-container{padding:1rem}.primary-button,.refresh-button{width:100%;padding:.8rem;margin:.5rem 0}input{width:95%!important;margin:.5rem 0!important}}@media (max-width:360px){.character-card{width:100%;margin:0 0 10px}}.phone-login-container button{margin:10px 20px;padding:10px 20px;min-width:120px}.phone-login-container input{margin:10px;padding:10px;width:80%}.code-container{width:80%;margin:10px;display:flex;gap:8px}.code-input{flex-grow:1;padding:10px}.code-button{width:120px;padding:10px;white-space:nowrap}.binding-form-container{background:#f8f9fa;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);margin-bottom:20px}.input-group{margin-bottom:15px;text-align:left}.input-group label{display:block;margin-bottom:5px;font-weight:700;color:#2c3e50}.form-input,.form-input-hex{width:100%;padding:10px;border:1px solid #ced4da;border-radius:4px;font-size:14px;transition:border-color .3s ease}.form-input-hex:focus,.form-input:focus{border-color:#42b983;outline:none;box-shadow:0 0 0 2px rgba(66,185,131,.25)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.character-id{font-size:12px;color:#6c757d;margin-top:5px}