﻿.home-header {
      background: var(--primary-gradient);
      padding: 16px 16px 20px;
      color: white;
    }
    .home-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .home-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .home-logo-img {
      width: 72px;
      height: 72px;
      border-radius: var(--radius-sm);
      object-fit: cover;
      flex-shrink: 0;
    }
    .home-logo-text {
      display: flex;
      flex-direction: column;
    }
    .home-logo-name {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1.2;
    }
    .home-logo-slogan {
      font-size: 11px;
      opacity: 0.8;
      letter-spacing: 0.5px;
      margin-top: 1px;
    }
    .home-header-actions { display: flex; gap: 8px; }
    .home-header-actions .icon-btn {
      width: 36px; height: 36px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(8px);
    }
    .home-header-actions .icon-btn svg { width: 20px; height: 20px; color: white; }
    .search-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.95);
      border-radius: var(--radius-full);
      padding: 10px 16px;
      color: var(--text-tertiary);
      font-size: 14px;
    }
    .search-bar svg { width: 18px; height: 18px; flex-shrink: 0; }
    .location-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      background: var(--bg-white);
      margin: 0 16px;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      margin-bottom: 12px;
    }
    .location-bar .loc-text {
      font-size: 13px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .location-bar .loc-text svg { width: 14px; height: 14px; color: var(--primary); }
    .location-bar .loc-text strong { color: var(--text-primary); font-weight: 600; }
    .range-selector {
      display: flex;
      gap: 6px;
      margin-left: auto;
    }
    .range-selector .range-btn {
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--border-light);
      transition: all 0.2s;
    }
    .range-selector .range-btn.active {
      background: rgba(255,107,53,0.1);
      color: var(--primary);
    }
    .filter-tabs {
      display: flex;
      gap: 0;
      padding: 0 16px;
      background: var(--bg-white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      margin: 0 16px 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab {
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
      white-space: nowrap;
      position: relative;
      transition: color 0.2s;
    }
    .filter-tab.active {
      color: var(--text-primary);
      font-weight: 600;
    }
    .filter-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      border-radius: 2px;
      background: var(--primary);
    }
    .need-list { padding: 12px 16px; }
    .need-card {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s;
    }
    .need-card:active { transform: scale(0.985); }
    .need-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .need-user-info { flex: 1; }
    .need-user-name { font-size: 14px; font-weight: 600; }
    .need-user-meta {
      font-size: 12px;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
    }
    .need-user-meta svg { width: 12px; height: 12px; }
    .need-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
    .need-desc {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 10px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .need-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .need-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .need-reward {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
      font-weight: 700;
    }
    .need-reward.cash { color: #D4960A; }
    .need-reward.point { color: var(--accent-blue); }
    .need-reward.free { color: var(--accent-green); font-weight: 500; font-size: 14px; }
    .need-reward .unit { font-size: 12px; font-weight: 400; }
    .need-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      color: var(--text-tertiary);
    }
    .need-meta-item {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .need-meta-item svg { width: 13px; height: 13px; }
    .need-accept-btn {
      padding: 6px 16px;
      border-radius: var(--radius-full);
      background: var(--primary-gradient);
      color: white;
      font-size: 13px;
      font-weight: 600;
    }
    .need-accept-btn:active { opacity: 0.85; }
    .need-images {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .need-images .img-thumb {
      width: 80px;
      height: 80px;
      border-radius: var(--radius-sm);
      background: var(--border-light);
      flex-shrink: 0;
      overflow: hidden;
    }
    .need-images .img-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .banner-section {
      padding: 12px 16px 0;
    }

    .banner-carousel {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      height: 140px;
    }

    .banner-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.6s ease;
      display: flex;
      align-items: center;
      padding: 20px;
    }

    .banner-slide.active { opacity: 1; }

    .banner-slide-1 {
      background: linear-gradient(135deg, #FF6B35 0%, #FF8F5E 50%, #FFB800 100%);
      color: white;
    }

    .banner-slide-2 {
      background: linear-gradient(135deg, #2EC4B6 0%, #5DD9CD 50%, #4B7BEC 100%);
      color: white;
    }

    .banner-slide-3 {
      background: linear-gradient(135deg, #4B7BEC 0%, #6C8FF0 50%, #2EC4B6 100%);
      color: white;
    }

    .banner-content { flex: 1; z-index: 1; }

    .banner-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.25);
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .banner-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }

    .banner-desc { font-size: 12px; opacity: 0.85; line-height: 1.4; }

    .banner-icon { font-size: 56px; opacity: 0.3; flex-shrink: 0; margin-left: 10px; }

    .banner-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
    }

    .banner-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--border);
      transition: all 0.3s;
    }

    .banner-dot.active {
      width: 18px;
      border-radius: 3px;
      background: var(--primary);
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px 0;
      padding: 16px;
      margin: 12px 16px;
      background: var(--bg-white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    .quick-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 8px 4px;
      transition: transform 0.2s;
    }

    .quick-item:active { transform: scale(0.92); }
    .quick-item.active .quick-icon { box-shadow: 0 0 0 2px var(--primary); }

    .quick-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .quick-icon.repair { background: rgba(255,107,53,0.1); }
    .quick-icon.errand { background: rgba(46,196,182,0.1); }
    .quick-icon.buddy { background: rgba(75,123,236,0.1); }
    .quick-icon.housework { background: rgba(255,184,0,0.1); }
    .quick-icon.move { background: rgba(255,71,87,0.1); }
    .quick-icon.tech { background: rgba(46,196,182,0.1); }
    .quick-icon.sport { background: rgba(38,222,129,0.1); }
    .quick-icon.more { background: rgba(156,163,175,0.1); }

    .quick-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }

    .fund-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 16px 12px;
      padding: 12px 16px;
      background: linear-gradient(135deg, rgba(255,107,53,0.08) 0%, rgba(255,184,0,0.06) 100%);
      border: 1px solid rgba(255,107,53,0.12);
      border-radius: var(--radius-md);
    }

    .fund-bar-icon { font-size: 24px; flex-shrink: 0; }

    .fund-bar-info { flex: 1; }

    .fund-bar-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }

    .fund-bar-stats {
      display: flex;
      gap: 12px;
      margin-top: 2px;
    }

    .fund-bar-stat { font-size: 11px; color: var(--text-tertiary); }
    .fund-bar-stat strong { color: var(--primary); font-weight: 600; }

    .fund-bar-link {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 12px;
      color: var(--primary);
      font-weight: 500;
      flex-shrink: 0;
    }

    .fund-bar-link svg { width: 14px; height: 14px; }

    .activity-section {
      padding: 0 16px;
      margin-bottom: 12px;
    }


    .activity-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0 8px;
    }

    .activity-section-title { font-size: 15px; font-weight: 600; }

    .activity-section-more { font-size: 12px; color: var(--text-tertiary); }

    .activity-scroll {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }

    .activity-scroll::-webkit-scrollbar { display: none; }

    .activity-card {
      flex-shrink: 0;
      width: 200px;
      background: var(--bg-white);
      border-radius: var(--radius-md);
      padding: 14px;
      box-shadow: var(--shadow-sm);
    }

    .activity-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .activity-avatar {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 13px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .activity-user { font-size: 13px; font-weight: 500; }

    .activity-action {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .activity-action strong { color: var(--text-primary); font-weight: 600; }

    .activity-time { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

    .activity-tag {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 500;
      margin-top: 6px;
    }

    .activity-tag.done { background: rgba(38,222,129,0.1); color: var(--accent-green); }
    .activity-tag.help { background: rgba(255,107,53,0.1); color: var(--primary); }
    .activity-tag.welfare { background: rgba(46,196,182,0.1); color: var(--secondary); }