/* pages/express-order/express-order.wxss - 增强版，包含标签展示 */
.page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
    padding: 30rpx;
    box-sizing: border-box;
    padding-bottom: 40rpx;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  }
  .balance-card {
    background: linear-gradient(135deg, rgba(20,20,30,0.9), rgba(30,30,50,0.9));
    border-radius: 24rpx;
    padding: 36rpx;
    margin-bottom: 40rpx;
    color: #fff;
    box-shadow: 0 15rpx 35rpx rgba(0,0,0,0.4), 0 0 40rpx rgba(0,150,255,0.15);
    text-align: center;
    border: 1.5rpx solid rgba(0,180,255,0.2);
    backdrop-filter: blur(10rpx);
    position: relative;
    overflow: hidden;
  }
  .balance-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(0,180,255,0.1) 50%, transparent 70%);
    animation: cardShine 6s infinite linear;
    z-index: 1;
  }
  @keyframes cardShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  }
  .balance-label { font-size: 28rpx; color: rgba(255,255,255,0.8); margin-bottom: 18rpx; font-weight: 500; position: relative; z-index: 2; }
  .balance-amount { display: flex; align-items: baseline; justify-content: center; margin-bottom: 15rpx; position: relative; z-index: 2; }
  .amount-value { font-size: 64rpx; font-weight: bold; color: #00B4FF; text-shadow: 0 0 20rpx rgba(0,180,255,0.7), 0 0 40rpx rgba(0,180,255,0.4); animation: amountGlow 3s infinite alternate; }
  @keyframes amountGlow {
    0% { color: #00B4FF; text-shadow: 0 0 15rpx rgba(0,180,255,0.6); }
    100% { color: #00E0FF; text-shadow: 0 0 25rpx rgba(0,180,255,0.8), 0 0 50rpx rgba(0,180,255,0.5); }
  }
  .amount-unit { font-size: 36rpx; color: #00B4FF; margin-left: 12rpx; font-weight: 500; z-index: 2; }
  .balance-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); z-index: 2; }
  
  .section { margin-bottom: 35rpx; }
  .section-title { font-size: 32rpx; font-weight: 700; color: #FFFFFF; margin-bottom: 25rpx; padding-left: 12rpx; border-left: 6rpx solid #9C27B0; text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3); }
  
  .type-scroll { white-space: nowrap; display: flex; height: 90rpx; }
  .type-item {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    height: 85rpx; padding: 0 40rpx; margin-right: 20rpx;
    background: rgba(255,255,255,0.08); border-radius: 45rpx; border: 2rpx solid rgba(255,255,255,0.15);
    font-size: 28rpx; color: rgba(255,255,255,0.8);
    transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    backdrop-filter: blur(10rpx);
  }
  .type-active {
    background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
    border-color: #9C27B0; color: white; transform: scale(1.05);
    box-shadow: 0 10rpx 25rpx rgba(156,39,176,0.4), 0 0 30rpx rgba(156,39,176,0.3);
  }
  .type-text { max-width: 220rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  
  /* 搜索区域 */
  .search-section { margin-bottom: 35rpx; }
  .search-box {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.1); border-radius: 50rpx;
    padding: 20rpx 30rpx; border: 2rpx solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10rpx); transition: all 0.3s ease;
  }
  .search-box:focus-within { border-color: #9C27B0; background: rgba(255,255,255,0.15); box-shadow: 0 0 25rpx rgba(156,39,176,0.3); }
  .search-icon { font-size: 32rpx; color: rgba(255,255,255,0.7); margin-right: 20rpx; flex-shrink: 0; }
  .search-input { flex: 1; font-size: 28rpx; color: #FFFFFF; background: transparent; border: none; outline: none; min-height: 40rpx; }
  .search-input::placeholder { color: rgba(255,255,255,0.4); }
  .search-btn { background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%); border-radius: 40rpx; padding: 15rpx 30rpx; margin-left: 20rpx; flex-shrink: 0; box-shadow: 0 8rpx 20rpx rgba(156,39,176,0.3); }
  .search-btn:active { transform: scale(0.95); }
  .search-btn-text { font-size: 26rpx; color: white; font-weight: 600; }
  
  .filter-row { display: flex; align-items: center; margin-top: 20rpx; gap: 15rpx; }
  .filter-item { display: flex; align-items: center; background: rgba(255,255,255,0.08); border-radius: 30rpx; padding: 10rpx 20rpx; border: 1rpx solid rgba(255,255,255,0.15); }
  .filter-label { font-size: 24rpx; color: rgba(255,255,255,0.7); margin-right: 10rpx; }
  .filter-input { width: 120rpx; height: 50rpx; background: transparent; color: #fff; font-size: 26rpx; }
  .picker-view { padding: 10rpx 0; color: rgba(255,255,255,0.9); font-size: 26rpx; max-width: 160rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clear-search { margin-left: auto; padding: 10rpx 20rpx; background: rgba(255,255,255,0.1); border-radius: 20rpx; color: rgba(255,255,255,0.7); font-size: 24rpx; }
  
  /* 模板区域 */
  .template-section { height: calc(100vh - 600rpx); position: relative; }
  .template-scroll { height: 100%; }
  .template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25rpx; padding-bottom: 30rpx; }
  .template-card {
    background: linear-gradient(145deg, rgba(30,30,45,0.9), rgba(40,40,60,0.9));
    border-radius: 20rpx; padding: 25rpx;
    border: 1.5rpx solid rgba(255,255,255,0.1);
    box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3), 0 0 25rpx rgba(0,180,255,0.1);
    transition: all 0.3s ease; backdrop-filter: blur(10rpx);
    display: flex; flex-direction: column; min-height: 280rpx; position: relative; overflow: hidden;
  }
  .template-card::before { content: ''; position: absolute; top:0; left:0; right:0; height:4rpx; background: linear-gradient(90deg, #9C27B0, #00B4FF, #9C27B0); opacity:0.6; }
  .template-intro { flex:1; margin-bottom:10rpx; min-height:70rpx; overflow:hidden; }
  .intro-text { font-size:24rpx; line-height:1.4; color:rgba(255,255,255,0.9); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-weight:500; }
  .template-label { margin-bottom: 10rpx; }
  .template-price-row { display:flex; align-items:center; margin-bottom:20rpx; padding:10rpx 0; border-bottom:1rpx solid rgba(255,255,255,0.1); }
  .template-price-label { font-size:22rpx; color:rgba(255,255,255,0.7); margin-right:10rpx; }
  .template-price-value { font-size:26rpx; font-weight:bold; color:#FFD700; text-shadow:0 0 10rpx rgba(255,215,0,0.3); flex:1; }
  .template-actions-grid { display:flex; flex-direction:column; gap:12rpx; margin-top:10rpx; }
  .action-grid-btn {
    height:65rpx; border-radius:32rpx; font-size:24rpx; font-weight:600; transition:all 0.3s ease;
    border:none; padding:0 20rpx; box-shadow:0 4rpx 12rpx rgba(0,0,0,0.2), inset 0 1rpx 0 rgba(255,255,255,0.1);
    display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important;
  }
  .generate-grid-btn { background:linear-gradient(135deg, #00B4FF, #0091EA); color:white; }
  .generate-grid-btn.generated { background:linear-gradient(135deg, #4CAF50, #2E7D32); }
  .copy-grid-btn { background:linear-gradient(135deg, #9C27B0, #673AB7); color:white; }
  .copy-grid-btn.copied { background:linear-gradient(135deg, #FF9800, #F57C00); }
  .add-card { background: linear-gradient(145deg, rgba(40,40,60,0.7), rgba(60,60,80,0.7)); border:2rpx dashed rgba(255,255,255,0.3); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:280rpx; }
  .add-icon { font-size:60rpx; color:rgba(255,255,255,0.6); margin-bottom:20rpx; }
  .add-text { font-size:30rpx; color:rgba(255,255,255,0.8); font-weight:600; margin-bottom:8rpx; }
  .add-subtext { font-size:24rpx; color:rgba(255,255,255,0.5); }
  
  /* 弹窗通用 */
  .modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index:9999; padding:30rpx; backdrop-filter:blur(10rpx); animation:fadeIn 0.3s ease; }
  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
  .modal-content {
    background:linear-gradient(145deg, rgba(30,30,45,0.95), rgba(40,40,60,0.95));
    border-radius:30rpx; width:100%; max-width:700rpx; max-height:85vh; overflow-y:auto;
    border:1.5rpx solid rgba(255,255,255,0.15);
    box-shadow:0 25rpx 80rpx rgba(0,0,0,0.6), 0 0 60rpx rgba(0,180,255,0.2);
    animation:slideUp 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    position:relative;
  }
  @keyframes slideUp { from{transform:translateY(100rpx) scale(0.9); opacity:0;} to{transform:translateY(0) scale(1); opacity:1;} }
  .modal-close { position:absolute; top:25rpx; right:25rpx; width:60rpx; height:60rpx; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:40rpx; color:rgba(255,255,255,0.7); z-index:10; }
  .modal-header { padding:40rpx 40rpx 20rpx; text-align:center; }
  .modal-title { font-size:36rpx; font-weight:bold; color:#FFFFFF; }
  
  .detail-info { padding:30rpx 40rpx; }
  .detail-item { margin-bottom:30rpx; }
  .detail-label { font-size:26rpx; color:rgba(255,255,255,0.7); margin-bottom:10rpx; font-weight:500; }
  .detail-value { font-size:28rpx; color:#FFFFFF; word-break:break-word; }
  .intro-value { background:rgba(255,255,255,0.05); border-radius:15rpx; padding:20rpx; border:1rpx solid rgba(255,255,255,0.1); max-height:200rpx; overflow-y:auto; }
  .detail-meta-row { display:flex; align-items:center; justify-content:space-between; padding:25rpx 0; margin:20rpx 0; border-top:1rpx solid rgba(255,255,255,0.1); border-bottom:1rpx solid rgba(255,255,255,0.1); }
  .meta-item { display:flex; flex-direction:column; align-items:center; flex:1; }
  .meta-label { font-size:22rpx; color:rgba(255,255,255,0.6); margin-bottom:8rpx; }
  .meta-value { font-size:26rpx; font-weight:600; }
  .price-meta { color:#FFD700; text-shadow:0 0 10rpx rgba(255,215,0,0.3); }
  .count-meta { color:#00B4FF; }
  .id-meta { color:#4CAF50; font-family:'Courier New',monospace; font-size:24rpx; }
  .meta-divider { color:rgba(255,255,255,0.2); font-size:24rpx; margin:0 15rpx; }
  
  .link-filter-bar { display:flex; align-items:center; margin-top:30rpx; margin-bottom:20rpx; }
  .filter-switch {
    padding:10rpx 25rpx; margin-left:10rpx; border-radius:20rpx; background:rgba(255,255,255,0.1);
    font-size:24rpx; color:rgba(255,255,255,0.7); transition:all 0.3s;
  }
  .filter-switch.active { background:linear-gradient(135deg, #00B4FF, #0091EA); color:white; }
  .link-list { background:rgba(0,0,0,0.2); border-radius:15rpx; padding:15rpx; }
  .link-item { display:flex; align-items:center; justify-content:space-between; padding:15rpx 0; border-bottom:1rpx solid rgba(255,255,255,0.1); }
  .link-url { flex:1; font-size:22rpx; color:rgba(255,255,255,0.8); word-break:break-all; margin-right:15rpx; }
  .link-status { font-size:20rpx; color:rgba(255,255,255,0.5); margin-right:15rpx; }
  .copy-link-btn { padding:8rpx 20rpx; background:#00B4FF; color:white; border-radius:15rpx; font-size:22rpx; }
  .load-more-links { text-align:center; padding:20rpx 0; }
  .load-more-btn { display:inline-block; padding:15rpx 40rpx; background:linear-gradient(135deg, #9C27B0, #673AB7); border-radius:30rpx; color:white; font-size:26rpx; }
  .link-loading, .link-empty { text-align:center; padding:30rpx; color:rgba(255,255,255,0.5); font-size:24rpx; }
  
  /* 弹窗按钮 */
  .modal-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18rpx; padding:30rpx 40rpx 40rpx; border-top:1rpx solid rgba(255,255,255,0.1); }
  .modal-grid-btn {
    height:85rpx; border-radius:42rpx; font-size:28rpx; font-weight:600; transition:all 0.3s;
    border:none; padding:0 20rpx; box-shadow:0 8rpx 25rpx rgba(0,0,0,0.3), inset 0 1rpx 0 rgba(255,255,255,0.2);
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  .generate-modal-grid-btn { background:linear-gradient(145deg, #00B4FF, #0091EA); color:white; }
  .copy-modal-grid-btn { background:linear-gradient(145deg, #9C27B0, #673AB7); color:white; }
  .copy-modal-grid-btn.copied { background:linear-gradient(145deg, #FF9800, #F57C00); }
  .edit-modal-grid-btn { background:linear-gradient(145deg, #4CAF50, #2E7D32); color:white; }
  .delete-modal-grid-btn { background:linear-gradient(145deg, #FF4444, #CC0000); color:white; }
  
  /* 编辑区 */
  .edit-section { padding:30rpx 40rpx 20rpx; border-top:1rpx solid rgba(255,255,255,0.1); margin-top:20rpx; }
  .edit-item { margin-bottom:30rpx; }
  .edit-label { font-size:26rpx; color:rgba(255,255,255,0.8); margin-bottom:15rpx; font-weight:600; }
  .edit-input { width:100%; background:rgba(255,255,255,0.08); border:1.5rpx solid rgba(255,255,255,0.2); border-radius:15rpx; padding:25rpx; font-size:28rpx; color:#FFFFFF; }
  .intro-edit { min-height:150rpx; }
  .price-edit { text-align:center; font-size:32rpx; font-weight:600; height:90rpx; line-height:90rpx; }
  .picker-view { padding:25rpx; background:rgba(255,255,255,0.08); border-radius:15rpx; border:1.5rpx solid rgba(255,255,255,0.2); color:#fff; }
  .commission-item { display:flex; align-items:center; gap:20rpx; }
  .commission-input { flex:1; background:rgba(255,255,255,0.08); border-radius:15rpx; padding:20rpx; color:#fff; }
  
  /* 添加表单 */
  .add-form { padding:30rpx 40rpx 20rpx; }
  .form-item { margin-bottom:35rpx; }
  .form-label { font-size:28rpx; color:rgba(255,255,255,0.8); margin-bottom:18rpx; font-weight:600; }
  .intro-input, .price-input { width:100%; background:rgba(255,255,255,0.08); border:1.5rpx solid rgba(255,255,255,0.2); border-radius:15rpx; padding:25rpx; font-size:28rpx; color:#FFFFFF; }
  .intro-input { min-height:180rpx; }
  .price-input { height:90rpx; line-height:90rpx; text-align:center; font-weight:600; }
  .add-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:25rpx; padding:30rpx 40rpx 40rpx; border-top:1rpx solid rgba(255,255,255,0.1); }
  .cancel-grid-btn { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.8); border:1.5rpx solid rgba(255,255,255,0.2); }
  .confirm-add-grid-btn { background:linear-gradient(145deg, #9C27B0, #673AB7); color:white; }
  
  /* 确认弹窗 */
  .confirm-content {
    background:linear-gradient(145deg, rgba(40,40,60,0.95), rgba(50,50,70,0.95));
    border-radius:25rpx; padding:50rpx 40rpx 40rpx; width:85%; max-width:550rpx;
    border:1.5rpx solid rgba(255,255,255,0.15); box-shadow:0 30rpx 90rpx rgba(0,0,0,0.7); text-align:center;
    animation:scaleIn 0.3s ease;
  }
  @keyframes scaleIn { from{transform:scale(0.8); opacity:0;} to{transform:scale(1); opacity:1;} }
  .confirm-title { font-size:34rpx; font-weight:bold; color:#FFFFFF; margin-bottom:25rpx; }
  .confirm-text { font-size:28rpx; color:rgba(255,255,255,0.8); margin-bottom:40rpx; }
  .confirm-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:25rpx; }
  .confirm-grid-btn { height:85rpx; border-radius:42rpx; font-size:28rpx; font-weight:600; display:flex; align-items:center; justify-content:center; }
  .cancel-confirm-grid-btn { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.8); border:1.5rpx solid rgba(255,255,255,0.2); }
  .delete-confirm-grid-btn { background:linear-gradient(145deg, #FF4444, #CC0000); color:white; }
  .confirm-new-link-grid-btn { background:linear-gradient(145deg, #00B4FF, #0091EA); color:white; }
  
  .loading-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(18,18,24,0.95); display:flex; align-items:center; justify-content:center; z-index:10000; }
  .loading-content { background:rgba(40,40,60,0.95); padding:60rpx 80rpx; border-radius:30rpx; display:flex; flex-direction:column; align-items:center; box-shadow:0 25rpx 70rpx rgba(0,0,0,0.6); }
  .loading-spinner { width:90rpx; height:90rpx; border:8rpx solid rgba(0,180,255,0.2); border-top:8rpx solid #00B4FF; border-radius:50%; animation:spin 1.2s linear infinite; margin-bottom:35rpx; }
  .loading-text { font-size:30rpx; color:#00B4FF; font-weight:600; }
  @keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }