* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 滚动条整体样式 */
    ::-webkit-scrollbar {
      display: none;	/* width: 12px;*/
    }

    /* 滚动条滑块样式 */
	/* 
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(to bottom, #7a3f3f, #48291d);
	  backdrop-filter: blur(10px); 
      border-radius: 6px;
      border: 2px solid rgba(25, 25, 35, 0.85);
    }
	*/

    /* 滚动条轨道样式 */
	/* 
    ::-webkit-scrollbar-track {
      background: rgba(25, 25, 35, 0.6);
      border-radius: 6px;
    }
	*/

	
	
    .auth-modal-container {
      background: rgba(25, 25, 35, 0.85);
      backdrop-filter: blur(10px);
      padding: 40px 30px 20px 30px;
      border-radius: 16px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
      width: 400px;
      text-align: center;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform: scale(0.95);
      opacity: 0;
      z-index: 10;
      border: 1px solid rgba(255, 255, 255, 0.1);
      max-height: 90vh;
      overflow-y: auto;
    }
    .auth-modal-container.active {
      transform: scale(1);
      opacity: 1;
    }
    .auth-modal-title {
      margin-bottom: 25px;
      color: #ffffff;
      font-size: 28px;
      font-weight: 600;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    .auth-form-group {
      margin-bottom: 20px;
      text-align: left;
      animation: slideInUp 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20px);
    }
    .auth-form-group:nth-child(1) { animation-delay: 0.1s; }
    .auth-form-group:nth-child(2) { animation-delay: 0.2s; }
    .auth-form-group:nth-child(3) { animation-delay: 0.3s; }
    .auth-form-group:nth-child(4) { animation-delay: 0.4s; }
    .auth-form-group:nth-child(5) { animation-delay: 0.5s; }
    @keyframes slideInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .auth-form-label {
      display: block;
      margin-bottom: 8px;
      color: #b8c1ec;
      font-weight: 500;
    }
    .auth-form-input[type="text"],
    .auth-form-input[type="password"],
    .auth-form-input[type="email"] {
      width: 100%;
      padding: 14px;
      background: rgba(40, 40, 55, 0.7);
      border: 2px solid rgba(100, 100, 150, 0.3);
      border-radius: 8px;
      font-size: 16px;
      color: #e6e6e6;
      transition: all 0.3s ease;
    }
    .auth-form-input[type="text"]:focus,
    .auth-form-input[type="password"]:focus,
    .auth-form-input[type="email"]:focus {
      outline: none;
      border-color: #6c63ff;
      box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
      background: rgba(45, 45, 60, 0.8);
    }
    .auth-form-input::placeholder {
      color: #6c757d;
    }
    .auth-code-container {
      display: flex;
      gap: 12px;
      height: 50px;
    }
    .auth-code-container .auth-form-input {
      flex: 1;
    }
    .auth-code-container .auth-action-btn {
      width: auto;
      padding: 14px 18px;
      white-space: nowrap;
    }
    .auth-action-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #4b4b51b5 0%, #27272bd1 100%);
      backdrop-filter: blur(10px); 
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      margin-top: 0px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .auth-action-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }
    .auth-action-btn:hover::before {
      left: 100%;
    }
    .auth-action-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
      box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    }
    .auth-action-btn:disabled {
      background: #495057;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .auth-switch-btn {
      background: transparent;
      color: #ad9e9e;
      margin-top: 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .auth-switch-btn:hover {
      color: #FFF;
    }
    .auth-success-content {
      padding: 20px 0;
      animation: fadeIn 0.6s ease forwards;
      opacity: 0;
    }
    .auth-success-container .auth-success-content {
      animation-delay: 0.4s;
    }
    .auth-welcome-text {
      font-size: 18px;
      color: #ffffff;
      margin-bottom: 15px;
      animation: slideInUp 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20px);
      animation-delay: 0.5s;
    }
    .auth-user-info {
      font-size: 16px;
      color: #b8c1ec;
      margin-bottom: 25px;
      padding: 12px;
      background: rgba(40, 40, 55, 0.7);
      border-radius: 8px;
      border-left: 4px solid #6c63ff;
      animation: slideInUp 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20px);
      animation-delay: 0.6s;
    }
    .auth-user-details {
      text-align: left;
      margin-top: 15px;
      padding: 15px;
      background: rgba(30, 30, 45, 0.6);
      border-radius: 8px;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid rgba(100, 100, 150, 0.3);
    }
    .auth-detail-item {
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
    }
    .auth-detail-label {
      color: #8a8fba;
      font-weight: 500;
    }
    .auth-detail-value {
      color: #e6e6e6;
    }
    .auth-error-msg {
      color: #ff6b6b;
      font-size: 14px;
      margin-top: 10px;
      padding: 8px;
      background: rgba(255, 107, 107, 0.15);
      border-radius: 4px;
      border: 1px solid rgba(255, 107, 107, 0.3);
      animation: shake 0.5s ease;
    }
    .auth-success-msg {
      color: #51cf66;
      font-size: 14px;
      margin-top: 10px;
      padding: 8px;
      background: rgba(81, 207, 102, 0.15);
      border-radius: 4px;
      border: 1px solid rgba(81, 207, 102, 0.3);
      animation: fadeIn 0.5s ease;
    }
	.auth-success-msg:empty {
	  display: none;
	}
	
    .auth-info-msg {
      color: #339af0;
      font-size: 14px;
      margin-top: 10px;
      padding: 8px;
      background: rgba(51, 154, 240, 0.15);
      border-radius: 4px;
      border: 1px solid rgba(51, 154, 240, 0.3);
      animation: fadeIn 0.5s ease;
    }
    .auth-hidden {
      display: none;
    }
    .auth-logo {
      width: 60px;
      height: 60px;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, #f9f6da 0%, #09073c 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      font-weight: bold;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* 测试弹窗遮罩样式 */
    .auth-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(0 0 0 / 75%);
      backdrop-filter: blur(10px); 
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100000000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .auth-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* 测试弹窗内容样式 */
    .auth-modal-content {
      background: rgba(25, 25, 35, 0.9);
      backdrop-filter: blur(10px);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
      width: 400px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transform: scale(0.8);
      transition: transform 0.3s ease;
    }

    .auth-overlay.active .auth-modal-content {
      transform: scale(1);
    }