.story-hero {
      background: linear-gradient(135deg, #064E3B 0%, #0F2347 60%, #1E1B4B 100%);
      color: #fff;
      padding: 55px 20px 45px;
      text-align: center;
      position: relative;
    }
    .story-hero h1 { font-size: 2.3rem; font-weight: 800; margin-bottom: 12px; }
    .story-hero p { max-width: 780px; margin: 0 auto; color: #D1FAE5; font-size: 1.05rem; line-height: 1.65; }

    .story-filter-container {
      max-width: 1240px;
      margin: -25px auto 35px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 35px rgba(0,0,0,0.08);
      padding: 20px 24px;
      position: relative;
      z-index: 10;
    }
    .story-filter-scroll {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .story-filter-btn {
      background: #F8FAFC;
      color: #334155;
      padding: 9px 18px;
      border-radius: 25px;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid #E2E8F0;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .story-filter-btn:hover, .story-filter-btn.active {
      background: #059669;
      color: #fff;
      border-color: #059669;
      box-shadow: 0 4px 12px rgba(5,150,105,0.25);
    }

    .stories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
      gap: 28px;
      max-width: 1240px;
      margin: 0 auto 70px;
      padding: 0 20px;
    }
    .story-card {
      background: #fff;
      border-radius: 18px;
      border: 1px solid #E2E8F0;
      box-shadow: 0 8px 25px rgba(15,35,71,0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: var(--transition);
      position: relative;
    }
    .story-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 36px rgba(15,35,71,0.12);
      border-color: #86EFAC;
    }
    
    .story-badge-top {
      position: absolute;
      top: 16px;
      right: 16px;
      background: rgba(16,185,129,0.95);
      color: #fff;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.72rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 5px;
      z-index: 2;
    }

    .story-card-header {
      padding: 24px 22px 18px;
      background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
      border-bottom: 1px solid #F1F5F9;
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .story-avatar {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #DCFCE7;
      color: #059669;
      border: 2px solid #86EFAC;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(5,150,105,0.15);
    }
    .story-meta h3 {
      font-size: 1.18rem;
      color: var(--blue-dark);
      margin: 0 0 4px;
      font-weight: 800;
    }
    .story-location {
      font-size: 0.82rem;
      color: #64748B;
      font-weight: 600;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .story-scheme-pill {
      display: inline-block;
      margin-top: 8px;
      background: #EFF6FF;
      color: #1D4ED8;
      border: 1px solid #BFDBFE;
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 700;
    }

    .story-card-body {
      padding: 20px 22px;
      flex: 1;
      font-size: 0.92rem;
      line-height: 1.65;
    }
    
    .story-block {
      margin-bottom: 16px;
      padding: 12px 14px;
      border-radius: 10px;
    }
    .sb-before {
      background: #FEF2F2;
      border-left: 4px solid #EF4444;
    }
    .sb-benefit {
      background: #FFFBEB;
      border-left: 4px solid #F59E0B;
    }
    .sb-after {
      background: #F0FDF4;
      border-left: 4px solid #10B981;
    }
    
    .sb-title {
      font-size: 0.8rem;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sb-before .sb-title { color: #991B1B; }
    .sb-benefit .sb-title { color: #B45309; }
    .sb-after .sb-title { color: #065F46; }
    
    .sb-desc {
      color: #334155;
      font-size: 0.88rem;
      margin: 0;
    }

    .story-card-footer {
      padding: 14px 22px;
      background: #F8FAFC;
      border-top: 1px solid #E2E8F0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      color: #64748B;
    }
    .story-verified {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #059669;
      font-weight: 700;
    }
    .story-apply-link {
      background: var(--blue-dark);
      color: #fff;
      padding: 6px 12px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 0.78rem;
      text-decoration: none;
      transition: var(--transition);
    }
    .story-apply-link:hover {
      background: var(--orange);
    }

    /* Dark Mode Overrides for Stories */
    body.dark-mode .story-filter-container {
      background: #1E293B !important;
      border: 1px solid #334155;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    body.dark-mode .story-filter-btn {
      background: #0F172A;
      color: #E2E8F0;
      border-color: #334155;
    }
    body.dark-mode .story-filter-btn:hover,
    body.dark-mode .story-filter-btn.active {
      background: #059669;
      color: #FFFFFF;
      border-color: #059669;
    }
    body.dark-mode .story-card {
      background: #1E293B !important;
      border-color: #334155;
      box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    }
    body.dark-mode .story-card:hover {
      border-color: #059669;
    }
    body.dark-mode .story-card-header {
      background: linear-gradient(180deg, #132238 0%, #1E293B 100%) !important;
      border-bottom-color: #334155;
    }
    body.dark-mode .story-meta h3 {
      color: #FFFFFF !important;
    }
    body.dark-mode .story-location {
      color: #94A3B8;
    }
    body.dark-mode .story-scheme-pill {
      background: rgba(30, 58, 138, 0.4);
      color: #93C5FD;
      border-color: #1E40AF;
    }
    body.dark-mode .story-card-body {
      color: #CBD5E1;
    }
    body.dark-mode .sb-before {
      background: rgba(239, 68, 68, 0.12);
      border-left-color: #EF4444;
    }
    body.dark-mode .sb-benefit {
      background: rgba(245, 158, 11, 0.12);
      border-left-color: #F59E0B;
    }
    body.dark-mode .sb-after {
      background: rgba(16, 185, 129, 0.12);
      border-left-color: #10B981;
    }
    body.dark-mode .sb-before .sb-title { color: #FCA5A5; }
    body.dark-mode .sb-benefit .sb-title { color: #FCD34D; }
    body.dark-mode .sb-after .sb-title { color: #6EE7B7; }
    body.dark-mode .sb-desc {
      color: #E2E8F0;
    }
    body.dark-mode .story-card-footer {
      background: #0F172A;
      border-top-color: #334155;
      color: #94A3B8;
    }
    body.dark-mode .story-apply-link {
      background: #2563EB;
      color: #FFFFFF;
    }
    body.dark-mode .story-apply-link:hover {
      background: #F97316;
    }