html, body {
  overscroll-behavior-y: contain; /* Prevent pull-to-refresh */
  overscroll-behavior: none;      /* Optional: prevent both x and y */
}


.ziweiHeaderTabs{
	font-size: 17px;
	padding: 5px;
	background-color:#59298e;
	color: white;
}

.appcontent{
	padding-bottom:30px;
}
 .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      width: 100%;
      background:black;
      font-size:20px;
      color:white;
      
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
 .logoutBtn{
  font-size:30px;
  color:white;
  }
  
  .dots::after {
      content: '.';
      animation: dots 1.5s steps(3, end) infinite;
    }

    @keyframes dots {
      0%   { content: '.'; }
      33%  { content: '..'; }
      66%  { content: '...'; }
    }
    
    
     .avatar-purple {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #a64eff, #9d00ff, #6e00b6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 6px rgba(180, 0, 255, 0.6),
                   0 0 12px rgba(150, 0, 255, 0.4),
                   0 0 24px rgba(130, 0, 255, 0.3);
      animation: pulsepurple 3s infinite ease-in-out;
    }

    @keyframes pulsepurple {
      0%, 100% {
        text-shadow: 0 0 6px rgba(180, 0, 255, 0.6),
                     0 0 12px rgba(150, 0, 255, 0.4),
                     0 0 24px rgba(130, 0, 255, 0.3);
      }
      50% {
        text-shadow: 0 0 10px rgba(220, 0, 255, 0.8),
                     0 0 20px rgba(200, 0, 255, 0.5),
                     0 0 30px rgba(170, 0, 255, 0.3);
      }
    }
    
    .avatar-grey {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #ccc, #999, #666);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 6px rgba(180, 180, 180, 0.2),
                   0 0 10px rgba(150, 150, 150, 0.2);
    }
    
     .avatar-cyan {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #00ffff, #00d4d4, #00aaaa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 6px rgba(0, 255, 255, 0.5),
                   0 0 12px rgba(0, 200, 200, 0.4),
                   0 0 18px rgba(0, 180, 180, 0.3);
      animation: cyanPulse 3.5s infinite ease-in-out;
    }
    
    @keyframes cyanPulse {
      0%, 100% {
        text-shadow: 0 0 6px rgba(0, 255, 255, 0.5),
                     0 0 12px rgba(0, 200, 200, 0.4),
                     0 0 18px rgba(0, 180, 180, 0.3);
      }
      50% {
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.7),
                     0 0 20px rgba(0, 230, 230, 0.5),
                     0 0 30px rgba(0, 200, 200, 0.4);
      }
    }
    
    .avatar-blue {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #3399ff, #0066ff, #0033cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 6px rgba(0, 120, 255, 0.6),
                   0 0 12px rgba(0, 100, 255, 0.5),
                   0 0 18px rgba(0, 80, 200, 0.4);
      animation: bluePulse 4s infinite ease-in-out;
    }
	@keyframes bluePulse {
      0%, 100% {
        text-shadow: 0 0 6px rgba(0, 120, 255, 0.6),
                     0 0 12px rgba(0, 100, 255, 0.5),
                     0 0 18px rgba(0, 80, 200, 0.4);
      }
      50% {
        text-shadow: 0 0 10px rgba(50, 150, 255, 0.8),
                     0 0 20px rgba(30, 130, 255, 0.6),
                     0 0 30px rgba(10, 110, 220, 0.5);
      }
    }
    
    .avatar-green{
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #66ff66, #33cc33, #009900);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 0 6px rgba(0, 255, 100, 0.7),
        0 0 12px rgba(0, 204, 80, 0.5),
        0 0 20px rgba(0, 153, 50, 0.4);
      animation: greenGlow 3.5s infinite ease-in-out;
    }
    @keyframes greenGlow {
      0%, 100% {
        text-shadow:
          0 0 6px rgba(0, 255, 100, 0.7),
          0 0 12px rgba(0, 204, 80, 0.5),
          0 0 20px rgba(0, 153, 50, 0.4);
      }
      50% {
        text-shadow:
          0 0 10px rgba(102, 255, 102, 0.9),
          0 0 20px rgba(51, 204, 51, 0.7),
          0 0 30px rgba(0, 153, 0, 0.5);
      }
    }
    .avatar-orange {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #ff9a2e, #ff6700, #cc4b00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 0 6px rgba(255, 140, 0, 0.7),
        0 0 12px rgba(255, 110, 0, 0.5),
        0 0 20px rgba(204, 75, 0, 0.4);
      animation: orangeGlow 3.5s infinite ease-in-out;
    }
    @keyframes orangeGlow {
      0%, 100% {
        text-shadow:
          0 0 6px rgba(255, 140, 0, 0.7),
          0 0 12px rgba(255, 110, 0, 0.5),
          0 0 20px rgba(204, 75, 0, 0.4);
      }
      50% {
        text-shadow:
          0 0 10px rgba(255, 170, 80, 0.9),
          0 0 20px rgba(255, 140, 40, 0.7),
          0 0 30px rgba(204, 90, 20, 0.5);
      }
    }
    .avatar-gold {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #ffd700, #ffbf00, #cc9a00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 0 8px rgba(255, 215, 0, 0.8),
        0 0 15px rgba(255, 200, 0, 0.7),
        0 0 25px rgba(204, 154, 0, 0.5);
      animation: goldGlow 3.5s infinite ease-in-out;
    }
    @keyframes goldGlow {
      0%, 100% {
        text-shadow:
          0 0 8px rgba(255, 215, 0, 0.8),
          0 0 15px rgba(255, 200, 0, 0.7),
          0 0 25px rgba(204, 154, 0, 0.5);
      }
      50% {
        text-shadow:
          0 0 12px rgba(255, 235, 50, 1),
          0 0 20px rgba(255, 220, 80, 0.9),
          0 0 30px rgba(204, 180, 30, 0.7);
      }
    }
    
    .avatar-pink {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #ffc0cb, #ffb6c1, #ff99aa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 0 6px rgba(255, 182, 193, 0.7),
        0 0 12px rgba(255, 160, 180, 0.5),
        0 0 20px rgba(255, 140, 160, 0.4);
      animation: pinkGlow 3.5s infinite ease-in-out;
    }
    @keyframes pinkGlow {
      0%, 100% {
        text-shadow:
          0 0 6px rgba(255, 182, 193, 0.7),
          0 0 12px rgba(255, 160, 180, 0.5),
          0 0 20px rgba(255, 140, 160, 0.4);
      }
      50% {
        text-shadow:
          0 0 10px rgba(255, 192, 203, 0.9),
          0 0 20px rgba(255, 182, 193, 0.7),
          0 0 30px rgba(255, 160, 180, 0.5);
      }
    }
    
    .avatar-red {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(135deg, #ff4d4d, #cc0000, #990000);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 0 8px rgba(255, 80, 80, 0.8),
        0 0 16px rgba(204, 0, 0, 0.7),
        0 0 24px rgba(153, 0, 0, 0.5);
      animation: redGlow 3.5s infinite ease-in-out;
    }
    @keyframes redGlow {
      0%, 100% {
        text-shadow:
          0 0 8px rgba(255, 80, 80, 0.8),
          0 0 16px rgba(204, 0, 0, 0.7),
          0 0 24px rgba(153, 0, 0, 0.5);
      }
      50% {
        text-shadow:
          0 0 12px rgba(255, 100, 100, 1),
          0 0 24px rgba(220, 20, 20, 0.8),
          0 0 36px rgba(180, 0, 0, 0.6);
      }
    }
    
     .avatar-rainbow {
      font-size: 40px;
      font-family: 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      font-weight: bold;
      background: linear-gradient(
        270deg,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet,
        red
      );
      background-size: 1400% 1400%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: rainbowShift 10s ease infinite;
      text-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 255, 255, 0.3);
    }
    @keyframes rainbowShift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }