* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: linear-gradient(135deg,
             #f5b2d9,
             #c0b8f5,
             #a2e0f4,
             #fceaa5,
             #f5b2d9);
     background-size: 400% 400%;
     animation: gradientFlow 10s ease infinite;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 @keyframes gradientFlow {
     0% {
         background-position: 0 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0 50%;
     }
 }

 .header {
     position: absolute;
     top: 5%;
     left: 5%;
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .logo {
     width: 52px;
     height: 52px;
     background: white;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: #667eea;
 }

 .title {
     color: white;
     font-size: 24px;
     font-weight: 600;
 }

 .subtitle {
     color: rgba(255, 255, 255, 0.8);
     font-size: 14px;
 }


 .login-container {
     background: white;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 400px;
     margin: 20px;
 }

 .login-header {
     text-align: center;
     margin-bottom: 30px;
     position: relative;
 }

 .login-title {
     font-size: 24px;
     font-weight: 600;
     color: #333;
     margin-bottom: 8px;
 }

 .language-switcher {
     position: absolute;
     right: 0;
     top: 0;
     display: flex;
     gap: 8px;
 }

 .lang-btn {
     padding: 4px 8px;
     border: 1px solid #ddd;
     background: white;
     color: #666;
     border-radius: 4px;
     cursor: pointer;
     font-size: 12px;
     transition: all 0.3s ease;
 }

 .lang-btn:hover {
     background: #f5f5f5;
 }

 .lang-btn.active {
     background: #667eea;
     color: white;
     border-color: #667eea;
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-input {
     width: 100%;
     padding: 12px 16px;
     border: 2px solid #e1e5e9;
     border-radius: 8px;
     font-size: 16px;
     transition: border-color 0.3s ease;
     outline: none;
 }

 .form-input:focus {
     border-color: #667eea;
 }

 .form-input.error {
     border-color: #ff4d4f;
 }

 .error-message {
     color: #ff4d4f;
     font-size: 12px;
     margin-top: 4px;
     display: none;
 }

 .captcha-container {
     display: flex;
     gap: 12px;
 }

 .captcha-input {
     flex: 1;
 }

 .captcha-image {
     width: 120px;
     height: 44px;
     border: 2px solid #e1e5e9;
     border-radius: 8px;
     cursor: pointer;
     background: #f5f5f5;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     color: #999;
     user-select: none;
 }

 .captcha-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 6px;
 }

 .login-button {
     width: 100%;
     padding: 12px;
     background: #667eea;
     color: white;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 .login-button:hover {
     background: #5a6fd8;
 }

 .login-button:disabled {
     background: #ccc;
     cursor: not-allowed;
 }

 .loading {
     opacity: 0.7;
     pointer-events: none;
 }

 /* 安全相关样式 */
 body {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .form-input {
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
 }

 /* 禁用文本选择 */
 .login-container {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 /* 原生弹窗样式 */
 .native-modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     animation: fadeIn 0.3s ease;
 }

 .native-modal.show {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .native-modal-content {
     background-color: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     max-width: 400px;
     width: 90%;
     text-align: center;
     position: relative;
     animation: slideIn 0.3s ease;
 }

 .native-modal-icon {
     font-size: 48px;
     margin-bottom: 16px;
 }

 .native-modal-icon.success {
     color: #52c41a;
 }

 .native-modal-icon.error {
     color: #ff4d4f;
 }

 .native-modal-icon.warning {
     color: #faad14;
 }

 .native-modal-message {
     font-size: 16px;
     color: #333;
     margin-bottom: 20px;
     line-height: 1.5;
 }

 .native-modal-btn {
     background: #667eea;
     color: white;
     border: none;
     padding: 8px 24px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
     transition: background-color 0.3s ease;
 }

 .native-modal-btn:hover {
     background: #5a6fd8;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* 隐藏敏感信息 */
 .form-input[type="password"] {
     -webkit-text-security: disc;
     text-security: disc;
 }


 /* 三圆环动画LOGO相关样式 */
 .main-container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 1200px;
     margin: 0 auto;
     height: 700px;
 }

 .logo-container {
     position: relative;
     width: 600px;
     height: 600px;
     flex-shrink: 0;
     top: -120px;
 }

 .ring {
     position: absolute;
     border-radius: 50%;
     background: transparent;
     box-sizing: border-box;
     transform-origin: center;
     transition: all 2s ease-out;
 }

 .ring-1 {
     width: 205px;
     height: 205px;
     top: -300px;
     left: -300px;
     border: 35px solid #E4007E;
     opacity: 0;
     animation-delay: 0.1s;
 }

 .ring-2 {
     width: 205px;
     height: 205px;
     top: 800px;
     left: 800px;
     border: 35px solid #008cd6;
     opacity: 0;
     animation-delay: 0.2s;
 }

 .ring-3 {
     width: 175px;
     height: 175px;
     top: 800px;
     left: -300px;
     border: 35px solid #aacd06;
     opacity: 0;
     animation-delay: 0.3s;
 }

 .final-position .ring-1 {
     top: 252px;
     left: 76px;
     opacity: 1;
 }

 .final-position .ring-2 {
     top: 142px;
     left: 208px;
     opacity: 1;
 }

 .final-position .ring-3 {
     top: 271px;
     left: 329px;
     opacity: 1;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 .floating .ring {
     animation: float 4s ease-in-out infinite;
 }

 .logo-text {
     position: absolute;
     bottom: 30px;
     width: 100%;
     text-align: center;
     opacity: 0;
     transition: opacity 1s ease-in 2s;
     left: -14px;
 }

 .final-position .logo-text {
     opacity: 1;
 }

 .main-title {
     font-size: 100px;
     font-weight: bold;
     color: #1e3a8a;
     position: relative;
     margin-bottom: -20px;
 }

 .sub-title {
     font-size: 31px;
     color: #555;
     position: relative;
     margin-bottom: -50px;
     top: 5px;
 }

 .small-title {
     position: absolute;
     right: 88px;
     font-size: 28px;
     top: -16px;
     color: #555;
     font-weight: bold;
     right: 108px;
 }

 @media (max-width: 1200px) {
     .main-container {
         flex-direction: column;
         width: 100vw;
         height: auto;
     }
 }

 @media (max-width: 768px) {
     .header {
         position: static;
         margin-bottom: 20px;
         justify-content: center;
     }
 }

 #withOutJS {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     text-align: center;
     opacity: 0;
     animation: fadeIn 1s forwards;
     animation-delay: 1s;
     z-index: 20;
     background: #fff;
 }

 .loginLogoWebp {
     width: 400px;
     top: 9px;
     position: relative;
 }

 @font-face {
     font-family: "shuHei";
     src: url("/js/AlimamaShuHeiTi.ttf") format("woff2");
 }

 .shuHei {
     font-family: "shuHei";
 }

 .footer {
     position: fixed;
     bottom: 30px;
     font-size: 14px;
     color: #515151;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 16px;
 }

 .footer a {
     color: #515151;
     text-decoration: none;
 }