/* pages/leader/leader.wxss */

/* 全局变量 */
page {
    background: #0a0c14;
    min-height: 100vh;
    font-family: 'Avenir', 'PingFang SC', 'Helvetica Neue', sans-serif;
    color: #fff;
  }
  
  /* 背景网格 */
  page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50rpx 50rpx;
    pointer-events: none;
    z-index: 0;
  }
  
  .page-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
  }
  
  /* 未注册状态 */
  .unregistered-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: rgba(0, 10, 20, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2rpx solid #0ff;
    box-shadow: 0 0 150rpx rgba(0, 255, 255, 0.4);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    margin: 20rpx;
    padding: 60rpx 40rpx;
  }
  
  .glitch-title {
    font-size: 40rpx;
    color: #0ff;
    text-transform: uppercase;
    letter-spacing: 8rpx;
    text-shadow: 0 0 20rpx #0ff, 0 0 40rpx #0ff, 0 0 60rpx #0ff;
    margin-bottom: 80rpx;
    border-bottom: 2rpx solid #0ff;
    padding-bottom: 20rpx;
    animation: glitch 3s infinite;
  }
  
  @keyframes glitch {
    0%,100% { transform: skew(0deg); }
    95% { transform: skew(2deg); }
    96% { transform: skew(-2deg); }
    97% { transform: skew(0deg); }
  }
  
  .input-area {
    width: 100%;
    margin-bottom: 80rpx;
  }
  
  .glitch-input {
    width: 100%;
    height: 100rpx;
    background: transparent;
    border: 2rpx solid #0ff;
    border-right: none;
    border-bottom: none;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    padding: 0 40rpx;
    font-size: 30rpx;
    color: #fff;
    caret-color: #0ff;
    box-sizing: border-box;
  }
  
  .glitch-input:focus {
    box-shadow: inset 0 0 40rpx rgba(0, 255, 255, 0.3);
  }
  
  .placeholder {
    color: rgba(255, 255, 255, 0.2);
  }
  
  .glitch-button {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(45deg, #00cccc, #0066ff);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60rpx #0ff;
  }
  
  .button-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    letter-spacing: 4rpx;
    z-index: 2;
  }
  
  .button-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: scan 3s infinite;
  }
  
  /* 已注册状态 */
  .registered-page {
    position: relative;
    padding: 30rpx 20rpx;
  }
  
  /* 增强网格背景 */
  .cyber-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80rpx 80rpx;
    pointer-events: none;
    z-index: 0;
  }
  
  /* 扫描线效果 */
  .scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rpx;
    background: rgba(0, 255, 255, 0.25);
    box-shadow: 0 0 60rpx #0ff;
    animation: scanMove 3s linear infinite;
    pointer-events: none;
    z-index: 10;
  }
  
  @keyframes scanMove {
    0% { top: 0; }
    100% { top: 100%; }
  }
  
  /* 刷新按钮 */
  .refresh-core {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(0, 20, 40, 0.9);
    border: 2rpx solid #0ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    box-shadow: 0 0 30rpx #0ff;
  }
  
  .core-spinner {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #0ff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  .refresh-core:active {
    box-shadow: 0 0 80rpx #0ff;
    transform: scale(0.95);
  }
  
  /* 头部 */
  .cyber-header {
    display: flex;
    align-items: center;
    margin: 80rpx 0 60rpx;
    position: relative;
    z-index: 20;
  }
  
  .avatar-container {
    width: 140rpx;
    height: 140rpx;
    position: relative;
    margin-right: 30rpx;
  }
  
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4rpx solid #0ff;
    box-shadow: 0 0 60rpx #0ff;
    object-fit: cover;
    position: relative;
    z-index: 2;
  }
  
  .avatar-ring {
    position: absolute;
    top: -10rpx;
    left: -10rpx;
    right: -10rpx;
    bottom: -10rpx;
    border: 2rpx solid #0ff;
    border-radius: 50%;
    opacity: 0.6;
    animation: pulse 2s infinite;
    z-index: 1;
  }
  
  .avatar-glow {
    position: absolute;
    top: -20rpx;
    left: -20rpx;
    right: -20rpx;
    bottom: -20rpx;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: glowPulse 3s infinite alternate;
  }
  
  .user-info {
    flex: 1;
  }
  
  .nickname {
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 30rpx #0ff, 0 0 60rpx #0ff;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .uid-tag {
    display: inline-block;
    background: rgba(0, 30, 50, 0.8);
    border-left: 4rpx solid #0ff;
    padding: 10rpx 40rpx;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    font-size: 28rpx;
    color: #9cf;
    box-shadow: 0 0 20rpx rgba(0, 255, 255, 0.2);
  }
  
  /* 资产总览卡片 */
  .asset-card {
    background: rgba(0, 20, 30, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2rpx solid #0ff;
    border-radius: 40rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 40rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 100rpx rgba(0, 255, 255, 0.3);
    z-index: 20;
  }
  
  .card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%, rgba(0, 255, 255, 0.2), transparent 70%);
    pointer-events: none;
  }
  
  .asset-title {
    font-size: 32rpx;
    color: #9cf;
    text-transform: uppercase;
    letter-spacing: 4rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
  }
  
  .asset-title::before {
    content: '⚡';
    margin-right: 10rpx;
    font-size: 40rpx;
    color: #0ff;
  }
  
  .asset-value {
    display: flex;
    align-items: baseline;
    margin-bottom: 10rpx;
  }
  
  .value-number {
    font-size: 120rpx;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 40rpx #0ff, 0 0 80rpx #0ff, 0 0 120rpx #0ff;
    margin-right: 15rpx;
    line-height: 1;
  }
  
  .value-unit {
    font-size: 40rpx;
    color: #0ff;
    text-shadow: 0 0 20rpx #0ff;
  }
  
  .asset-beam {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background: linear-gradient(90deg, transparent, #0ff, #00f, #0ff, transparent);
    animation: beamMove 4s linear infinite;
  }
  
  @keyframes beamMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* 双数据卡片 */
  .stats-row {
    display: flex;
    gap: 30rpx;
    margin-bottom: 50rpx;
    z-index: 20;
    position: relative;
  }
  
  .stat-card {
    flex: 1;
    background: rgba(0, 20, 30, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2rpx solid #0ff;
    border-radius: 30rpx;
    padding: 30rpx 20rpx;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50rpx rgba(0, 255, 255, 0.2);
  }
  
  .stat-icon {
    font-size: 70rpx;
    margin-right: 20rpx;
    filter: drop-shadow(0 0 15rpx #0ff);
  }
  
  .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .stat-label {
    font-size: 28rpx;
    color: #9cf;
    margin-bottom: 10rpx;
  }
  
  .stat-number {
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 20rpx #0ff;
  }
  
  .stat-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.15), transparent 70%);
    pointer-events: none;
  }
  
  .stat-card:active {
    transform: scale(0.98);
    box-shadow: 0 0 80rpx #0ff;
  }
  
  /* 立即提现按钮 */
  .withdraw-btn-wrapper {
    display: flex;
    justify-content: center;
    margin: 30rpx 0 50rpx;
    z-index: 20;
    position: relative;
  }
  
  .withdraw-btn {
    width: 80%;
    height: 100rpx;
    background: linear-gradient(45deg, #00cccc, #0066ff);
    border-radius: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 80rpx #0ff, 0 0 150rpx rgba(0, 255, 255, 0.3);
    border: 2rpx solid rgba(255, 255, 255, 0.3);
  }
  
  .btn-text {
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    letter-spacing: 6rpx;
    z-index: 2;
    text-shadow: 0 0 20rpx #fff;
  }
  
  .btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: scan 2s infinite;
  }
  
  .withdraw-btn:active {
    transform: scale(0.96);
    box-shadow: 0 0 120rpx #0ff;
  }
  
  /* 底部功能按钮 */
  .function-panel {
    display: flex;
    justify-content: space-around;
    gap: 30rpx;
    margin-top: 20rpx;
    z-index: 20;
    position: relative;
  }
  
  .function-btn {
    flex: 1;
    background: rgba(0, 20, 30, 0.8);
    border: 2rpx solid #0ff;
    border-radius: 40rpx;
    padding: 30rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40rpx rgba(0, 255, 255, 0.1);
  }
  
  .function-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background: linear-gradient(90deg, transparent, #0ff, transparent);
  }
  
  .function-btn:active {
    transform: translateY(-8rpx);
    box-shadow: 0 20rpx 80rpx #0ff;
  }
  
  .btn-icon {
    font-size: 80rpx;
    margin-bottom: 15rpx;
    filter: drop-shadow(0 0 20rpx #0ff);
  }
  
  .btn-label {
    font-size: 30rpx;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 0 10rpx #0ff;
  }
  
  /* 动画 */
  @keyframes scan {
    0% { left: -100%; }
    100% { left: 100%; }
  }
  
  @keyframes pulse {
    0%,100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
  }
  
  @keyframes glowPulse {
    0% { opacity: 0.3; transform: scale(0.9); }
    100% { opacity: 0.6; transform: scale(1.2); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* 加载遮罩 */
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 12, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  
  .loader {
    width: 200rpx;
    height: 200rpx;
    border: 4rpx solid #0ff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
  }