/* pages/zuzhangfenhongjilu/zuzhangfenhongjilu.wxss - 超时空战士机甲风格 */

/* ==================== 全局变量与动画 ==================== */
page {
    height: 100%;
    background: #0A0C12;
    font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
    color: #E0E6F0;
  }
  
  /* 全局动画定义 */
  @keyframes scanMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  @keyframes pulse {
    0%,100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes energyFlow {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  @keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(2px, -2px); }
    60% { transform: translate(-2px, 0); }
    80% { transform: translate(2px, 0); }
    100% { transform: translate(0); }
  }
  
  /* ==================== 页面容器 ==================== */
  .page {
    height: 100%;
    position: relative;
    background: radial-gradient(ellipse at 50% 30%, #1A2635, #0A0C12);
  }
  
  /* 背景机甲网格（使用伪元素） */
  .page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(0, 180, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 180, 255, 0.03) 1px, transparent 1px);
    background-size: 60rpx 60rpx;
    pointer-events: none;
    z-index: 0;
  }
  
  /* 顶部扫描线（固定） */
  .page::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
    box-shadow: 0 0 30rpx #00B4FF;
    animation: scanMove 4s linear infinite;
    z-index: 10;
  }
  
  /* ==================== 固定头部 ==================== */
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* 半透明金属质感 */
    background: rgba(16, 24, 36, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 2rpx solid #00B4FF;
    box-shadow: 0 10rpx 40rpx rgba(0, 180, 255, 0.2);
  }
  
  .header-content {
    padding: 30rpx 30rpx 20rpx; /* 缩小上下间距 */
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  
  /* 统计行 - 机甲风格面板 */
  .stat-row {
    display: flex;
    align-items: center;
    background: rgba(0, 20, 40, 0.6);
    border: 2rpx solid #00B4FF;
    border-radius: 30rpx;
    padding: 25rpx 15rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3), inset 0 0 20rpx rgba(0, 180, 255, 0.2);
  }
  
  /* 面板内部光效 */
  .stat-row::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.2), transparent 70%);
    animation: pulse 4s infinite;
    pointer-events: none;
  }
  
  .stat-cell {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  .stat-divider {
    width: 2rpx;
    height: 40rpx;
    background: linear-gradient(to bottom, transparent, #00B4FF, #7A2EFF, transparent);
    box-shadow: 0 0 10rpx #00B4FF;
  }
  
  .stat-label {
    font-size: 24rpx;
    color: #A0B8D0;
    letter-spacing: 2rpx;
    margin-bottom: 6rpx;
    display: block;
    text-transform: uppercase;
  }
  
  .stat-number {
    font-size: 42rpx;
    font-weight: 800;
    color: #E0F0FF;
    line-height: 1.2;
    display: block;
    text-shadow: 0 0 15rpx #00B4FF, 0 0 30rpx #7A2EFF;
  }
  
  .stat-number.blue {
    color: #fff;
    text-shadow: 0 0 20rpx #00B4FF, 0 0 40rpx #7A2EFF;
  }
  
  /* 刷新按钮 - 机甲能量环 */
  .refresh-btn {
    position: absolute;
    top: 35rpx;
    right: 45rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(0, 20, 40, 0.8);
    border: 2rpx solid #00B4FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30rpx #00B4FF;
    transition: all 0.2s;
    z-index: 20;
  }
  
  .refresh-btn::before {
    content: '';
    position: absolute;
    top: -4rpx;
    left: -4rpx;
    right: -4rpx;
    bottom: -4rpx;
    border: 2rpx solid rgba(0, 180, 255, 0.5);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  
  .refresh-btn:active {
    transform: scale(0.9);
    box-shadow: 0 0 50rpx #7A2EFF;
  }
  
  .refresh-icon {
    font-size: 40rpx;
    color: #00B4FF;
    transition: transform 0.3s;
    z-index: 2;
  }
  
  .refresh-icon.spin {
    animation: spin 1s linear infinite;
  }
  
  /* ==================== 滚动区域 ==================== */
  .scroll-area {
    position: fixed;
    top: 240rpx; /* 根据新头部高度调整，更紧凑 */
    left: 0;
    width: 100%;
    bottom: 0;
    overflow-y: auto;
    z-index: 50;
  }
  
  .list-content {
    padding: 0 30rpx;
    box-sizing: border-box;
    min-height: 100%;
  }
  
  /* ==================== 加载中状态 ==================== */
  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 700rpx;
    color: #A0B8D0;
    font-size: 28rpx;
    letter-spacing: 2rpx;
  }
  
  .spinner {
    width: 80rpx;
    height: 80rpx;
    border: 6rpx solid rgba(0, 180, 255, 0.2);
    border-top: 6rpx solid #00B4FF;
    border-right: 6rpx solid #7A2EFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 30rpx;
    box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3);
  }
  
  .spinner.small {
    width: 50rpx;
    height: 50rpx;
    border-width: 4rpx;
  }
  
  /* ==================== 空状态 ==================== */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 750rpx;
    background: rgba(0, 20, 40, 0.4);
    border: 2rpx solid #00B4FF;
    border-radius: 50rpx;
    padding: 100rpx 40rpx;
    margin-top: 30rpx;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60rpx rgba(0, 180, 255, 0.2);
  }
  
  .empty-state::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.1), transparent 70%);
    animation: pulse 3s infinite;
  }
  
  .empty-icon {
    font-size: 110rpx;
    color: #00B4FF;
    margin-bottom: 30rpx;
    filter: drop-shadow(0 0 30rpx #00B4FF);
  }
  
  .empty-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #E0F0FF;
    margin-bottom: 20rpx;
    text-shadow: 0 0 15rpx #00B4FF;
  }
  
  .empty-tip {
    font-size: 26rpx;
    color: #A0B8D0;
    margin-bottom: 60rpx;
    text-align: center;
    max-width: 450rpx;
    line-height: 1.5;
  }
  
  .empty-btn {
    padding: 20rpx 80rpx;
    background: linear-gradient(135deg, #00B4FF, #7A2EFF);
    border-radius: 60rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10rpx 40rpx rgba(0, 180, 255, 0.4);
    border: none;
    letter-spacing: 2rpx;
  }
  
  .empty-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: scanMove 2s infinite;
  }
  
  .empty-btn:active {
    transform: scale(0.96);
    box-shadow: 0 10rpx 50rpx #7A2EFF;
  }
  
  /* ==================== 列表标题 ==================== */
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 20rpx 0 20rpx; /* 减小上边距 */
    padding: 0 10rpx;
  }
  
  .list-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #00B4FF;
    text-shadow: 0 0 15rpx #00B4FF;
    letter-spacing: 2rpx;
    position: relative;
  }
  
  .list-title::after {
    content: '';
    position: absolute;
    bottom: -6rpx;
    left: 0;
    width: 100%;
    height: 2rpx;
    background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
  }
  
  .list-count {
    font-size: 24rpx;
    color: #7A8FAA;
    background: rgba(0, 180, 255, 0.1);
    padding: 4rpx 20rpx;
    border-radius: 30rpx;
    border: 1rpx solid rgba(0, 180, 255, 0.3);
  }
  
  /* ==================== 卡片列表 ==================== */
  .card-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    padding-bottom: 50rpx;
  }
  
  /* 卡片主体 - 装甲玻璃 */
  .card {
    background: rgba(0, 20, 40, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2rpx solid rgba(0, 180, 255, 0.4);
    border-radius: 40rpx;
    padding: 30rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20rpx 50rpx rgba(0,0,0,0.8), inset 0 0 30rpx rgba(0, 180, 255, 0.2);
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* 卡片内部光晕 */
  .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.1), transparent 70%);
    opacity: 0.5;
    z-index: 0;
  }
  
  /* 卡片边框动态流光 */
  .card::after {
    content: '';
    position: absolute;
    top: -2rpx;
    left: -2rpx;
    right: -2rpx;
    bottom: -2rpx;
    border-radius: 42rpx;
    background: linear-gradient(135deg, #00B4FF, #7A2EFF, #00B4FF);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .card:active::after {
    opacity: 0.6;
  }
  
  .card:active {
    transform: translateY(-6rpx);
    box-shadow: 0 30rpx 70rpx rgba(0, 180, 255, 0.3);
  }
  
  /* 左侧打手信息 */
  .card-left {
    display: flex;
    align-items: center;
    flex: 2;
    min-width: 0;
    z-index: 2;
  }
  
  .avatar {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    border: 2rpx solid #00B4FF;
    background: #1A2A3A;
    margin-right: 20rpx;
    flex-shrink: 0;
    box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3);
    position: relative;
  }
  
  .avatar.small {
    width: 70rpx;
    height: 70rpx;
  }
  
  .avatar::after {
    content: '';
    position: absolute;
    top: -4rpx;
    left: -4rpx;
    right: -4rpx;
    bottom: -4rpx;
    border: 1px solid rgba(0, 180, 255, 0.4);
    border-radius: 50%;
    animation: pulse 3s infinite;
  }
  
  .info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .name {
    font-size: 28rpx;
    font-weight: 600;
    color: #E0F0FF;
    margin-bottom: 4rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10rpx rgba(0, 180, 255, 0.3);
  }
  
  .uid {
    font-size: 22rpx;
    color: #A0B8D0;
    white-space: nowrap;
  }
  
  /* 中间机甲箭头 */
  .card-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10rpx;
    flex-shrink: 0;
    z-index: 2;
  }
  
  .tag {
    font-size: 20rpx;
    color: #00B4FF;
    background: rgba(0, 180, 255, 0.1);
    padding: 4rpx 16rpx;
    border-radius: 30rpx;
    border: 1rpx solid rgba(0, 180, 255, 0.3);
    margin-bottom: 4rpx;
    white-space: nowrap;
    letter-spacing: 1rpx;
  }
  
  .arrow {
    font-size: 40rpx;
    color: #00B4FF;
    line-height: 1;
    transform: scaleX(1.5);
    filter: drop-shadow(0 0 10rpx #00B4FF);
    position: relative;
  }
  
  .arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10rpx;
    width: 20rpx;
    height: 2rpx;
    background: #00B4FF;
    box-shadow: 0 0 10rpx #00B4FF;
  }
  
  /* 右侧管事信息 + 金额 */
  .card-right {
    display: flex;
    align-items: center;
    flex: 3;
    min-width: 0;
    justify-content: flex-end;
    z-index: 2;
  }
  
  .amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 15rpx;
    flex-shrink: 0;
  }
  
  .num {
    font-size: 34rpx;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }
  
  .num.blue {
    color: #00B4FF;
    text-shadow: 0 0 15rpx #00B4FF, 0 0 30rpx #7A2EFF;
  }
  
  .time {
    font-size: 20rpx;
    color: #7A8FAA;
    margin-top: 4rpx;
  }
  
  /* 卡片底部能量条 */
  .card-energy {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rpx;
    background: linear-gradient(90deg, 
      transparent 0%, 
      #00B4FF 20%, 
      #7A2EFF 50%, 
      #00B4FF 80%, 
      transparent 100%);
    background-size: 200% 100%;
    animation: energyFlow 3s linear infinite;
    opacity: 0.6;
    z-index: 3;
  }
  
  /* 为每个卡片添加能量条（通过伪元素或额外元素，这里用绝对定位的块，需要在WXML中添加，但我们可以在样式里用::after，但需要修改WXML添加类） */
  /* 由于不修改WXML，我们使用.card::after已经用于边框，所以另建一个伪元素？不行，只能用额外元素。 */
  /* 为了不修改WXML，我们利用.card的::before用于光晕，::after用于边框，无法再加。所以建议在WXML中添加一个空view作为能量条，但用户不提供WXML，我们可以暂时不加。但为了效果更好，我们可以利用.card的box-shadow模拟？但动态效果有限。暂时不加，等待用户反馈。 */
  
  /* ==================== 加载更多 ==================== */
  .more-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    color: #A0B8D0;
    font-size: 26rpx;
    letter-spacing: 2rpx;
  }
  
  /* ==================== 没有更多 ==================== */
  .no-more {
    text-align: center;
    padding: 50rpx 0;
    color: #5A6F8A;
    font-size: 24rpx;
    letter-spacing: 2rpx;
    position: relative;
  }
  
  .no-more::before,
  .no-more::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100rpx;
    height: 2rpx;
    background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
  }
  
  .no-more::before {
    left: 20rpx;
  }
  
  .no-more::after {
    right: 20rpx;
  }
  
  /* ==================== 错误遮罩 ==================== */
  .error-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 12, 20, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
  }
  
  .error-glitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.05) 0px,
      rgba(0, 255, 0, 0.05) 2px,
      rgba(0, 0, 255, 0.05) 4px
    );
    mix-blend-mode: screen;
    pointer-events: none;
    animation: glitch 0.1s infinite;
  }
  
  .error-dialog {
    background: rgba(0, 20, 40, 0.8);
    border: 2rpx solid #FF4444;
    border-radius: 50rpx;
    padding: 60rpx 80rpx;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 100rpx rgba(255, 68, 68, 0.3);
    z-index: 2;
    max-width: 600rpx;
  }
  
  .error-icon {
    font-size: 90rpx;
    color: #FF4444;
    margin-bottom: 30rpx;
    filter: drop-shadow(0 0 30rpx #FF4444);
  }
  
  .error-msg {
    font-size: 30rpx;
    color: #E0E6F0;
    margin-bottom: 40rpx;
    line-height: 1.5;
  }
  
  .error-btn {
    padding: 20rpx 70rpx;
    background: linear-gradient(135deg, #FF4444, #FF8866);
    border-radius: 60rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: 600;
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10rpx 40rpx rgba(255, 68, 68, 0.4);
  }
  
  .error-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: scanMove 2s infinite;
  }
  
  .error-btn:active {
    transform: scale(0.96);
  }