body { background: var(--bg); }
    .msg-tabs {
      display: flex;
      background: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    .msg-tab {
      flex: 1;
      padding: 14px 0;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
      position: relative;
      transition: color 0.2s;
    }
    .msg-tab.active {
      color: var(--text-primary);
      font-weight: 600;
    }
    .msg-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      border-radius: 2px;
      background: var(--primary);
    }
    .msg-tab .tab-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: var(--radius-full);
      background: var(--accent-red);
      color: white;
      font-size: 10px;
      font-weight: 600;
      margin-left: 4px;
      vertical-align: top;
    }
    .msg-list { padding: 12px 16px; }
    .msg-card {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      transition: transform 0.2s;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .msg-card:active { transform: scale(0.985); }
    .msg-card.unread::before {
      content: '';
      position: absolute;
      top: 16px;
      left: 8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-red);
    }
    .msg-card.color-highlight-red { border-left: 4px solid #FF4757; background: linear-gradient(90deg, rgba(255,71,87,0.06) 0%, var(--bg-card) 40%); }
    .msg-card.color-highlight-orange { border-left: 4px solid #FF6B35; background: linear-gradient(90deg, rgba(255,107,53,0.06) 0%, var(--bg-card) 40%); }
    .msg-card.color-highlight-gold { border-left: 4px solid #FFB800; background: linear-gradient(90deg, rgba(255,184,0,0.06) 0%, var(--bg-card) 40%); }
    .msg-card.color-highlight-green { border-left: 4px solid #26DE81; background: linear-gradient(90deg, rgba(38,222,129,0.06) 0%, var(--bg-card) 40%); }
    .msg-card.color-highlight-blue { border-left: 4px solid #4B7BEC; background: linear-gradient(90deg, rgba(75,123,236,0.06) 0%, var(--bg-card) 40%); }
    .msg-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 20px;
    }
    .msg-icon.need { background: rgba(255,107,53,0.1); color: var(--primary); }
    .msg-icon.merchant { background: rgba(255,184,0,0.1); color: var(--accent-gold); }
    .msg-icon.system { background: rgba(75,123,236,0.1); color: var(--accent-blue); }
    .msg-content { flex: 1; min-width: 0; }
    .msg-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .msg-title {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .msg-time { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
    .msg-body {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .msg-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
    }
    .msg-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }
    .msg-tag.earning {
      background: rgba(38,222,129,0.1);
      color: var(--accent-green);
      font-weight: 600;
    }
    .msg-tag.distance {
      background: var(--border-light);
      color: var(--text-tertiary);
    }
    .msg-action-btn {
      padding: 5px 14px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 600;
    }
    .msg-action-btn.accept {
      background: var(--primary-gradient);
      color: white;
    }
    .msg-action-btn.view {
      background: rgba(46,196,182,0.1);
      color: var(--secondary);
    }
    .pinned-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      background: var(--primary-gradient);
      color: white;
      font-size: 10px;
      font-weight: 600;
    }
    .pinned-badge svg { width: 10px; height: 10px; }
    .merchant-msg-card {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      margin-bottom: 10px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: transform 0.2s;
      cursor: pointer;
    }
    .merchant-msg-card:active { transform: scale(0.985); }
    .merchant-msg-card.color-highlight-red { border-left: 4px solid #FF4757; }
    .merchant-msg-card.color-highlight-orange { border-left: 4px solid #FF6B35; }
    .merchant-msg-card.color-highlight-gold { border-left: 4px solid #FFB800; }
    .merchant-msg-card.color-highlight-green { border-left: 4px solid #26DE81; }
    .merchant-msg-card.color-highlight-blue { border-left: 4px solid #4B7BEC; }
    .merchant-msg-body { padding: 14px 16px; }
    .merchant-msg-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .merchant-msg-shop {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: var(--border-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .merchant-msg-info { flex: 1; }
    .merchant-msg-name {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .merchant-msg-name .verified {
      width: 14px;
      height: 14px;
      background: var(--accent-blue);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .merchant-msg-name .verified svg { width: 8px; height: 8px; color: white; }
    .merchant-msg-addr { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
    .merchant-msg-time { font-size: 12px; color: var(--text-tertiary); }
    .merchant-msg-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
    .merchant-msg-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
    .merchant-msg-img {
      width: 100%;
      height: 160px;
      background: linear-gradient(135deg, #FFF5EB 0%, #FFE8D6 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 40px;
    }
    .merchant-msg-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }
    .view-reward {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-green);
    }
    .view-reward svg { width: 16px; height: 16px; }
    .view-btn {
      padding: 8px 20px;
      border-radius: var(--radius-full);
      background: var(--primary-gradient);
      color: white;
      font-size: 14px;
      font-weight: 600;
      box-shadow: var(--shadow-primary);
    }
    .view-btn:active { transform: scale(0.96); }
    .section-label {
      padding: 16px 16px 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .section-label svg { width: 14px; height: 14px; }