* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
     background: linear-gradient(135deg, #e6f7ff 0%, #c2e9fb 100%);
     color: #333;
     line-height: 1.6;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 15px;
 }

 .register-container {
     width: 100%;
     max-width: 480px;
     background-color: rgba(255, 255, 255, 0.95);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.5);
 }

 .top-banner {
     width: 100%;
     height: 180px;
     background: linear-gradient(135deg, #4da8ff 0%, #2d87e0 100%);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .top-banner::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.2" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
     background-size: cover;
     background-position: center;
 }

 .top-banner::after {
     content: "";
     position: absolute;
     bottom: -20px;
     left: 0;
     width: 100%;
     height: 40px;
     background-color: white;
     border-radius: 50% 50% 0 0;
 }

 .logo-section {
     text-align: center;
     padding: 20px 0;
     position: relative;
     z-index: 1;
 }

 .logo-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
 }

 .logo {
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     font-weight: bold;
     color: #2d87e0;
     font-size: 20px;
 }

 .logo img {
     width: 100%;
     /* 宽度100% */
     height: 100%;
     /* 高度100% */
     object-fit: cover;
     /* 覆盖整个容器，可能会裁剪图片 */
     border-radius: 14px;
 }

 .logo-section h1 {
     font-size: 26px;
     font-weight: 700;
     color: white;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     letter-spacing: 1px;
 }

 .logo-section p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 14px;
     margin-top: 5px;
 }

 .content {
     padding: 25px 30px 30px;
 }

 .box {
     margin-bottom: 18px;
 }

 .zi {
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 6px;
     color: #4a5568;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .zi i {
     color: #2d87e0;
     font-size: 18px;
 }

 .put {
     border: 1px solid #d1d9e6;
     border-radius: 10px;
     overflow: hidden;
     transition: all 0.3s ease;
     background: white;
 }

 .put:focus-within {
     border-color: #2d87e0;
     box-shadow: 0 0 0 2px rgba(45, 135, 224, 0.2);
 }

 .field {
     display: flex;
     align-items: center;
     padding: 12px 15px;
 }

 .field.disabled {
     background-color: #f8fafc;
     color: #a0aec0;
 }

 .field-label {
     width: 50px;
     font-weight: 500;
     color: #718096;
     font-size: 14px;
 }

 .field-input {
     flex: 1;
     border: none;
     outline: none;
     font-size: 15px;
     padding: 8px 0;
     background: transparent;
     color: #2d3748;
 }

 .field-input::placeholder {
     color: #a0aec0;
 }

 .field-right-icon {
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #718096;
     cursor: pointer;
     transition: color 0.2s ease;
 }

 .field-right-icon:hover {
     color: #2d87e0;
 }

 .captcha-container {
     display: flex;
     align-items: center;
 }

 .captcha-image {
     width: 70px;
     height: 38px;
     background: linear-gradient(135deg, #4da8ff 0%, #2d87e0 100%);
     border-radius: 8px;
     margin-left: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     letter-spacing: 2px;
     color: white;
     cursor: pointer;
     user-select: none;
     font-family: "Courier New", monospace;
     box-shadow: 0 3px 8px rgba(45, 135, 224, 0.3);
     font-size: 15px;
 }

 .submit-button {
     width: 100%;
     height: 50px;
     margin-top: 25px;
     background: linear-gradient(135deg, #4da8ff 0%, #2d87e0 100%);
     color: white;
     border: none;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 12px rgba(45, 135, 224, 0.4);
 }

 .submit-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 7px 15px rgba(45, 135, 224, 0.5);
 }

 .submit-button:active {
     transform: translateY(0);
 }

 .submit-button:disabled {
     background: #cbd5e0;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 .login-link {
     margin-top: 20px;
     text-align: center;
     color: #2d87e0;
     font-weight: 500;
     cursor: pointer;
     transition: color 0.2s ease;
     font-size: 15px;
 }

 .login-link:hover {
     color: #1a6fc9;
     text-decoration: underline;
 }

 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     align-items: center;
     justify-content: center;
 }

 .modal-content {
     background-color: white;
     border-radius: 14px;
     padding: 25px;
     width: 90%;
     max-width: 350px;
     text-align: center;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .modal-title {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 15px;
     color: #2d87e0;
 }

 .modal-message {
     margin-bottom: 20px;
     color: #4a5568;
     line-height: 1.5;
 }

 .app-icon {
     width: 70px;
     height: 70px;
     margin: 0 auto 15px;
     background: linear-gradient(135deg, #4da8ff 0%, #2d87e0 100%);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 12px;
     box-shadow: 0 5px 15px rgba(45, 135, 224, 0.4);
 }

  .app-icon img {
      width: 100%;
      /* 宽度100% */
      height: 100%;
      /* 高度100% */
      object-fit: cover;
      /* 覆盖整个容器，可能会裁剪图片 */
      border-radius: 16px;
  }

 .btn {
     display: block;
     width: 100%;
     padding: 14px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s;
 }

 .btn-primary {
     background: linear-gradient(135deg, #4da8ff 0%, #2d87e0 100%);
     color: white;
     margin-top: 25px;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 12px rgba(45, 135, 224, 0.4);
 }

 .btn-secondary {
     background: #4a5568;
     color: white;
 }

 .btn-secondary:hover {
     background: #2d3748;
     transform: translateY(-2px);
     box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
 }

 .loading-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1001;
     align-items: center;
     justify-content: center;
 }

 .spinner {
     width: 50px;
     height: 50px;
     border: 5px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top-color: #2d87e0;
     animation: spin 1s ease-in-out infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .error-message {
     color: #e53e3e;
     font-size: 13px;
     margin-top: 5px;
     display: none;
     padding-left: 5px;
 }

 .terms {
     margin-top: 18px;
     text-align: center;
     font-size: 13px;
     color: #718096;
 }

 .terms a {
     color: #2d87e0;
     text-decoration: none;
 }

 .terms a:hover {
     text-decoration: underline;
 }

 /* 响应式设计 */
 @media (max-width: 480px) {
     body {
         padding: 10px;
     }

     .content {
         padding: 20px 20px 25px;
     }

     .top-banner {
         height: 160px;
     }

     .logo-section h1 {
         font-size: 24px;
     }

     .captcha-image {
         margin-left: 0;
         padding: 0 7px;
         width: 70px;
         font-size: 14px;
     }

     .field {
         padding: 10px 12px;
     }

     .field-input {
         font-size: 14px;
     }

     .zi {
         font-size: 13px;
     }

     .submit-button {
         font-size: 15px;
         height: 48px;
     }

     .modal-content {
         padding: 20px;
     }
 }

 @media (max-width: 350px) {
     .logo-container {
         flex-direction: column;
         gap: 8px;
     }

     .logo-section h1 {
         font-size: 22px;
     }

     .top-banner {
         height: 170px;
     }

     .content {
         padding: 15px 15px 20px;
     }

     .logo {
         width: 50px;
         height: 50px;
         font-size: 18px;
     }
 }

 /* 兼容性处理 */
 .register-container {
     /* 为不支持 backdrop-filter 的浏览器提供回退 */
     background-color: white;
 }